UX/UI-Design meistern – von der Theorie zur Live-Website in Adobe Xd, Figma und Webflow

1. Kurs-Einführung: Als UI-UX-Designer geht es nicht nur darum, in Adobe XD Figma zu arbeiten. Es geht darum, Ihre Benutzer anhand der Designentscheidungen zu verstehen , die Sie während des Designprozesses treffen. Hidden Zara, Alex hier und willkommen zu diesem Skillshare-Kurs, in dem wir als UI-UX-Designer von Null zu Held werden. Ich bin ein Entwickler digitaler Produkte und habe bisher etwa 500 digitale Designprodukte entworfen. Ich bin auch Kursersteller und habe bisher über 40 verschiedene Kurse aufgenommen, Ihrem UX-Design und sozialen Medien befassen. Und bis jetzt habe ich 60.000 Studenten, die Kurse eingeschrieben haben. Und in diesem Kurs werden wir die Grundlagen des UX-Designs behandeln, was es ist und warum ist es für den Designprozess wichtig? Entwerfen Sie Briefings und erklären Sie, was sie sind und wie Sie sie mit Ihren Kunden kommunizieren können. Projektvorschläge, was sie sind und warum Sie sie für jedes Projekt benötigen. Nutzerforschung und deren Verwendung zur Erstellung einer Benutzerpersönlichkeit, Wettbewerbsanalysen und wie Sie Fehler vermeiden können, die Ihre Konkurrenten machen. Benutzerströme auf unterschiedliche Weise. Nutzer bewegen sich durch Ihre Website, sind Die Nutzer bewegen sich durch Ihre Website, Papier-Wireframes und erfahren, warum sie für Design, Struktur, Layouts und Raster nützlich und wie Sie sie für eine bessere Designkonsistenz, Topographie und Schriftpaarung verwenden Topographie und Schriftpaarung und wie Sie perfekte Schriftarten für Ihre Designs Ikonografie auswählen und die richtigen Symbolsätze für Ihre Projekte auswählen. Farbtheorie und wie man perfekte Farben für jedes Projekt auswählt . Arbeit mit Bildern, Bilddatensätzen und Vorteilen von Sammlungen, Moodboards und warum sie wichtig sind für die Festlegung der Projektlast, UI-Kits und der Designsysteme und was ist der Unterschied zwischen ihnen. Dann werden wir zum Projekt dieses Kurses übergehen und in Adobe XD Figma eine Website von Grund auf neu entwerfen verwenden wir die in diesem Kurs erlernten Techniken, erstellen sie in Bloodflow, machen sie responsiv und veröffentlichen sie ohne eine einzige Codezeile zu schreiben. Fallstudien und wie Sie sie nutzen können, um bessere Kunden für Ihre Projekte zu gewinnen. Und wo Sie den Job bekommen abhängig von der Art des Jobs, den Sie bekommen möchten. 20 Abschnitte in diesem Kurs, eine der 200 Lektionen und alle 28 Stunden Videoinhalte. Sie erhalten alle Vorlagen und Übungsdateien, die in diesem Kurs sowohl für Adobe XD als auch für Femur verwendet wurden. Sie können also zwei Jahre lang Aufzeichnungen und Feedback von über 60.000 Studenten verfolgen zwei Jahre lang Aufzeichnungen und Feedback von über , die in die Erstellung dieses Kurses eingeflossen er der größte und vollständigste UI-UX-Kurs ist, der jemals online erstellt wurde. Freue mich, dich drinnen zu sehen. Und lassen Sie uns mit der UI-UX-Design-Reise beginnen. 2. Kursstruktur und Projektdateien: Hallo und willkommen zum Kurs. In dieser ersten Lektion werde ich ein wenig über die Kursstruktur und die Projektdateien sprechen . Die Kursstruktur besteht also grundsätzlich aus zwei Hauptteilen. Einer ist der Theorieteil, der erste ist der Praxisteil. meisten jungen Designer Vor allem die meisten jungen Designer überspringen einfach den Theorieteil und beginnen direkt dem Design-Tool, ohne irgendwelche Grundlagen über Design, den Prozess und die Methoden zu kennen , die Sie zusammen verwenden können der Weg. Und das ist der Grund, warum sie Probleme haben oder noch schlimmer, Dämonen behalten den Designteil und gehen direkt zu Webflow oder direkt zu Code oder so etwas wie WordPress oder Wix oder was auch immer sie sind verwenden, ohne jemals zu wissen, wie man tatsächlich designt. Deshalb habe ich beschlossen, diesen Kurs überhaupt zu erstellen , um beide Strukturen, also sowohl Theorie als auch Praxis, abzudecken und euch beide zu zeigen und am Ende zu zeigen, wie man ihn benutzt. Also wie gesagt, wenn Sie möchten, können Sie den Theorieteil lernen, oder wenn Sie die Theorie kennen, können Sie direkt zum Übungsteil übergehen, werden aber dringend empfohlen, besonders wenn Sie gerade habe angefangen, einfach in diesen Theorieteil einzusteigen und zu lernen , weil er Ihnen am Ende Ihrer Karriere gute Dienste leisten wird . Und eine letzte Sache, die ich zu dieser Lektion erwähnen möchte , sind die Übungsdateien. Jeder Abschnitt, sofern er geübte Dateien enthält, werden in der Zip-Datei verlinkt. Sie können die Zip-Datei in diesem Abschnitt herunterladen und verwenden. Oder wenn es anders angegeben ist, je nachdem, wo Sie sich diesen Kurs ansehen, haben Sie entweder eine dedizierte Zip-Datei, um jede einzelne Datei aus diesem Kurs herunterzuladen. Oder Sie werden, wie gesagt, verschiedene Abschnitte mit Zip-Dateien für jeden dieser Abschnitte haben verschiedene Abschnitte mit Zip-Dateien für jeden , die Sie herunterladen und verfolgen können. Also lass uns anfangen. 3. Kursprojekt: Ihr Klassenprojekt für diesen Kurs besteht darin, dem Abschnitt zu folgen, in dem wir das Website-Design tatsächlich erstellen, und den Anweisungen im Video zu folgen und der von mir bereitgestellten Übungsdatei Ich möchte, dass ihr euer eigenes Design entwirft. Du musst nicht zu viel ändern. Sie können die von mir bereitgestellten Bilder verwenden aber ich würde gerne verschiedene Farben sehen , vielleicht sogar eine andere Topographie. Und ich möchte nur sehen, wie ihr mit den Tools und Techniken experimentiert , die ich in diesem Kurs bereitgestellt habe. Wenn Sie sich nicht wohl fühlen, diese Art von Design im , diese Art von Design im großen Stil zu erstellen und es zu speichern und in Ihr Klassenprojekt hochzuladen. Dann solltest du vielleicht diesen verschiedenen Aufgaben für jeden Abschnitt folgen diesen verschiedenen Aufgaben für , weil jeder Abschnitt seine eigene Aufgabe hat Vielleicht kannst du diese Aufgabe abschließen, als JPEG speichern und hochladen zu einem Klassenprojekt. Ich freue mich darauf zu sehen, was ihr schaffen könnt , und bitte teilt eure Arbeit. Ich freue mich darauf, Ihnen jede Art von Feedback und jede Art von Hilfe zu geben, die ich kann, und stelle sicher , dass Sie Ihre Arbeit in den Klassenprojekten teilen. 4. Aktualisierungen des Figma: Jetzt, da Adobe Figma gekauft hat, möchte ich diesen Kurs in Zukunft aktualisieren und alle irrelevanten Inhalte von Figma aufnehmen. Sie werden also die Möglichkeit haben, Adobe XD-Inhalte als auch Figma-Inhalte zu haben, was die Unterschiede angeht. Es gibt ein paar Dinge, die bei Figma anders sind , die nicht in Adobe XD enthalten sind, z. B. Fig Jam und Pages und alle möglichen Prototyping-Funktionen, die etwas fortgeschrittener sind und in Adobe XD enthalten sind. Auf der anderen Seite hat Adobe XD einige Funktionen , die Figma nicht hat. Dieses Update wird also in den nächsten Monaten schrittweise eingeführt. Und ich werde versuchen, jeden einzelnen Teil dieses Kurses, der XD-Inhalte enthält, auch auf Figma-Inhalte zu aktualisieren dieses Kurses, der XD-Inhalte enthält, . Ich werde mit den wichtigsten Teilen dieses Kurses beginnen , wie z. B. Design, Briefing und Projektvorschläge und Persona und Design der Seiten selbst, Export und der Arbeit mit Webflow, da dies die wichtigsten Teile dieses Kurses sind , die natürlich aktualisiert werden müssen. Aber in den nächsten Monaten und im nächsten Jahr werde ich z. B. sogar so weit gehen, das Design, das System-Setup und die Erstellung Ihres eigenen UI-Kits einzubeziehen. Aber auf diese Lektionen wirst du noch ein bisschen warten müssen . Aber wenn Sie sich die aktualisierten Inhalte ansehen , die ich bisher erstellt habe, werden Sie leicht einen Einblick bekommen wie Sie diese auch in Figma erstellen können. Es stellt sich auch die Frage den zukünftigen Updates , da Adobe Figma gekauft hat nach den zukünftigen Updates , da Adobe Figma gekauft hat und was es mit Figma in Zukunft machen wird , wird alle Photoshop-Funktionen beinhalten, z. B. wird es alle Illustrator-Funktionen beinhalten, z. B. kann das zu diesem Zeitpunkt, zu diesem Zeitpunkt, niemand sagen . Aber vorerst genießen Sie diese Updates und stellen Sie sicher , dass Sie dabei bleiben, denn ich werde diesen Kurs in Zukunft aktualisieren und alle relevanten Inhalte hinzufügen, sobald sie veröffentlicht werden. Und wenn es in Zukunft auch einige wichtige Updates für Figma gibt , werde ich sie natürlich auch in diesem Kurs behandeln. Was den X-D-Inhalt angeht, habe ich so ziemlich alles abgedeckt, was es für Adobe XD zu behandeln gibt. In Zukunft werden wir uns in Bezug auf die Verwendung von XD nur auf Figma-Inhalte konzentrieren . Adobe hat eine Aussage gemacht, dazu bereits ein separates Video aufgenommen, dass es XD vorerst behalten wird. Das bedeutet, dass Sie für die nächsten, z. B. zwei Jahre, X so verwenden können , wie es ganz normal ist, es wird immer noch Updates erhalten und es wurde heute erst aktualisiert. Sie können es sich also ansehen, Sie können diese Updates installieren, Sie können es verwenden. Sie können diesen Kurs ganz normal absolvieren. In den nächsten anderthalb, zwei Jahren wird sich also nichts ändern. Du kannst XD verwenden, du kannst Figma verwenden, so ziemlich genau das Gleiche. Und wie gesagt, ich werde den Inhalt für diesen Kurs erstellen und alles behandeln, was Sie wissen müssen , sowohl für Adobe XD als auch für Figma. Also viel Spaß beim Kurs. Schauen Sie sich unbedingt all diese Updates an, wenn Sie an den Inhalten von Figma interessiert sind . Und für einige wirst du Boat schauen müssen, weil ich deine Zeit nicht damit verschwenden wollte , den gesamten Inhalt neu zu erstellen, damit er für beide XD Figma genau gleich ist. Ich habe nur behandelt, was in Figma anders ist als in Adobe XD, weil sie, wie ich zu Beginn dieses Videos erwähnt habe , jetzt Teil derselben Adobe-Familie sind. In Zukunft wird also alles ziemlich genau gleich aussehen. Also viel Spaß beim Kurs. 5. ABSCHNITT 1 Grundlagen des UX-Designs: UX-Design ist im Designprozess unglaublich wichtig , denn wenn Sie es wie ein Haus betrachten, ist UX-Design die XOR-Struktur des Hauses. stationäre UI-Design ist also die eigentliche Fassade, die auf ein Haus hinausgeht und das Haus von außen wunderschön aussehen lässt . Und der eigentliche Code, der am Ende steht, sind die tatsächlichen Fenster, Elektrizität, Internet. Um ein Haus lebenswert zu machen und es zum Laufen zu bringen, ist jeder einzelne dieser Schritte im gesamten Entwurfsprozess unglaublich wichtig. ist also eine wirklich schlechte Idee, einen dieser Schritte zu überspringen. In diesem ersten Abschnitt dieses Kurses werden wir nur über die Grundlagen des UX-Designs sprechen. Also lass uns anfangen. 6. Was ist UX-Design?: User Experience Design ist der Prozess der Gestaltung von Erlebnissen, die für die Benutzer effizient, effektiv und angenehm sind . Mit anderen Worten, Sie müssen wissen, für wen Sie entwerfen? Was entwerfen Sie überhaupt und bei welchen Problemen hilft dieses Produkt oder die Dienstleistung bei der Lösung? Um dies zu wissen, müssen Sie etwas durchführen das als User Experience Research bezeichnet wird. Und Sie müssen verstehen , wer Ihre Benutzer sind, was sind ihre Bedürfnisse, was sind ihre Wünsche? Weil nicht alle Benutzer gleich sind. Ihre Aufgabe als UX-Designer ist es also, auf diese Bedürfnisse einzugehen und diese Bedürfnisse durch einen UX-Designprozess zu lösen. Weil jedes Projekt anders ist, ist jeder Benutzer anders und seine Bedürfnisse variieren von Projekt zu Projekt. Sie müssen sich als UX-Designer an diese Benutzerbedürfnisse anpassen. 7. Was macht UX-Designer?: Ux Designer versteht die Bedürfnisse und Ziele des Benutzers. Sie setzen sich mit Benutzern in Verbindung, um zu verstehen, was sie wirklich von diesem Produkt oder diesen Erlebnissen erwarten. Das nennt man Benutzerforschung. Und es ist die erste Phase im Prozess des UX-Designs. der nächsten Phase müssen Sie klar definieren welche Produktbedürfnisse und Wünsche die Benutzer haben, damit Sie die Produktziele klar definieren können. Dies führt zur Ideenfindungsphase , in der UX-Designer potenzielle Lösungen für die Probleme der Benutzer finden. Dann folgt die Prototyping-Phase, in der UX-Designer ihre Ideen in funktionale Prototypen umsetzen , die sie dann mit Stakeholdern und anderen Teammitgliedern teilen , um sie einfach zu testen und stellen Sie sicher, dass sie tatsächlich funktionieren, bevor sie sie in die Produktion bringen und bevor sie ihn zu weiteren Tests mit den Benutzern drängen . Danach folgt die letzte Phase, bei der UX-Designer ihre Lösungen den Benutzern zur Verfügung stellen, um sicherzustellen, dass sie tatsächlich funktionieren und um sicherzustellen , dass sie die Probleme, mit denen der Benutzer konfrontiert ist. Der UX-Designprozess ist nie abgeschlossen, denn wenn Sie das Produkt, das Sie als UX-Designer entworfen haben, tatsächlich testen , genauso wie die weiteren Schritte, z. B. sechs Monate oder 12 Monate später, Die Bedürfnisse der Benutzer werden sich ändern. Daher müssen Sie das Produkt oder die Erfahrungen entsprechend den Bedürfnissen dieser Benutzer verbessern . Und UX-Designer sind dafür da, dies für den gesamten Lebenszyklus des Produkts oder der Dienstleistung zu tun. Sie müssen weiter forschen, sie müssen das Produkt oder die Dienstleistung ständig verbessern , um den Bedürfnissen der Benutzer gerecht zu werden. Denn wie gesagt, die Bedürfnisse und Wünsche der Benutzer ändern sich ständig. Denn in der sich schnell entwickelnden Welt , in der wir heute leben, sind diese Änderungen von Zeit zu Zeit erforderlich, z. B. für einige Produkte. Diese Änderungen sind jedoch monatlich erforderlich , was wirklich selten ist. Aber normalerweise sind es ungefähr sechs Monate oder ein Jahr. Und als UX-Designer müssen Sie verstehen, was diese Bedürfnisse sind, indem Sie all diese Forscher Interviews zur oralen Verabreichung durchführen . Und Sie müssen das Produkt oder die Dienstleistung an die neuen Anforderungen und neuen Bedürfnisse Ihrer Benutzer anpassen die neuen Anforderungen und . 8. Ist UX dasselbe wie UI: Ui-Design oder Benutzeroberflächendesign ist der Prozess der Gestaltung von Erlebnissen wie Websites oder mobilen Apps. Es befindet sich in der späteren Phase des UX-Designprozesses, aber genauso wichtig, da es nicht nur der Teil des UX-Designprozesses ist, sondern auch der entscheidende Teil des UX-Designprozesses. Sie können die beste Recherche und die perfekte Inhaltsstrategie haben. Aber wenn ihre Erfahrung nicht schön und lesbar ist, wird sie niemand nutzen wollen. Einige UX-Designer gehen sogar so weit wie Papier-Wireframes und hören dort einfach auf, weil ihr Können aufgehört hat, aber man kann es Zeitungs-Wireframes nennen. Hier kommen UI-Designer ins Spiel , um diese Papier-Wireframes zu verwandeln, um diese Forscher und Ideen in funktionale Modelle umzuwandeln, in funktionale Prototypen, manchmal sogar Code, den Benutzer tatsächlich verwenden können. testen. Und dann können sich UX-Designer und UI-Designer gemeinsam und UI-Designer gemeinsam verbessern, um die Benutzerfreundlichkeit und weitere Tests und Forschungen durchzuführen. UI-Designer müssen nicht wissen, wie man programmiert, aber es ist wichtig, dass sie verstehen, wie der Code funktioniert und wie ihr Design strukturiert werden muss, um mit Entwicklern zu teilen. Es gibt auch sogenannte No-Code-Tools, die heutzutage im Bereich UI UX Design sehr verbreitet sind. Und das sind Tools wie Webflow und die Bravo Studio App . Diese Tools helfen Ihnen als UI-Designer dabei, all diese Erlebnisse zu erstellen und sie von statischen Designs zu lösen Prototypen zu schön funktionierenden Websites oder mobilen Apps. No-Code-Tools sind wirklich großartig , weil Sie nicht wissen müssen, wie man programmiert. Aber noch einmal, es ist wirklich wichtig, dass Sie verstehen, wie der Code funktioniert wie man Designs strukturiert, denn dann wird es für Sie sehr einfach sein , entweder diese Erlebnisse zu erstellen in Tools, die ich erwähnt habe wie Workflow oder eine Brow Studio-App, oder um diese Designs zu senden und sie ordnungsgemäß für Ihre Entwickler zu exportieren , weil das gesamte System als Einheit funktionieren muss. Sonst wird es einfach auseinanderfallen. Denn noch einmal, was ist der Sinn einer wunderschön ausgeführten Recherche all dieser Kunden - und Benutzergespräche. Wenn das nicht etwas ist , was Benutzer tatsächlich auf ihren Geräten wie Laptops, Mobilgeräten, Tablets und vielem mehr verwenden möchten . Hier ist das UI-Design in diesem gesamten Prozess von entscheidender Bedeutung , da sie dazu da sind diese Ideen häufiger als je zuvor umzusetzen und sie mithilfe sogenannter No-Code-Tools in funktionale Konzepte als je zuvor umzusetzen und sie mithilfe sogenannter No-Code-Tools was ich gerade erwähnt habe. Oder einfach zu wissen, wie man diese, diese Designs zu einem sogenannten Designsystem strukturiert diese, diese Designs zu einem sogenannten , das dann später im Designprozess skalierbar ist , z. B. sechs Monate, 12 oder sogar ein paar Jahre später. Weil dieses Designsystem dazu da ist, ihnen zu helfen, das Produkt zu skalieren und das Produkt im Laufe der Zeit zu aktualisieren . Weil Sie als UI-Designer in diesem Unternehmen tätig sein werden, z. B. für, sagen wir zwei Jahre. Aber was passiert, nachdem Sie gegangen sind, nachdem Sie das Unternehmen gewechselt haben, nachdem Sie als Freelancer gearbeitet haben, muss jemand anderes Ihre Schuhe nachfüllen und dort weitermachen, wo Sie aufgehört haben. Hier bieten sich beispielsweise diese Designsysteme oder UI-Kits an. Und genau hier ist die Position des UI-Designers wirklich wichtig. Denn wieder einmal ist es die entscheidende Lücke und die wichtigste Brücke zwischen UX-Designern als Konzept und Forschung und dann Entwicklern als Menschen, die diese Konzepte und Forschungen in die tatsächliche Entwicklung umsetzen zu verwendende Benutzer. Ui-Design ist kein UX-Design, aber es ist der Teil des Designprozesses im Allgemeinen und meiner Meinung nach ein ebenso wichtiger Teil. Dafür. 9. Fähigkeiten UX-Designer:innen benötigen: Gute UX-Designer sollten Einfühlungsvermögen haben, ihren Benutzern zuzuhören und ihre Bedürfnisse zu verstehen. Bei der Durchführung von Nutzeranalysen sollten UX-Designer wissen, welche Fragen sie stellen müssen , um besser zu verstehen , welche Probleme zu lösen sind. Und sie müssen verstehen, wie sie mit den Tools umgehen müssen , die für diese Aufgaben erforderlich sind, da es viele Tools gibt und wir werden sie in einer der zukünftigen Lektionen behandeln . Sie müssen jedoch verstehen , welche Fragen Sie stellen müssen, um anderen Teammitgliedern zu helfen, das Problem zu lösen , mit dem Ihre Benutzer konfrontiert sind. Die Kommunikation mit Benutzern, aber auch anderen Teammitgliedern wie UI-Designern und Entwicklern, ist der Schlüssel zu einem wunderbar funktionierenden Designprozess. Und das ist eine wichtige Fähigkeit , die jeder gute UX-Designer haben sollte. Gute UX-Designer spezialisieren sich auch auf UX-Texter, visuelles Design und manchmal sogar Marketing, um den gesamten Designprozess zu erleichtern und mehr Wert zu schaffen das Team, in dem sie arbeiten. Sie müssen nicht über all diese Fähigkeiten verfügen , die gerade erwähnt wurden. Und es gibt viele, viele, viele andere Fähigkeiten. Aber je mehr von ihnen Sie haben, desto mehr Wert werden Sie dem Team bieten , zu dem Sie gehören. Oder wenn Sie als Freelancer arbeiten, desto größer sind die Chancen, dass Sie größere und teurere Projekte zur Arbeit bekommen größere und teurere Projekte zur Arbeit sein werden , weil Sie der entscheidende Teil dieses Teams weil du all diese Fähigkeiten besitzt. Diese Fähigkeiten kommen mit der Zeit. Machen Sie sich also keine Sorgen, wenn Sie gerade erst anfangen und einige dieser Fähigkeiten nicht haben oder Sie nicht verstehen, was einige dieser Dinge sind. Beginne klein als groß, baue von dort aus und verbessere dann deine Fähigkeiten im Laufe der Zeit. 10. In-House VS Freelance UX Designer: Wenn Sie als Teil einer Agentur arbeiten, werden Sie wahrscheinlich einfach als UX-Designer arbeiten. Je größer das Unternehmen ist, desto größer ist die Wahrscheinlichkeit, dass sie einen engagierten Texter und engagiertes Forschungsteam haben, dass sie engagierte UI-Designer oder z. B. Entwickler haben. Sie können sich also auf das UX-Design selbst konzentrieren und sich auf den gesamten Prozess selbst konzentrieren. Und je größer die Wahrscheinlichkeit ist, dass Sie ein interner Teil dieses Teams werden weil Sie sich einfach auf Ihre Aufgaben als UX-Designer konzentrieren können . In dieser Zwischenzeit bringen wir gute Waren Gehalt mit, aber wir haben ein begrenztes Gehalt, weil du ein integraler Teil dieses Designteams sein wirst . Aber du wirst einfach alleine als UX-Designer arbeiten. Aber wenn Sie als freiberuflicher Designer arbeiten, je mehr dieser Dinge Sie wissen, wie man sie macht, desto größer ist der Wert, den Sie dem Teil des Teams oder dem Projekt bringen dem Teil des Teams oder , an dem Sie arbeiten werden. Sie können also ein höheres Gehalt erzielen. Aus diesen Gründen können Sie z. B. zwei oder drei große Projekte pro Jahr annehmen und sich dann für den Rest des Jahres entspannen. Sie müssen z. B. nicht für den Rest des Jahres arbeiten, oder Sie können aufgrund Ihrer Fähigkeiten viele, viele kleinere Projekte annehmen aufgrund Ihrer Fähigkeiten viele, viele kleinere Projekte . Noch einmal, je größer Ihre Fähigkeiten sind, desto größer sind die Chancen, dass Sie an diesen großen Projekten arbeiten und diesen Unternehmen einen großen Mehrwert bieten. Und noch einmal: Je mehr dieser Werte Sie in das Team einbringen können, in dem Sie tätig sind, desto größer sind die Chancen, dass Sie mit diesen Projekten ein hohes Gehalt erhalten. Es hängt nur davon ab, was Sie tun möchten und wo Sie in Ihrer Karriere stehen möchten. Manche Leute arbeiten gerne jahrelang in einer Agentur. Andere Leute sind einfach gerne freiberuflich tätig. Manche Leute machen gerne beides. Vielleicht in einer Agentur arbeiten und dann freiberuflich arbeiten. Nebenbei kommt es nur darauf an, wer Sie sind, wo Sie in Ihrem Leben und in Ihrer Karriere sein möchten. Zum Beispiel mögen einige Leute die Stabilität der Agentur, weil sie immer wieder Kosten bringt, den Umsatz oder die Leute gehen gerne das Risiko ein und nehmen als freiberufliche UX-Designer größere Projekte in Angriff. Aber dann hängt es auch von Ihren Fähigkeiten ab, was Sie wissen, wie man es macht, wie gut Sie in dem Job sind, den Sie machen? ZB in diesem Fall UX Designer. Wie gut können Sie mit anderen Teammitgliedern kommunizieren? Wie ich bereits erwähnt habe, z. B. UI-Designer, Entwickler und Grafikdesigner, einigen Fällen Marketingteam. Es hängt also alles von Ihnen ab, ob Sie gerade erst anfangen oder wirklich empfehlen, beides auszuprobieren, vielleicht beginnen Sie mit freiberuflichem Design, vielleicht beginnen Sie mit freiberuflichem Design nur um zu verstehen, was der Kunde braucht. Vielleicht kannst du zu Plattformen wie Upwork oder 99 Designs gehen . Nehmen Sie hier und da einige Designprojekte auf und verstehen Sie dann einfach, und verstehen Sie dann einfach was diese Kunden tatsächlich benötigen. Verstehen Sie ihre Benutzer, verstehen Sie die Bedürfnisse der Benutzer und verstehen Sie, wie Sie eine angemessene Benutzererfahrungsforschung durchführen können. Und dann mach von dort aus weiter. Dann vielleicht mit dieser Erfahrung, bewerben Sie sich für eine Stelle als Designagentur, nur um zu verstehen, wie, wie es ist, Teil eines physischen Teams zu sein , das mit anderen Leuten innerhalb dieser Agentur zusammenarbeitet . Und verstehen Sie einfach, wie schnell es ist, innerhalb einer Agentur zu arbeiten, an einem Projekt nach dem mehrere Personen gleichzeitig im selben Büro zu arbeiten. Vielleicht ist das das Gute für dich. Mein Rat für Sie ist also, versuchen beides zu tun und zu sehen, wo Sie sich befinden. Und dann vergiss nie, du kannst jederzeit zwischen diesen beiden wechseln von Agentur zu Freelance und zurück zur Agentur. Es ist nicht wirklich wichtig. Hier kommt es darauf an, beides zu versuchen , damit Sie beide Seiten einer Medaille verstehen können. 11. Tools für UX-Designer: Es gibt viele verschiedene Tools, die Sie als UX-Designer verwenden werden . In diesem Video werde ich nur einige grundlegende behandeln. Und wie ich in früheren Lektionen erwähnt habe, Laufe der Zeit, wenn Sie Ihre Fähigkeiten perfektionieren, werden Sie im Laufe der Zeit, wenn Sie Ihre Fähigkeiten perfektionieren, auf wenige dieser Geschäfte und auf wenige andere Tools stoßen , die ähnliche Dinge tun. Es liegt ganz bei Ihnen, unabhängig vom Projekt der Bedürfnisse der Benutzer und was Sie wirklich gerne tun und was Sie tun müssen. Stellen Sie also sicher, dass Sie Ihre Nachforschungen anstellen. Und für diese Tools, die ich Ihnen in diesem Video zeigen werde, werde ich ein PDF erstellen, das in diesem Kurs angehängt wird , das Sie herunterladen können. Und Sie können einfach auf diese Links klicken, um ohne weiteres darauf zuzugreifen. Lass uns anfangen. Die ersten Tools, die wir behandeln werden, sind Tools für die UX-Forschung. Jetzt sind einige dieser Tools Premium und Sie müssen dafür bezahlen, was abwertend diese Tools zumindest eine kostenlose Testversion haben , damit Sie sie testen und prüfen können , damit Sie sie testen und prüfen können, ob sie zu Ihnen passen. Eine Empfehlung, die ich für Sie habe ist, wenn Sie gerade erst anfangen, Ihre Recherchen über kostenlose Tools anzustellen und dies zu Fuß zu tun. Was ich damit meine ist, dass Sie die meisten dieser kostenlosen Tools wie Skype wie Google Meet und ähnliches verwenden können , um Ihre Nutzerforschung und Interviews durchzuführen , z. B. und Dinge wie DOS. Und stellen Sie sicher, dass Sie für Ihre Projekte immer im Voraus bezahlt werden. Vor allem, wenn Sie für einige dieser Tools bezahlen müssen , weil sie teuer sind, können sie auf der ganzen Linie sehr teuer sein, insbesondere immer mehr Tools, die Sie zu Ihrem Werkzeugkasten hinzufügen können sie auf der ganzen Linie sehr teuer sein, insbesondere immer mehr Tools, die Sie zu Ihrem Werkzeugkasten hinzufügen. immer teurer. also immer, immer sicher, dass Sie im Voraus bezahlt werden , bevor Sie diese Tools tatsächlich nutzen. Wie ich bereits erwähnt habe, stehen Tools für die UX-Forschung erster Stelle und wir haben Bücher von Teller, damit Sie das interaktive UX-Toolkit Ihres Kunden verstehen können, um Ihr nächstes Projekt mit der richtigen Recherche zu beginnen Ihr nächstes Projekt mit der richtigen Recherche zu beginnen. Stellen Sie sicher schau dir das Video an. Auch hier befinden sich Links im PDF Klicken Sie darauf und greifen Sie auf all diese Tools zu. So können Sie den Designprozess an Ihre Projektanforderungen anpassen . Sie können dieses Pilotprojekt mit einzigartigen interaktiven Vorlagen erhalten. Die meisten dieser Vorlagen sind also Stakeholder-Interviews, Benutzerinterviews, und Sie können all diese Vorlagen einfach an Ihre Bedürfnisse und die Bedürfnisse Ihres speziellen Projekts anpassen . Sie haben die Daten, die Sie analysieren und Teams mit Tags erstellen können. So kannst du z.B. Anmeldefehler taggen . Eine Anmeldung erfordert ein Onboarding bei dem die Benutzer nicht weiterkommen und all diese Dinge. Als nächstes haben wir UX Tweak. Die einzige UX-Forschungsplattform, die Sie benötigen, ist Buffer als Tools zur Verbesserung der Benutzerfreundlichkeit von Websites und Apps vom Prototyp bis zur Produktion. Sie können sich also Usability-Tests, Informationsarchitekturforschung und Benutzerverhaltensanalysen ansehen Informationsarchitekturforschung und . Also noch einmal, wo Benutzer nicht weiterkommen, benötigen sie Hilfe bei etwas, damit Sie all diese Recherchen direkt von hier aus durchführen können . Und dann können Sie diese Forschungsergebnisse exportieren, um mehr zu verstehen und zu analysieren, z. B. mit Ihrem Team zu kommunizieren, um besser zu verstehen, was sie tatsächlich benötigen, alles in einer Lösung, um Daten zu erstellen Durch gezielte Entscheidungen in Ihrem Website-Design können Sie Ihre Inhalte perfekt organisieren , sodass Sie die Karten sortieren, die Karten sortieren und die Baumtests durchführen können . Sie können dies mit Ihren Benutzern betonen. Sie können also Präferenztests, Fünf-Sekunden-Testumfragen, Sitzungsaufzeichnungen und all diese Dinge durchführen und die Daten später analysieren, um zu verstehen, was Ihre Benutzer wirklich benötigen. Und schließlich haben wir etwas, das als Misserfolg bezeichnet wird. Im Grunde sind sich alle diese Tools sehr ähnlich, machen wirklich ähnliche Arbeit. Und ich hasse diese nervigen Popups. Sie haben also die Plattform, sie haben die Lösungen, sie haben die Fallstudien, sie haben die Ressourcen, sodass Sie lernen können, wie Sie diese Tools verwenden. Und schließlich haben sie die Preise. Also wieder einmal intuitive CX-Lösungen zur Verbesserung der Erlebnisse. Sie können herausragende Erfahrung in einen Wettbewerbsvorteil verwandeln. So können Sie all diese Tools sehen. Schauen wir uns also die Plattform an. So können Sie interaktive Umfragen, SMS- und E-Mail-Feedback sowie digitales Feedback verwenden . Sie können Feedback, Kontexte und Journey-Mapping-Themen importieren . Sie haben also die meisten dieser Tools. Noch einmal, wenn Sie gerade erst anfangen, müssen Sie nicht wissen, was alles ist. Sie müssen sich nur mit der größeren UX-Forschung vertraut machen . Und der Schlüssel dazu ist, dass nicht alle Agenturen, nicht alle Teams diese Tools verwenden. Die meisten großen Agenturen tun dies, kleine Agenturen in Teams jedoch nicht, weil ihre Projekte viel kleiner sind Bedürfnisse dieser Benutzer viel geringer sind. Und schließlich, am Ende, aber genauso wichtig, sind die Budgets für diese Projekte viel geringer. Größere Projekte werden also all diese Tools und all diese Recherchen benötigen, Forscher, weil sie mehr Benutzer haben und diese Benutzer mehr Bedürfnisse haben als kleinere Projekte. Also musst du das verstehen. Als nächstes haben wir UX-Design-Tools für die Erstellung von Sitemaps und Benutzerabläufen. Sitemaps und Benutzerflüsse sind sehr wichtig und sie sind ein wichtiger Bestandteil des UX-Designprozesses. Also hier werde ich nur zwei Tools zeigen, aber noch einmal, es gibt viele, viele andere Tools , die dasselbe tun. Sie können also hier sehen, wie diese Tools aussehen. Sie können also eine Sitemap erstellen, Sie können einen Benutzerfluss erstellen, Sie können Personas erkunden, Sie können Customer-Journey-Maps erstellen. Und schließlich können Sie Wireframes erstellen, die derzeit für diese spezielle Plattform namens Flow Map erstellt werden. Auch hier werden undichte Stellen in einer PDF-Datei enthalten sein , sodass Sie den Mund leicht überprüfen können. Also, wie funktioniert es? Gut erklärt hier. Sie können also eine Sitemap erstellen. Wie es aussieht, kannst du hier sehen. Sie können Flussdiagramme erstellen. Sie können nach Benutzern suchen. Sie können mit Kundenreisen spielen. Sie können Inhalte so verwalten, dass Sie Dateien mit Seitenbeschreibungen, Texten und nur kriminellen Lippen verstehen und hochladen können Dateien mit Seitenbeschreibungen, Texten und nur kriminellen Lippen verstehen und hochladen . Und zum Schluss teilen Sie es dem Kunden mit, um Feedback zu erhalten. Also das ist großartig. Und dann haben wir einen Überlauf. So können Sie interaktive Benutzerflussdiagramme erstellen , die eine Geschichte erzählen. Sie können Ihre Designs wie nie zuvor kommunizieren. So kannst du deine Designs in schöne Benutzerabläufe verwandeln und du kannst dir hier ansehen, wie es aussieht. Ein bisschen anders als diese Website namens Flow Map ist, dass Sie Ihre Designs hier hochladen und sie zu Flussdiagrammen verbinden und diese Flussdiagramme dann mit Ihren Kunden teilen können, weil z. einige Kunden verstehen solche Designs nicht. Sie wollen wirklich solche Designs. Je nachdem, wer Ihr Kunde ist, wer Ihre Teamkollegen sind, was ihre Wünsche und Bedürfnisse sind, wie groß das Budget ist, wie groß der Zeitplan ist, müssen Sie sich für das eine oder andere entscheiden. Also zeige ich Ihnen nur diese Beispiele. Auch hier werden Links in einem PDF enthalten sein. Schauen Sie sie sich unbedingt an und sehen und verstehen Sie, was für Sie richtig ist. Als Nächstes haben wir Tools zur Erstellung von Wireframes und Prototypen. Balsamico ist das erste Werkzeug. Es ist ein bekanntes Tool. Sie können all diese Dinge also direkt hier tun. Du kannst all diese Leute interviewen. Sie können sie in diese Wireframes einbauen. Und der springende Punkt von Balsamiq ist, dass sie dir diese wirklich einfachen Vorlagen geben. Also, wenn Sie nach so etwas suchen, können Sie Balsamico verwenden. Lassen Sie mich Ihnen schnell das Produkt zeigen. Sie können hier im Hintergrund sehen , wie es aussieht, als würden sie Ihnen all diese grundlegenden Elemente, die wie Websites aussehen, die wie mobile Apps aussehen, vorbereitet die wie Websites aussehen, die wie mobile Apps aussehen, haben. So können Sie Ihre Ideen schnell mit Kunden und Stakeholdern kommunizieren . Aber meiner Meinung nach, und was Sie tun können, ist einen Schritt nach oben zu gehen und diese Ideen in schönere und praktikablere Prototypen umzuwandeln . Dafür verwende ich gerne Tools wie Adobe XD. Ich benutze es jeden Tag. Ich liebe es. Ich habe meine Jahre in diesem Geschäft Adobe XD gewidmet , weil ich fest davon überzeugt bin, dass dieses Tool etwas Großartiges ist. Nicht jeder wird mir zustimmen. Das ist völlig in Ordnung. Deshalb haben wir Tools wie Figma und wir haben Tools wie Sketch. Aber meiner Meinung nach ist Adobe XD das Beste, weil es Teil der Adobe-Familie ist. Damit meine ich, wenn Sie einige Bilder anpassen müssen, können Sie Photoshop verwenden. Wenn Sie einige Illustrationen erstellen müssen, können Sie Illustrator verwenden. Wenn Sie einige Videos sehr schnell bearbeiten müssen, können Sie Premiere verwenden. Wenn Sie einige Effekte erstellen müssen, können Sie After Effects verwenden. Und all diese Tools sind Teil einer einzigen Familie, wodurch die Nutzungsdauer beim Umschalten zwischen den Apps reduziert wird, was die Lernzeit reduziert. All diese neuen Apps alle Teil desselben Systems. Ich habe viele Kurse und Kurse zu Adobe XD. Schauen Sie sie sich also auch an. Wenn Sie mehr über Adobe XD erfahren möchten, was es ist und was es kann. Aber im Moment gefällt es mir sehr gut und ich benutze es sehr gerne. Aber im Gegensatz zu Adobe XD, das Teil dieser großen Familie ist, sind Figma und Sketch separate Unternehmen, die sich ausschließlich diesen Tools widmen . Aber das bedeutet, dass sie sich mehr für ihre Benutzer engagieren werden. Aber diese Tools werden niemals so vollständig sein wie etwas aus der Adobe-Familie, z. B. Adobe XD. Weil die Teams, die hinter diesen Unternehmen stehen, viel kleiner sind als die Teams bei Adobe, die dann z. B. jeden Monat mehr größere Updates veröffentlichen können , z. B. wie bei Adobe ist XD Fall. Dann für Sketch, von dem ich weiß, dass sie jedes Jahr Updates veröffentlichen , während Adobe XD-Team jeden Monat Updates herausbringt. Also noch einmal, ich versuche nicht, eines dieser Tools zu pushen , weil ich in diesem Rennen kein Pferd habe, wie man so schön sagt. Aber ich sage dir nur, was ich gerne mache. Sie können selbst entscheiden, z. B. ist Adobe XD für manche Menschen keine Lösung. Figma ist die Lösung. Und für manche Leute ist es Sketch immer noch. Meiner Meinung nach, Adobe XD, Figma R2, die besten Tools für diesen Job hier. Aber du bist derjenige, der am Ende des Tages die endgültige Entscheidung treffen wird . Als nächstes haben wir die Tools für UX-Forschung und -Tests. Und hier haben wir usertesting.com , eine der besten Websites für diesen speziellen Service. Kundenerlebnis-Erzählungen können Sie sich aus erster Hand ein Bild davon machen, was Ihre Kunden denken und erleben Mit Kundenerlebnis-Erzählungen können Sie sich aus erster Hand ein Bild davon machen, was Ihre Kunden denken und erleben. Sie können also wirklich tief in diese Tools eintauchen. Wie gesagt, das werde ich in diesem speziellen Video nicht tun . Ich versuche nur, Ihnen diese Tools zu zeigen, zur Verfügung stehen, damit Sie genauer untersuchen können , welches Tool für Sie wichtig ist und welche Tools für das jeweilige Projekt , an dem Sie gerade arbeiten, wichtig sind. Hier können Sie also jede Frage stellen, an die Sie sich wenden können, jeden, den Sie ansprechen und hervorheben können, Sie können entdecken und analysieren und Erkenntnisse austauschen. Sie decken also im Grunde die gesamte Benutzertestroute für Sie in diesem speziellen Tool ab. Als Nächstes haben wir eine UX-Cam, damit Sie das perfekte App-Erlebnis bieten können. Also wieder einmal, genau hier gibt es Targeting-Apps. Es ist der Marktführer im Bereich App Experience Analytics bietet mobilen Teams schnelle kontextuelle und detailgetreue interne Informationen. Also nur eine mobile App-Analyse. Wenn Sie also an mobilen Projekten arbeiten, ist dies vielleicht das Richtige für Sie. Oder wenn Sie an Desktop- und Mobilprojekten arbeiten, dann ist dieses Tool vielleicht genau das Richtige für Sie. erneut sicher, dass Sie die Tools verwenden , die für Sie wirklich wichtig sind. Und noch einmal werde ich wiederholen, was ich zu Beginn dieses Videos gesagt habe. Stellen Sie sicher, dass Sie im Voraus bezahlt werden, da sich diese Tools schnell summieren können , wenn Sie immer mehr dieser Tools hinzufügen . Und bevor Sie anfangen, Geld für diese Tools auszugeben, ist mein oberster Tipp, sie auszuprobieren, zu testen und zu sehen, ob sie bei diesem speziellen Projekt wirklich die Arbeit für Sie erledigen . Binde dich nicht an ein Werkzeug. Wenn es nicht zu Ihnen passt, stellen Sie sicher, dass Sie sie testen, probieren Sie sie aus und stellen Sie sicher, dass Sie wissen, ob sie für zu Ihnen passt, stellen Sie sicher, dass Sie sie testen, probieren Sie sie aus und stellen Sie sicher, dieses spezielle Projekt wirklich erforderlich sind oder nicht. Schließlich haben wir die Tools für die Teamzusammenarbeit. Was wir hier haben, ist der Slack, und es ist eines der bekanntesten Tools da draußen. Aber du kannst in Slack tun, dass du alle möglichen Communitys erstellen kannst. Sie können separate Chats mit verschiedenen Personen in Ihrem Team erstellen . Sie können es auch für Benutzer verwenden. Sie können Recherchen verwenden, Sie können einige Tests direkt hier auf der Folie durchführen, aber es ist hauptsächlich ein Kommunikationsinstrument zwischen Teams und Teamkollegen. Als nächstes haben wir für die Lieferung, Sie können etwas verwenden, das als Sampling bezeichnet wird. Und Sampling funktioniert gut mit den Tools ich zuvor erwähnt habe, wie z. B. Adobe, XD, Figma und Sketch. Sie können es also nativ integrieren, der Einstieg ist kostenlos, aber wenn Sie immer mehr Zeichenflächen hinzufügen, wenn Sie immer mehr zu dieser Datei hinzufügen, wird es Geld kosten. Der Kernpunkt von Chaplin ist, dass Sie mit Entwicklern zusammenarbeiten können, damit Sie Ihre Designs problemlos mit Entwicklern teilen können. Sie können dann Abstände, Abstände und ähnliches messen , um später leicht zu verwenden müssen verstehen, was sie im Code Sie können dies nativ in Adobe XD tun. Figma. Sketch bin ich mir nicht so sicher, aber manche Leute nutzen die Macht von Chaplin sehr gerne , weil man hier und da auch Kommentare hinterlassen kann, was man auch in Adobe XD und in Figma tun kann. Aber auch hier verwenden manche Leute gerne Zeplin, weil sie entweder daran gewöhnt sind oder sie dann später auf irgendeine Weise toten Code ermöglichen müssen . Es liegt also noch einmal an Ihnen, zu entscheiden, was sie wirklich mit diesen Tools machen möchte und was Sie wirklich verwenden müssen. Wie ich in diesem Video einige Male erwähnt habe, schauen Sie sich unbedingt das PDF an. Ich werde alle Links, die ich erwähnt habe , in diesem PDF hinterlassen . Stellen Sie sicher, dass Sie herausfinden, welche dieser Tools für Sie geeignet sind. Welches dieser Tools wird die Arbeit für Sie erledigen? Und noch einmal, mein wichtigster Tipp hier ist beeilen Sie sich nicht und investieren Sie Ihr ganzes Geld in diese Tools. Wenn Sie sie nicht verwenden werden, stellen Sie sicher, dass Sie sie ausprobieren. Stellen Sie sicher, dass Sie verstehen , was sie tun. Ich sollte sie hier und da lernen. Denn wenn das Projekt kommt, kennen Sie all diese Tools, die Ihnen bei diesem speziellen Projekt helfen werden . Aber geben Sie sich nicht die Mühe und investieren Sie Ihr Geld in das Projekt und in diese Tools, die Sie in diesem Moment nicht verwenden werden. Stellen Sie sicher, dass Sie sich weiterentwickeln, wenn Sie wachsen, wenn Sie entdecken diese Tools, um nur die Tools zu verwenden, die Sie tatsächlich für Ihre Arbeit benötigen, und sich dann später im Laufe Ihrer Karriere weiterzuentwickeln. Und wenn diese Tools verfügbar sind, sollten Sie sie alle ausprobieren , denn das ist wirklich wichtig, aber beeilen Sie sich nicht und investieren Sie Ihr Geld in alle. 12. ABSCHNITT 1 AUFGABE: Ihre Aufgabe für diesen Abschnitt des Kurses besteht nur darin, mehr über UX-Design zu erfahren. Sie können sich informieren, indem Sie Websites wie Nielsen Norman besuchen oder Websites wie Career Foundry besuchen und einfach verschiedene Blogs von renommierten UX-Designern online lesen verschiedene Blogs von renommierten UX-Designern online . Nur um euch ein bisschen mehr zu informieren , werden wir in diesem Kurs nur über die Grundlagen des UX-Designs sprechen, grundlegende Ansätze, denn dies ist schließlich der Kurs für Anfänger. Und ich wollte euch nicht mit zu vielen Methoden langweilen und nur um euch noch weiter zu verwirren Sobald ihr all diese Grundlagen aus diesem Kurs gelernt habt, werdet ihr viel besser sein bereit, einige zusätzliche Informationen und einige fortgeschrittenere Techniken , die UX-Designer verwenden, anzugreifen. Du kannst diese beiden verwenden oder einfach YouTube-Agenten stöbern. Smart hat einen wirklich tollen YouTube-Kanal und es gibt viele verschiedene UX-Designer , denen du auf YouTube folgen kannst , um sogar zu lernen. mehr. Es gibt sogar verschiedene Kurse über UX-Design, aber bevor Sie tatsächlich weitermachen und verschiedene Käufe über UX-Design tätigen, stellen Sie sicher, dass sich die ersten über diese informieren kostenlose Ressourcen, die gerade erwähnt werden, um zu sehen ob das UX-Design etwas ist, für das Sie wirklich eine Leidenschaft haben und das Sie wirklich verfolgen möchten. 13. ABSCHNITT 2 Design: Wenn Sie anfangen, mit Ihren Kunden zu arbeiten, ist ein Design-Briefing für jedes einzelne Projekt unglaublich wichtig. Darüber werden wir in diesem Abschnitt sprechen. Was ist das Design-Briefing, wie strukturiert man es und wie verwendet man die kostenlose Vorlage , die ich zur Verfügung gestellt habe. Also lass uns anfangen. 14. Was ist ein Design-Briefing: Ein Design-Briefing ist ein Muss, wenn Sie mit jedem Ihrer Projekte beginnen . Wann immer es ein kleines oder ein großes Projekt gibt, müssen Sie den Umfang dessen verstehen , was Ihr Kunde für erforderlich hält bevor wir mit der UX-Recherche und dem Rest der UX fortfahren Teil Ihres Projekts. Aber zuerst sollten Sie diese Reise mit Ihrem neuen Kunden oder einem bestehenden Kunden beenden Ihrem neuen Kunden oder einem bestehenden Kunden , lautet das Design-Briefing. Man muss bei jedem einzelnen Projekt mit einem Design-Briefing beginnen , besonders bei neuen Kunden, weil sie oft denken, dass sie verstehen, was sie von diesem Projekt tatsächlich benötigen. aber wenn du reinkommst und ihnen erklärst, dass sie das nicht wirklich brauchen, sie brauchen das. Auf diese Weise. Mit diesem Gespräch mit Ihrem Kunden werden Sie sich eine Meinung bilden und Sie werden den Weg beschreiten, von dem er nicht unbedingt dachte, dass Sie ihn gehen werden. Okay, sie brauchen vielleicht eine Website, die entworfen werden muss. Das ist völlig in Ordnung, aber vielleicht brauchen sie nicht genau diese Seite. Vielleicht brauchen sie zwei dieser Seiten. Vielleicht benötigen sie nicht so viele Informationen auf dieser speziellen Seite und so weiter. Hier bietet sich der Design-Briefing an. Sie sollten das Design-Briefing gleich zu Beginn Ihres Projekts erstellen und besprechen . Zuallererst führen Sie vielleicht manchmal ein Telefonat mit Ihrem Kunden, nur ein Einführungsgespräch. Wer du bist, wer sie sind, was sie brauchen. Dann können Sie bei Ihrem nächsten Gespräch vielleicht ein Design-Briefing erstellen. Sie können es ausfüllen, wenn Sie mit ihnen sprechen weil Sie wissen müssen, wer sie sind, in welchen Märkten sie sind, wie groß das Unternehmen ist, wie groß das Projekt ist, wo sie wollen dieses Projekt zum Mitnehmen. Was sind die Ziele dieses Projekts? Was sind die Ziele dieses Projekts? Wie hoch ist das Budget für dieses Projekt? All diese Fragen müssen Sie zu Beginn Ihres Projekts stellen. Denn wenn du es für später behältst, könnte es zu spät sein. In diesem Kurs zeige ich dir meine Vorlage. Ich werde Ihnen diese Vorlage tatsächlich geben und Sie können genau dieselbe Vorlage für all Ihre zukünftigen Kunden verwenden und wiederverwenden . Sie können die Farben ändern. Sie können ihre Logos hinzufügen, wenn Sie möchten. Du kannst damit machen, was du willst. Das Beste an dieser Vorlage, die ich Ihnen in der nächsten Lektion zeigen werde, ist, dass sie druckbar ist. Wenn Sie persönlich zu den Treffen mit Ihren Kunden gehen , können Sie es ausdrucken, Sie können es ihnen geben, und dann können Sie beide bei Bedarf einige Änderungen besprechen , bevor wir fahren Sie mit Ihrem Projekt fort und bevor wir der Gestaltung dieses speziellen Projekts beginnen, kann diese Vorlage endlos bearbeitet werden. Ich gebe sie Ihnen im Rahmen dieses Kurses, damit Sie damit umgehen können was auch immer Sie für Ihr nächstes Projekt wollen. In der nächsten Lektion werde ich Ihnen diese Vorlage zeigen. Ich zeige Ihnen, wie Sie es bearbeiten können, und ich werde Ihnen zeigen, wie Sie es für Ihre zukünftigen Kunden verwenden können . Also werde ich dich dort sehen. 15. Erstellen eines design in Adobe Xd: Das Erstellen eines Design-Briefings in Adobe XD kann sehr einfach sein, und dasselbe Design-Briefing können Sie verwenden und wiederverwenden, wenn Sie es als Vorlage für all Ihre zukünftigen Kunden speichern. Das Tolle daran ist, dass es unter Berücksichtigung der neuesten Funktionen von Adobe XD entwickelt wurde , z. B. Stacks wie Komponenten. Sie können also jederzeit die Farben ändern, Sie können die Schriftarten ändern, Sie können die Symbole ändern und vieles mehr. Ich gebe dir diese Vorlage. Sie können es in all Ihren zukünftigen Projekten verwenden , wenn Sie möchten. Also, ohne weitere Umschweife, lasst uns anfangen. Also hier ist es in Adobe XD. So sieht die Vorlage aus. Und hier haben wir die wichtigsten Design-Briefing-Grundlagen, und hier haben wir die eigentliche Vorlage für einen Designbrief. Bevor ich nun weitermache und dir zeige , was eigentlich drin ist, wollte ich dir das nur kurz zeigen. Hier haben wir die Absatzfarbe, die die Farbe für all diese Absätze ist. Ich habe Icon-Farbe genau hier. Also natürlich die Farbe für die Symbole und die Titelfarbe, die die Farbe dieser Titel ist. jetzt bitte daran, dass, da Design Briefing Essentials ist, dies nicht geändert werden sollte. Sie können es ändern, Sie können es löschen, wenn Sie es nicht hier haben möchten. Aber es ist ein Hauptzweck und der Punkt ist, Sie daran zu erinnern , was Sie in Ihre Vorlage für einen Design-Briefing aufnehmen können in Ihre Vorlage für einen Design-Briefing Dies ist diese Vorlage hier. Meine Empfehlung ist, es so zu belassen , wie es ist, und es einfach zu diesem Teil hinzuzufügen. Aber wenn du willst, kannst du es jederzeit löschen. Wenn du willst. Wenn ich dies auswähle, können Sie feststellen, dass das gesamte Feld das Textfeld ist, da es, wie gesagt, nicht geändert werden soll. Aber wie gesagt, Sie können es noch einmal löschen. Sie können damit machen, was auch immer Sie wollen, um loszulegen. Warum haben wir genau hier? Wenn ich nur ein bisschen weiter hineinzoome, haben wir das Unternehmensprofil und hier haben wir dasselbe. Dann haben wir einen Projektüberblick, genau das Gleiche hier. Wir haben Ziele und Zielsetzungen. Du verstehst, worum es geht. All diese wichtigen Dinge sind also hier enthalten. Lassen Sie uns also jeden von ihnen durchgehen und ich werde Ihnen erklären, was hinter ihnen steckt und warum Sie so etwas einbeziehen sollten . Zuallererst sollten Sie das Unternehmensprofil angeben, z. B. den Namen, Branchenprodukte oder die Dienstleistungen, die das Unternehmen anbietet. Denken Sie daran, dass Sie diese Vorlage gleich hier erkunden können. Sie können es bearbeiten, Sie können das Textfeld erweitern, Sie können es ändern. Sie können mehrere Seiten hinzufügen, Sie können damit machen, was Sie wollen. Dies ist nur ein Hinweis darauf , in welche Richtung Sie all diese Informationen einbeziehen sollten , damit Ihr Kunde besser versteht , was Sie für dieses spezielle Projekt tatsächlich für ihn benötigen . Also noch einmal Alleinstellungsmerkmal, was unterscheidet sie von ihrer Konkurrenz? Das ist wirklich wichtig und weil Sie wissen sollten wenn Sie anfangen, die Konkurrenz zu erkunden, sollten Sie wissen, was für sie drin ist, was für ihre Konkurrenz drin ist, also was anders ist für ihr Geschäft und Derek-Konkurrenz, was unterscheidet sie von der Konkurrenz und so weiter. Wer sind die wichtigsten Stakeholder? Wer sind die wichtigsten Entscheidungsträger, im Grunde Mitwirkende und Ansprechpartner in dem Geschäftskreis, mit dem Sie es in dieser Organisation zu tun haben? Ist es der CEO, ist es die Personalabteilung? Mit wem haben Sie es täglich auf dieser Projektliste direkter und indirekter Wettbewerber zu tun? Sie können also über sie recherchieren. Das habe ich über wichtige Verkaufsargumente und Alleinstellungsmerkmale usw. erwähnt wichtige Verkaufsargumente und . Sie müssen also verstehen , wer es gibt, direkte und indirekte Konkurrenten. Sie müssen diese Informationen von Ihren Kunden einholen, insbesondere wenn Sie nicht in dieser Branche oder Nische tätig sind. Vielleicht verstehen Sie nicht , wer diese Firma ist, womit sie es zu tun haben und solche Dinge. Es wird Ihnen ein viel besseres Verständnis des Projekts vermitteln und darüber, was Sie bei diesem Projekt tatsächlich tun müssen. Wenn Sie nach diesen Informationen gefragt haben, was Sie tun können, wenn Sie all diese Informationen gesammelt haben, können Sie sie in einem Word-Dokument oder ähnlichem sammeln . Sie können zu Ihrer Briefvorlage springen. Sie können Ihre Projektfirma gleich hier eingeben. Übrigens habe ich Roboto verwendet, wie Sie hier sehen können , eine kostenlose Google-Schrift. Sie können es also einfach herunterladen und sofort verwenden . Und noch einmal, Sie können einfach mit der rechten Maustaste hier klicken und all diese Schriftarten, Farben, Symbole usw. bearbeiten und ändern . Name des Kunden hier, Frist für das Projekt, wann wird das Projekt enden, was für jedes einzelne Projekt entscheidend ist, Projektname. Also wenn das Projekt einen Namen hat, also kannst du ihn hier eintragen, z.B. ich weiß nicht, ob etwas eine Website oder so ist, etwas App oder ein Dashboard oder was auch immer ein Unternehmensprofil, oder was auch immer, oder? Ihre Recherche zum Unternehmen finden Sie hier. Das ist es also, worüber wir hier gesprochen haben. Als nächstes haben wir einen Projektüberblick. Also was es ist, hier erstellen Sie eine detaillierte Beschreibung des Projekts. Sorry, das hat so viel Kontext wie möglich. Versuchen Sie, Ihren Kunden zu fragen, was er tut und warum er es tut. Das was? Baust du etwas Neues, was entscheidend ist? Gestalten Sie neu , was sie bereits haben? Welche Vermögenswerte haben sie nach Abschluss dieses Projekts unerwartet ? Und schließlich versuchen sie, die Probleme zu identifizieren, die sie haben. Wenn Sie die Probleme verstehen, werden Sie leichter eine Lösung finden. Hier wirst du also tatsächlich ein paar Fragen stellen und hier kreativ sein. Ich, ich weise dich nur in die richtige Richtung, was du tun solltest. Aber grundsätzlich sollten Sie diese kurze Vorlage öffnen, z. B. auf einem Bildschirm oder auf einem Teil des Bildschirms. Und wenn Sie mit ihnen sprechen, können Sie einfach die Informationen eingeben , die sie Ihnen mitteilen, oder Sie können ein Word-Dokument verwenden, Sie können Stift und Papier verwenden. Sie können tun, was immer es will, und dann einfach all diese Informationen in diese kurze Vorlage einfügen. Nochmals, wenn wir gleich hier klicken, klicken Sie hier, Sie Control oder Command E, um es zu exportieren Ich kann es als PDF auswählen und dann können Sie dieses PDF mit Ihrem Kunden teilen. Sie können dir dann weiteres Feedback geben was du heute bei diesem speziellen Projekt tun wirst, zustimmen, sie sind anderer Meinung und so. Dann haben wir Ziele und Zielsetzungen, was auch sehr wichtig ist. Ziele spiegeln den ursprünglichen Zweck Ihres Projekts wider, während Ziele die Methoden zur Erreichung dieses Ziels hervorheben . Galt, zum Beispiel, ein Kunde möchte mehr Traffic auf seiner Website. Objektives Beispiel: Erhöhen Sie die Anzahl der wöchentlichen Sitzungen bis zu diesem bestimmten Datum um 20%. Das ist also das perfekte Beispiel. den meisten Fällen, in denen Kunden nicht verstehen, was soll damit eigentlich erreicht werden? Möchten Sie, wie in diesem Fall, mehr Traffic auf Ihrer Website? Wenn ja, was werden Sie mit diesem Traffic machen, werden Sie ihn in Leads umwandeln und Sie werden Warm Leads oder Cold Leads verwenden. Wirst du ihnen ein kostenloses Produkt oder ein Werbegeschenk geben , damit du sie an deine E-Mail-Liste anhängen kannst? Möchten Sie, dass sie Sie anrufen oder möchten Sie , dass sie etwas kaufen? Ist es ein Produkt, das neu auf dem Markt ist? Ist es das Produkt, das es auf diesem Markt gibt? Was ist Ihre Zielgruppe und was sollen sie eigentlich tun, wenn sie tatsächlich auf Ihre Website kommen? Oft und vertrauen Sie mir, wenn Sie Ihren Kunden diese Fragen stellen, werden sie tatsächlich anfangen, darüber nachzudenken und zu sagen, ja, Sie haben Recht. Vielleicht brauchen wir keine Website mit 50 verschiedenen Seiten, 50 verschiedenen Seiten über die wir ursprünglich gesprochen haben. Vielleicht brauche ich einfach eine nette Landingpage, vielleicht eine About-Seite, vielleicht die Produktseite. Das ist im Grunde alles. Sie müssen also all diese Fragen stellen damit sie verstehen, was sie tatsächlich von diesem speziellen Projekt und von Ihnen als Designer für dieses Projekt benötigen . Dann noch einmal, wie gesagt, objektives Beispiel, erhöhen Sie die Anzahl der häufigen Sitzungen um 20 Prozent. Nehmen wir an, Sie möchten Ihre Website neu gestalten, damit Sie Ihr Produkt verkaufen können, und Sie möchten so vielen Menschen wie möglich ein Werbegeschenk geben vielen Menschen wie möglich ein Werbegeschenk , damit Sie sie konvertieren können Ihr E-Mail-Newsletter jede Woche. Das Ziel ist also nur, dass ich die Anzahl der wöchentlichen Neuanmeldungen für meinen Newsletter erhöhen möchte die Anzahl der wöchentlichen Neuanmeldungen für meinen Newsletter erhöhen , damit ich im nächsten Monat, sagen wir, 10% mehr Menschen konvertieren kann . Das ist also dein Hinweis. Ziel, klares Ziel, was sollte ich als Designer tun , als damit zu beginnen, wie ich das machen sollte, wie sollte ich das alles integrieren? Sollten sie bestehende Lösungen für E-Mails verwenden , wie zum Beispiel Mailchimp, oder sollte ich etwas Neues erstellen und sie in diese Richtung weisen? Auch weil sie sagen, dass sie mehr E-Mail-Anmeldungen wünschen , damit sie diese Personen später konvertieren können, müssen Sie diese E-Mail-Anmeldungen erstellen , um auf Ihrer Website sichtbarer zu sein. Sie können sehen, dass wir bereits mit dem UX-Design beginnen , nur weil wir ein gutes Design-Briefing haben, weshalb ein Design-Briefing sehr wichtig ist. Indem Sie Ziele und Ziele im Voraus festlegen , was ich gesagt habe, sind Sie nicht nur in der Lage, fundiertere Entscheidungen zu treffen, sondern Sie sind auch besser gerüstet, um Ihre Wert und Wert für den Kunden außerhalb der visuellen Ästhetik Ihrer Website. Sie sind also wieder einmal ein Designer, der Probleme löst. Du bist nicht hier, um etwas Schönes zu kreieren und das war's. Du musst ihre Probleme durch dein Design lösen und es gleichzeitig schön machen Das ist der Sinn eines Designers. Zielpublikum. Auch hier wissen Sie nicht, für wen, für wen Sie entwerfen. Du kannst nicht entwerfen. Eine weitere Möglichkeit, Ihre Designentscheidungen zu treffen, besteht darin, ein solides Verständnis der Benutzer zu entwickeln , die mit der App oder Website Ihrer Kunden interagieren werden . Wenn Ihr Kunde diese Recherche bereits durchgeführt hat , haben Sie Glück. Aber wenn sie es nicht haben, müssen Sie diese Recherche selbst durchführen. Sie können dies als einen anderen Service verkaufen und mehr Geld verdienen, was von entscheidender Bedeutung ist. Was in Ihrer Recherche auftauchen sollte , ist die Persona des Publikums. Informationen über Ihre Zielgruppenpersönlichkeit sollten Angaben wie Alter, Geschlecht, Land, Fresno, Wohnort, Arbeitsplatz, Medienkonsumgewohnheiten, tägliche Gewohnheiten wie Reisen, Essen gehen, enthalten Wohnort, Arbeitsplatz, Medienkonsumgewohnheiten, tägliche Gewohnheiten wie Reisen, Kontakte knüpfen und so weiter. Das sagt uns also, wenn ich, wenn ich eine Schuhwebsite für 30-Jährige entwerfe, muss diese Website komplett anders sein als wenn ich dieselbe Website für 65-Jährige entwerfe. Weil 65-Jährige meisten von ihnen sehbehinderte Menschen haben. Sie mögen keine hellen Farben. Sie haben bereits viel mehr Geld als die erste Gruppe von Dreißigjährigen. Sie müssen also über all diese Dinge nachdenken , wenn Sie mit dem Entwerfen beginnen, Sie müssen Personas erstellen. wen entwirfst du das? Wenn Sie also diese Personas haben, wenn Sie diese Recherche durchführen, wenn Sie diese Zielgruppe bereit haben, wissen Sie, welche Farben Sie verwenden müssen, welche Schriftarten Sie verwenden müssen, welche Schriftgrößen Sie verwenden müssen, welche Art von Bildsprache, welcher Ton, welche Art von Sprache? Nehmen wir an, die Sprache für Dreijährige ist völlig anders als für 65-Jährige. Wenn Sie Slang und Begriffe verwenden , die nur 35-Jährige verstehen, werden diese 65-Jährigen es nicht verstehen können und sie werden einfach gehen. Das erhöht also deine Absprungrate und beugt dir den Rücken zur quadratischen Seite. Dann haben wir die Anforderungen entworfen. Sie sollten diese im Voraus angeben , da es sich häufig um eine Adobe XD-Vorlage handelt. Nehmen wir an, meine Kunden arbeiten gerne in Sketch. Ich arbeite nicht in Sketch, ich arbeite in XD. Und dann werden wir das Ende des Projekts erreichen. Es wird völlig vergessen , welches Tool ich verwende. Und dann gab es zwei Anfragen nach den Sketch-Dateien. Natürlich gibt es viele Konversionen da draußen. Sie können für bestimmte Dienste bezahlen , um diese Konvertierungen für Sie durchzuführen, oder Sie können diese Konvertierung für sich selbst durchführen. Aber was ist der Sinn? Warum sich die Mühe machen? Sie können einfach im Voraus fragen. Also Anlagenabmessungen und Auflösungen. Zuallererst ist dies für Geld von entscheidender Bedeutung. Wenn sie nur z. B. sagen wir einen iPhone 10-Bildschirm wollen , das ist es. Dann wirst du einen bestimmten Geldbetrag verlangen. Aber wenn sie iPhone 89, 101-112-1314, was auch immer, all diese Größen und dann auch Android-Versionen wollen 101-112-1314, was auch immer, all diese Größen . Natürlich müssen Sie viel mehr Geld verlangen , weil Sie viel mehr Arbeit erledigen müssen. Stellen Sie diese Fragen also im Voraus. Dateiformate sollten, wie ich bereits erwähnt habe, mit den Entwicklern vereinbart werden, bevor Sie mit der Arbeit beginnen. Einige Entwickler verwenden gerne Figma-Dateien, andere skizzieren gerne Dateien. Anderen ist es einfach egal, solange du etwas wie, ich weiß nicht, Sharing-Plattformen oder eines dieser Plugins verwendest ich weiß nicht, Sharing-Plattformen , lass uns das untersuchen. Mal sehen, was wir hier tun können. etwas wie Zeplin, also sagen wir mal, viele Leute benutzen gerne Zeplin. Wenn Sie also keinen Zeplin-Urin verwenden, sind Sie nicht gut zu ihnen, also müssen Sie Sapling verwenden. Wenn Sie jedoch noch nie Setzlinge verwendet haben , kann dies zu einer unangenehmen Situation für Sie führen, sodass Sie es mitten im Projekt lernen müssen. Fragen Sie also im Voraus, es wird Ihnen sehr helfen, wenn Sie eine Farbpalette benötigen. Haben sie ihre vorhandenen Farben? Denn wenn sie es tun, hast du Glück. Wenn nicht, musst du das von Grund auf neu erstellen. Also denk über all diese Dinge nach. Bildatensätze müssen ebenfalls enthalten sein. Sie haben ihre eigenen Bilder oder du musst Bilder verwenden. Wenn Sie Bilder verwenden müssen, müssen Sie kostenlose oder Premium-Bilder verwenden. Es ist sehr einfach, diese Fragen zu stellen, aber die meisten Designer tun es einfach nicht. Du musst darüber nachdenken, denn wenn sie wollen, wenn sie Premium-Bilder verwenden wollen, z.B. wer bezahlt für diese Premium-Bilder? Kommt es aus ihrer Tasche? Oder Sie denken, dass, weil sie Ihnen z. B. 5.000$ zahlen . Es ist alles in all diesen Bildern enthalten, all diesen Icons, Videos, Stock-Filmmaterial, alles ist in diesen 5.000 V. Denken Sie also darüber nach, dass all diese Dinge vorhanden sind. Das wird dir viel Zeit sparen. Was wir dann haben, sind zugehörige Kopierdokumente. Insbesondere die Kopierdokumente können so etwas wie entweder Vertrag sein so etwas wie entweder Vertrag oder wenn Sie etwas NDA verwenden können, z. B. also eine Geheimhaltungsvereinbarung oder wenn Sie ihr Logo verwenden können, sagen wir in dieser Ausrichtung, nicht in dieser Ausrichtung. Sie müssen also mit ihnen über all diese Dinge sprechen , damit Sie besser verstehen können , was sie tatsächlich brauchen und was Sie ihnen tatsächlich bieten können. Schließlich müssen wir die Dateien liefern. Sie sollten immer Ihre Mockups und Markenrichtlinien bereitstellen, falls Sie sie erstellt haben, Moodboards oder etwas anderes, das den Kunden helfen könnte , zu verstehen und selbstbewusst zu sein, ich kann Vertrauen in Ihre arbeiten. Was ich damit meine ist, wenn Sie Ihr Moodboard erstellt haben, liefern Sie es ihnen einfach. Denn wenn man diesen Geldbetrag für das Moodboard mittendrin in Rechnung das Moodboard mittendrin in das Projekt ihnen das Moodboard gezeigt. Wenn Sie Papier-Wireframes und Denses erstellt zeigen Sie diese Papier-Wireframes irgendwie an. Es wird ihnen zeigen, wie viel Zeit und Mühe tatsächlich in dieses spezielle Projekt gesteckt wurden. Schließlich haben wir hier den Hauptgrund. Also Budget und Zeitplan. Das ist sehr wichtig, sehr umständlich für Designer, weil viele Designer einfach nicht mit Geld umgehen wollen. Aber Geld ist wirklich wichtig, besonders für Sie, weil Sie für dieses spezielle Projekt das berechnen müssen , was Sie tatsächlich gearbeitet haben. Sonst hast du einfach Pech, denn wenn du den Vertrag unterschreibst, war's das. Sie können nichts anderes tun , als vielleicht tatsächlich ein separates Projekt zu erstellen oder dieses Projekt zu verlassen und vieles mehr. Deshalb habe ich genau hier diese Animation von Pink Punk, die zwischen Ihnen und dem Kunden hin und her geht zwischen Ihnen und dem Kunden hin und Sie müssen all diese Dinge im Voraus spezifizieren , bevor Sie starte deinen Adobe XD und fange an, auf diese Weise zu arbeiten. Kurzvorlagen wie diese können Ihnen sehr helfen, besonders wenn Sie budgetieren und vor allem, wenn Sie herauskristallisieren, wie viel Zeit benötigen Sie tatsächlich für all diese speziellen Teile deines Projekts? Wenn Sie also in einer Agentur arbeiten, haben Sie es nicht mit diesem Teil zu tun, aber wenn Sie ein Freelancer sind, ist dieser Teil absolut wichtig für Ihren Erfolg, was ich gerade gesagt habe. Das Budget, je nachdem, wie groß das Budget ist, wissen Sie, wie tief Sie in das Projekt investieren und Ihre Zeit und Ressourcen dafür aufwenden werden. Sie werden keine Papier-Wireframes, Wireframes und dann fünf verschiedene Versionen von Designs erstellen . Und dann, ich weiß nicht, fünf verschiedene Prototypen und dann Animation deiner Icons und dann Erstellung völlig separater Mockups , die an ihr Projekt gewöhnt sind. All das wirst du nicht tun, wenn sie dich nur bezahlen oder ich weiß nicht, irgendeinen dummen Geldbetrag , je nachdem, wie viel Geld sie haben, je nachdem, was sie brauchen. So lange wird das Projekt dauern. Sie müssen also berechnen, was Sie für dieses spezielle Projekt tatsächlich gearbeitet haben. Andernfalls werden sie dich am Ende des Tages einfach benutzen. Was wir in der Zeit vor allem anderen Wert haben , denn Kunden werden es nicht tun, wenn Sie Ihre Zeit nicht schätzen, wird es niemand anderes tun. Zeitplan. Projekte müssen pünktlich und profitabel bleiben. Aus diesem Grund sind Zeitpläne ein Muss für Ihre Unterhosen. Jeder Zeitplan muss Stopps haben. Also einer am Anfang, einer am Ende und so viele oder so wenige wie nötig in der Mitte. So werden Sie und Ihre Kunden wissen, dass Sie auf dem richtigen Weg sind. Deshalb habe ich dieses Startdatum, Recherchedatum, Zielpublikumsdatum erstellt . Sie können das alles natürlich ändern. Präsentationsdatum, Revisionsdatum, Lieferdatum. Sie können so viele dieser Haltestellen hinzufügen, wie Sie möchten. Du kannst sie entfernen, du kannst tun, was du willst. Schreiben Sie also hier Ihr Budget und Ihren Zeitplan. Also eine Aufschlüsselung des Budgets hier, z. B. 2000 im Voraus, 2000er in der Mitte, sagen wir so etwas. Also Präsentation, sagen wir 2000. Dann endlich, am Ende, Lieferung, 2000er da, oder 50 Prozent beginnen ihre Planung, Fuß Prozent ganz am Ende. Sie müssen also herausrechnen, was Sie tatsächlich wert sind und was Sie von Ihren Kunden tatsächlich gerne erwarten. Und schließlich die Aufschlüsselung des Zeitplans. Du kannst das nicht tun, solange du am Leben bist. Sie müssen also absolut klare Zeitlinien erstellen. Woche dein Kunde, wann ist der Anfang, wann ist die Mitte, wann ist das Ende? Wann sind die Überarbeitungen? Wie viele Revisionen habe ich? Wann sollte ich das liefern? Wann sollten Sie das und vieles mehr liefern. All dies müssen Sie also gleich zu Beginn Ihres Projekts berücksichtigen . Schließlich, was wir hier haben ist, dass Sie ohne das Design-Briefing nur Ihre Zeit damit verschwenden, zu hoffen , dass Sie beim ersten Mal bekommen, was ihnen gefällt. Mithilfe des Design-Briefings stellen Sie sicher, dass Sie und Ihre Kunden von Anfang an auf derselben Seite sind . Hatten Sie also sowohl Wert auf Ihre Zeit als auch auf die Zeit Ihrer Kunden? Das habe ich also gleich zu Beginn dieses Kurses erwähnt . Sie müssen jedes Mal für jedes einzelne Projekt einen Design-Briefing erstellen . Unabhängig davon, ob der Kunde Kunde ist , für den Sie bereits in der Vergangenheit gearbeitet haben, müssen Sie ein Design-Briefing erstellen für dieses spezielle Projekt. Also sind alle auf demselben Weg. Stellen Sie sicher, dass Sie diese Haltepunkte und diese Lücken in Ihrem Projekt schaffen . Also wie ich dir zuvor hier gezeigt habe. Fangen Sie also dort an, Startdaten für die Recherche, für das Publikum, Recherche für die Designpräsentation. Umso mehr, dass sowohl Sie als auch Ihre Kunden auf dem gleichen Weg was von diesem Projekt verlangt wird und was in diesem Projekt geliefert wird. 16. Design-Briefing in Figma: In diesem Video schauen wir uns die Grundlagen der Design-Briefings an und wie es in Figma aussieht, denn es ist in XD genauso wie in Figma, aber es möchte dich trotzdem durch die einzelnen Schritte führen, weil es einige Unterschiede gibt , wenn du so etwas erstellen oder wiederverwenden möchtest . Und genauso wie bei Adobe XD-Vorlagen erhalten Sie auch Figma-Vorlagen. Du kannst mit ihnen herumspielen. Sie können sie verwenden und für Ihre eigenen Projekte wiederverwenden . Gehen wir also zu Figma und lassen Sie mich Ihnen zeigen, wie diese Vorlagen aussehen. Also hier sind wir in Figma und hier, wie Sie sehen können, haben wir das kurze Wesentliche und wir haben unseren Brief. Und im Grunde ist es genau die gleiche Geschichte wie in Adobe XD, wie bereits erwähnt. Wenn du also etwas ändern willst, wenn du etwas bearbeiten willst, ist es genau das Gleiche. Also nur die Tools sind hier oben und nicht genau hier. Und trotzdem haben Sie Ihr Eigenschaftenfeld genau hier auf der rechten Seite. Wenn wir hier genau hinschauen, haben wir die lokalen Stile. Das sind Ihre Textstile und das sind die Textilien, die ich aus den Dokumenten selbst übernommen habe . Die gleiche Geschichte wie bei Adobe XD ist, dass sie sich nur auf dieser Seite befinden. Nun, in Figma befinden sie sich genau hier. Und es wird alles lesen, sich in diesen Dateien befindet. Und wenn Sie dann auf einen Rahmen klicken, haben wir in diesem Fall Frames, weil wir unsere Boards nicht in Figma haben. Dann werden die Auswahlfarben verwendet, d. h. die Farben, die sich innerhalb dieses Rahmens befinden. Aber wenn ich nach draußen klicke , kehren wir zu den lokalen Stilen zurück. Denken Sie jetzt daran, denn diese Vorlagen sind einfach und zwecklos. Später, wenn wir zu einem Design kommen, werde ich einige fortgeschrittenere Techniken zeigen. Aber vorerst wird es für Design-Briefings, für Projektvorschläge und für Persona-Vorlagen für Projektvorschläge und für Persona-Vorlagen, super einfach sein , weil es mit einem Zweck erstellt wurde, um supereinfach zu sein, weil Sie es verwenden und sehr schnell wiederverwenden können. Also hier haben wir die Hintergrundfarbe, die insgesamt die Hintergrundfarbe ist. Dann haben wir die Textstile und Sie können den Informationstext und die Titel der Haupttextabschnitte sehen . Also die gleiche Geschichte wie zuvor, ich benenne und benenne gerne alle meine Ebenen um. Dann haben wir das Hauptgrau, wir haben das Dunkelgrau und wir haben die Striche in all den Farben, an die Sie in Bezug auf die Bearbeitung bereits gewöhnt sind an die Sie in Bezug auf die Bearbeitung bereits gewöhnt Wenn ich etwas auswähle, wird es genau hier angezeigt. Also lass mich zu mir selbst finden, damit du ein bisschen besser sehen kannst. Worüber ich hier spreche, im Grunde können Sie hier sehen dass der Text ausgewählt wurde. Ein kurzes Muss ist nicht die Zeichenplatte, sondern der Rahmen selbst. Es wurde ausgewählt und hier können Sie sehen, wie es positioniert ist. Hier haben wir also den Seitentitel, der eigentlich dem Stil dieses Textes entspricht. Und dann haben wir das Hauptgrau, das ist die tatsächliche Farbe dieses Textes. Wenn du etwas ändern möchtest , kannst du hier klicken. Und Sie können sehen, dass es den Seitentitel hat , der 148 Pixel und automatisch ist. Und du willst es ändern. Sie können hier klicken, um etwas zu bearbeiten , und Sie können den Namen bearbeiten. Sie können die Schrift sehen, Sie können sehen, dass die Fettschrift ist, die Textausrichtung erfolgt automatisch und so weiter und so fort. Und die gleiche Geschichte gilt für die Farben. Sie können einfach hier klicken. Und das sind die Farben im Dokument. Und hier sind die persönlichen Farben, die Figma Ihnen vorschlägt, wenn Sie sie in die Farben ändern möchten sie in die Farben ändern möchten , die Figma hier vorschlägt. Aber wenn nicht, können Sie einfach hier klicken und es geht zum Hauptgrau. Und hier haben Sie die Eigenschaften, hier haben wir die Opazität. Du kannst es verstecken, einblenden und so weiter und so fort. Schließlich haben wir dieses Linksymbol. Und wenn du es abtrennen willst, so ist es geworden, es geht in sein eigenes Eigentum über. Sie können dort sowohl für die Farbe als auch für die Schriftart klicken und es wird von dort getrennt. Aber was die Gesamtstruktur angeht, scheint mir, als wenn x D. Also hier haben wir den Titel, hier haben wir all diese anderen Texte. Das ist für das kurze Wesentliche. Und in diesem Video erfahren Sie mehr darüber, was in jedem dieser Videos enthalten ist. Denn jetzt, wo Adobe Figma gekauft hat, Figma wirklich bald fast genau so, wie es jetzt XD ist, nur mit all diesen Figma-Funktionen und zusätzlichen Adobe-Funktionen wie Creative Cloud Libraries und vielem mehr. Im Grunde werden Sie XD-Dateien in Figma sehr bald öffnen können . Aber ich wollte dir diese Videos trotzdem zeigen , während der Übergang stattfindet , da es bis zu einem Jahr oder vielleicht zwei Jahre dauern kann . Hier in unserem Brief haben wir den gleichen Titel. Sie können sehen, dass es Beach Title heißt und diese graue Hauptfarbe hat. Aber hier sind die Dinge ein bisschen anders. Wenn ich das hier hervorhebe, können Sie sehen, dass wir es hier dieser Gruppe und hier mit einigen Einschränkungen zu tun haben. Sie können ein automatisches Layout erstellen, wenn Sie möchten. Aber hier haben wir Abschnitte und sie befinden sich innerhalb des automatischen Layouts, und Sie können es hier sehen. Nun sind Layered im Grunde auch Stapel in Adobe XD. Es ist nur so, dass sie vielleicht noch ein oder zwei weitere Optionen in Figma haben, die wir in Adobe XD nicht haben. Sie können sehen, dass sie vertikal positioniert sind und ihre Position von oben links, was die Ausrichtung ist, von der sie kommen. Also das hier und innerhalb dieser Abschnitte haben wir alle separaten Abschnitte. Und der Abstand zwischen jedem dieser Abschnitte beträgt 60 Pixel , die Sie hier sehen. Und Sie können es auf 40 Pixel positionieren, z. B. können Sie sehen, was das bewirkt, aber ich belasse es bei 60 Pixeln. Noch einmal. Sie können diese Projektdatei öffnen. Du kannst damit herumspielen. Sie können es erkunden und sehen und ein bisschen tiefer in die Materie eintauchen, wie ich all das geschaffen habe. Jetzt hat jeder dieser Abschnitte seine eigene Struktur. Wenn ich es also öffne, können Sie sehen, dass wir die Projektfrist haben. Also die gleiche Geschichte wie in Adobe XD. Und wenn ich etwas näher hineinzoome, innerhalb dieser Projektfrist haben wir innerhalb dieser Projektfrist das Unternehmen und das ist das Symbol, und dann haben wir die Projektfrist selbst. Wenn ich nun die Projektfrist auswähle, können Sie sehen, dass wir ein separates automatisches Layout haben. Jetzt ist diese Zeit horizontal. Es ist von der linken Ausrichtung zur Mitte positioniert. Und hier haben wir den Abstand zwischen den Elementen. Also zwischen diesem und dem, wenn ich den Mauszeiger bewege, können Sie sehen, dass es 40 Pixel sind. Jetzt kannst du diese kleine rote Linie genau hier auswählen und sie nach links und rechts verlängern, wenn du möchtest. Also einfach klicken und ziehen und schon wird es erweitert. Aber ich persönlich ziehe es vor, meine runden Werte hier zu schreiben. Also z. B. 60 Pixel, das wird genau das tun. Schließlich noch für jeden von diesen, also für den Projektabschluss, können Sie z.B. sehen, dass wir hier das automatische Layout in vertikaler Richtung bei 40 haben . Also, wenn ich das auf 60 setze, kannst du sehen, was das spezielle Ding macht. Natürlich, weil sie sich alle innerhalb des automatischen Layouts befinden. Wenn ich das auf, lass uns mal 100 einstellen, werden sie alles runterdrücken, weil sich alles innerhalb seines eigenen automatischen Layouts befindet. Aber wenn ich zurückgehe, können Sie sehen, dass dieser Abschnitt jetzt zusammengefasst wird. nun diese Symbole betrifft, so können Sie, wenn Sie unser Briefing oder etwas innerhalb unseres Briefrahmens auswählen, zu Assets wechseln. Und hier haben Sie Ihre kurzen lokalen Komponenten für diese speziellen Symbole. Jetzt können Sie Ihr eigenes Symbol zeichnen, das wie ein X-Y aussieht. Sie können Symbole austauschen und Abstände zwischen Symbolen erstellen. Und darüber werden wir etwas später sprechen, wenn wir zum Design kommen. Aber im Grunde sieht das so aus. Und zum Schluss wechseln wir zu den Ebenen. Wählen wir den Zeitrahmen aus und lassen mich Ihnen zeigen, wie dieser erstellt wurde. Also im Grunde haben wir hier nichts Ausgefallenes. Wir haben nur einen Kreis und wir haben einen Start- und Enddatumskreis. Wenn ich es auswähle. Genau hier können Sie sehen, dass wir unseren Strich haben und er zeigt uns, dass er verknüpft ist, aber er ist nur mit der Farbe des Strichs verknüpft. Du kannst den Farbstrich genau hier sehen , wenn ich mich verstecke. Damit du es ein bisschen besser sehen kannst. Und hier haben wir die Füllfarbe, das ist diese weiße Farbe. So einfach ist es also, damit zu arbeiten. Und wie ich bereits erwähnt habe, ist es genau das Gleiche wie in Adobe XD. Jetzt haben wir nur diese Dokumente innerhalb der Frames und nicht die Flughäfen, wie wir es von Adobe XD gewohnt sind, also los geht's. Du wirst diese Akte bekommen. Du wirst es in Figma öffnen und es selbst erkunden können. Ich möchte nur dieses kurze Video erstellen , um einige Unterschiede zu zeigen. Sie werden auf Figma-Dateien stoßen , die Adobe XD hat und umgekehrt. Ich ermutige Sie, mit diesen Dateien herumzuspielen , sie zu öffnen, sie ein bisschen genauer zu erkunden, nur um sich mit Figma vertraut zu machen. Aber wenn Sie jemals etwas in Adobe XD geöffnet haben, wenn Sie für einen kurzen Zeitraum in Adobe XD gearbeitet haben, werden Sie hier und da einige Unterschiede feststellen, aber die Tools sind im Grunde genau dieselben. Und das ist der springende Punkt hier. Ich wollte diesen Adobe XD-Inhalt auch nicht für Figma neu erstellen . Ich wollte nur diese Videos erstellen , die dich durch das führen, was dasselbe ist Was ist der Unterschied zwischen diesen Dateien? Weil ich deine Zeit nicht verschwenden möchte weil diese Tools im Grunde genau die gleichen sind. Und jetzt, wo Adobe Figma ist, werden sie später genau die gleichen sein. Das war's im Grunde genommen für dieses Video Schauen Sie sich unbedingt die Vorlage an. Es ist an die Kursprojektdateien angehängt. Stellen Sie sicher, dass Sie es öffnen und stellen Sie sicher , dass Sie die Figma-Vorlagen für jeden Abschnitt dieses Kurses öffnen , dass Sie die Figma-Vorlagen für jeden Abschnitt , um die Unterschiede zwischen Adobe XD-Dateien und Figma-Dateien zu überprüfen . 17. ABSCHNITT 3 Projektvorschläge: Projektvorschläge sind ein unglaublich wichtiger Bestandteil jeder Projektpipeline für freiberufliche Designer, denn Sie möchten Ihren Kunden nicht einfach die Preise schicken und sagen: Los geht's, Sie möchten diese Preisgestaltung knacken , damit sie leicht verstehen können , wofür sie dich bezahlen. Sie möchten es verdauen, damit sie ganz einfach verstehen , woran Sie an diesem Projekt gearbeitet haben. Wie lange wird es dauern? Wie lange wird jeder Teil des Projekts tatsächlich kosten. Warum machst du all diese Schritte? Welche Schritte sind eigentlich in diesem Designprozess erforderlich? Also alles, was wir in diesem Abschnitt behandeln werden , und ich werde Ihnen tatsächlich eine Vorlage zeigen , die Sie verwenden können. Und ich gebe Ihnen diese Vorlage, damit Sie sie in Ihren zukünftigen Projekten verwenden können , nur um Ihren Prozess ein wenig zu beschleunigen und ihn für Ihre Kunden ein bisschen glaubwürdiger aussehen zu lassen . Also lass uns anfangen. 18. Was ist ein Projektvorschlag: Einer der größten Fehler, den ich sehe, besonders junge Designer machen ist, dass sie die Projektvorschläge nicht einreichen. Aber wenn der Kunde auf sie zugeht und sie nach einem Preis für das Projekt fragt, sagen sie einfach, dass das Website-Design 2.000$ kostet, aber die Kunden verstehen es normalerweise nicht, weil sind sie selbst keine Designer meisten Fällen sind sie selbst keine Designer. Und sie verstehen nicht, was bei diesem speziellen Website-Designprojekt ein angepasstes Design geht. Codiert es? Ist es ein WordPress-Theme? Sie haben von etwas namens Wix gehört, z. B. oder einem Webflow. Was ist im Preis enthalten und in dem, was Sie ihnen anbieten. Sie müssen jedes Detail erklären , um Ihren Preis zu rechtfertigen. Das lässt Sie als Designer professionell und ausgefeilt aussehen , und im Gegenzug wird Ihr Kunde besser verstehen, was er tatsächlich an diesem Website-Designprojekt beteiligt ist. Nun, das muss nicht nur das Design der Website beinhalten. Es kann App-Design, Broschürendesign, Logo-Design sein, was auch immer Sie tun, Sie müssen Ihren Kunden erklären , was Sie ihnen genau für den von Ihnen gewünschten Preis anbieten . Genau das ist der Designvorschlag. In diesem Kurs werden wir über den Vorschlag für ein UI UX-Design sprechen über den Vorschlag für ein UI UX-Design , da dies Teil einer Designwelt und einer Designsphäre ist, die sich wirklich von beispielsweise Logo-Design oder Broschüre unterscheidet . Design, weil es wieder verschiedene Schritte beinhaltet , um zur Lösung zu gelangen, nämlich Website-Design, App-Design und ähnliches. In diesem Kurs werden wir also über Vorschläge für UX-Design für Benutzeroberflächen sprechen . Aber was auch immer Sie tun, in welcher Branche oder welchem Design Sie tätig sind, Sie können dasselbe Prinzip anwenden. Passen Sie sie einfach an Ihre eigene Designnische an, Ihre eigene Designsphäre, was auch immer Sie tun, und folgen Sie ihnen einfach für Ihre zukünftigen Kunden. 19. Wann solltest du es senden: Wann genau sollten Sie Ihren Kunden Ihr Angebot schicken ? Nun, zuerst muss es mit der Entdeckung, dem Anruf oder der E-Mail beginnen . Wenn sich Ihre Kunden also an Sie wenden, leiten Sie sie per E-Mail weiter, z. B. zu Zoom oder Google Meet, Skype, was auch immer Sie verwenden. Oder Sie können diese E-Mail-Konversation einfach fortsetzen, wenn Sie sich vor der Kamera oder beim Sprechen mit dem Mikrofon nicht wohl fühlen , wenn Ihr Englisch nicht wirklich gut ist, dann sammeln Sie alle diese Informationen darüber, was sie für dieses spezielle Projekt tatsächlich tun müssen. Und du musst ihnen eine Reihe von Fragen stellen und du kannst meine UX-Tutorials und -Kurse für UI überprüfen, insbesondere meine Adobe XD-Masterclass. Denn darin gehe ich wirklich ausführlich Design-Briefing ein und auf einige Fragen , die Sie Ihren Kunden stellen sollten, um ein perfektes Bild davon zu bekommen , was genau sie dazu benötigen. bestimmtes Projekt. Sobald Sie all diese Fragen gesammelt und all diese Antworten gesammelt haben, ist es an der Zeit, mit der Vorbereitung dieses UX-Designvorschlags für die Benutzeroberfläche zu beginnen . Darin werden Sie alle Dienstleistungen einbeziehen , die Sie Ihrem Kunden für dieses bestimmte Projekt anbieten werden . Also zum Beispiel, wenn du Projektrecherchen machst, wenn du Persona-Interviews führst, wenn du Persona-Recherchen machst, wenn du Papier-Wireframes machst, Wireframes in Adobe XD, weil ich Wenn Sie Adobe XD verwenden, geht es in dieser Klasse um Adobe XD, aber es kann alles sein, es kann Illustrator sein, es kann Sketch, Figma sein , was auch immer Sie verwenden, stellen Sie sicher, dass all diese Details enthalten sind . Und dann natürlich das UI-Design, der Asset-Export, Ihre Zeit, die Sie für dieses Projekt aufwenden, denn das ist die eine wichtige Sache, die die meisten Designer übersehen. Die Zeit, die Sie für dieses Projekt aufwenden, sei es das Senden von E-Mails, Telefonanrufen, Videogesprächen mit Ihren Kunden über Zoom Skype oder Google Meet oder was auch immer. All diese Dinge sollten in den Vorschlag für ein Schuldenprojekt aufgenommen werden . Denn auf diese Weise werden die Kunden verstehen, was genau Sie ihnen für ein Praktikum in Rechnung stellen, wie ich schon sagte, es wird Sie ausgefeilter und professioneller aussehen lassen. Und wieder einmal werden sich die Kunden ein klares Bild davon machen was jeder einzelne Dollar ist , den Sie für sie verlangt haben Wohin fließt er? Stellen Sie also sicher, dass Sie Projektvorschläge senden. Und im nächsten Video werden wir untersuchen, wie man ein Video in Adobe XD erstellt. Und ich werde Ihnen zeigen, was meiner Meinung nach und nach meiner Erfahrung einige wichtige Dinge sind, die Sie tatsächlich in Ihre Projektvorschläge aufnehmen sollten . 20. Erstellen eines Projektvorschlags in Adobe Xd: Wie ich bereits sagte, ich bin Adobe XD-Benutzer und ich liebe es wirklich. Ich benutze es seit Jahren jeden Tag. Und in diesem Kurs werde ich Ihnen zeigen, wie Sie Ihren eigenen Projektvorschlag erstellen sollten und welche Fragen Sie Ihren Kunden stellen welche Dienstleistungen Sie sollten es Ihren Kunden anbieten. Schauen wir uns also Adobe XD und ich werde Ihnen zeigen, was ich verwende. Hier ist der Vorschlag für das Mike-Projekt. Und das ist eigentlich der Projektvorschlag, den ich erstellt habe. Ich habe es als Produkt entworfen und Sie können dieses Produkt tatsächlich bekommen, wenn Sie möchten. Wirklich symbolischer Preis, ich werde den Link im PDF hinterlassen. Sie können einfach auf diesen Link klicken und ihn in einer Breite erhalten, einen enormen Rabatt, wenn Sie möchten. Wenn nicht, kannst du einfach diesem Kurs folgen und deinen eigenen mit deinen eigenen Fragen, Antworten und allem dazwischen erstellen . Also werden wir jedes davon in separaten Lektionen behandeln . Aber ich wollte nur kurz durchgehen und Ihnen zeigen, warum ich Adobe XD verwende und warum ich all diese Dinge so eingerichtet habe, wie ich es getan habe. Zunächst können Sie diese Flughäfen erstellen. Und dieser Aufwärtstrend beträgt 1920er mal 2.500, was nicht wirklich ideal für den Druck ist. Aber in der heutigen Zeit senden Sie sowieso die meisten Ihrer Vorschläge per E-Mail. Das habe ich in meiner jahrelangen Erfahrung herausgefunden, ich habe fast 15 Jahre in diesem Geschäft. Ich fand, dass abgelegte Typen dieser Größe sowohl zum Drucken als auch zum Versenden per E-Mail sehr gut geeignet sind. Und um Ihnen zu zeigen , dass dies genau diese Vorlagen sind, die wir Ihnen nur in XD zeigen. Also das habe ich einfach gemacht und auf ein A4-Papier gedruckt. Und Sie können z. B. sehen, dass dies die Projektpreise sind. Sie können die Qualität sehen und Sie können sehen, wie sie aussieht. Und ich kann Ihnen in diesem Projekt auch Details zeigen, z. B. damit Sie es deutlich sehen können, obwohl es sich sehr gut liest und es wirklich davon abhängt, ob Ihr Kunde vor Ort ist? Gibst du ihnen das persönlich oder schickst du diese Dateien per E-Mail? Deshalb habe ich gesagt, dass Adobe XD großartig ist weil es ein vektorbasiertes Tool ist, was bedeutet, dass all diese Dinge, die Sie entwerfen, niemals an Qualität verlieren werden. Und sie sind nicht pixelbasiert, wie Photoshop , also würde ich die Verwendung von Photoshop nicht empfehlen und raten . Ich würde Ihnen empfehlen, Adobe XD zu verwenden. Außerdem hat Adobe XD diese erstaunliche Funktion integriert. Wie Sie sehen, können Sie einen Prototyp entwerfen und das Innere des Designs teilen. Sie können all diese Dinge entwerfen, die Sie auf dem Bildschirm im Inneren des Prototyps sehen . Sie können tatsächlich all diese Details verbinden. Wenn Sie unseren Prototyp bauen möchten und Kunden sich tatsächlich durchklicken können. Sie können diesen Link an sie senden. Sie können sich durchklicken und auf verschiedene Seiten zugreifen, wenn Sie diese als benutzerdefinierte Website erstellen möchten, z. B. ist keine Codierung erforderlich, aber es sieht so aus, als ob es eine gibt. Und es verleiht Ihrem Design eine weitere zusätzliche Ebene an Professionalität und Persönlichkeit. Endlich gibt es einen Anteil. Was auch immer Sie in einem Prototyp tun, Sie können in den Tab Teilen springen. Sie können einen Link generieren und diesen Link dann an Ihre Kunden senden , wenn Sie möchten. Deshalb liebe ich Adobe XD weil ich es für all meine Arbeiten verwende, UX-Designarbeiten und einige Arbeiten, die nicht UI UX sind, wie Social Media-Arbeit, z. B. aber was auch immer Sie erstellen, ob App-Design, Website-Design, Produktdesign, was auch immer Sie tun, dann können Sie ganz einfach Prototypen erstellen und alles von Adobe XD aus teilen. Und deshalb benutze ich es gerne. Wie Sie sehen, haben wir auch all diese globalen Komponenten. Also für dieses spezielle Design und diese Vorlage können Sie, wie ich schon sagte, dieses bekommen. Auch hier wird der Link in einem PDF sein. Einfach klicken und darauf zugreifen. Sie können z. B. mit der rechten Maustaste auf diese H1-Farbe klicken, Sie können auf Bearbeiten klicken. Nehmen wir an, die Farbe Ihres Kunden ist, sagen wir drei, E, C6, f, f, z. B. drücken Sie einfach Enter oder Return. Und wie Sie sehen, wurden mit nur einem Klick all diese globalen Änderungen auf diese spezielle Farbe angewendet . Das kannst du mit all diesen Farben machen. Und ich würde Ihnen wirklich raten, wenn Sie diese Vorlage am Ende des Tages verwenden, wann immer Sie eine Änderung vornehmen, einfach diese Hex-Farbe auszuwählen, die Sie für Ihr Kundenprojekt. Drücken Sie den Controller-Befehl C, klicken Sie hier mit der rechten Maustaste, klicken Sie auf Umbenennen und ändern Sie einfach klicken Sie auf Umbenennen und ändern Sie einfach diesen ursprünglichen Hex-Code durch Ihren neuen Hex-Code. Auf diese Weise wird es in Echtzeit aktualisiert und Ihren Kunden zeigt , dass Sie wirklich, wirklich auf die kleinen Details geachtet haben. Dies soll Ihnen erneut eine viel bessere Möglichkeit bieten , diesen Kunden und dieses Projekt zu gewinnen. Denn wieder einmal, Sie werden sich als Profi aus dem Meer dieser Amateurdesigner abheben sich als Profi aus dem Meer dieser Amateurdesigner abheben dem Meer dieser Amateurdesigner , die einfach 500$ oder 5.000$ für eine Website verlangen, ohne es jemals zu erklären was tatsächlich in diesem Prozess involviert ist. Darunter haben wir Charakterstile. Und du kannst diese Charakterstile tatsächlich ändern , wie ich es dir mit den Farben gezeigt habe. Und wir haben all diese Icons. Und ich gebe dir den Link zu diesen Icons, wenn du sie kaufen möchtest , ihre Premium-Icons. Aber wenn du es nicht tust, ist es in Ordnung. Sie können einfach jede Art von kostenlosen Icons verwenden, die Sie möchten. Und schließlich haben wir die Komponente für die Fußzeile. Wir haben also die übergeordnete Komponente, die genau hier diese Hauptkomponente ist. Und dann sind all diese anderen Fußzeilenkomponenten diese anderen Fußzeilenkomponenten tatsächlich untergeordnete Komponenten. Wenn Sie also eine Änderung an dieser Komponente vornehmen, die eine übergeordnete Hauptkomponente ist, wird sie sich tatsächlich anpassen und ändern und all diese verschiedenen Flughäfen überqueren. Die erste Seite dieses Projektvorschlags ist also das Cover. Und im nächsten Video werden wir behandeln, was tatsächlich auf dem Cover enthalten ist. Also werde ich dich dort sehen. 21. Proposal: In diesem Video werden wir über das Cover von Vorschlägen sprechen. Also hier ist es, und lassen Sie mich kurz durchgehen und erklären, was alles ist. Wenn wir also hier von meinem Asset-Panel zu meinem Ebenen-Panel wechseln und klicken, können Sie sehen, dass die Projektorganisation gut ist und alles leicht erreichbar ist. Also, was das eigentlich der Name eines Teilprojekts ist , dort geben Sie Ihren Projektnamen ein. Wenn das z. B. unsere Auto-Website ist, sagst du zum Beispiel unsere Neugestaltung unserer Website oder etwas Ähnliches. Stellen Sie jedoch sicher, dass Sie den genauen Projektnamen eingeben , da dies erneut Vertrauen bei Ihren Kunden ausstrahlt. Und es wird Sie wirklich von all diesen anderen Designern unterscheiden , weil Sie auf diese kleinen Details geachtet haben , darunter haben wir den Firmennamen. In diesem imaginären Beispiel wird es also Audi sein, unabhängig von der Unternehmenswebsite, audi.com, und die Firmenadresse ist Ihre lokale Adresse dieses Audi-Händlers. Das ist natürlich nur ein Beispiel. Sie geben Ihre Kundeninformationen ein. Und das Tolle daran ist, wenn Sie diesen Namen wählen und sagen wir zum Beispiel Audi, Neugestaltung der Website. Da ich das Padding hinzugefügt habe, wird es beim Tippen erweitert. Wenn Sie jedoch kein Padding wünschen, können Sie einfach diese Projektinformationen auswählen. Sie können sehen, dass die Polsterung genau hier überprüft wurde. Sie können es einfach deaktivieren und dann wird es beim Tippen nicht erweitert. Einfach nicht dahinter stehen zu wollen, ist ein Bild. Und ich würde Ihnen wirklich raten, ein Hintergrundbild des Angebots von ihrer bestehenden Website, den ein Hintergrundbild des Angebots von sozialen Medien, der LinkedIn-Seite, dem YouTube-Screenshot, was auch immer sie haben, beizufügen. Noch einmal, nur um ihnen zu zeigen , dass Sie wirklich auf die Details achten. Sie könnten sich wirklich wie zu Hause fühlen, als ob dies wirklich auf ihr Unternehmen und ihre Bedürfnisse zugeschnitten ist. wie es ist, was es im Grunde auch ist, aber du zeigst ihnen einfach wie du dieses und jenes wirklich gestalten kannst und dass du dir wirklich um ihr Geschäft kümmerst und ihnen hilfst. Darunter haben wir die Fußzeile und was ich zuvor erklärt habe. Also, wenn du hier keine eigene Website hast, kannst du z.B. deine kannst du z.B. Behance-Adresse und dein Beacons-Profil , dein Dribble-Profil, dein Upwork-Profil, was auch immer du tust, was auch immer du tust, was auch immer du mache es, du kannst es einfach hier eingeben. Was ist noch einmal, stellen Sie einfach sicher , dass Sie diese Schriftarten installieren. Und ich werde die Links zu den Schriften auch in einem PDF belassen. Wenn du sie auschecken möchtest, dann haben wir die E-Mail. Offensichtlich ist dies nur die Standardeinstellung. Sie geben Ihre E-Mail-Adresse und wir haben einen Kontakt, dann können Sie dort Ihre Kontaktinformationen eingeben. Sie können das WhatsApp-Symbol hier oder Viber-Symbol hinzufügen, wenn Sie einen dieser Dienste verwenden . Und im Grunde ist es das, wenn Sie sie hier in diese erste Fußzeile aufnehmen , wie erklärt, dies als übergeordnete Komponente, sie wird automatisch für all diese Elemente aktualisiert. Also, wenn ich dir das zeige, sagen wir, das ist Alex auf indesign.com, was meine Website ist. Wenn ich das eintippe, können Sie sehen, dass es auf all diese Seiten angewendet wurde, was der Sinn der Hauptkomponenten ist. So einfach sind sie also zu bedienen. Das ist im Grunde eine Sache weniger, die ich erwähnen wollte , ist, dass genau hier ein Netz involviert ist, wie Sie deutlich erkennen können. Wenn du also den Namen der Zeichenfläche auswählst, kannst du genau hier sehen, lass mich mich verstecken. Wir haben also 12 Spalten. Die Dachrinnenbreite beträgt 60, was dem Abstand zwischen diesen Säulen entspricht. Die Spaltenbreite ist A2, was der Breite dieser Spalten entspricht. Und schließlich haben wir die Ränder links und rechts miteinander verbunden. Ränder sind einfach dieser Abstand von dieser letzten Spalte auf der rechten Seite und dieser letzten Spalte auf der linken Seite. Also Abstand zwischen dem Rand der Zeichenfläche und der Spalte selbst. Also im Grunde war's das für das Cover. Und wie Sie sehen, kann es wirklich wichtig sein, die richtige Farbe zu wählen. Und wenn Sie gleich hier mit der Anpassung beginnen, wird es problemlos auf diese anderen Seiten übersetzt werden können. Und noch eine letzte Sache, die Sie hier beachten Sie können sogar ein eigenes Logo hinzufügen wenn Sie das Include-Logo identifizieren möchten. Aber wenn Sie möchten, können Sie ihr Logo dort platzieren Dies ist nur eine zusätzliche, zusätzliche Anpassungsebene und eine wirklich zusätzliche Ebene, um zu zeigen, dass Sie sich interessieren. Im nächsten Video werden wir über Projektdetails sprechen. Also werde ich dich dort sehen. 22. Projektdetails: Projektdetails sind einer der wichtigsten Bestandteile Ihres UX-Designvorschlags für die Benutzeroberfläche. Schauen wir es uns also an und sehen, was Sie tun können, oder? Also hier ist meine Projektdetailseite, wie Sie hier sehen können. Wenn ich Sie also zu einigen Details führe, wenn ich zuerst hier klicke, haben wir den Seitentitel und wir haben dieses Symbol genau hier. Aber wie ich bereits erwähnt habe, können Sie Ihre eigenen Icons verwenden. Sie können Symbole ändern , da sie als Komponenten erstellt werden , wenn ich sie hier auswähle. Also habe ich diesen eigentlich nicht als Komponente hinzugefügt, lassen Sie mich Control K drücken, um ihn zu erstellen. Also, wenn ich es z.B. gleich hier hochschalten möchte, kann ich einfach diese Komponente hinzufügen, z.B. dieses Symbol. Und es wird in Echtzeit aktualisiert und dieses vorherige Symbol durch dieses vorhandene Symbol ersetzt. Das ist also dein Projekttitel. Und wir haben uns genau hier geteilt. Und zum Beispiel können Sie sogar den Projektnamen hinzufügen , wenn Sie möchten, aber ich werde Sie nicht wirklich mit diesen Informationen belästigen. Also z. B. Audi-Website überarbeiten Projektdetails, wenn Sie möchten, aber ich denke, das ist gerade gut genug. Wie Sie sehen, gibt es keine Seitenzahlen da Sie wirklich einzelne Seiten auf einmal exportieren können , wenn Sie möchten, wenn sie nur Projektdetails benötigen, dann hat es wirklich keinen Sinn Nummer zwei zu haben, z.B. Nummer drei oben drauf zu haben, denn was ist das, was ist das eigentlich? Sie können es also ohne Projektnummern und Seitenzahlen exportieren und es kann trotzdem einwandfrei funktionieren. Also, was wir hier haben, ist das Projekt Oreo. So können wir Beschreibungsseiten projizieren, um ein responsives Design und einen Projektzeitplan zu entwerfen. Das alles hat natürlich seine Bedeutung und es ist wirklich wichtig. Projektbeschreibung ist das, was Sie mit Ihrem Kunden tatsächlich per E-Mail vereinbart haben. Wir sind Discovery Call und solche Sachen . Seiten zum Gestalten. Oder das können Screens to Design sein wenn Sie Mobildesign machen. Das sind Seiten, für deren Gestaltung Sie sich bereit erklärt haben, ein responsives Design. Und natürlich nur noch eine Notiz auf den Seiten zum Gestalten. Wenn zusätzliche Seiten entworfen werden müssen, wird dies in der Forschungsphase erfolgen. Und dann kannst du einfach hier ein Sternchen setzen und z. B. sagen: „Wir haben diese zusätzlichen Seiten immer noch nicht besprochen , nachdem wir damit fertig sind, dann können wir wahrscheinlich z.B. die Preise anpassen und solche Sachen. Achten Sie also einfach auf dieses ansprechende Design. Wenn Sie Responsive Design akzeptiert haben , sollten Sie natürlich unbedingt mit den Entwicklern über die genauen Größen für responsives Design sprechen . Und schließlich der Projektzeitplan. Wann wird es beginnen? Wann ist der Mittelpunkt und wann wird er enden? Die sind natürlich extrem wichtig für jedes Projekt, an dem Sie gerade arbeiten. Es gibt eine Website, die einseitig oder mit 100 Seiten ist. Es spielt keine Rolle. Es ist extrem wichtig. Dann haben wir den Projektzeitplan. Also, wie lange werde ich bei all diesen Dingen brauchen, um jedes dieser Dinge zu erledigen? Also z. B. zehn Tage, 20 Tage, 16 Tage, acht Tage, das sind die Revisionen. Überarbeitungen hängen also immer von Ihrer Geschwindigkeit und der Geschwindigkeit Ihrer Kunden ab, um Ihnen das Feedback zu geben. Also zum Beispiel wenn sie brauchen, sagen wir drei Tage, um dir Feedback zu geben , weil sie sich bei ihren Partnern, Geschäftspartnern und ähnlichem erkundigen müssen. Dann wird es natürlich viel länger dauern, bis Sie das Endergebnis, die endgültige Überarbeitung, vorlegen. Deshalb habe ich immer gesagt, wie Sie hier sehen können, es heißt acht plus acht plus diese und plus hängt wirklich von ihnen ab, wie schnell sie sind. Schließlich haben wir insgesamt 54 Tage Projektzeit unterrichtet . Das Plus ist wieder einmal das Revision Plus. Das war's also im Grunde für die Struktur. Und jetzt lassen Sie mich Ihnen kurz erklären , wie das alles eingerichtet ist. Wenn wir also zum Projekt oder zur Überprüfung gehen und das öffnen, haben wir den Titel, der genau hier ist. Sie können das also ändern oder Sie können einstellen, was Sie wollen. Dies sind die Details, auf die wir uns bei unseren E-Mail- und Telefongesprächen geeinigt haben . Wenn Sie diese Vorlage also erneut kaufen, befindet sich der Link in einem PDF. kannst du ändern. Wenn Sie keinen Anruf mit ihnen hatten, haben Sie nur eine E-Mail-Konversation mit ihnen geführt, dann können Sie diese Anrufkonversation daraus entfernen. Und nur eine kurze Notiz. Wenn Sie am Ende genau diese Vorlage verwenden oder am Ende genau dieselbe Vorlage neu erstellen , die ich Ihnen zeige. Stellen Sie sicher, dass Sie es an Ihre Bedürfnisse anpassen und was Sie tatsächlich benötigen. Also, wie ich hier erwähnt habe, leisten Sie sich den Anruf. Stellen Sie sicher, dass Sie jeden dieser Punkte durchgehen und ihn einfach für jeden einzelnen Kunden anpassen, da Sie ungefähr 1 Stunde benötigen, um all dies zu erledigen , und es wird sich wirklich auszahlen, wenn kommt Ihren Kunden, Ihrer Professionalität und der Kundenzufriedenheit zugute. Wenn wir also wieder hierher wechseln, wollte ich Folgendes zeigen. Das sind also die Gegenstände. Das sind also diese Gegenstände und wie Sie sehen können, sind sie in einem vertikalen Stapel von 40 enthalten. Das ist also die Entfernung. Wenn ich es also auf 80 einzähle, z. B. wie Sie sehen können, wird der Abstand zwischen all diesen Elementen größer sein . Und schließlich, weil es in einem Stapel ist und es ein fantastisches Feature von Adobe XD ist. Wenn ich zum Beispiel diesen Projektzeitplan nehme und sagen wir, ich möchte ihn über das Responsive Design verschieben. Was ich tun kann, ist einfach hier direkt zu klicken, es zu ziehen, zu positionieren. Und wie Sie sehen, wechselt es automatisch die Plätze zwischen diesen beiden. Was jetzt auch wichtig ist, liegt zwischen diesen beiden. Es gibt also eine klare Entfernung. Also genau hier haben wir den Stapel von 100. In diesem Hauptstapel haben wir also diese beiden. Also Projektübersicht, welcher ist dieser, und Projektzeitplan, der ist dieser mit einer Entfernung von 100. Das bedeutet also, wenn Sie in jedes dieser Elemente springen, also ob Projekt oder Ansicht oder Projektzeitplan. Und nehmen wir an, ich möchte diesen Projektzeitplan aus irgendeinem Grund entfernen . Ich klicke einfach darauf, lösche es, und dann wird der Inhalt unten automatisch nach oben verschoben, um das Feld auszufüllen. Das ist jetzt ein Wochenende, an dem ich das vorherige Element entferne. Und wenn ich den Mauszeiger hier bewege und dies auswähle, kannst du sehen, dass wir immer noch Abstand von 100 haben, was großartig ist. Wenn Sie eines dieser Elemente entfernen möchten, wir an, dass ich mit genau diesen Elementen arbeite. tun Sie nicht, und dann können Sie einfach jeden dieser Artikel entfernen , der nicht Ihren Bedürfnissen entspricht. Sie können das für jeden von ihnen tun, den Sie wollen. Also Seiten zum Gestalten, nehmen wir an, du hast nur eine Seite und hast sie gelöscht. Wie Sie sehen können, wird diese Änderung auf all diese Seiten und alle darin enthaltenen Elemente angewendet . Natürlich ist es mit dem Projektzeitplan genauso. Wenn ich also Elemente in der Timeline auswähle, klicke auf Löschen. Wie Sie sehen, wird die gesamte Projektzeit angepasst und einfach an eine Stelle mit diesem vorherigen Element verschoben , den ich gerade lösche. Dies ist natürlich äußerst wichtig, da Sie sie während Ihres E-Mail-Gesprächs, während Ihres Telefongesprächs, mit Projektdetails so oft wie möglich durchgehen sie während Ihres E-Mail-Gesprächs, während Ihres Telefongesprächs, mit Projektdetails so oft wie möglich während Ihres Telefongesprächs denn auf diese Weise werden Sie jeden Zweifel darüber ausräumen, was tatsächlich in diesem bestimmten Projekt enthalten ist. Also noch einmal, wenn ich Sie zurücknehme, können Sie Projektbeschreibungsseiten zum Design, responsives Design und Projektzeitplan sehen . Und natürlich können Sie hier alle gewünschten Artikel hinzufügen , z. B. die entworfen werden sollen. Ihr Vermögen, mein Vermögen, all diese Dinge. Sie können sie also hier einbeziehen, z. B. wenn Sie natürlich warten möchten. Sie sehen also, Projektrecherche, Konkurrenzforschung, Design-Briefing und Inspiration. Natürlich können Sie, wie ich bereits erwähnt habe , jedes davon entfernen und Ihre eigenen Elemente um genau zu erfahren, woran Sie bei diesem bestimmten Projekt gerade arbeiten . Weil nicht jedes Projekt da draußen dies erfordern wird. So kann es sein, dass zum Beispiel bereits Projektrecherchen für Sie durchgeführt wurden, sodass Sie Ihre Anzahl an Tagen reduzieren werden. Die Wettbewerbsforschung kann für Sie darauf datiert werden. Also noch einmal, Sie werden diese Tage reduzieren oder erhöhen je nachdem, wie schnell Sie tatsächlich an diesem bestimmten Projekt arbeiten . Als nächstes haben wir die Projektpreise. Ich werde Sie also im nächsten Video sehen, in dem wir die Projektpreise besprechen, warum sie wichtig sind und wie Sie sie tatsächlich in Ihren gesamten Projektvorschlag integrieren können . Also werde ich dich dort sehen. 23. Project: In diesem Video werden wir über die Projektpreise sprechen. Also schauen wir es uns an. Und hier ist es. Wieder einmal schienen Projektdetails und Projektabdeckung zu sein. Die Preisgestaltung von Projekten ist extrem wichtig, denn wenn es um Geld geht, sind Kunden normalerweise abstoßend, nennen wir es so. Und sie wissen nicht wirklich, worauf sie sich einlassen. Hier ist also der Projektvorschlag insgesamt nützlich, aber auch die Projektpreise auf einer separaten Seite. Lassen Sie uns also schnell durchspringen und sehen, was hier enthalten ist. Also wieder genau die gleiche Struktur. Ich werde dich nicht zu sehr mit diesen Details langweilen. Wie Sie sehen können, haben wir den Stapel von 81 Gruppen, ist diese hier für die Projektgebühren. Und die zweite Gruppe ist genau hier für Projektoptionen. Also, wann immer du einen dieser Gegenstände entfernst, wird er springen, wie ich es dir zuvor gezeigt habe. Also lass mich dir das noch einmal zeigen. Nehmen wir an, ich entferne diesen Artikel. Wie Sie sehen können, werden alle hochspringen, um den Raum zu füllen. Das ist jetzt Wochenende, an dem ich diesen Artikel entferne Apropos Artikel, wie Sie sehen können, haben wir Projektgebühren. Das ist es also, was ich zuvor zu zweit gesprochen habe, was wird das Vertrauen der Kunden ausstrahlen und ihnen wirklich erklären was genau im Detail das ist , wofür Sie tatsächlich Gebühren erheben dieses besondere Projekt. Wenn Sie also einen Blick darauf werfen, wir haben Projektrecherchen und Sie können tief in die Details gehen sie ihnen später während Ihres Telefonats erklären. Wenn du das mit ihnen besprechen möchtest oder per E-Mail, z.B. wenn sie dir sagen, was genau eine Projektrecherche ist, dann solltest du ihnen z.B. sagen, naja, ich muss dein Unternehmen recherchieren. Ich muss deine Konkurrenz untersuchen, was als Nächstes kommt. Wer ist deine Konkurrenz? Was bist du? Worauf steht die Natur? Was versucht Ihr Unternehmensprodukt mit dem Produktservice zu erreichen? Wer sind Ihre Zielkunden, z. B. wo sie sich befinden, an welchen Unternehmen arbeiten sie? Und all diese Dinge gehören zur Projektforschung, zum Design-Briefing. Sie werden den Design-Briefing tatsächlich selbst schreiben , wenn Sie sich anmelden, wie zuvor in meiner Adobe XD-Masterclass erklärt, z. B. wie zuvor in meiner Adobe XD-Masterclass erklärt, z. B. erhalten Sie die Design-Briefing-Vorlage und können diese Vorlage verwenden Verbindung mit diesem Designvorschlag , um sich von Ihren Kunden inspirieren zu lassen, was eine wichtige Sache ist. Eine wichtige Sache in jedem Projekt ist Ihre Inspiration. Also müssen wir uns selbst inspirieren. Sie müssen Zeit auf all diesen verschiedenen Websites verbringen , um mögliche Lösungen, mögliche Layouts, mögliche Stile, Farben, Typografie, Maßstab und all diese Dinge zu erkunden mögliche Layouts, mögliche Stile, Farben, . Sie müssen inspiriert werden und Ihre Zeit investieren, um diese Ergebnisse zu erzielen. Das ist also einfach ein Grundpreis , den ich für all diese Dinge offensichtlich viel mehr berechnet habe. Wir haben Papier, Wireframe-Konzeptforschung, Sitemap und Flussdiagramme. Und ich nehme immer meine Zeit in diese mit ein, aber Sie können eine separate Zeile hinzufügen. Ich sage es einfach so , weil mir hier der Platz ausgehen wird. Sie können jedoch eine separate Zeile einschließen. Und um das zu tun, wähle z. B. ein Objekt aus, drücke Strg-D und es wird ein Objekt darunter platziert. Und zum Beispiel sagen wir E-Mail-Zeit, Anruf- und Videoanrufzeit. Das kann deine Zeit sein. Also jedes Mal , wenn sie sich mit Ihnen treffen und mit Ihnen über dieses spezielle Projekt sprechen möchten sich mit Ihnen treffen und mit Ihnen über dieses spezielle Projekt sprechen . Dafür wirst du eine Gebühr erheben. Und doppelklicken Sie einfach hier und sagen wir 900$, sagen wir, das war's. Stellen Sie also sicher, dass Sie all die Dinge einbeziehen, die Sie persönlich in dieses Projekt investieren werden. Also all deine Zeit, Recherche, Design, Planung, Wireframes, Teilen dieser Links, Feedback-Überarbeitungen, all diese Dinge, die in diesem Preis enthalten sein werden . Schließlich, am Ende des Tages, habe ich es einfach durchgemacht und all das hinzugefügt, und es kommt zu diesem Preis, also 30.750. Aber das ist offensichtlich ein imaginärer Preis. Wieder einmal habe ich viel mehr für meine Projekte berechnet. Sie können diese also durchgehen und sie einfach an das anpassen, was für Sie funktioniert. Also z. B. ein Papier, Wireframe-Konzeptforschung, Sitemap und Flussdiagramme. Vielleicht möchtest du hier noch etwas hinzufügen. Sagen wir also Paper Wireframe, Wireframe-Exploration. Wenn Sie das tun, Konzeptforschung, Sitemap, bla, bla, bla, blah, blah, und dann können Sie mehr Geld verlangen weil Sie diese zusätzliche Sache hinzugefügt haben. Oder wenn Sie z. B. keine Konzeptforschung betreiben, dann doppelklicken Sie hier, springen Sie, entfernen Sie Konzeptforschung und passen Sie diesen Preis dann einfach an das an, und passen Sie diesen Preis dann einfach an das an woran Sie gerade arbeiten zu diesem speziellen Projekt. Das sind also im Grunde die Projektgebühren. Und wie gesagt, das wird Ihrem Kunden dieses Vertrauen ausstrahlen. Um das Geld tatsächlich zu verstehen und sich wohler dabei zu fühlen, Ihnen das Geld zu zahlen. Denn jetzt hast du ihnen gezeigt, okay, sind all die Dinge, die ich an diesem speziellen Projekt tatsächlich für dich arbeiten werde . Deshalb muss ich das Geld verlangen, das ich Ihnen erklärt habe, weil all diese Dinge tatsächlich in diesem speziellen Projekt enthalten sind . Lassen Sie uns damit fortfahren. Wir haben also Zahlungsmöglichkeiten. Und noch einmal, die Bezahlung ist extrem wichtig, um niemals, niemals, für welches Projekt Sie auch arbeiten, für den Kunden, an dem Sie arbeiten, zu arbeiten, ohne vorher bezahlt zu werden. Und hier bieten sich die Zahlungsmöglichkeiten an. Auch dies sind nur Zahlungsmöglichkeiten , die in der Vergangenheit verwendet wurden. Es gibt viele andere, z. B. wöchentliche Zahlung, monatliche Zahlung , einmalige Zahlungen, oder sie zahlen Ihnen 100 Prozent. Wenn Sie damit zufrieden sind, möchten Sie sich vielleicht zu ihrem Unternehmen hinzufügen, z. B. Aktionär werden und so. Es gibt also viele, viele andere Möglichkeiten, wie Sie bezahlt werden können. Aber ich habe weitergemacht und drei der gängigsten aufgenommen. Also z. B. zwei, gleiche Zahlungen. Also wo auch immer deine Summe genau hier ist, wird einfach durch zwei geteilt. Und dann genau hier, 50% im Voraus, kurz bevor wir mit diesem Projekt beginnen. Und dann 50 Prozent am Ende, kurz bevor ich Ihnen die endgültigen Unterlagen für dieses spezielle Projekt schicken muss , haben wir drei gleiche Zahlungen. Also 33,3% zu Beginn, in der Mitte und am Ende des Projekts. Und wir haben zwei Zahlungen, z. B. 70, 30 Split oder 60, 40 Split. Aus diesem Grund habe ich gesagt, dass es viele verschiedene Zahlungsmöglichkeiten gibt. Stellen Sie also sicher, dass Sie die auswählen , mit denen Sie sich am wohlsten fühlen. Und dann stell es einfach hier hin. Also wenn ja, ich denke, in diesem Fall waren 70 30 aufgeteilt, also 9625 und dann ist die letzte Zahlung für eins bis fünf. Und stellen Sie sicher, dass Sie erklären , wann Sie erwarten, dass sie diese Zahlungen an die von Ihnen angegebene leisten diese Zahlungen an die von Ihnen angegebene Der Sinn dieser Zahlungsoptionen besteht darin, ihnen Optionen zu geben und erkläre ihnen, dass du ihnen Optionen geben kannst. In den meisten Fällen gibt es also dieses Stigma in Bezug auf Geld, das ich wirklich nicht verstehe weil Sie den Service anbieten. So wie Sie in den Laden gehen, um Lebensmittel zu kaufen , z. B. wird Ihnen dieser Ladenangestellte den Service anbieten , für den er bezahlt wird. Scheint so, als ob es mit Website-Design oder App-Design der Fall ist. Es ist also überhaupt nicht anders. Stellen Sie also sicher, dass Sie ihnen diese Zahlungsoptionen anbieten da es für sie manchmal viel einfacher sein wird , diese große Zahlung aufzuteilen, insbesondere wenn es sich um große Zahlungen in drei oder vier Teile handelt Teile oder fünf Teile. Stellen Sie also sicher, dass Sie ihnen zuerst diese Optionen und dann diese Optionen zwischen YouTube geben und dann diese Optionen zwischen YouTube Sie können es noch weiter herausfinden. Also gebe ich dir ein Beispiel. Zum Beispiel könnten sie dich um zwei Zahlungen bitten, aber statt, sagen wir, 70, 30 aufgeteilt, wollen sie vielleicht umgekehrt zahlen , vielleicht 30 Prozent zu Beginn des Projekts, 70% am Ende Projekt, vielleicht fühlst du dich damit wohl. Oder anstelle von drei gleichen Zahlungen kann derjenige sein, der sie in fünf gleiche Zahlungen aufteilt. Deshalb habe ich gesagt, gib ihnen einfach diese Zahlungsmöglichkeiten, mit denen du vertraut bist und mit denen du arbeiten möchtest. Und dann kannst du es unter euch beiden herausfinden. Zum Beispiel, wie ich schon sagte, zur gleichen Varianz drei gleiche Zahlungen durch gleiche Zahlungen, was auch immer Sie sich wohl fühlen und mit dem Ihr Kunde zufrieden ist, dann treffen Sie einfach diese Vereinbarung in die Zahlungsoptionen aufgenommen und dann werden Sie beide zufrieden sein. Also im Grunde war's das für die Preisoptionen. Wie Sie sehen, ist es äußerst wichtig all diese Dinge zu klären, denn es wird Ihren Kunden erneut zeigen , dass Sie professionell sind. Es wird ihnen mehr Vertrauen in Sie geben , Sie einzustellen. Und weil Sie diesen Designvorschlag verwenden werden, wird der Projektvorschlag , der auf ihr Unternehmen und ihr Branding zugeschnitten ist, wirklich dafür sorgen, dass sie sich wohl fühlen , wenn sie Sie einstellen ein anderer Designer. Als nächstes haben wir die Allgemeinen Geschäftsbedingungen. Eine äußerst wichtige Seite. Also ich sehe dich im nächsten Video, in dem wir das besprechen werden. 24. Allgemeine Geschäftsbedingungen: Als nächstes haben wir die Allgemeinen Geschäftsbedingungen. Also lass uns reinspringen. Und hier ist es. sind also, das sind die Allgemeinen Geschäftsbedingungen, noch einmal, äußerst wichtige Seite, denn hier sind einige Grundregeln, die Sie festlegen werden. Ihr Kunde wird verstehen, was enthalten ist, was nicht enthalten ist, was möglich ist, was nicht möglich ist, was verfügbar ist , was nicht verfügbar ist. All diese Dinge sollten also in zwei Allgemeinen Geschäftsbedingungen aufgeführt werden . Dies sind natürlich nur einige von mir, für einige Projekte, die weniger verbrauchen. Für einige Projekte verwende ich viel mehr. Wenn Sie also viel mehr als verwenden müssen, können Sie diese Zeichenfläche einfach für n duplizieren, für eine davon. diesem Fall können Sie die Alt-Taste für Ihr Keyword gedrückt halten , es duplizieren und z. B. diese Allgemeinen Geschäftsbedingungen als eine der Allgemeinen Geschäftsbedingungen aufrufen oder einfach dort weitermachen, wo Sie aufgehört haben, aber stellt sicher, dass Sie diese Seite anstelle dieser Seite über mich positionieren. Schieb das einfach so aus dem Weg. Machen Sie einfach eine Kopie und legen Sie sie aus dem Weg. Also entferne einfach über mich, positioniere es genau hier. Später, als Sie das als mehrere PDFs exportieren, werden Sie es sein, Ihr Kunde wird in der Lage sein, zwischen diesen nach unten zu scrollen , wenn Sie weitere Bedingungen und Konditionen hinzufügen müssen. Apropos Allgemeine Geschäftsbedingungen, was Sie eigentlich darin enthalten sollten. Wir haben also Projektressourcen. Also zum Beispiel die Bilder, die du für deine Projekte verwenden wirst , das sind so viele Bilder die in diesem Projekt enthalten sind, wirst du am Ende Bilder von Unsplash verwenden oder für Bilder von Envato Elements, z. B. oder die Bezahlung dieser wirklich teuren Bilder von Fotografen, die für diese Bilder bezahlen werden, für Symbole, für Schriften, für Illustrationen, für 3D-Modelle, für 2D-Modelle, für all diese Dinge. Dies sind die Projektressourcen. Wer wird dafür bezahlen? Wenn Sie als Designer dafür bezahlen wollen, müssen Sie zur Projektpreisgestaltung zurückkehren und die Projektpreise um ein Vielfaches erhöhen da Sie am Ende für all dies bezahlen werden, wenn Der Kunde wird für alle bezahlen und dann, wie das alles funktionieren wird. Wirst du eine Ressource finden und sie dann bitten, sie zu kaufen? Oder schicken sie Ihnen das Geld im Voraus für die Ressourcen, die nicht in Ihren Projektpreisen enthalten sind . Das ist zusätzliches Projektgeld. Also, wird man Ihnen das Geld für die Ressourcen dieser Projekte schicken ? Mit dem Geld wirst du für sie bezahlen. Und dann haben Sie immer noch dieses Geld, das Sie als Gesamtpreis für das Projekt vereinbart haben. Sie also nur darauf, auf diese Dinge zu achten. Dann haben wir Projektrevisionen, was die Kunden am meisten lieben. Sie müssen Ihre Projektrevisionen einschränken. Zuallererst, wenn diese Überarbeitungen vorgenommen werden oder sie an jedem einzelnen Tag oder am Ende der Woche oder am Ende von zwei Wochen erfolgen werden. Oder was ich wirklich gerne mache ist an bestimmten Stellen Ihres Projekts. Wenn ich Sie also gleich hier zurück zu den Projektpreisen bringe, z. B. in meinen Fällen, gibt es keine Bewertungen, bis ich diesen Abschnitt erreicht habe. Also Adobe XD Wireframes, und dann gebe ich Ihnen zwei Runden mit Überarbeitungen und Feedback. Ich möchte nicht, dass sie mich belästigen , wenn ich meine Recherchen mache, Moodboards, Vorbereitungen, Planungen, solche Dinge mache. Und wenn ich dann die Wireframes fertiggestellt habe und ihnen diesen Link zum Teilen gebe, können wir mit den Überarbeitungen beginnen. Sie erhalten Änderungen, die in diesem Preis enthalten sind. Wenn sie zusätzliche Überarbeitungen benötigen, in den Projektrevisionen am Ende mitteilen , werden Sie ihnen in den Projektrevisionen am Ende mitteilen , wie teuer Ihre Überarbeitungen nach diesen Überarbeitungen sind. Und wenn Sie ihnen hier zusätzliche Überarbeitungen geben, müssen sie am Ende des Projekts für Überarbeitungen bezahlen , da sie derzeit im Preis enthalten sind. Aber wenn sie sich dafür entscheiden, z. B. in Greeley auf XD-Wireframes mit gemeinsam nutzbarem Link. Dann wirst du sie am Ende des Projekts für diese Überarbeitungen bezahlen lassen . Sonst wirst du die Datei nicht liefern , solche Sachen. Aber um Verwirrung zu vermeiden , haben wir deshalb die Allgemeinen Geschäftsbedingungen. Also wirst du all diese Dinge hier einbeziehen . Also Projektergänzung. Nehmen wir an, sie wollen eine zusätzliche Visitenkarte. Nein, nein. Du arbeitest nicht an einer Visitenkarte. Du arbeitest gerade an diesem UX-Design-Projekt für Benutzeroberflächen. Nehmen wir an, sie möchten, dass Sie Beiträge in sozialen Medien und ein Broschürendesign oder ein Menüdesign, wenn ihr Restaurant nano, nur UI UX-Design einbeziehen ein Broschürendesign oder ein Menüdesign , wenn ihr Restaurant nano, . Vielen herzlichen Dank. Und für diese Dinge können Sie, wenn Sie mit ihnen arbeiten, wenn Sie mit ihnen arbeiten, einen zusätzlichen Projektvorschlag erstellen dem es sich nicht um UI UX, sondern um einen Grafikdesign-Projektvorschlag handelt . Und dann arbeite einfach mit all diesen Dingen daran. Auch hier sind die Allgemeinen Geschäftsbedingungen äußerst wichtig, da sie Ihnen helfen, jegliche Verwirrung und Verwirrung mit Ihrem Kunden zu vermeiden , und Sie können sich einfach an die Arbeit machen. Dann haben wir Arbeitstage. Wenn Ihre Kunden am Wochenende arbeiten, ist das in Ordnung. Gut mit ihnen. Aber wenn Sie am Wochenende nicht arbeiten, stellen Sie es einfach hier ab. Wenn sie wirklich wollen, dass du am Wochenende arbeitest, du aber nicht am Wochenende arbeiten möchtest, dann berechne mehr. Deshalb gibt es das hier für Dateiformate. Noch einmal, wenn du in XD arbeitest, was ich noch einmal wirklich empfehlen kann, weil ich es wirklich liebe. Aber sie fragen dich zum Beispiel Adobe Illustrator Illustrator-Dateitypen oder Photoshop-Dateitypen. In diesen Dateiformaten kann man sagen, dass ich sie z. B. nicht ausliefere, weil ich in XD arbeite. Aber gegen Aufpreis kann ich gehen und diese Ihnen liefern, kann ich gehen und da es sich um diese Online-Konverter-Tools handelt , die Sie verwenden können und für die Sie bezahlen müssen. Deshalb zahlen Sie, verdienen mehr Geld, indem Sie in diesen Dateiformaten eine zusätzliche Zahlung verlangen in diesen Dateiformaten eine zusätzliche Zahlung , weil Sie nicht mit ihnen arbeiten. Suchst du richtig? Also nach dem Ende des Projekts, wer die Rechte erhält, das Design zu verwenden, und zu welchem Zeitpunkt, was entscheidend ist, wenn sie Ihnen die Restzahlung nicht gezahlt haben, dann haben sie nicht die Rechte, dieses zu verwenden Design. Wenn sie es getan haben, können Sie ihnen das endgültige Design schicken, und dann liegt es ganz bei ihnen. Sie können mit ihnen machen, was ich will. Sie können es verkaufen, sie können das weiterverkaufen. Sie können tun, was sie wollen. Oder falls ihr zusätzliche Anforderungen habt, dann könnt ihr sie gleich hier in Nutzungsrechte eintragen, z.B. mit dieser Vorlage, ich möchte nicht, dass ihr diese Vorlage verkauft. Deshalb gibt es auf der Gammastraße, wo ich es verkaufe , eine strenge Kamerapolitik . Sie können es kaufen, Sie können es für Ihre eigenen Kunden verwenden. Sie können es für eine unbegrenzte Anzahl von Projekten verwenden, aber Sie können es nicht als Ihr eigenes weiterverkaufen. Andernfalls sind Gum Road und ich gesetzlich verpflichtet, Sie zu verklagen, weil Sie gegen diese Regel verstoßen haben, was die Allgemeinen Geschäftsbedingungen betrifft, es ist wirklich ganz einfach. Endlich haben wir die Absage von Projekten, was eigentlich mein Favorit ist. Also, mir ist das schon einmal passiert , wo ich z. B. zwei Monate mit Kunden zusammenarbeite und sie am Ende pleite sind. Das ist mir wirklich passiert. Das ist also nicht mein Problem. Sie wollen, dass ich ihnen dieses Design gebe, aber sie haben mir immer noch nicht die letzte Projektgebühr bezahlt. Was also bei Debt passiert, ist mit dieser Projektstornierung Teil der Allgemeinen Geschäftsbedingungen, das kann man wirklich beschreiben. Wenn Sie mich also aus irgendeinem Grund nicht für das Projekt bezahlen möchten, erhalten Sie die Projektdateien nicht oder Sie erhalten die Projektdateien für diesen speziellen Teil, den wir den Teil abgeschlossen, in dem du mir gesagt hast , dass du mir für das Ende des Projekts kein Geld geben wirst . Das ist mir tatsächlich passiert und ich habe es genau so gemacht. Achte also darauf, aufmerksam zu sein, achte darauf, dass du mit diesen Dingen klug umgehst, denn du hast keine Kontrolle über das Leben eines anderen. Du weißt nicht, was morgen mit ihnen passieren wird. Vielleicht, vielleicht werden sie sterben. Wer weiß das schon? Vielleicht ziehen sie in ein anderes Land. Vielleicht lassen sie sich scheiden. Vielleicht wird ihr Geschäft bankrott sein. Vielleicht, ich weiß nicht, wird die Börse abstürzen. Vieles kann passieren. Stellen Sie also sicher, dass Sie sich als Designer sichern , der an diesem Projekt arbeitet und dieses Projekt storniert. Also grundsätzlich können Sie, wie gesagt, zusätzliche Artikel hinzufügen, wenn Sie möchten. Dies sind nur einige von denen, die ich ständig benutze. Aber wie gesagt, für manche Projekte verwende ich weniger. Für einige Projekte verwende ich mehr. Und vor allem, wenn Sie mit wiederkehrenden Kunden arbeiten, können Sie einige dieser Dinge vermeiden, aber stellen Sie sicher, dass Sie intelligenter vorgehen und sicherstellen, dass Sie alles einbeziehen, was Sie für notwendig halten. Dies sind nur einige der enthaltenen Anleitungen. Und wieder einmal, genau wie bei all diesen, haben wir diese Gegenstände und sie sind in einem Stapel angeordnet. Also zB diese Nutzungsrechte, du kannst auf Löschen klicken, es wird ganz oben angezeigt. Es ist also dieselbe Struktur , die ich Ihnen mit den Projektpreisen, den Projektdetails und der Entdeckungsseite gezeigt habe . Schließlich müssen wir noch über mich sprechen, was wiederum eine wichtige Seite ist. Also, ich sehe dich im nächsten Video und wir werden darüber sprechen. 25. Über dich: Lassen Sie uns abschließend über meine Seite sprechen und warum sie wichtig ist. Also hier ist es. Und wieder einmal ist die gesamte Seitenstruktur, wie ich es Ihnen gezeigt habe, dieselbe. Aber was Sie mit diesem Bild machen können ist, dass ich es so breit habe. Also, wenn Sie möchten, können Sie sich z. B. in ein Büro wie dieses versetzen. Wenn Sie ein Büro haben, als würden Sie z. B. an Ihrem Computer arbeiten und Sie können ein solches Bild zeigen. Oder wenn Sie dies nicht tun, können Sie einfach die Größe dieses Bildes anpassen. Einfach darauf klicken. Du wirst es anpassen. Sie können es so positionieren, dass es sich in der Mitte befindet. Dieser Text wird folgen, sodass du wirklich herumspielen und damit machen kannst , was du willst. Aber ich habe es so aufgenommen , weil die Kunden in den meisten Fällen Sie wirklich gerne sehen, Ihr Gesicht, aber sie sehen auch gerne, woran Sie gerade arbeiten. Daher diese Bilder unten. Diese Bilder können von deiner vorherigen Arbeit am Wochenende oder auf Dribble stammen , z. B. kannst du einfach Bilder dort platzieren, was wiederum Vertrauen bei unseren Kunden ausstrahlen wird , weil du werden mehr von deinen Arbeiten zeigen, die sie tatsächlich verkauft haben, weil sie dein vierjähriges Portfolio über deine Website kontaktiert haben , Behance Dribble, wo auch immer du dein Portfolio und deine Arbeit hostest. Und deshalb können Sie dort wirklich Bilder einfügen, nur um sie daran zu erinnern , wie hochwertig Ihre Arbeit ist, was Sie als Designer schaffen können, denn es besteht eine geringe Möglichkeit dass sie dich nicht einstellen werden , wenn sie der Meinung sind dich nicht einstellen werden , wenn sie , dass das Budget zu groß ist, z. B. oder so, dann ist diese Seite wirklich da, um sie daran zu erinnern , warum die Menge in der ersten Ort. Denn in den meisten Fällen sehen Kunden wirklich Dutzende verschiedener Designer. Sie wissen nicht wirklich , welcher welcher ist. Indem Sie sie also hier an einige Ihrer Arbeiten erinnern, können Sie ihnen wirklich helfen dieses spezielle Projekt zu entscheiden. Wie Sie sehen können, sagt das Ihren Namen UI UX Designer aus, aber Sie können hier eindeutig doppelklicken. Lassen Sie mich meinen eigenen Namen eingeben , da ich hier das Padding hinzugefügt habe. Wenn ich also anfange zu tippen, kannst du sehen, dass sich das Lager anpasst. Sie können also UI, UX Designer, Slash, Grafikdesigner einbeziehen . Wir haben einen Blogger, Blog oder was auch immer Sie sind, Sie können ihn hier hinzufügen und er wird erweitert. Und wie ich Ihnen bereits gezeigt habe, können Sie dieses Bild einfach an das anpassen, was Sie wollen. Das wird folgen. Das kann genau hier bluten. Und natürlich können Sie dies in eine andere Farbe ändern. Muss nicht weiß sein, damit du wirklich damit herumspielen kannst wie du selbst über mich. Hier steht Project Resources. So wenig, ein bisschen mehr über mich, zum Beispiel, also wirst du hier Informationen über dich selbst hinzufügen. Also wirst du es ihnen wirklich erklären, wer du bist? Was sind Ihre Informationen? Was ist Ihre Ausbildung, z. B. was ist Ihre Erfahrung mit diesen Projekten? Also, woran hast du in der Vergangenheit gearbeitet, was sind deine Interessen, z. B. ich interessiere mich wirklich für Autos und dann werde ich ihnen das erklären. Und wenn Sie in dieser speziellen Nische arbeiten , einem Gemetzel, z. B. sagen, dass Sie wirklich von Autos inspiriert sind, dass Sie wirklich an Autos interessiert sind. Es besteht eine extrem hohe Wahrscheinlichkeit und Wahrscheinlichkeit. Kunden werden Sie für dieses spezielle Projekt einstellen , weil Sie wirklich an diesem Bereich und an diesem Teil des Marktes interessiert sind. Es ist also wirklich extrem wichtig, diesen Kunden eine Geschichte erzählen zu können , denn Geschichte ist das, was Sie am Ende des Tages einstellen wird. Noch einmal, wenn Sie nicht möchten, dass sie hier sind. Also diese drei Absätze, du kannst auf Löschen klicken, diesen Absatz entfernen, diese Bilder nach oben verschieben. Sie können diese Bilder einfach so erweitern , wenn Sie möchten, dass sie größer werden. Also wieder einmal, es ist extrem anpassungsfähig. Damit kannst du machen , was du willst. Und zum Schluss möchte ich hier zeigen, wenn Sie ein Mann sind und sich als männlich identifizieren, können Sie hier doppelklicken und Sie können dieses Mail-Symbol anzeigen oder wir haben auch das weibliche Symbol. Sie können also einfach die Opazität anpassen, bringen Sie sie direkt hierher, wenn Sie sich als weiblich identifizieren. Also kannst du das hier ablegen. Andernfalls können Sie ein geschlechtsneutrales Symbol verwenden , wenn Sie sich damit identifizieren, das ist natürlich auch in Ordnung. Sie können das also einbeziehen, wenn Sie möchten. Ich habe es hier nicht hinzugefügt, aber ich werde noch einmal den Link zu diesen Icon-Packs hinterlassen. Sie haben es dort nicht aufgenommen, aber wenn Sie Ihr eigenes persönliches Symbol haben, noch besser, fügen Sie es einfach dort ein. Ich habe dir gezeigt , wie man sie ersetzt. Ich kann Ihr Symbol einfach per Drag & Drop anstelle dieser Komponente ziehen und es wird in Echtzeit aktualisiert. Schließlich, wie können Sie das tatsächlich exportieren? Sie können einfach Abneigung auswählen. Drücken Sie also Control E, wählen Sie ein PDF aus, klicken Sie auf Exportieren und es wird auf Ihren Desktop exportiert. Und z. B. wo es ist, Hier ist es. Lass mich darauf doppelklicken und es öffnen. Hier ist Kontrolle Null. Das sind also Ihr Projektname, Projektdetails, Projektpreise, Allgemeine Geschäftsbedingungen über mich. Und wenn ich dich zum Beispiel auf diese Seite nehme und etwas näher hineinzoome. Denn auch hier handelt es sich um ein Vektordateiformat. Sie können die Qualität des Textes sehen. Es ist wirklich einwandfrei und verliert nicht an Qualität, wie Sie hier sehen können. Und wenn ich dich so nehme, kannst du sehen, wie knackig klar dieser Text wirklich ist. Und deshalb arbeite ich gerne in Adobe XD. Wenn Sie der Meinung sind, dass dieser graue Text nicht leicht lesbar ist , können Sie genau hier ankommen , wo neutrales Grau steht. Wende es an, um es etwas dunkler zu machen, und dann wird es sich von selbst auf all deine Projekte anwenden . Und noch eine Sache zu beachten: Wenn Sie diesen und einen anderen Dateityp exportieren möchten, können Sie einzelne Flughäfen auswählen und sie direkt hier teilen, wenn Sie möchten, aber Sie können Strg E drücken oder Befehl D statt PDF, Sie können sie als PNG-Bild oder JPEG-Bild oder SVG teilen , wenn Sie möchten, dass Ihre Kunden eine Vorschau als JPEG anzeigen, z. B. dann können Sie das einfach teilen oder wie ich es Ihnen gezeigt habe, als PDF, Sie können sie einfach alle auswählen, drücken Sie Control E. Und dann anstelle von PDF wählen Sie JPEG, klicken Sie auf Exportieren und senden Sie ihnen dann JPEG-Bilder , falls sie das benötigen. Aber wie ich aus meiner Erfahrung gesagt habe, funktioniert PDF wirklich einwandfrei, weil sie dieses PDF wirklich öffnen und per E-Mail, auf ihrem Laptop, auf ihrem Desktop, Handy, Tablet, was auch immer mitnehmen können dieses PDF wirklich öffnen und per E-Mail, auf ihrem Laptop, auf ihrem Desktop, Handy, Tablet, was auch immer mitnehmen auf ihrem Laptop, auf ihrem Desktop, Handy, Tablet, sie benutzen, sie können das PDF nehmen und es ist wirklich nett, einfach und leicht. Es kann also problemlos per E-Mail, Social-Media-Seiten, diesen Kommunikations-Apps wie WhatsApp, Viber und so weiter mit ihnen geteilt Social-Media-Seiten, diesen Kommunikations-Apps wie WhatsApp, werden. Das ist also im Grunde, wie man mit dem UX-Designvorschlag für die Benutzeroberfläche arbeitet. Wenn Sie es sich noch einmal ansehen möchten, finden Sie Link im PDF. Stellen Sie sicher, dass Sie auf diesen Link klicken und einem enormen Rabatt darauf zugreifen. Oder ich ermutige dich wirklich, deine eigenen zu erstellen, wenn du willst. 26. UX UI Figma: In diesem Video wollte ich Ihnen zeigen, wie Sie den UI-UX-Design-Projektvorschlag erstellen. Und die gleiche Geschichte wie bei all diesen Videos bis jetzt, ich werde zeigen, wie man es in XD im vollständigen Tutorial-Stil erstellt XD im vollständigen Tutorial-Stil und dir dann zeigen, was sich zwischen XD Figma unterscheidet , weil ich deine Zeit nicht verschwenden möchte. In diesem Video werden wir also feststellen, was sich zwischen der Verwendung von Figma und XD unterscheidet , um diese Art von Vorlagen zu erstellen. Also lasst uns zu Figma springen. Und hier in Figma können Sie sehen, wie alles aussieht. Mir scheint also, wenn X ist, haben wir unsere Boards einfach nicht hier. Wir haben diese Rahmen, die im Grunde genau dasselbe sind . Es ist nur der Inhaltsbereich , in den Sie Ihre Inhalte einfügen. Wenn ich jetzt nach draußen klicke, wirst du feststellen, dass diese Textilien und alle Textilien genau die gleichen sind wie in XD, jetzt in Figma. Und dann haben wir diese Farbstile , die in XD und Infimum genau gleich sind , weil wir wollten, dass diese Vorlagen genau gleich aussehen. Der einzige große Unterschied besteht hier. Sie werden in XD als Autolayout bezeichnet, sie werden Stacks genannt. Und das sind diese Gruppen , die Sie hier sehen in denen Sie Ihre Elemente positionieren können. Also z.B. für die Projektpreisgestaltung haben wir hier das automatische Layout anstelle von Stapel in vertikaler Richtung. Und der Abstand zwischen all diesen Abschnitten beträgt 80 Pixel. Jetzt haben wir zwei Abschnitte mit Preisinformationen, nämlich diesen Abschnitt hier, und die Zahlungsoption, die hier ist. Wenn ich nun hier die Projektpreise auswähle, habe ich den Abstand zwischen diesem Abschnitt und diesem Abschnitt , also genau diese Entfernung hier. Wenn ich mit dem Mauszeiger schwebe, wird AT angezeigt, und wenn ich es auf 120 erhöhe, können Sie z. B. sehen, was das bewirkt. Das ist also der ganze Punkt, nur ein anderer Name und das Tool ist genau dasselbe und es macht genau die gleiche Geschichte wie zuvor. Wenn ich hier direkt vor allem herkomme, habe ich meine H1-Farbe. Wenn ich es anpassen möchte, lass mich hier klicken, selbst hoch, damit du es hier sehen kannst. Ich habe die H1-Farbe, aber wenn ich hier klicke, um sie anzupassen, möchte ich vielleicht genau hier klicken. Und Sie werden feststellen, dass es in Echtzeit aktualisiert wird sich an die gewünschte Farbe anpasst. Also wenn ich mit Control Z ein bisschen zurückgehe also dieselbe Geschichte wie in XD, z. B. und es wird zur ursprünglichen Position zurückkehren. Wenn wir nun zu Vermögenswerten wechseln , haben wir hier das Cover, das ist die Fußzeile, das ist diese Komponente genau hier. Und um eine Komponente zu erstellen, ist es genau dasselbe. In diesem Fall wählen Sie einfach die Gruppe und kommen direkt hierher und erstellen Komponenten oder verwenden die Strg-Alt-Taste, z. B. und diese Komponente wird angezeigt. Und wenn ich es irgendwo hin ziehe und ablege, wirst du sehen, was drin ist. Hier haben wir die Website und den Text der Website, hier haben wir die E-Mail und die E-Mail-Texte und den Vertrag, und der ganze Sinn dieses Ganzen, genau wie in Adobe XD, falls Sie diesen Abschnitt gesehen haben, besteht darin, Ihnen bei der Erstellung dieses ersten zu helfen. Und dann wird es für diesen, diesen und diesen automatisch aktualisiert . Sie müssen Ihren Text also nicht tippen und kopieren und einfügen und verlieren auf diese Weise Zeit. Stattdessen erstellen Sie zu Beginn nur eine einzelne Komponente, die sich genau hier befindet. Und dann wird es diese Kacheln später erben. Hier. Wenn wir umschalten, können Sie sehen, dass wir jetzt im Cover sind. Also auf dem Cover, das ist dieses, wird es diese bestimmte Komponente lokalisieren. Wenn ich also hierher zurückgehe und mein Cover auswähle, möchte ich diese Füllfarbe entfernen weil ich sie nicht wirklich brauche. Ich muss versehentlich darauf klicken. Und das ist eigentlich unser Hauptbestandteil. Und Sie können sehen, dass Sie dieser Komponente Varianz hinzufügen können, indem Sie hier klicken . Und im Designbereich dieses Kurses werden wir über Varianten sprechen . Aber ich wollte nur schnell feststellen, dass, wenn Sie hier eine Änderung vornehmen, anders als bei der Farbe, der Lifestyle wie die Schriftauswahl in Echtzeit auf all diesen anderen Rahmen oder Zeichenflächen aktualisiert wird Echtzeit auf all , wenn Sie möchten. Und das wird sich in allen ändern. Dieselbe Geschichte wie in Adobe XD. Hier für die Farbe können Sie sehen, dass wir diese bestimmte Komponente für die Projektdetails haben . Hier haben wir, wenn ich es öffne, nur diese Komponente, das ist dieses Symbol hier. Gleiche gilt für die Projektpreise, dasselbe gilt für die Allgemeinen Geschäftsbedingungen. Und für das Über mich haben wir nur diese beiden Symbole, das sind diese beiden Symbole hier. Also im Grunde, wenn ich draußen klicke, dir schon gezeigt, wie man den Text bearbeitet, dir bereits gezeigt, wie man die Schriften bearbeitet, im Grunde die gleiche Geschichte. Klick einfach hier, lass mich zu mir selbst finden. Und hier können Sie die Schriftfamilie wählen, die Sie für Aussehen und Haptik, Entfernungen usw. wählen können . Und natürlich der Name und wofür er ist. Also, wenn ich zurückgehe, wollte ich dir nur eine Sache weniger zeigen weil wir das Bild genau hier haben. Wenn ich von Assets zwei Ebenen wechsle und diese auswähle, haben wir dieses Bild. Lassen Sie mich das Bild schließen, damit es Sie nicht verwirrt. Wie fügt man ein Bild in Figma hinzu? Was Sie also tun können, ist Ihr Bild hier per Drag & Drop abzulegen. Und es wird es bevölkern. Dann kannst du es hineinziehen und dann musst du es maskieren und so weiter und so fort. Aber davon bin ich nicht wirklich ein großer Fan. Wenn Sie also hier Ihr Bild auswählen, können Sie natürliches Grau sehen. Also statt Glück in XD, was ich an Adobe XD wirklich mag und an Figma nicht mag. Aber jetzt, wo Adobe Figma gekauft hat, werden sie es hoffentlich in Zukunft hinzufügen. Sie können also nicht einfach per Drag & Drop auf den Platzhalter ziehen. Sie können stattdessen per Drag-and-Drop hierher ziehen. Also hier heißt es Naturgrau. Zieh es, um es zu wagen. Warte ein bisschen, bis es es erkennt. Und sobald dies der Fall ist, können Sie es einfach auswählen, einfach per Drag & Drop dorthin und es wird das durch Ihre Farbe ersetzen. Aber in diesem Fall funktioniert das, also lass mich es abnehmen, sodass es die Füllfarbe wird. Also ziehe und du kannst sehen , dass es jetzt blau wird und lass es einfach los. Und dann wird es sich dort ansiedeln. Aber was passiert, wenn Sie dieses Bild anpassen möchten? Lass mich mich verstecken , damit du es sehen kannst. Sie können einfach darauf klicken, anstatt es zu füllen, Sie können auf Zuschneiden klicken. Also Füllen, Zuschneiden und Kacheln anpassen. Wenn ich also auf Zuschneiden klicke, kann ich die Größe ändern, neu positionieren, neu skalieren und nach Belieben anpassen. Und es wird perfekt an diese Seite angepasst, genau wie in Adobe XD. Das ist also nur eine Sache, die ich an Figma hasse und die ich oben an Adobe XD liebe. Denn in manchen Fällen fühlt es sich an , als wären einige Klicks zu weit, so wie es ist. In diesem Fall können Sie in XD per Drag & Drop ziehen, doppelklicken und dann nach Belieben anpassen. Nun, hier musst du es separat erstellen, du musst es entsperren, wenn z.B. die Farbe angehängt wurde wie in diesem Fall, dann musst du darauf fallen lassen, dann beobachte diesen einen Klick, zwei Klicks und dann drei Klicks , damit ich sie in XD zuschneiden kann. Es ist einfach viel intuitiver, aber das ist nur eines der Dinge , von denen ich hoffe, dass Adobe Figma in Zukunft erweitern wird , da sie es besitzen, was die Bearbeitung angeht Sie können wirklich jede Bearbeitung vornehmen, die Sie möchten. Die gleiche Geschichte, die ich dir zuvor in Adobe XD gezeigt habe. Und noch einmal, wenn Sie sich fragen, was all diese Dinge sind und Sie den DXDY-Teil überspringen, schauen Sie ihn sich bitte an, da es wirklich wichtig ist, wie Sie Ihr Projekt richtig bewerten und wie Sie diesen UI-UX-Projektvorschlag erstellen. Es ist nur so, du kannst diese Vorlage in Figma öffnen und dir den XD-Teil ansehen, während wir dich darin führen, um zu verstehen, warum ich bestimmte Entscheidungen getroffen habe und warum all diese Elemente dort sind, wo sie sind. Das ist also im Grunde alles für dieses Video. Ich wollte Sie nur kurz durchgehen und Ihnen die Unterschiede zwischen XD-Dateien und Figma-Dateien zeigen . Stellen Sie sicher, dass Sie diese Vorlage in Figma öffnen. Du wirst es bekommen und du kannst es verwenden und für deine eigenen Projekte wiederverwenden und sicherstellen, dass du es erforschst, wie ich es erstellt habe. Und vielleicht mit einigen Einstellungen herumspielen. Fügen Sie vielleicht Ihre eigenen Symbole, Ihre eigenen Farben Ihre eigenen Typografieoptionen hinzu und sehen Sie, wie Sie sie zu Ihren eigenen machen können. Weil das hier der springende Punkt ist. Verwenden Sie diese Vorlage nicht einfach unverblümt, um sicherzustellen, dass Sie sie anpassen und einige Änderungen vornehmen, die zu Ihnen passen einige Änderungen vornehmen, die zu Ihnen passen und Ihrem speziellen Stil entsprechen. 27. ABSCHNITT 4 Nutzerforschung und Personas: Benutzerpersönlichkeiten sind einer der wichtigsten Bestandteile jedes Designprozesses da Sie die Daten nicht einfach verwenden und sie Benutzer nennen möchten . Sie möchten Ihrer Persona, hinter der Person, für die Sie diese Website oder diese App entwerfen, ein Gesicht geben hinter der Person, für die Sie diese Website oder diese App entwerfen . Und das nennt man UI UX Persona. Sie möchten diese Personas auf der Grundlage Ihrer Recherchen so genau wie möglich verwenden Grundlage Ihrer Recherchen so genau wie möglich . Und wir werden in diesem Abschnitt des Kurses über verschiedene Methoden sprechen , die Sie für Ihre Forschung verwenden können. Aber im Grunde ist es das, wofür der ganze Zweck da ist. Sie möchten es wie eine echte Person behandeln und nicht nur einige Benutzerdaten. Also lass uns anfangen. 28. Was ist eine User: Wenn Sie Ihr Designprojekt beginnen, müssen Sie wissen, für wen Sie entwerfen. Andernfalls wirst du einfach für alle entwerfen. Und die Designentscheidungen, die Sie auf den Tisch bringen werden, werden nicht wertvoll sein. Denn später, wenn die Leute nicht kaufen, wenn sich die Leute nicht anmelden, wird Ihr Kunde Sie fragen, warum. Und das liegt ganz klar daran, dass die Zielgruppe nicht definiert wurde. Diese Zielgruppe wird als Benutzerpersona bezeichnet. Und anstatt eine Zielgruppe anzusprechen, werden Sie in diesem Fall nur eine einzelne Person ansprechen, eine imaginäre Person, aber trotzdem eine einzelne Person. Aber wie können Sie wissen, wer diese einzelne Person ist , auf die Sie für Ihre Benutzerpersönlichkeit abzielen? werden Sie wissen, wenn Sie Ihre Benutzerforschung durchführen. Ihre Nutzerforschung durchführen, werden Sie wissen, wer Ihre Zielgruppe ist , und aus dieser Zielgruppe werden Sie, wie gesagt, diese imaginäre Persona nehmen und erstellen. Sie werden die echten Daten verwenden und das ist hier von entscheidender Bedeutung. Verwenden Sie nicht nur imaginäre Daten, weil Sie Meinung sind, dass Ihren Benutzern eine bestimmte Sache gefallen könnte. Versuchen Sie, Ihre Persona anhand der spezifischen Benutzerrecherchen zu ermitteln , die Sie durchgeführt haben, um so viele Informationen wie möglich zu erhalten . Jetzt können Sie sich ein Kontingent vorstellen, das von Ihrem Benutzerverhalten oder Ihrem Nutzeralter oder was auch immer abhängt . Versuchen Sie jedoch, die wichtigen Informationen wie das Alter, wie den Berufsstatus, z. B. Geschlecht, wie die Stadt oder das Land, in dem sich Ihre Benutzer befinden, zu erfassen. Versuchen Sie, die Daten zu sammeln und so spezifisch wie möglich zu sein , damit Sie von Beginn Ihres Projekts an wissen , wie Sie Ihre Benutzerpersönlichkeit richtig gestalten können. Warum es ganz einfach ist, überhaupt eine Persona zu erstellen . Um es einfach als Benutzer zu bezeichnen, werden Sie es als Persona bezeichnen Sie werden erneut echte Daten verwenden, die Sie durch Benutzerforschung gesammelt haben. Aber du wirst dieser Person einen fiktiven Namen und einen Nachnamen, eine fiktive berufliche Position beifügen einen fiktiven Namen und einen Nachnamen, eine fiktive berufliche Position beifügen , damit du sie wie eine reale Person behandeln kannst, auch wenn es nur eine imaginäre Person ist . diese Persona ist es, aber wie ich schon sagte und wiederhole es immer wieder, du wirst die echten Daten verwenden, wodurch es wie eine echte Person aussieht. Wenn Sie Ihr Projekt später in die Entwicklung übergehen, werden Sie diese Benutzerpersönlichkeit mit Vor- und Nachnamen bezeichnen , als ob sie wirklich existiert. Und es wird viel einfacher sein, sich anzupassen und Änderungen an der Persona vorzunehmen, wenn Sie sie als echte Person haben, anstatt nur Ihre Benutzer oder unsere Benutzer oder was auch immer zu sagen. Wie gesagt, Sie werden diese Persona fokussieren und speziell für diese Persona entworfen haben, damit Ihr Design funktioniert und es von Beginn Ihres Projekts an für diese Persona, Ihre Benutzerbasis, funktioniert. Aber wie führen Sie Ihre Nutzerforschung durch? Darüber werden wir in der nächsten Lektion sprechen, worauf wir uns konzentrieren sollten und worauf Sie achten sollten. 29. Arten von Forschungsmethoden: Es gibt viele verschiedene Forschungsmethoden , die Sie für Ihr Projekt verwenden können. Und Sie können anhand der Größe Ihres Projekts herausfinden, welche Sie verwenden sollten. Wenn das Projekt kleiner ist, werden wir natürlich nicht die Typen verwenden, die z. B. Google oder Microsoft oder Apple verwendet. Sie werden Ihre Art der Benutzerforschung jedoch entsprechend der Größe Ihres Publikums und der Größe Ihres Projekts gestalten. Denn meiner Meinung nach ist es immer besser, klein anzufangen und sich anzupassen, wenn das Unternehmen wächst, wenn die Ziele wachsen, die Nutzerbasis wächst. Dann, wenn du gerade erst groß n anfängst, wenn du dich nur auf dieses riesige Publikum konzentrierst und dann versuchst, es ein wenig herunterzuzählen. Dann brauchst du Ziele. Sie benötigen ein bestimmtes Ziel und ein bestimmtes Ziel von Ihrem Kunden, auf das Sie sich konzentrieren und auf das Sie Ihre Forschung konzentrieren können. Man kann also nicht für jeden entwerfen, ich denke, wir haben es in den vorherigen Lektionen erwähnt. Daher benötigen Sie Ihre Benutzerpersönlichkeit und dieselbe Geschichte für die Benutzerforschung. Du musst verstehen, was das Ziel ist. Was versuchst du zu lösen? Was ist das Ziel dieses Projekts? Was sind einige Schmerzpunkte? Was sind vielleicht einige Schwächen auf dem Markt, die Sie mit diesem Produkt ausloten möchten . Deshalb müssen Sie verstehen, für wen Sie entwerfen, und Sie müssen verstehen, was Ihre Ziele sind. Denn wenn die Ziele sind, lassen Sie uns so viele dieser Produkte wie möglich verkaufen. Das ist kein realistisches Ziel. Das ist kein gutes Ziel. Das Ziel hier sollte etwa sein, versuchen wir es, ich weiß nicht, ob Sie sich auf, sagen wir, eine Autoindustrie konzentrieren . Versuchen wir, diese Reifen zu verkaufen, die zum Beispiel sechs Monate länger halten als die Konkurrenz. Und sie werden einen viel besseren Halt bieten als die Konkurrenz. Und verkaufen wir es, sagen wir, an Familien in den Stadtteilen oder Städten der Innenstadt. Das sind also einige realistische Ziele, die Sie tatsächlich erreichen können, anstatt, lassen Sie uns Millionen dieser Reifen verkaufen, sondern an wen, wie werden Sie das erreichen. Deshalb musst du dir deine Ziele setzen. Nachdem Sie Ihre Ziele festgelegt haben, können Sie dann eine Strategie entwickeln, welche Art von Nutzerforschung Sie ebenfalls angehen werden. Denn wie gesagt, wenn Sie klein anfangen, müssen Sie keine, sagen wir 200 Benutzer testen, weil Sie einfach fünf Benutzer testen können und nicht Ihre Forschungsressourcen verschwenden, nicht Ihre Zeit damit verschwenden verschwenden Sie Ihr Geld dort, um ihre Zeit und ihr Geld zu verschwenden , indem Sie diese unnötigen Recherchen durchführen Sie können Ihre Forschungsbemühungen beispielsweise auf fünf bis zehn Personen konzentrieren . Und aus diesen Gruppen können Sie herausfinden, wer Ihre Zielgruppe und wer Ihre Benutzerpersönlichkeit ist. In der nächsten Lektion werden wir über verschiedene Arten von Methoden der Benutzerforschung sprechen . Und welches können Sie je nach Ihren Zielen für Ihr Projekt wählen ? Wie ich schon sagte. 30. Quantitativ vs. Qualitativ: Wenn Sie mit dem Projekt beginnen, müssen Sie wissen, worauf Sie sich konzentrieren müssen, wie ich in den vorherigen Lektionen erwähnt habe, aber Sie müssen auch wissen, welche Art von Benutzerforschung Sie wählen müssen. Und in dieser Lektion gibt es viele verschiedene , ich werde nur einige nennen. Und weil dieser Kurs ziemlich kurz ist, kannst du deine Anstrengungen später konzentrieren wenn du herausfindest, welcher für dich der richtige ist Dann kannst du ihn aufschlüsseln und weitere mögliche Routen erkunden . Ihre spezifische Benutzerforschung. Aber grundsätzlich können Sie Ihre Methoden der Nutzerforschung in qualitative und quantitative einteilen Ihre Methoden der Nutzerforschung . Qualitativ ist eigentlich etwas, das man in reelle Zahlen, in reale Daten herunterrechnen kann. Quantitativ bedeutet zwar, so viele Daten wie möglich zu erhalten. Quantitativ können so etwas wie Benutzerumfragen oder Online-Fragebögen sein, bei denen Sie so viele verschiedene Benutzereingaben wie möglich erhalten können . Und dann können Sie qualitative Forschungsmethoden verwenden , um diese Zahl zu fokussieren, um sie zu analysieren, um zu verstehen, was all diese Zahlen bedeuten. Wenn Sie beispielsweise tausend Benutzer aus der ganzen Welt haben , das sind quantitative Daten, weil Sie Menge haben, dann werden Sie diese Benutzer anhand qualitativer Daten herunterdestillieren , um tatsächlich das Ergebnis, nach dem Sie suchen, z. B. in welchem Land befinden sich diese Benutzer? Und dann weiter unten, welcher Stadt befinden sie sich? Wenn Sie können, können Sie verstehen, wie alt sie sind, und Sie können verstehen welchen Gerätetyp sie verwenden. Sie können den Browsertyp verstehen, z. B. wenn Sie all diese Daten haben, diese qualitativen Daten, und das heißt, Sie können sie im Grunde nach Quantität und Qualität trennen. Daher gibt es bei den fraglichen Namen auch zwei weitere Typen, und diese sind Einstellungs - und Verhaltensnamen. Bei der Einstellung ist es im Grunde die Einstellung Ihrer Benutzer, und das Verhalten ist, wie sie sich verhalten. Also im Grunde genommen ist es das, was sie sagen. Behavioral ist, wie sie sich verhalten. Und für beide können Sie verschiedene Arten von Forschungsmethoden verwenden, z. B. für Attitudinal, wie ich bereits sagte, können Sie Fragebögen verwenden, Sie können Online-Foren verwenden. Sie können etwas wie Typekit verwenden , um ein einfaches Formular zu erstellen. Sie können es auf eine bestehende Website stellen oder es per E-Mail an Benutzer senden und dann können Sie sehen, was sie sagen. Und dies kann eine quantitative Methode der Benutzerforschung da Sie die Menge an Informationen sammeln werden die Menge an Informationen sammeln , bevor Sie sie qualitativ hochwertig einsetzen. Und dann ist Verhalten etwas ganz anderes. Dies ist für die späteren Phasen Ihrer Recherche, z. B. wenn Sie bereits einen Prototyp fertiggestellt haben, dann können Sie ihn in denselben Raum stellen wie Sie. Und dann können Sie die Qualitätstests durchführen, z. B. ist dies die Verhaltensmethode, da Sie sehen werden, wie sich Ihre Benutzer verhalten werden , sobald sie im Raum sind. Du musst das nicht tun. Sie können zum Beispiel Mais verwenden , den ich verwende. Und ich werde all diese Ressourcen verlinken, die ich im PDF für diesen Kurs erwähnt habe. Schauen Sie sie sich also unbedingt an, schauen Sie sie sich an und klicken Sie, um all diese Websites selbst zu sehen und sie ein bisschen weiter zu erkunden. Sie können auch etwas verwenden , das Heatmaps genannt wird. Heatmaps benötigen einen bestimmten Satz von Geräten, um deinen Saftkopf aufzusetzen. Aber es gibt auch Software da draußen und Heatmaps sind im Grunde das, was der Name schon sagt, wo die Benutzer schauen ist was, wo die Karte am hitzigsten sein wird , wo sie hinschauen in der Liste steht, wo die Map aufgerufen werden soll, sodass Sie wissen , worauf Sie Ihre Designbemühungen konzentrieren müssen da Ihre Benutzer sich meistens eher darauf als auf das konzentrieren müssen. So können Sie Ihre wichtigen Nachrichten, z. B. auf Ihrer Seite, auf den spezifischen Teil der Seite konzentrieren auf Ihrer Seite, auf den spezifischen Teil , nach dem die Benutzer am meisten suchen. Wenn Sie also der Meinung sind, dass die Steuer hier besser sein sollte, aber keiner Ihrer Nutzer in diese Richtung schaut. Dann versuche zu sehen, wohin sie schauen. Wenn sie z. B. in diese Richtung schauen, geben Sie vielleicht den Text wagen ein. Wenn der Text der wichtigste Teil dieses Abschnitts Ihrer Seite ist , z. B. dann ist das verhaltensbezogen. Sie können in Echtzeit verfolgen, wie sich Ihre Benutzer verhalten. Also noch einmal, abhängig von Ihrer Forschungsmethode, was Ihre Ziele sind was Sie mit Ihrer Forschung erreichen möchten. Stellen Sie sicher, dass Sie zuerst quantitative Daten verwenden , damit Sie die Daten Ihrer Benutzer sammeln können. Und versuchen Sie dann, qualitative Daten zu verwenden, um einige reelle Zahlen zu erhalten , mit denen Sie arbeiten können , und sie Ihren Kunden zu präsentieren, z. B. damit Sie ihnen die Forschungsergebnisse zeigen können, die Sie gefunden haben, und dann Sie können diese Forschungsergebnisse später in Ihrem Design verwenden. Vergessen Sie auch nicht die Einstellung. Was ist also ihre Einstellung, wie sagen sie, dass sie reagieren werden? Und dann verhaltensbezogen, wie sie tatsächlich reagieren wenn Sie ihnen einen Test, einen Prototyp, das Design mit einer Website präsentieren und sie tatsächlich bitten, es in Echtzeit zu testen, entweder im Voraus von dir oder online. Im nächsten Video werden wir über die Auswahl Ihrer Teilnehmer sprechen . Wenn Sie keine Teilnehmer haben und bereits ein bestehendes Publikum haben, was ist der Unterschied und wie können Sie zwischen beiden wählen? Also werde ich dich dort sehen. 31. Auswahl deiner Teilnehmer:innen: Die Auswahl Ihrer Teilnehmer ist ein wichtiger Teil Ihrer Nutzerforschung, denn wenn Sie die falschen Teilnehmer auswählen, ist Ihr Forschungsergebnis nicht gültig. Daher ist Ihre Recherche wirklich sinnlos und Sie haben Ihre Zeit, die Zeit aller anderen und das Geld Ihrer Kunden verschwendet aller anderen und das , weil Sie in den meisten Fällen wirklich für jede Art von Benutzer bezahlen müssen . Recherchen, die Sie machen. Daher ist es wirklich wichtig, die richtigen Teilnehmer für die richtige Art von Forschung auszuwählen die richtigen Teilnehmer für die richtige Art von , die Sie durchführen werden und die richtige Anzahl von Teilnehmern für diese spezifische Forschung auszuwählen . Wie wählt man Teilnehmer aus? Nun, es gibt wirklich zwei verschiedene Arten Sie aus einem bestehenden Publikum auswählen können. Dies ist der Fall, wenn Ihre Kunden, Kunden eine Website haben, sie eine App haben, sie haben eine E-Mail-Liste. Und Sie können diese potenziellen Kunden, Kunden, wirklich erreichen . Und du kannst sie wirklich nach ihrer Meinung und nach ihrer Zeit fragen . Und dann können Sie diese Benutzerforschung wirklich auf diese Weise durchführen , weil Sie bereits dieses bestehende Publikum haben. Die andere Möglichkeit, dies zu tun, ist mit nicht existierenden Personen. Das ist, wenn das Geschäft Ihres Kunden gerade erst am Anfang steht. Und dann musst du diese Teilnehmer finden , um teilzunehmen, und wie geht das? Nun, dafür gibt es wieder zwei verschiedene Methoden. Es ist mit Menschen persönlich. So können Sie sich wirklich mit verschiedenen Menschen von Angesicht zu Angesicht treffen und Ihre Schuldenprüfungen auf die Art oder online durchführen. Und du wirst das eine oder andere aufgrund einer einfachen Sache wählen . Ist Ihr Kunde lokal und wird sein Publikum lokal sein? Daher werden Sie höchstwahrscheinlich persönlich wählen. Sie können auch online wählen, aber nach Ihrem Land, Ihrer Region und Ihrer Stadt zu filtern , z. B. aber wenn die Zielgruppe Ihres Kunden global sein soll , ist es am besten diese Personen auszuwählen online. Ich werde ein paar Links hinterlassen, das PDF zu diesem Kurs, wo Sie sich durch diese verschiedenen Websites klicken können , auf denen Sie verschiedene Zielgruppen finden können , um zu recherchieren und zu testen. Und diese Websites werden Ihnen das natürlich in Rechnung stellen. Es ist also sehr wichtig wenn Sie dies freiberuflich machen , dies von der Rechnung Ihres Kunden abzubuchen. Sie können dieses Formular von Ihrem Service trennen, z. B. können Sie den gesamten Designprozess als eine Gebühr berücksichtigen und diese, die separate Gebühr, dann berechnen. Oder Sie können alle Abstiege von Anfang an berücksichtigen. Vielleicht ist es die beste Herangehensweise. Möglicherweise wird der UX-Teil Ihres Projekts separat berechnet und dann der UI-Teil und möglicherweise der Entwicklungsteil später separat da Sie alle diese Informationen bereits aus Ihrem UX-Teil haben . Und wenn Sie dann zum UI-Teil und der eigentlichen Erstellung Ihres Designs übergehen , ist es vielleicht besser, dies separat in Rechnung zu stellen. Ich sage dir das nur , weil du oft Nutzerrecherchen bekommst, die nicht wirklich überzeugend sind. Das bedeutet, dass Sie vielleicht die falschen Fragen stellen. Vielleicht haben Sie nicht die richtige Anzahl an Leuten bekommen und dieser gesamte Forscher-Kunde wird zahlen müssen. Manchmal, wenn Ihre Sitzung beispielsweise 30 Minuten dauert, müssen Sie dafür bezahlen, dass sich die Leute für 30 Minuten hinsetzen und Ihnen zuhören , wie Sie ihnen die Fragen stellen oder den Fragebogen ausfüllen. oder um Ihren Prototyp zu testen, oder um Ihre Hypothese zu testen. Also was auch immer es ist, du wirst diese Leute bezahlen müssen. Es ist also sehr wichtig, von Anfang an zu verstehen , dass Sie Ihren Kunden für diesen speziellen Service entwickeln müssen . Oder Sie können Ihr Projekt komplett separat bewerten. UI-Design und die Lieferung werden also in einer Gebühr berechnet. Und das UX-Design wird eine eigene Sache sein, besonders bei diesen Benutzermethoden und Benutzeransätzen und solchen Dingen. Bei echten Menschen ist es viel einfacher, weil du tatsächlich bei ihnen sitzen wirst. Sie werden Ihre Fragenliste im Voraus vorbereiten. Wir werden ihnen diese Fragen stellen und manchmal, wenn du sie für 30 Minuten bezahlst, wirst du feststellen, dass dein Vortrag für alle in 15 Minuten dauert , sodass du sie bezahlen kannst der halbe Preis und solche Sachen. Aber auch hier ist es wirklich wichtig, diese Kosten in Ihre Projektkosten einzubeziehen. Weil es oft sehr teuer sein kann. Diese Leute, und Sie werden auf diesen Websites sehen , die ich im PDF verlinken werde, werden je nach Benutzer zwischen 20 USD pro Stunde und bis zu 200 USD pro Stunde berechnen 20 USD pro Stunde und bis zu 200 USD pro Stunde Forschungsmethode , die Sie an diesen Benutzern anwenden werden. Und je nachdem, ob Sie z.B. fünf Benutzer haben , sind es 20 Benutzer. Sie können deutlich sehen, dass diese Kosten enorm sein werden. Bei Ihren bestehenden Benutzern ist es jedoch eine ganz andere Geschichte , da Sie sich an Ihre bestehenden Benutzer wenden und ihnen einen Rabatt anbieten können , entweder auf bestehende Funktionen oder Produkte oder zukünftiges Feature oder ein zukünftiges Produkt , das Ihr Kunde später auf den Markt bringen wird. Seien Sie jedoch sehr vorsichtig mit Ihren bestehenden Benutzern, da es oft zu Vorurteilen kommt , weil die meisten von ihnen das Produkt, das sie verwenden, möglicherweise bereits mögen. Sie werden also ziemlich voreingenommen sein was die Antworten angeht, die sie auf Ihre Forschung geben werden. Stellen Sie also sicher, dass Sie all dies berücksichtigen und schauen Sie sich das PDF an, das ich, wie gesagt, zur Verfügung stellen werde, um sich durch all diese Links zu den Websites zu klicken , auf denen Sie diese finden können Benutzerforschungstester , die zu Ihrem Projekt kommen und Ihnen zu Hilfe kommen. Grundsätzlich gilt: Wo auch immer Sie in einer Reihe stehen, achten Sie darauf, die Kosten für dieses spezielle Projekt zu berücksichtigen . 32. Visualisierung deiner Daten: Wenn Sie Ihre Forschungsinformationen haben, wird es oft sehr chaotisch sein , denn stellen wir uns vor , Sie haben zehn Fragen für jeden Ihrer Teilnehmer. Nehmen wir an, Sie führen eine Benutzerumfrage durch. Sie haben zehn Fragen, Sie haben zehn verschiedene Teilnehmer. Also wirst du 100 verschiedene Antworten bekommen. Also, wie berücksichtigt man das alles n? Nun, es gibt verschiedene Online-Vorlagen , die Sie dort völlig kostenlos finden können . Sie werden für den Großteil der Branche verwendet , z. B. in der Excel-Tabelle oder in Google Sheets Sie können diese Vorlage, die Sie erhalten, hinzufügen und sie berechnet Ihre Antworten auf der Grundlage was Ihre Benutzer sagen werden. Oder wenn Sie so etwas wie quantitative Methoden verwenden und z. B. eine Landingpage einrichten und sehen möchten, wie viele Klicks Sie erhalten werden. Es ist besser, Google Analytics zu verwenden, da Menge an Informationen , die Sie von Google Analytics erhalten, einfach riesig ist. Sie müssen es also verstehen und irgendwie organisieren, damit Sie es dann über unsere, sagen wir, eine Woche oder zwei Wochen Zeit oder Zeitdauer hinweg berücksichtigen können es dann über unsere, sagen wir, eine Woche oder zwei Wochen Zeit oder Zeitdauer hinweg berücksichtigen unsere, sagen wir, eine Woche oder zwei Wochen Zeit oder Zeitdauer oder zwei Wochen Zeit oder je nachdem, wie lange du testest, wird es sein. Daher können Sie all diese Informationen später berücksichtigen . Am Ende des Tages, wenn Sie dies tun, werden Sie Ihre Benutzerpersönlichkeit eingeben. Wir werden in der nächsten Lektion darauf eingehen, wir geben Ihnen tatsächlich eine Vorlage, die Sie ausfüllen können. Und ich werde Sie ein bisschen näher durch die verschiedenen Informationen führen , die Sie in diese Vorlage einfügen können . Aber es ist wirklich wichtig, Ihre Daten zu visualisieren und sie schließlich Ihrem Kunden zu präsentieren, sie schließlich Ihrem Kunden zu präsentieren bevor wir mit dem Designprozess fortfahren. Denn oft werden Ihre Kunden etwas andere Eingaben haben als Sie. Es ist also wirklich wichtig, ihnen die Daten zu zeigen und z. B. zu kämpfen, was sie zu sagen haben. Wenn es ein bisschen anders ist , weil sie glauben wollten, dass es anders ist, aber die tatsächlichen Daten zeigen etwas anderes. Daher ist es wirklich wichtig, ihnen diese Daten zu zeigen, um sie zu visualisieren, damit sie sie leichter verstehen können. Wenn Sie also z. B. XD oder Figma oder Photoshop verwenden , welche Software auch immer, stellen Sie sicher, dass Sie eine kleine Vorlage erstellen, in der Sie diese Daten mithilfe von Symbolen präsentieren können, z. B. mit verschiedenen Bildern, damit sie können leicht verstehen , welche Daten Sie erhalten werden, da die Daten, die Sie erhalten, normalerweise nur Text sind. Und Text ist für die Leute wirklich schwer zu verstehen. Visualisierung dieser Daten wird für Ihre Kunden also viel einfacher sein, sie zu verstehen und zu genehmigen, damit Sie den Designprozess vorantreiben können. Wie ich in der nächsten Lektion sagte, werde ich Ihnen eine XD-Vorlage geben , die Sie verwenden und Ihre Daten visualisieren können , sobald Sie sie tatsächlich erhalten haben, und sie in eine Benutzerpersona einfügen können. Also werde ich dich dort sehen. 33. Deine Benutzerpersönlichkeit erstellen: In dieser Lektion gebe ich Ihnen eine Adobe XD-Vorlage für die Erstellung von Benutzerpersönlichkeiten. Und Sie können diese Vorlage für all Ihre zukünftigen Arbeiten verwenden . Und ich werde Ihnen auch verschiedene Abschnitte vorstellen , die Sie für diese Vorlage und die zukünftigen Vorlagen, die Sie erstellen werden, verwenden können für diese Vorlage und . Also lass uns anfangen. Also hier bin ich in Adobe XD und wie gesagt, du wirst diese Vorlage bekommen. Schau es dir unbedingt in den Klassenressourcen an. Und wenn du hier rechts klickst, wo Bibliotheken steht , wirst du all die verschiedenen Farben sehen , die verwendet werden die du natürlich ändern kannst. Sie können einfach mit der rechten Maustaste klicken, auf Bearbeiten klicken und die Farbe wählen, die Sie wählen. Wie Sie sehen können, wird es aktualisiert. Stellen Sie nur sicher, dass wir diesen Gradienten haben. Wenn du diese Farbe wählen willst, z. B. um mit der rechten Maustaste zu klicken und zu kopieren, komm genau hier, wo Farbverlauf steht, klicke auf Bearbeiten und dann oben drauf, weil das das gelbe Zeug ist. Drücken Sie Strg oder Command V, um es einzufügen. Und du wirst genau die gleiche Farbe haben wie ich es hier gemacht habe. Oder Sie können es einfach von hier aus testen und Sie können sehen, dass es hier aktualisiert wird. Das ist also nur ein Tipp zur Farbe. Das Gleiche gilt für Charakterstile. Das ist Poppins. Sie können jede Art von Zeichenstilen verwenden, die Sie möchten. Ich habe bewusst keine Icons verwendet, um die Dinge wirklich einfach und übersichtlich zu halten. Sie können also verschiedene Arten von Komponenten verwenden. Sie können verschiedene Videos verwenden, wenn Sie Ihre Benutzerpersönlichkeit als reale Person präsentieren möchten . Sie können dies ausdrucken, indem Sie es einfach als PDF speichern. Du kannst direkt hier anrufen, Control oder Command E drücken . Und dann können Sie einfach PDF verwenden, z. B. Sie können es exportieren, Sie können es als Bild exportieren, um es auszudrucken. Oder Sie können es als PDF oder Bild exportieren und es zum besseren Verständnis online mit Ihren Kunden teilen . Aber lassen Sie uns das noch einmal zusammenfassen. Es ist wirklich wichtig, dass Sie Ihre Benutzerpersönlichkeit haben , um zu verstehen, wofür Sie entwerfen. Es ist wirklich wichtig, diese Informationen mit dem gesamten Team zu teilen. Du arbeitest vielleicht in. Sowohl Ihr Kunde, Ihre Stakeholder, das Marketingteam , die Entwickler, all die anderen Designer, jeder im Team weiß das. Das ist in diesem Fall Marcus Morris, also das ist z. B. unsere Benutzerpersönlichkeit. Wie also alles strukturiert ist , dreht sich hier um den Abschnitt. Und Sie können all diese Abschnitte bearbeiten. Sie können sie hier sehen. Wenn ich auf das Ebenen-Panel klicke, hast du dein Benutzerbild, das ist dieses, worüber sich dieser obere Abschnitt befindet. Dann haben wir Bedürfnisse, wir haben Frustrationen, soziale Medien und schließlich Lieblingsmarken. Also im Abschnitt Über uns ist, wer ist dieser Benutzer eigentlich? Und worum es bei ihnen geht. Sie werden es wieder einmal aus Ihrer Benutzerforschung verstehen. Lassen Sie uns also bestehende Nutzer verwenden, z. B. wenn Sie, sagen wir, Google Analytics verwenden werden Sie verstehen dass die Mehrheit Ihrer Nutzer, sagen wir, männlich sind, in diesem Fall aus London. UK. Also wirst du ihm einen Namen geben, sagen wir Markierungen. Und er liebt Spaziergänge mit dieser zweijährigen Tochter und Ehefrau, die sich sehr um Ihre Umwelt und eine bessere Zukunft für seine Tochter kümmern. Sie werden das anhand Ihres Treibstoffs verstehen , weitere Recherchen. werden Sie also nicht nur In diesem Fall werden Sie also nicht nur Google Analytics verwenden, auch auf der Grundlage Ihres Google Analytics erreichen diese potenziellen Personen auch auf der Grundlage Ihres Google Analytics erreichen. Sie werden das Alter notieren , da Sie die Altersspanne hier sehen können. Und du wirst den Standort genau hier kennen. Daher kannst du weiter optimieren, auf wen du auf Tube abzielst. So können Sie diese potenziellen Personen erreichen und verstehen, worum es ihnen geht. Also hat diese Person gesagt , dass sie eine Tochter hat, z. B. hat sie eine Frau. Er kümmert sich sehr um die Umwelt. Er hat eine Leidenschaft für all diese Dinge. Sie werden das also in den Abschnitt Über den Beruf eintragen. Sie werden sagen, was sie verdienen. Wenn sie Ihnen das Einkommen nicht mitteilen, können Sie es anhand der Online-Recherche leicht herausfinden , da es für jedes Land der Welt viele verschiedene Forscher gibt. Sie können also die Einnahmen direkt von den Einnahmen absetzen, was wiederum sehr wichtig ist. Wenn sie Ihnen sagen, wenn nicht, können Sie es selbst herausfinden, indem Sie anhand der Einnahmen online recherchieren . Sie können verstehen, wie viel dieser Benutzer tatsächlich auf meiner Website ausgeben kann . Also wenn das nicht der richtige Nutzer für mich ist , weil sein Einkommen zu gering ist, vielleicht weil ich den falschen Nutzer anspreche, weil meine Produkte für Dienstleistungen oder zu teuer für diesen bestimmten Nutzer sind. Sie können also sehen, warum diese Forschung wirklich wichtig ist. Noch einmal, Sie können dies verstehen, indem Sie jede Art von Benutzerforschung durchführen , die wir gerade erwähnt haben. Sie können Karten sortieren, z. B. Sie können Ihre Fragebögen erstellen, Sie können Ihre, sagen wir, Benutzerprotokolle erstellen, in denen der Benutzer Ihnen jeden Tag etwas über sie erzählt. Und Sie können so etwas wie Umfragen durchführen, wo Sie z. B. herausfinden können, wer diese Personen tatsächlich sind, dann können Sie sie kontaktieren und ihnen diese spezifischen Fragen oder andere Fragen stellen , die müssen es anhand Ihrer Ziele wissen. Noch einmal, wirklich wichtig. Sobald Sie das brauchen, können Sie ihre Bedürfnisse verstehen, weil Sie sie fragen können, was sind ihre Frustrationen, was sind die Bedürfnisse? Was brauchen sie eigentlich von einem solchen Produkt? Daher können Sie diese anhand der Antworten, die Sie erhalten werden, in diesen speziellen Abschnitt herausfiltern. In diesem Fall ist es besser, online nach einem Gebrauchtwagen zu suchen, weil ich einfach aus dem Nichts eine Kartenmarke ausgewählt habe einem Gebrauchtwagen zu suchen, weil ich einfach aus dem Nichts eine Kartenmarke . Lassen Sie mich das zusammenklappen und ein wenig vergrößern , damit Sie es ein bisschen besser sehen können. Also bessere Möglichkeit, online nach einem Gebrauchtwagen zu suchen. Diese Person möchte online ein gebrauchtes Auto finden, aber sie ist einfach verwirrt mit all diesen verschiedenen Angeboten da draußen. Einfacherer Weg, das Auto zu verstehen, das er sich ansieht. meisten Fällen werden Sie also auf diesen Auto-Websites alle möglichen Informationen sehen und im Grunde genommen nur eine Art Code , den die Leute in der Autoindustrie verstehen. Aber Leute außerhalb der Autoindustrie wissen nicht wirklich, was sie sich ansehen. Sie brauchen also eine einfachere Methode , um zu verstehen, was sie sehen. Einfacher Ansatz, um sich nach dem Fahrzeug zu erkundigen. In vielen Fällen handelt es sich also nur um ein E-Mail-Formular. Vielleicht möchte ich eine direkte Telefonnummer, vielleicht möchte ich WhatsApp oder Messenger oder Y-Bar oder was auch immer Sie verwenden , verwenden. Frustrationen, zu überfüllte und verwirrende Websites, was in den meisten Fällen der Fall ist. Noch einmal, was auf die Informationsflut zurückgeht , die die Branche nutzt. Websites sind nicht mobilfreundlich. In den meisten Fällen werden Ihre Benutzer heutzutage mobile Geräte verwenden. Wenn die Website also nicht mobilfreundlich ist, ist das eine große rote Fahne. Kühlkörper, ein Beitrag ohne Preis. Sie wollen also Transparenz. Sie wollen verstehen, welche Strömung sie auch immer betrachten. Wie viel kostet es? Sie wollen also die Transparenz sehen. Es wird sie mehr für diese Anzeige interessieren und möglicherweise früher kaufen. Gewohnheiten in sozialen Medien. Also Facebook, Twitter, Instagram, LinkedIn. Warum ist das wichtig für Ihre Marketingbemühungen? Später auf der ganzen Linie? Und Lieblingsmarken, du willst sehen, wer die Lieblingsmarken sind. Denn von diesen Lieblingsmarken können Sie vielleicht später einen Stilhinweis für Ihr Design wählen . Nehmen wir an, wenn Sie ein Muster sehen, z. B. riesige Bilder und scharfer Text, vielleicht Schwarz auf Weiß oder Farbverläufe oder Bilder von Personen, die Sie wirklich mögen, und es zieht sie auf diese Websites zurück. Dan, du kannst sie vielleicht besuchen und Hinweise für dein spezifisches Design oder Redesign nehmen, was auch immer du versuchst. In diesem Fall bin ich gerade ein paar dieser verschiedenen Logos gestoßen, aber Ihre Benutzer werden Ihnen tatsächlich eine bestimmte Reihe von Marken geben. Schreiben Sie sie unbedingt auf und stellen Sie sicher, dass Sie sie hier ablegen , um sich zu inspirieren. Schließlich haben wir so etwas wie ein Angebot. Sie können dieses Zitat wählen und Ihre Benutzer fragen, sie ein Lieblingszitat haben. Wenn nicht, dann kannst du einfach online etwas finden , das du hier platzieren kannst. Und zum Schluss wollte ich Ihnen zeigen, dass wir einen Bildverlauf haben, ich werde ihn ausblenden. Wir haben ein Bild. Ich möchte mein Bild ziehen und dort ablegen, um den Farbverlauf wiederherzustellen. Und wenn Sie jetzt ein Gesicht über Ihre Benutzerpersönlichkeit setzen, verleiht es ihr tatsächlich diese Persönlichkeit. Es zeigt Ihnen tatsächlich die Person Sie versuchen, diese Website für einige zu gestalten. Eine letzte Sache, die ich hier hinzufügen möchte, ist, dass dies nur die Abschnitte für diese spezielle Vorlage für Benutzerpersönlichkeiten sind nur die Abschnitte für . Sie können je nach Ihren Zielen und Ihren Recherchen hier noch einmal eine Reihe verschiedener Abschnitte hinzufügen je nach Ihren Zielen und Ihren . Also zum Beispiel möchten Sie vielleicht bestimmte Tags hinzufügen , die Ihre Benutzer erwähnt haben. Vielleicht ihre Gefühle, vielleicht sind sie traurig, vielleicht fühlen sie sich glücklich. Sie werden also wissen, welche Farben Sie verwenden werden. Sie werden das Tempo kennen, Sie werden die Topographie verwenden, das Layout, das auf allem basiert , was Ihre Benutzer Ihnen bei Ihrer Recherche sagen werden. Sie werden das in Ihre Persona einfügen und immer wieder auf diese Person verweisen , um sich selbst und Ihr Team daran zu erinnern. Wenn jemand, sagen wir, eine schwarze Farbe verwenden möchte und es sind irgendwie rosafarbene Websites, also wird das nicht ganz gut funktionieren. Du wirst immer auf die Persona-Vorlage zurückgreifen, um es ein bisschen besser zu verstehen und dich und dein Team daran zu erinnern, für wen gestaltest du? Also hier ist diese Vorlage für Benutzerpersönlichkeiten. Schauen Sie es sich unbedingt an, laden Sie es herunter, verwenden Sie es. Stellen Sie sicher, dass Sie all diese Abschnitte ersetzen , die Ihrer Meinung nach nicht unbedingt für Ihre spezifische Recherche bestimmt sind. Wie gesagt, du kannst einfach zurück zu hier gehen und ich gehe genau hier zurück. Wenn Sie möchten, können Sie dieses Bild viel kleiner machen , als Sie können, z. B. diesen Abschnitt so positionieren , dass er genau hier ist. Mit dieser Vorlage, die es völlig kostenlos verschenkt hat, können Sie mit allem herumspielen, was Sie wollen . Stellen Sie also sicher, dass Sie es erkunden und Ihre perfekte Benutzerpersönlichkeit erstellen. 34. User für Benutzerpersonen: Lassen Sie mich Ihnen zeigen, wie Sie eine Persona-Vorlage verwenden , die wie in Figma aussieht. Was sind einige Unterschiede zwischen Figma-Datei und Adobe XD-Datei und wie Sie sie verwenden und in Ihren eigenen Projekten wiederverwenden können. Also hier sind wir in Figma und Sie können sehen, dass das Design genau dasselbe ist. Und das ist eigentlich der ganze Punkt, denn ich wollte keine Unterschiede zwischen Figma- und XD-Dateien haben , weil Sie als Designer wählen können, mit welchem Tool Sie arbeiten möchten. Wie ich in diesem Kurs immer wieder erwähne, wird Figma das Ruder übernehmen, weil Adobe Figma gekauft hat. Das wird irgendwann passieren. Aber bevor es passiert, vergewissere dich, dass du XD verwendest, wenn du selbst tiefschwarze Eier magst, z. B. ich mag XD wirklich mehr als Figma. Aber Figma wird im Laufe der Zeit langsam zu Adobe-Produkten werden. Es wird also genau die gleichen Funktionen haben wie einige andere Adobe-Tools wie Layering, z. B. wie Airports und so weiter und so fort. Nur die Zeit wird zeigen wie Figma später aussehen wird. Aber der Sinn dieser Übung besteht darin, Ihnen zu zeigen , dass , wenn Sie die XD-Vorlage öffnen, wenn Sie die Figma-Vorlage , die beiden vergleichen. Deshalb sind sie genau gleich. Da gibt es wirklich keine Unterschiede. Und die Tools selbst werden Ihnen sehr vertraut sein. Wenn Sie jemals XD verwendet haben oder wenn Sie jemals Figma benutzt und umgekehrt zwischen diesen Tools wechseln. Wenn wir uns das ansehen, können Sie sehen, wie es aussieht. Also sind es hier im Grunde nur Gruppen. Wenn ich zu Assets wechsle, haben wir keine Komponenten, weil ich bewusst keine Komponenten erstellen wollte. Ihre Lieblingsmarken werden Ihre Lieblingsmarken sein und nicht diese Marken hier. Warum sollten Sie sie also als separate Symbole hier als separate Assets verwenden? Dann wird es für das Bild selbst ein bisschen anders sein , was die Art und Weise angeht, wie Sie ein Bild hinzufügen werden. Denn wenn Sie ein Bild auswählen, auf dem hellgrau steht ziehen Sie Ihr Bild dorthin, wo hellgrau steht. Ziehen Sie es einfach hierher und lassen Sie es los. Und es wird diesen Abschnitt mit diesem bestimmten Bild füllen . Bildverlauf wird dort bleiben, wo er ist. Sie hängen das Bild einfach an und ziehen es per Drag & Drop auf das Bild selbst, wie Sie es in Adobe XD tun, ziehen es aber lieber bis hierher, wo hellgrau steht, lehnen Sie sich darauf und lassen Sie dann los. Und es wird diesen Abschnitt mit Ihrem Bild füllen. Es ist also super einfach. Lassen Sie es also nicht hier los, ziehen Sie es und lassen Sie es dann hier los. Aber in Bezug auf die Farben heißt es hellgrau, wie ich im Design-Brief-Video erwähnt habe. Wenn Sie z. B. hier klicken, können Sie die Farben Ihres Dokuments sehen. Oder wenn Sie außerhalb von allem klicken, sehen Sie hier Textilien, Sie werden Farbstile sehen. Und hier haben wir einen Gradienten , der nur für diesen Bildverlauf ein Teil davon ist. Natürlich kannst du es dort ändern Wenn es dir also nicht gefällt, kannst du es anklicken. Lass mich dich selbst finden, damit du es ein bisschen besser sehen kannst . Also hier ist der Gradient. Sie haben das Einstellungssymbol, auf das Sie genau dort klicken können, und hier ist Ihr Farbverlauf. Also hier kannst du es auf linear wählen. Sie können mit verschiedenen Farben und Ausrichtungen herumspielen . Sie können Ihren Hex-Code hier einfügen. Sie können Ihre Adipositas einstellen. Dann kannst du hier mit der Positionierung herumspielen. Sie können verschiedene Stopps hinzufügen, Sie können verschiedene Unschärfen hinzufügen und so weiter und so fort. Und ich habe es gerade Gradient genannt, aber Sie können es nach Belieben umbenennen. Sie können einfach hier klicken und es umbenennen, wie Sie möchten. Beschreibung Für wen ist es, für wen ist es? Also vielleicht ist das für die Heldenabteilung. Du kannst es genau dort hinstellen. Also verstehe einfach den Punkt, dann kannst du zusätzliche Eigenschaften hinzufügen. Es hat nur einen linearen Farbverlauf, aber wenn Sie auf dieses Plus klicken, können Sie darüber einen zusätzlichen linearen Verlauf hinzufügen und die Opazität ein wenig verringern und dort einfach die Schriftauswahl und den Schriftstil überprüfen. Hier siehst du, dass wir z.B. wenn ich das hier auswähle, , wenn ich das hier auswähle, die Akzentfarben für diese Punkte haben und dann haben wir fast schwarze Farbe für den Text. Und wenn wir den Text selbst auswählen, z. B. in den Bedürfnissen, haben wir das automatische Layout, was die gleiche Geschichte ist wie ein Weg zu diesen Stacks in Adobe XD. Also die Geschichte, es wird genau dieselbe sein wie in Adobe XD. Du legst einfach ein paar Gegenstände in eine Gruppe. Hier werden sie Autolayout genannt. In Adobe XD werden sie Stacks genannt. Sie werden die Positionierung und die Richtung zwischen den Elementen innerhalb dieser Gruppe festlegen. In diesem Fall erfolgt das automatische Layout also von oben nach unten. Also vertikale Richtung. Und es braucht eine, braucht drei Gruppen darin. Ein Abstand von acht Pixeln genau hier. Wenn ich das also auf 20 Pixel umstelle, kannst du sehen, wie das aussehen wird , weil es am Ende einen Abstand zwischen diesem Punkt und diesem Text geben wird . Aber wenn ich die Bedürfnisse in mir selbst auswähle, also den gesamten Abschnitt, hat es genau hier 17. Also wenn ich das auf 40 erhöht habe, kannst du z.B. sehen, was das bewirkt. Spielen Sie also einfach mit diesen Beispielen herum. Und wenn Sie dies zu irgendeinem Zeitpunkt von vertikal auf horizontal ändern möchten , können Sie einfach hier klicken und Sie können sehen, was das bewirkt, es einfach zurückbringt und sich gleichzeitig automatisch anpasst. Das sind also einige Dinge , die ich hier erwähnen wollte. Wenn Sie möchten, können Sie diese Farben schnell austauschen, wie bereits erklärt. Wenn Sie möchten, können Sie die darin enthaltenen Schriftarten schnell austauschen. Sie können die Positionierung im Inneren ersetzen, Sie können die Reihenfolge ändern. Aber dieses Video soll Sie nur darüber informieren, was der Unterschied zwischen XD-Datei und Figma-Datei ist? Und wie Sie sehen können, gibt es da draußen nicht allzu viele Unterschiede. Diese Tools sind im Grunde genau die gleichen. Es ist nur so, wie du mit Bildern arbeitest, z. B. wird es zwischen XD-Figma leicht unterschiedlich sein, aber am Ende des Tages ist es genau dasselbe. Das wirst du sehen, sobald wir zum Designbereich dieses Kurses gekommen sind, denn ich werde das Design in XD durchgehen und dann das vollständige Design in Figma durchgehen, nur um dir einige Unterschiede in deiner Arbeitsweise zu zeigen. Wenn Sie sich diese beiden Abschnitte ansehen, werden Sie feststellen, dass der gesamte Prozess fast genau derselbe ist fast genau derselbe und das ist der springende Punkt hier. Lassen Sie sich vom Tool nicht einschränken. Du musst all diese Dinge wissen , die wir im Kurs erwähnt haben , um ein viel besserer Designer zu werden als du es jetzt bist. Aber sieh nicht zu groß aus, beschränke dich. Ich kann das in Microsoft Paint erstellen wenn meine Kunden mich darum bitten, aber in Figma oder XD ist es einfach viel einfacher, weil diese Tools in erster Linie für solche Aufgaben erstellt wurden . 35. ABSCHNITT 4 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, die von mir bereitgestellte Vorlage zu verwenden und sie mit Ihren eigenen Informationen auszufüllen. Sie können sich Ihre Benutzerpersönlichkeit vorstellen. Sie können ein anderes Bild einfügen. Sie können die Farben ändern, Sie können die Typografie ändern, sicherstellen, dass Sie die Logos im letzten Abschnitt der Vorlage ändern letzten Abschnitt der Vorlage nur um sie zu Ihren eigenen zu machen und nur die Praxis, sie tatsächlich zu verwenden. Dann, wenn die Zeit tatsächlich gekommen ist. Oder wenn Sie bereits einige Kunden haben und eine Benutzerpersona für dieses bestimmte Projekt erstellen möchten . Sie haben diese Vorlage oder Sie können andere kostenlose Vorlagen erkunden , die Sie online finden können. Aber jetzt haben Sie tatsächlich verstanden, was eine Benutzerpersönlichkeit eigentlich ist und warum diese Vorlagen nützlich sind. 36. ABSCHNITT 5 Wettbewerbsanalyse: Wettbewerbsanalyse ist ein äußerst wichtiger Teil des Designprozesses , weil Sie sehen möchten , mit wem Sie konkurrieren? Breite. Sie möchten sehen , wer Ihre Konkurrenz ist. Sie möchten sehen, was sie gut und was schlecht machen, damit Sie dies im Voraus vermeiden können, bevor Sie überhaupt mit Ihrem Designprozess beginnen. Sie möchten verschiedene Details ihres Produkts oder ihrer Seiten auf ihren mobilen App-Bildschirmen analysieren . Sie möchten verstehen , welche Sprache sie auf ihrer Website oder App verwenden. Und Sie möchten ein bisschen besser verstehen, was Sie nehmen können und was Sie von ihnen lernen können. Also nicht dieselben Fehler zu machen. Also lass uns anfangen. 37. Was ist eine Wettbewerbsanalyse: Wettbewerbsanalyse ist der notwendige Teil des Designprozesses, da sie Ihnen hilft Ihre Konkurrenz zu analysieren und zu verstehen, zu sehen, was sie tun und wie Ihr Produkt oder Ihr Unternehmen abschneidet. gegen diese Konkurrenz. Es ist wirklich wertvoll, eine Wettbewerbsanalyse durchzuführen, insbesondere zu Beginn des Designprozesses, da Sie klar verstehen können, was Ihre Ziele sind, was Ihre Ziele und was Ihre Durchführung von Wettbewerben, die gleich oder anders sind als das, was Sie vorhaben. Sie können eine Konkurrenzanalyse unabhängig von der Website Ihres Kunden durchführen oder ob er eine Website hat oder nicht. Es wird jedoch immer empfohlen, ganz am Anfang des Designprozesses mit der Wettbewerbsanalyse zu beginnen , damit Sie verstehen, was Ihre Hauptziele und was Ihre wichtigsten sind Ziele für dieses spezielle Projekt? Durch eine Wettbewerbsanalyse können Sie die Stärken und Schwächen Ihrer Konkurrenz verstehen und verstehen, was Sie als Designer anstreben sollten und welche Probleme Sie lösen sollten? Sie können auch verstehen, ob es eine Marktlücke gibt , und kann Ihr Produkt oder Ihre Dienstleistung diese Lücke schließen? Durch diese Wettbewerbsanalyse können Sie die Vor- und Nachteile Ihres Produkts verstehen . Vielleicht ist Ihr Angebot nicht überzeugend genug. Ihre Konkurrenten bieten etwas, das überzeugender zu einem besseren Preis ist, und das Wichtigste für uns Designer ist, zu verstehen, Sie tatsächlich irgendwelche Designänderungen vornehmen müssen dieses besondere Design nur um der Sache willen? Oder verlangt es Ihre Konkurrenz tatsächlich von Ihnen, diese Änderungen vorzunehmen? Was ich damit meine ist, designe nicht nur um des Designs willen. Entwerfen Sie, um bei einer bestimmten Aufgabe oder einem bestimmten Ziel besser zu sein als Ihre Konkurrenz . Schließlich hilft Ihnen eine Wettbewerbsanalyse bei der Lösung Usability-Problemen, da Sie Ihre Konkurrenten vergleichen und sehen können, was sie tun. Sehen Sie, ob Ihr Produkt für Ihre Benutzer auf verschiedenen Bildschirmgrößen, z. B. Desktop, Tablet oder Handy, ausreichend nutzbar Ihre Benutzer auf verschiedenen Bildschirmgrößen, z. B. Desktop, ist. Skaliert Ihr Produkt auf all diesen Größen gut, wird es gut angezeigt, besteht es die erforderlichen Tests, z. B. zur Optimierung? Laden die Bilder schnell, wenn Sie Animationen haben, wie schnell laufen Animationen? Sie können all diese Dinge ganz am Anfang Ihres Designprozesses tun , nur um zu verstehen, wie Ihr Produkt oder Design im Vergleich zu Ihrer Konkurrenz abschneidet. Im nächsten Video werden wir über verschiedene Arten der Wettbewerbsanalyse sprechen . Also werde ich dich dort sehen. 38. Arten der Wettbewerbsanalyse: Es gibt zwei Hauptarten der Wettbewerbsanalyse. Und je nachdem, wo Sie sich in Ihrem Designprozess befinden und wo sich Ihr Kunde in seinem Geschäft befindet. Du wirst das eine oder andere machen. Entweder führen Sie eine vollständige Analyse durch, bei der Sie einige der wichtigsten Wettbewerber und einige der Nebenkonkurrenten nehmen wichtigsten Wettbewerber und einige der Nebenkonkurrenten und einfach deren gesamte Lösung vergleichen. Jetzt können dies beispielsweise entweder Websites oder mobile Apps oder Produkte für digitales Design sein, und Sie werden jeden einzelnen Aspekt all dieser Wettbewerber vergleichen . Und dann werden Sie eine Lösung finden, je nachdem was die Ziele Ihres speziellen Projekts sind Sie können auch eine zukünftige Analyse durchführen. Und das bedeutet, dass Sie z. B. das Menü auf unserer Website analysieren können. Sie können die Suchfunktionalität einer Website analysieren. Sie können das Scrollen in der App analysieren. Und Sie können im Grunde eine Funktion erstellen, die für Ihren Designprozess erforderlich ist , und diese Funktion bei Ihrer Konkurrenz analysieren und sehen, wie sie abschneiden. Zu Beginn müssen Sie Ihre Ziele skizzieren und Ihr Produkt definieren. Sie müssen genau angeben, was die Ziele für Ihr spezielles Produkt oder Ihre spezielle Dienstleistung sind. Und Sie müssen es definieren und verstehen, was Ihre Zielgruppe ist und wem Sie konkurrieren möchten? Als Nächstes müssen Sie die Liste der direkten und indirekten Wettbewerber zusammenstellen . Direkte Wettbewerber sind Konkurrenten, die sich genau in derselben Nische befinden wie Sie oder Ihr Kunde, oder indirekte Wettbewerber sind Ihrer Nische nicht ähnlich, dann müssen Sie die Liste zusammenstellen von ihnen und verstehe z.B. für die komplette Analyse jedes einzelne Ding, was sie tun, wie ich schon erwähnt habe. Aber das bedeutet natürlich nicht, dass Sie beispielsweise 200 verschiedene Seiten analysieren werden , sondern die Hauptseiten ihrer Website und ihrer wichtigsten Angebotsseiten. Kann verstehen, was genau sie bieten und was Sie von ihnen lernen können. Für Ihr spezielles Unternehmen müssen Sie klare Ziele und Ziele vor Augen haben. Wenn Sie also z. B. mehr verkaufen möchten, müssen Sie diese Analyse einfach anhand dieses Teils angehen. Sie müssen also verstehen, wie sie ihre Produkte verkaufen. Sie können also ein oder zwei Dinge über Ihre spezielle Website und Ihren speziellen Prozess erfahren. Das bedeutet nicht, dass Sie sie Wort für Wort oder Abschnitt für Abschnitt kopieren werden. Aber verstehe einfach, wie sie das machen, warum sie es tun und was kannst du von ihnen lernen? Weil das der Lernprozess ist. diesem Grund passiert es ganz am Anfang Ihres Designprozesses. Eines der wichtigsten Dinge hier ist es, die Unterscheidungsmerkmale zwischen den Produkten zu identifizieren . Das bedeutet z. B. wenn Ihr Kunde und die gesamte Konkurrenz Ihrer Kunden Karten verkaufen, sagen wir beispielsweise, was ist der Unterschied zwischen all diesen Karten? Ist es der Preis? Ist es die Sitzanordnung? Sind es die Motoren? Ist die Umweltauswirkung. Was unterscheidet diese Wettbewerber Ihrem Produkt und wie kann Ihr Produkt in einigen Fällen anders oder besser sein als Ihre Konkurrenz? Du musst dann verstehen, ist das Ziel gut genug? Reicht das aus, um eine Website als Hauptmerkmal zu platzieren , z. B. als Hauptverkaufsargument, müssen Sie all diese Dinge verstehen, wenn Sie sich der Wettbewerbsanalyse nähern. Was bieten Sie im Grunde an und ist es besser oder günstiger als Ihre Konkurrenz? Und wie können Sie das so verpacken, dass die Benutzer es besser verstehen und hoffentlich mehr kaufen können , wenn dies Ihr Hauptziel ist. Im nächsten Video zeige ich Ihnen, wie Sie eine vollständige Analyse durchführen. Und ich werde Ihnen nur ein paar Schritte zeigen, die Sie unternehmen können , und wie Sie die vollständige Analyse angehen können. Also werde ich dich dort sehen. 39. Wie man eine vollständige Analyse durchführt: In diesem Video zeige ich Ihnen, wie Sie eine vollständige Analyse Ihrer Konkurrenz durchführen eine vollständige Analyse Ihrer und wie Sie sie angehen können? Natürlich werden wir nicht auf zu viele Details eingehen, aber ich möchte nur, dass Sie das Wesentliche und die Grundlagen verstehen das Wesentliche und die Grundlagen verstehen wie Sie vorgehen können, wenn Sie dies mit Ihren Kunden tun. Also lass uns anfangen. Hier haben wir also zwei Websites, die im Grunde dasselbe Produkt verkaufen , in diesem speziellen Fall das Auto. Und ich habe meine beiden lokalen Websites ausgewählt. Wenn Sie also hier und da einen Serben sehen, achten Sie nicht darauf. Ich habe gerade versucht, es ins Englische zu konvertieren. Aber der springende Punkt hier ist, zu verstehen, wie ich das angegangen bin, als ich mit meinen Kunden zusammenarbeite. Also habe ich versucht, zwei Marken mit wirklich ähnlichen Preisen und sehr ähnlichen Angeboten zu vergleichen mit wirklich ähnlichen Preisen und , denn nehmen wir an, mein Kunde befindet sich in derselben Preisklasse wie diese beiden Marken. Es ist auf demselben Markt wie diese beiden Marken positioniert. Und sie bieten im Grunde die gleiche, sagen wir, Palette von Produkten wie diese beiden Marken an. Wie können wir unsere Website also gegen diese Konkurrenz positionieren , nur um zu sehen, was sie tun und was wir lernen können, wenn wir eine vollständige Analyse ihrer Websites durchführen? Also, hier oben beginnen wir, haben wir das Menü und wir haben wieder das Menü. Aber hier haben wir einen benutzerfreundlicheren Ansatz da wir nicht nur das Symbol, sondern auch die Suche erhalten. Wenn ich also auf Suchen klicke, kann ich schnell nach einem Modell suchen und dann Okay drücken oder zum Schließen gehen, was eine wirklich gute Benutzeroberfläche ist. Dann haben wir das Logo genau hier auf der rechten Seite. Während wir auf dieser Website sind, haben wir nur die Speisekarte. Wenn ich klicke, um das Menü zu öffnen, haben wir all diese Optionen, aber wir haben keine Suche. Und ich weiß mit Sicherheit, dass Qia viele verschiedene Fahrzeuge anbietet. Sie haben neue Fahrzeuge, sie haben gebrauchte Fahrzeuge. Also eine gute Suchfunktion ist hier wirklich notwendig, aber wie Sie sehen, gibt es sie wirklich nicht. Als nächstes haben wir dieses riesige Bannerbild hier, denn dies ist das neue Produkt sie hier bei Citroen anbieten. Aber hier, hier, haben wir nur diesen riesigen Slider für die Heldensektion. Und wir haben hier keine Optionen. Wir können nichts tun. Wir haben nur diesen riesigen Schieberegler mit diesen beiden Pfeilen. Aber wenn ich mich vom Bildschirm wiederfinde, nur damit Sie sehen können, wenn Sie nach unten scrollen, sind Informationen tatsächlich hier. Wenn ich also hier klicke, kannst du sehen, dass wir Informationen haben, wir haben Schaltflächen, sie funktionieren beim Hover. Alles ist großartig, aber wenn du genau hier bist, weißt du im Grunde nicht, was du tun sollst. Und das ist meiner Meinung nach eine wirklich schlechte Benutzererfahrung. Dann haben wir hier dieses neue S3-Flugzeug, das ist dieses Fahrzeug, weil es genau hier steht. Es ist also wieder einmal wirklich klar, was sie anbieten. Wir haben meiner Meinung nach diesen Button mit schönerem Hover-Effekt , diesen Hover, wir haben nur die Texte unterstrichen. Dieser Schwebeflug ist also viel einfacher zu sehen, viel angenehmer, viel angenehmer für das Auge. Und es funktioniert einfach viel besser als dieser Hover für Qia. Wenn wir etwas nach unten scrollen, dann haben wir unsere Reichweite. Also ich kann hier klicken und das gleitet tatsächlich. Das ist also ein Nachteil, denn wenn ich nach unten scrolle, kann ich sehen, dass es eine Seitennummerierung gibt und ich kann darauf klicken und diese Informationen werden angezeigt. Aber wenn ich auf diese Folie klicke, gibt es hier keinen Button. Das ist also ein großer Nachteil, da dies eines ihrer teuersten Modelle ist. Und Sie werden erwarten , dass es einwandfrei funktionieren wird, aber in diesem Fall funktioniert es nicht. Außerdem gibt es hier keine Pfeile. Wenn ich also genau hier klicke , werde ich zu dieser speziellen Seite weitergeleitet , die ich nicht möchte. Ich möchte nur zwischen ihnen hin- und herwechseln, aber es gibt keine Pfeile und Tasten oder ist das in diesem Fall viel besser? Vielleicht wäre eine Kombination aus beiden für unser Produkt viel besser als eine Kombination dieser beiden, wenn Sie sie tatsächlich zusammenstellen. Meiner Meinung nach, wenn man dann etwas weiter nach unten scrollt, gibt es einen Bereich. Wir haben also Personenkraftwagen und wir können sie tatsächlich zusammenbrechen lassen. Und wir haben Nutzfahrzeuge, was großartig ist. Wir haben Geschäftsfahrzeuge. Und es wird mir diese im Grunde Nutzfahrzeuge zeigen , die aber für Unternehmen etwas kleiner sind. Nehmen wir an, wenn Sie in großen Mengen kaufen möchten, können Sie dies mit diesen Autos tun, aber bleiben wir in diesem Fall bei Personenkraftwagen. Also hier haben wir nur diese beiden. Und ich weiß mit Sicherheit, dass es noch viel mehr gibt. Aber wie kann ich auf sie zugreifen? Weil das C3, C3b ist, wohingegen das C4, wo ist das S5, wohingegen das C1 ist, gibt es für mich keine Optionen, nach links oder rechts zu klicken, z. B. während ich auf einer Website bin, wenn ich nach unten scrolle, es gibt keinen Abschnitt wie diesen. Wenn ich also versuche, dies zu vergrößern und nach unten zu scrollen, können Sie sehen, dass es auf Qia-Websites keinen solchen Abschnitt gibt. Lassen Sie mich das also genau hier kleben und lassen Sie mich versuchen, es so zu vergrößern, damit wir bei dem bleiben, was ich Ihnen zuvor gezeigt habe. Wenn ich also etwas nach unten scrolle, ist das ein großes, großes Häkchen für mich, für Citroen in diesem Fall, weil. Sie zeigen dir sofort ihr Modell. Während wir hier sind, sehen wir nur diese Modelle, die hier gezeigt werden. Und ich weiß mit Sicherheit, dass dieses Fahrzeug, das elektrisch ist, derzeit auf meinem lokalen Markt in Serbien nicht zum Verkauf steht . Also warum würdest du es hier abstellen, wenn ich es nicht kaufen kann? Wenn ich also genau dort klicke, erhalte ich einfach all diese großartigen Bewertungen. Es wird mir all diese Artikel über dieses Auto geben , aber was ist der Sinn, wenn ich es nicht kaufen kann? Nun, auf der Citroen-Website sind sie in diesem Fall wirklich ehrlich. Also all diese Fahrzeuge, die Sie auf ihrer Website sehen, können Sie heute tatsächlich kaufen, was meiner Meinung nach das Tolle ist Auf dieser speziellen Website unten haben wir einen Berater. Wir können mehr über diesen Berater erfahren. Wir haben Verkaufsstellen, was wieder einmal fantastisch ist weil ich wissen kann, wo meine lokalen Händler sind, wo ist das Servicenetz, wie sind die Öffnungszeiten und so weiter? Dann haben wir hier eine Art Blog, die neuesten Nachrichten, wir haben den Newsletter, und endlich haben wir einige Fotooptionen und Informationen über soziale Medien. Schließlich bleibt das immer klebrig. Also Preislisten und Konfiguration, damit ich sofort mein neues oder gebrauchtes Fahrzeug konfigurieren kann. Wir haben eine Preisliste, was fantastisch ist, weil ich nur einen Preis auf einen Blick sehen möchte , der immer erstellt wird. Und schließlich haben wir unsere Dienstleistungen und unser Angebot. Und wir haben das, was uns wieder an die Spitze bringt. Wenn wir das mit dem Kia vergleichen, wenn ich hier scrolle, wie gesagt, finde einen Vertreter. Es gibt also keine Möglichkeit wie auf der Citroen-Website, sie sofort zu sehen. Ich muss auf Externe Seite klicken. Wir haben die Fahrprüfung, was im Grunde eine Probefahrt bedeutet. Aber Google hat es in diesem Fall nicht so gut übersetzt. So kann ich eine Probefahrt buchen, was super ist. Und das kann ich nicht direkt hier auf den Preisen und Katalogen der Citroen-Website tun. Aber all das muss ich klicken und nach draußen gehen, was du auch mit Citroen immer noch zu tun hast. Zumindest in ihrem Fall können Sie diese, diese Informationen jederzeit sehen . Schließlich haben wir eine Fußzeile, die eine große Fußzeile ist, im Fall Citron nicht identisch ist. Also lass mich nochmal bewegen, damit du es sehen kannst. Hier haben wir also Dienstleistungen und Angebot, während wir hier Neufahrzeuge, Gebrauchtwagen für Unternehmen, für Eigentümer Innovationen über KIA haben Gebrauchtwagen für Unternehmen, , wir vermieten einen kleinen Verlust und all diese Dinge. Je nachdem, was Sie mögen und welchen Ansatz Sie mögen, entscheiden Sie sich für den einen oder anderen. Aber meiner ehrlichen Meinung nach würde ich in genau zwischen diesen beiden diesem speziellen Fall lieber Informationen für unseren fiktiven Kunden kombinieren , genau zwischen diesen beiden. Ich würde also Informationen von Citron-Website verwenden und in diesem Fall das Qia-Website-Design verwenden, um eine kleine Kombination all dieser Informationen zu erreichen, werde ich auf jeden Fall eine Suche direkt hier auf der wichtigsten Website. Auf jeden Fall. Und ich würde diese Informationen nach oben verschieben, ich würde dieses Bild etwas verkleinern , so wie es auf dieser Website steht. Denn selbst auf größeren Seiten, noch größeren Formaten, wie in diesem speziellen Fall, können Sie genau hier sehen, wie viel leeren Speicherplatz und verschwendeter Speicherplatz vorhanden ist. Ich verstehe es, während sie das tun, aber meiner ehrlichen Meinung nach müssen Sie das nicht wirklich tun. Sie können es einfach so angehen , wie es Citroen tut. Geben Sie Ihren Benutzern einfach die Möglichkeit, auf externe Seiten zu gehen und mehr über bestimmte Produkte zu erfahren , z. B. aber in diesem speziellen Fall hätte ich wirklich gerne die Kombination zwischen diesen beiden Webseiten. Im nächsten Video zeige ich Ihnen einen Funktionsvergleich. Und wie können Sie den Funktionsvergleich anhand dieses Beispiels angehen , das ich Ihnen gerade für diese beiden Websites gezeigt habe, weil es viel einfacher ist, sich an diese Websites zu halten. Also werde ich dich dort sehen. 40. Wie man eine feature durchführt: In diesem Video führen wir eine Feature-Analyse durch und verwenden dieselben beiden Beispiele , die wir verwenden dieselben beiden Beispiele , die Ihnen nur in einem vorherigen Video zeigen, aber anstatt uns auf die gesamte Website zu konzentrieren und all die Seiten und Reaktionsfähigkeit und solche Sachen. Wir werden uns nur auf ein einziges Feature konzentrieren und sehen, wie diese beiden Marken dieses einzelne Feature, die Option für den Fahrzeugkonfigurator auf ihrer Website, umsetzen. Also lass uns anfangen. Hier haben wir die beiden Websites , die ich Ihnen zuvor gezeigt habe. Und wie ich in diesem Video sagte, konzentrieren wir uns auf ein einziges Feature, nämlich die Konfiguration Ihres Autos. Es ist wirklich wichtig und in den meisten Fällen möchten Sie , dass das Auto genau Ihren Spezifikationen entspricht. Das kann entweder die Farbe oder die Räder oder die Innenverkleidung sein oder sagen wir, ich weiß nicht, das Informationspaket darin. Vielleicht möchtest du also diesen größeren Bildschirm haben. Vielleicht möchten Sie, dass die Sicherheitsgarantie die Sicherheitsgarantie länger ist oder was auch immer Sie möchten , hier ist der Fahrzeugkonfigurator praktisch. Hier bin ich auf diesen verschiedenen Seiten. Und meiner Meinung nach macht Qia die Dinge in diesem speziellen Fall nicht nur besser, sondern auch Miles besser. Was ich damit meine ist, dass Citrullin einfach eine viel einfachere Option als Kia ist, sofort zu kaufen. Denn wenn du dieses Sutra und dieses Modell kaufen willst, in diesem Fall ist es ein C3, du kommst einfach hierher, wählst deine Option aus und hol sie dir. So einfach ist das. Bei Qia ist es dieser gesamte Prozess, der ihm ein raffinierteres Aussehen verleiht . Wieder einmal sind beide gut. Wenn Sie in großen Mengen kaufen, ist Citroen vielleicht eine viel bessere Option für Sie, da Sie einfach durchstöbern, den Preis analysieren, den Preis vergleichen und mit anderen Modellen herausfinden können, welches für Sie besser geeignet ist. Machen Sie sich mit diesen Paketen vertraut und tätigen Sie dann einfach Ihren Kauf, während Sie den Schlüssel haben. Oder Sie können sich all diesen feinen Details etwas mehr hingeben . Zuallererst sind dies die Seiten, spezielle Seiten für diese beiden spezifischen Modelle. Also hier können wir Fahrzeuge sehen, neuen S3, und hier können wir diese Tonics sehen. Das sind also zwei Seiten für diese speziellen Modelle. Also das Wichtigste zuerst, die Citroen-Seite reagiert nicht allzu schnell, weil Sie sehen können, dass ich hier durchblättern kann und hier haben wir vier verschiedene Schritte im Kaufprozess. Der erste Schritt besteht im Grunde darin, zu bestimmen, für welches Modell und welches umfangreiche Optionspaket Sie wählen möchten. Als Nächstes müssen Sie Ihre Probefahrt buchen. nächste ist, die Information zu hinterlassen , und die nächste ist die Konformation, die letzte, ich sollte sagen, die Zahl Vier in diesem speziellen Fall. Und sie haben hier die Möglichkeit, Modelle zu vergleichen. Sie haben die Option für Filter. Ich kann also fünf Türen verwenden, ich kann drei Türen verwenden, das ist das Getriebe, das ist der Kraftstofftyp ist Diesel oder Benzin und die Ausstattung. Und Sie können im Grunde auf diesen Filter klicken und diese verschiedenen Änderungen anwenden. Und wieder einmal habe ich diese Websites von meinem lokalen Markt ins Englische übersetzt . könnt also besser verstehen, dass wir hier das Äußere haben, hier haben wir das Innere und hier haben wir den Zielbildschirm . Wenn ich genau dort klicke, wird er im Grunde genommen vergrößert und auf Vollbild gestellt . Und darunter haben wir diese verschiedenen Blickwinkel. Das sind also im Grunde PNG-Bilder. In diesem speziellen Fall werden Sie feststellen, dass wir nicht die Möglichkeit haben, verschiedene Farben zu wählen also ist Schritt Nummer zwei praktisch. Später. Wir haben das Field Pack und Sie können sehen, dass sich die Optionen ändern, wenn ich genau dort klicke und wir das Shine Pack haben. Noch einmal, es wird sich ändern, im Grunde nur hier und da ein paar Details hinzufügen. Das Gleiche gilt für den Innenraum. Sie können sehen, wie das im Feld aussieht . Sie werden den größeren Infotainment-Bildschirm im beschämten Rücken bekommen, Sie werden hier und da etwas mehr Optionen bekommen. Wenn Sie dann auf das Innere klicken, haben Sie die 360 Grad. Aber nur für den Innenraum können Sie klicken und ziehen, um zu verstehen, wie der Innenraum aussieht, und das war's im Grunde. So wirklich einfach. Noch einmal, genauso wie auf der Homepage im vorherigen Video , in dem wir sie vergleichen. Das ist im Grunde alles. Sie haben Ihren Preis sofort hier. Citroen ist also etwas ehrlicher, sagen wir es so. Was sie dir anbieten, was sie dir zeigen, dann ist Qia, aber diese Seite ist wirklich super einfach. Also noch einmal, es ist nicht zu jedermanns Geschmack, aber wenn wir uns Kias Beispiel hier ansehen, sofort, größere Bilder, schöneres Design, mehr Optionen, versuchen, Ihnen in diesen sieben Jahren zu verkaufen Garantie, die Citron nirgends erwähnt, welche Art von Garantie Sie tatsächlich haben, genau hier. Wenn ich auf Mehr lesen klicke , erhalte ich vielleicht diese Optionen. Aber ich kann keine dieser Optionen direkt hier anwenden . Während es Qia ist, hast du diese schönen Bilder. Sie können auf all diese Bilder klicken und Sie haben die Informationen direkt unten. Sie können verstehen, was all diese Dinge sind. Also wenn ich genau hier klicke, voller Inhalt, Fahrgastraum. Es gibt Ihnen also sofort die Antwort. Dann haben wir Dystonic und wir haben die atemberaubenden GT-Linien. So kann man den Unterschied zwischen den Stoßfängern deutlich erkennen , auch die Räder. Die Farbkombination genau hier. Und Sie können die 360-Grad-Ansicht starten. Sie können sehen, wie es aussieht, aber ich möchte es für das reguläre Modell auf den Markt bringen. Ich kann es an jedem Punkt beenden und ich kann klicken und ziehen und im Grunde in jedem beliebigen Winkel für mich selbst vergleichen , was mir gefällt, was mir nicht gefällt, und vielleicht ist das nicht die Option für mich. Endlich haben wir die Probefahrt, sodass Sie sie sofort von hier aus buchen können. Auf der Citroen-Website können Sie dies zwar nicht tun, aber Sie müssen all diese verschiedenen Schritte ausführen und haben den Katalog damit Sie die Optionen für Ihr Auto verstehen können. Sie können verstehen, dass dies nur die Farben sind, die sie hier anbieten, aber vielleicht möchten Sie eine benutzerdefinierte Farbe. Vielleicht ist das eine Option in ihrem Katalog, sodass Sie direkt dort klicken können. Vielleicht bieten sie Ihnen zusätzliche Optionen, zusätzliche Dienstleistungen, eine längere Garantie, solche Dinge. Deshalb ist der Katalog wirklich nützlich. Schließlich haben wir die Farben, also das ist die vorgegebene Kombination, und Sie können sehen, wenn ich darauf klicke, dass sie sich in Echtzeit ändern, was fantastisch ist, weil Sie Vergleiche und finde heraus, welche du magst, welche du nicht magst. Und vielleicht kann ich sogar hier klicken , um einfach die Farben auszuwählen , die nicht zweifarbig sind, weil die meisten davon zweifarbig sind wie diese, z. B. vielleicht bin ich einfach einfacher oder konservativer Draht . Vielleicht möchte ich hier klicken, um das zu verstehen und zu sehen, wie es aussieht N. Schließlich, wenn Sie fertig sind, können Sie 360 in dieser bestimmten Farbe starten , um zu sehen, wie es von alle Seiten, was ich fantastisch finde. Ein Nachteil ist, dass ich die Ansicht gestartet habe und beispielsweise zu diesem Winkel gegangen bin und dann klicke, um diese andere Farbe anzuwenden. Es wird es wieder hierher bringen, und es ist nicht allzu weit fortgeschritten, sagen wir, bei dieser bestimmten Ansicht und diesem speziellen Farbschema zu bleiben . Aber es ist wirklich egal. Du kannst es jederzeit starten und es wird immer so scrollen und du kannst es selbst machen, wenn du willst. Darunter haben wir dann Eigenschaften. Sie zeigen uns , welche Optionen Sie sofort erhalten, welche Optionen, sagen wir, zusätzliche Optionen sind. Sie haben diese ausgewählt und Sie können die Farbe sehen, aber die Farbe wurde nicht aktualisiert. Das ist vielleicht ein Nachteil , weil ich mich nicht für diesen entschieden habe. Ich habe mich tatsächlich für dieses graue entschieden. Warum wurde es hier nicht aktualisiert? Vielleicht ist das eine Option, die etwas weiter untersucht werden sollte. Sie können Ihr Fahrzeug direkt hier wechseln. Also, wenn du dieses Tonikum nicht willst, willst du vielleicht ein anderes Auto von hier. Du kannst es genau dort machen. Endlich können Sie hier einen trockenen Schreibtisch buchen. Das ist also der zweite Schritt , den Citroen genau hier unternimmt. Sie stellen alles auf dieselbe Seite, was auf einen Blick viel einfacher zu verstehen ist. Finden Sie heraus, was von Ihnen verlangt wird. Ich muss meinen Namen, Nachnamen und meine Telefonnummer angeben, damit ich verstehe, was es ist. Und hier habe ich den Preis , den ich für Citroen hier habe, aber ich habe den Preis genau hier. Was mir an Citroen mehr gefällt, ist, dass es uns diese verschiedenen Preisoptionen sofort hier zeigt . Der Preis steht Ihnen also immer zur Verfügung , während Sie bei Qia ganz nach unten scrollen müssen. Mal sehen, das ist 15249. Wenn ich mich für diese teurere Option entscheide, wird sich das vielleicht ändern? Nein, das ist nur ein Bannerbild. Vielleicht sollten sie also mehr Einkaufsmöglichkeiten aktualisieren , damit sie Sonderangebote haben und Fahrzeuge benutzen. Das alles ist großartig, aber ich bevorzuge die Offenheit der Citron-Website hier sehr. Also vielleicht würde die Kombination der beiden für unsere Website, imaginäre Website, viel besser funktionieren. Nehmen wir an, Design, Bildsprache, Anpassungsoptionen und all diese Dinge könnten vielleicht besser funktionieren, z. B. während Offenheit, Transparenz und Benutzerfreundlichkeit vielleicht mit dem Beispiel von Citron funktionieren sollten. Aber es liegt nicht an mir, etwas zu sagen , weil wir nicht wirklich Ziele haben. In diesem speziellen Video zeige ich Ihnen nur Beispiele. Wenn Sie dies mit Ihren echten Kunden tun, müssen Sie ihre Ziele und auch ihre Budgets verstehen. Denn die Entwicklung einer Lösung wie Kia in diesem speziellen Fall viel länger dauern kann viel länger dauern und viel teurer sein als eine solche Lösung. Und je nachdem, wie viel Geld für Ihre Kunden verdient werden kann, ist die Citroen-Option vielleicht eine bessere Option als die Kia-Option, obwohl ich sage, vielleicht nur mit diesen statischen Bildern, wie er es gerade hier tut, Sie können es hier viel besser machen als das, was Citroen standardmäßig macht. Achte also einfach auf solche Details. Schauen Sie sich an, was sie anbieten, und schreiben Sie all diese Optionen auf, all diese Lösungen, was jeder von ihnen anbietet. Schreiben Sie es auf, um es zu verstehen und zu vergleichen. Gehen Sie viele Ihrer verschiedenen Konkurrenten durch , um zu verstehen, was sie besser oder schlechter machen als Sie und was Sie von ihnen lernen können. Im nächsten Video werden wir über Tools sprechen. Welche Tools können Sie verwenden? Also werde ich dich dort sehen. 41. Welche Tools man verwenden sollte: In diesem Video werden wir über Tools sprechen, die Sie für die Wettbewerbsanalyse verwenden können , und welche Tools sind besser als die anderen? Und schließlich, welche Tools sind am Ende des Tages besser für Sie? Also lass uns anfangen. Also hier haben wir das Bild, und das sind die Bilder , die ich online aufgenommen habe. Und ich wollte dir nur zeigen, dass es eigentlich egal ist , welche Tools du verwendest. Was zählt, ist, dass sie einen Job für Sie erledigen, denn wenn Sie z. B. Adobe XD ständig in Ihrer Arbeit verwenden . Es macht keinen Sinn , zu anderen Tools zu wechseln , da Adobe XD die Arbeit genauso gut, wenn nicht sogar besser als all diese anderen Tools erledigen kann . Das Gleiche gilt, wenn Sie Photoshop verwenden, wenn Sie Word verwenden, wenn Sie Google-Produkte verwenden, spielt es keine Rolle. Was zählt, ist, dass Sie den Vergleich für all diese verschiedenen Produkte durchführen können . Sie können also sehen, dass sie in diesem speziellen Fall Adobe Illustrator verwenden , um Wettbewerbsanalysen durchzuführen. Wenn wir zu einem anderen Fall wechseln, verwenden sie Google Sheets. In diesem Fall. Hier verwenden sie Google Slides für eine etwas bessere Darstellung. Hier gibt es Whiteboards, sodass Sie das sogar tun können. Sie können es mit klebrigem Papier machen, Sie können es mit weißer Tafel machen, Sie können es mit weißen Zetteln machen. Sie können es ausdrucken, da Sie sehen können, dass sie es hier getan haben. Sie können alle Seiten dieser Website ausdrucken und verstehen, was sie tun, aber Sie können auch Screenshots machen und sie auf Adobe XD übertragen. Und all das können Sie in Adobe XD tun. Wenn Sie XD verwenden, ist es für Sie nicht wirklich sinnvoll, sich ein teures Whiteboard zu besorgen, teure Marker, um all diese Papiere zu drucken, einen Drucker zu kaufen, wenn Sie ihn nicht haben, wenn all das in Adobe XD oder in dem Tool erledigt werden kann, das Sie bereits für Ihre Arbeit verwenden. Schließlich haben wir hier das Tool namens Extensor, und Sie können die meisten Dinge tun , die gerade erwähnt wurden, aber manchmal sogar ein bisschen mehr, weil sie all diese Vorlagen erstellen , die Sie Erstellen Sie sich selbst am Ende des Tages, wenn Sie anfangen, mit diesen Kunden zu arbeiten, können Sie diese Vorlagen in jedem Tool wiederholen , das Sie verwenden. Aber zum Beispiel können Sie in diesem Fall einfach die Links zu Ihren Konkurrenten plunkern. Sie können die Informationen direkt hier eingeben. Sie geben dir diese Vorlagen, wie ich bereits erwähnt habe. einem Tool wie diesem ist es also etwas einfacher , wenn Sie sich in dieser kurzen Zeitleiste befinden, aber das muss nicht sein. Sie können dies in jeder Art von Tool oder Software tun , die Sie verwenden. Also, wie ich bereits erwähnt habe, ist es eigentlich egal, was Sie verwenden, solange Sie es richtig verwenden, solange Sie es verwenden, oder? Und solange es den Job macht. Im nächsten Video werden wir über die Dinge sprechen, auf die Sie achten sollten, häufige Fehler und Fallstricke. Also werde ich dich dort sehen. 42. Worauf du achten solltest: In diesem Video werden wir über Dinge sprechen, auf die Sie bei Ihrer Wettbewerbsanalyse achten sollten, sowie einige der besten Praktiken, wie Sie diese Wettbewerbsanalyse angehen können wenn du es tust? Und die erste Sache ist, tun Sie Dinge nicht nur um des Designs willen. Denke über die Ziele nach. Denken Sie darüber nach, was Ihr Kunde tatsächlich anbietet. Was ist ihr Kernangebot? Und versuchen sie, sich von der Konkurrenz zu unterscheiden, oder versuchen sie, die Konkurrenz preislich zu schlagen ? Versuchen sie, die Konkurrenz in Bezug auf das Umsatzvolumen zu schlagen? Was ist das Ziel hier und was ist das Problem, das Sie eigentlich zu lösen versuchen? Verbringen Sie also nicht Monate Ihres Designprozesses damit , schöne Bilder zu platzieren , wie ich es Ihnen in einem der vorherigen Videos mit den Autobeispielen gezeigt habe . Tun Sie das nicht einfach, um das zu tun. Tun Sie das, wenn das nötig ist. Wenn das das Hauptziel ist und wenn damit versucht wird, Hauptproblem zu lösen, mit dem das Hauptproblem zu lösen, mit dem Ihr Kunde tatsächlich konfrontiert ist, besteht der nächste Schritt darin, die Dinge nicht nur zu tun , um Dinge zu tun. Ich meine damit, wenn Sie anders sein möchten, versuchen Sie, anders zu sein mit dem, was Sie anbieten und wie Sie es verpacken, nur um sich von Ihrer Konkurrenz abzuheben und Ihr Angebot zu präsentieren auf eine viel bessere und überzeugende Weise. Anstatt zu versuchen, die Suche so neu zu definieren, wie die Suche aussieht, oder das Menüsymbol zu positionieren, sagen wir, die rechte Seite zur linken Seite, nur um anders zu sein. Versuche nicht, das zu tun. Versuche nicht, das heiße Wasser neu zu erfinden, weil du nur wertvolle Zeit mit Dingen verbringst, die nicht wichtig sind. Und unter Dingen, die Ihrem Kunden und seinen Kunden keinen Wert bringen werden. Versuchen Sie, einigen Beispielen und Regeln zu folgen , die bereits von der Branche festgelegt wurden , in der Ihr Kunde tätig ist, insbesondere wenn er in einer bestimmten Nische tätig ist. Versuchen Sie zu verstehen, was Nietzsche tut es und warum sie es tun. Und versuche es selbst zu machen, nur auf deine Weise. Versuchen Sie noch einmal nicht, zu kopieren, was sie tun, da dies für Ihr Angebot und Ihr Produkt nicht funktioniert. Versuche anders zu sein, aber versuche, überzeugend zu sein in dem, was du tust. Wichtigste dabei ist, die Dinge mit einem Ziel zu tun. Versuche nicht, Dinge nur zu tun, um Dinge zu tun. Tun Sie Dinge mit einem Ziel, das Ihre Kunden und Ihre Kunden verändern wird . Kunden am Ende des Tages. 43. ABSCHNITT 5 AUFGABE: Ihre Aufgabe für diesen Abschnitt besteht lediglich darin , zwei verschiedene Marken auszuwählen. Dies können alle Marken sein, die Sie wollen, annualisiert und verwenden Sie einfach was ich Ihnen in dieser, in diesen Lektionen gezeigt habe. Du kannst deinen Bildschirm benutzen. Du kannst es durch zwei teilen. Sie können diese beiden Websites nebeneinander stellen und sie einfach analysieren, indem Sie direkt von oben nach unten gehen. Beginne mit dem Header-Bereich, beginne mit dem Heldenbereich, beginne mit der Topographie, beginne mit der Kopie. Sie verwenden Dinge aus Bildern, wie sie das positionieren. Gibt es eine Geschichte hinter diesem Design? Was sie sagen wollen, versuchen Sie, all diese Details zu analysieren, über die wir in diesem Abschnitt gesprochen haben , und versuchen Sie, sie aufzuschreiben. Sie können Word verwenden, Sie können Microsoft Office verwenden, Sie können Google Docs verwenden, was auch immer Sie wollen. Sie können sogar ein Stück Papier verwenden. Übe einfach, verstehe einfach, was du auf dem Bildschirm siehst. Konzentrieren Sie sich nicht zu sehr auf die Positionierung der Elemente und all das visuelle Zeug, achten Sie darauf, sich auf wichtigere Dinge wie die Struktur zu konzentrieren , Beispiel darauf, worüber sie tatsächlich sprechen diesen Seiten und zum Beispiel, wie die eigentliche Kopie aussieht, weil die Kopie zusammen mit den Bildern das ist, was die Benutzer tatsächlich anspricht. 44. ABSCHNITT 6 Benutzerströme: User Flows zeigen dir, wie sich deine Nutzer durch deine Seiten bewegen, wie sie sich durch deine Website oder deine mobile App bewegen. Und mit Benutzerströmen versuchen Sie nur zu verstehen, was der kürzeste Weg ist , den Ihre Benutzer einschlagen müssen , um ein Ziel zu erreichen Sie können sie auch verzweigen und eine Sortierung erstellen Wenn ein Aufgabenablauf für jede Aufgabe, die Sie verwenden möchten, zu übernehmen ist, erstellen Sie verschiedene Aufgabenabläufe auf Ihrem gesamten Benutzerablauf basieren. Fangen wir also mit diesem Abschnitt an. 45. Was sind Benutzerströme: Benutzerflüsse, alle Flussdiagramme, wie sie manchmal als unsere Pfade bezeichnet Ihre Benutzer nehmen an, wenn sie ein Produkt verwenden, sie zeigen einen kompletten Teil den Ihr Benutzer nimmt, vom Einstiegspunkt bis hin zu der Endpunkt, wenn sie ihre Reise beenden. Es gibt viele verschiedene Teile, die Ihre Nutzer nutzen können je nachdem, wie sie zu Ihrem Produkt gekommen sind, z. B. ob unsere Website oder Landingpage oder etwas Ähnliches, vielleicht sind sie zu dieser Landingpage gekommen als sie klicken Sie auf den Link in Ihrer E-Mail oder wenn es sich um eine Shoppe-Seite handelt , kann es sich um eine Produktseite oder ähnliches handeln. Schauen Sie sich das vielleicht an, indem Sie unsere Kampagne besuchen , die Sie auf Facebook oder Instagram hatten , oder etwas Ähnliches . Vielleicht haben sie auf einen Link in einem YouTube-Video geklickt und sind zu dieser Shop-Seite gegangen. Oder wenn es sich um eine App handelt, installieren sie diese App möglicherweise über einen Link oder einen direkten Download aus einem Geschäft. Und dann, wenn sie es in dieser App installiert haben oder sie sie vielleicht öffnen und zum Begrüßungsbildschirm gelangen. Benutzerflüsse haben also die einfache Aufgabe all diese Pfade so zu lenken, dass sie für Ihre Benutzer logisch und sehr einfach zu verstehen sind, und sie so zu optimieren , dass sie Wenige Klicks wie möglich, um diese Ziele zu erreichen, je nachdem, wer Ihr Kunde ist und was Ihr Produkt zu erreichen versucht. Diese Ziele können sein, entweder ein Produkt zu kaufen, einen Service zu buchen, herunterzuladen, ein Werbegeschenk zu erhalten, sich für einen E-Mail-Newsletter anzumelden und vieles mehr. Ihr Ziel als Designer ist es also, mithilfe dieser Benutzerabläufe diese optimalen Abläufe und optimalen Pfade zu erstellen , die Ihre Benutzer nutzen können, um diese Aufgaben so zu erledigen , dass es für sie so einfach wie möglich ist verstehen und so schnell wie möglich für sie lösen und ihr Endziel erreichen. Das Ziel Ihres Kunden ist es, die Konversionsrate zu erhöhen . Wenn Sie diese Benutzerströme verwenden, kommen Sie dieser verbesserten Konversion einen Schritt näher , indem die Anzahl der Klicks reduzieren , z. B. Ihre Benutzer müssen es nehmen, um diese Ziele zu erreichen. Mithilfe von Benutzerabläufen bestimmen Sie die Gesamtanzahl der Bildschirme oder Seiten, die Sie in dieser Phase des Projekts benötigen. Und das wiederum spart Ihnen viel Zeit, wenn Sie zu den Entwurfsphasen Ihres Projekts kommen , da es Ihr Verständnis für dieses Projekt insgesamt verbessern wird . Und deshalb wird es Sie in dieser Phase des Projekts noch schneller machen, Sie können Entwickler sogar darüber informieren, was vor sich geht. Und du kannst ihnen sogar diese Flussdiagramme zeigen und darüber werden wir in den letzten Phasen dieses Kurses sprechen. Aber das ist der springende Punkt dieses Prozesses, zu verstehen, dass diese Projekte viel besser sind , als einfach mit dem Design zu beginnen , weil das ein wirklich falscher Ansatz ist. Denn Sie müssen wirklich mit diesen Benutzerabläufen beginnen , um zu verstehen, wie viele Bildschirme und wie viele Seiten Sie später benötigen, wenn Sie zu diesem Designteil Ihres Projekts kommen. Im nächsten Video werden wir besprechen, welche verschiedenen Arten dieser Benutzerflüsse es gibt welche verschiedenen Arten dieser Benutzerflüsse und wie sie verwendet werden. Also werde ich dich dort sehen. 46. Verschiedene user: Es gibt viele verschiedene Arten von Benutzerabläufen, je nachdem, was Sie in Ihrem Projekt zu lösen versuchen und was Sie erreichen möchten. Aber grundsätzlich gibt es drei Haupttypen, die insgesamt verwendet werden. Und dann gibt es von diesen drei Haupttypen viele verschiedene Typen, denen Sie während Ihrer Designkarriere begegnen werden . Und das sind Task Flows, Wire Flows und Benutzerabläufe. Desk-Flows sind das, was der Name schon sagt, und sie zeigen, wie der Benutzer mit einer bestimmten Aufgabe interagiert, indem er auf denselben Einstiegspunkt klickt , um zu demselben Einstiegspunkt und demselben Endpunkt zu gelangen demselben Einstiegspunkt und demselben Endpunkt Alle Ihre Benutzer werden dieselbe Reise unternehmen. Daher wird diese Reise eine einfache Aufgabe zeigen, z. B. sich für unseren E-Mail-Newsletter anzumelden oder das Produkt zu kaufen oder eine Dienstleistung bei Ihnen zu buchen oder etwas Ähnliches. Alle diese Benutzer müssen dieselbe Aufgabe erledigen. Diese Aufgabe besteht aus vielen verschiedenen Schritten , je nachdem, wie komplex die Aufgabe ist. Und deshalb werden diese Taskflows für Schulden genutzt. Sie werden nicht für andere komplexe Dinge verwendet, z. B. verschiedene Einstiegspunkte, verschiedene Ausgangspunkte. Der Sinn von Aufgabenabläufen besteht jedoch darin sich auf eine einzelne Aufgabe zu konzentrieren und diesen Benutzerteil so zu optimieren , dass er die Listenschritte zur Erledigung dieser Aufgabe so gut wie möglich hat. Dann haben wir Drahtflüsse. Und diese Workflows sind tatsächlich eine Kombination aus diesen Aufgabenabläufen und grundlegenden Wireframes. Und deshalb werden sie Wire Flows genannt. Und der Sinn von ihnen besteht darin, unterschiedliche Benutzererfahrungen in Ihrem Produkt und verschiedene Einstiegspunkte an verschiedenen Ausgangspunkten zu zeigen unterschiedliche Benutzererfahrungen in Ihrem Produkt und verschiedene Einstiegspunkte an verschiedenen . Sie enthalten jedoch nicht zu viele Details. Sie sind nur dazu da, all diese verschiedenen Teile zu zeigen , die Ihre Benutzer übernehmen können. Es geht hier also nicht darum, zu detailliert zu werden, sondern es Ihren Kunden, Ihren Teamkollegen und auch Entwicklern zu zeigen . Viele verschiedene Teile, die Ihre Benutzer übernehmen können. Aber um zumindest einige Details zu verwenden , um zu zeigen, wie diese Bildschirme oder Seiten aussehen können. Und dann um Pfeile zu verwenden, z. B. nur um zu zeigen, welche verschiedenen Teile Ihre Benutzer nehmen können. Und dann haben wir endlich die Benutzerflüsse selbst. Sie sind eigentlich eine Kombination aus Aufgabenabläufen und Abläufen. Und Benutzerflüsse zeigen tatsächlich all die verschiedenen Flows , die Ihre Benutzer einschlagen können, all die verschiedenen Pfade, die sie einschlagen können. Und sie sind eigentlich eine Kombination aus Task Flows und Via-Flows. Was ich damit meine ist, dass sie eine Kombination dieser beiden Elemente sind . Und das werde ich dir in späteren Phasen dieses Kurses zeigen . Und im Grunde zeigen sie alles. Sie zeigen jeden einzelnen Einstiegspunkt, sie zeigen jeden einzelnen Ausgangspunkt. Sie zeigen all die verschiedenen Teile, die Ihre Benutzer einschlagen können, den richtigen und den falschen Weg. Sie zeigen alternative Wege und all diese Dinge auf. Sie sind also so detailliert wie möglich. Je nachdem, was Sie für dieses Projekt tatsächlich benötigen und je nachdem, wo Sie sich in der Entwurfsphase dieses Projekts befinden, werden Sie das eine oder andere verwenden. Manchmal sind die Nutzerströme tatsächlich die beste Wahl denn je nachdem, wie Ihr Projekt läuft, je nachdem, wie das Feedback läuft, wie die Recherche läuft. Sie sind viel einfacher zu ändern, sie sind viel einfacher zu bearbeiten. Wenn Sie dann gerade erst mit Aufgabenabläufen beginnen und sie sind da, fügen Sie Drahtflüsse später hinzu und verwenden Sie am Ende Benutzerabläufe. Vielleicht ist User Flows der beste Weg, dies zu tun. Und wann verwenden wir diese Benutzerflüsse tatsächlich? werden wir im nächsten Video besprechen. Also werde ich dich dort sehen. 47. Wann werden sie verwendet: Benutzerflüsse werden zu einem frühen Zeitpunkt in einem Projekt verwendet, direkt nachdem alle Recherchen und Benutzerpersonas abgeschlossen sind. Wie ich bereits sagte, werden sie verwendet, um die Anzahl der Bildschirme , die Sie benötigen, und die logische Reihenfolge dieser Bildschirme oder auf diesen Seiten zu bestimmen, und wie es Ihren Benutzern tatsächlich geht benötigen, und die logische Reihenfolge dieser Bildschirme oder auf diesen Seiten zu bestimmen, interagieren und all diese verschiedenen Seiten durchblättern. Und dann können Sie diese Reihenfolge und all diese Abläufe mit Ihren Kunden und Ihren Entwicklern oder Teamkollegen besprechen und all diese Abläufe mit Ihren Kunden und , um das bestmögliche Ergebnis bei der bestmöglichen Optimierung zu erzielen das bestmögliche Ergebnis . Bevor Sie mit den Entwurfsphasen dieses Projekts fortfahren , werden sie verwendet, um eine intuitive und benutzerfreundliche Oberfläche zu erstellen , damit unsere Benutzer unser Produkt finden oder Freude an der Verwendung haben, und sie wird verwendet , um die Konversionsrate zu erhöhen , wie ich bereits erwähnt habe , da Sie mithilfe dieser Benutzerflüsse zu Beginn dieses Designprozesses festlegen , wann Ihre Benutzer klicken oder kaufen oder kaufen oder kaufen bestimmte Dinge innerhalb dieses Prozesses und nicht später im Designprozess, was wiederum den Designprozess viel einfacher und einfacher zu erstellen macht den Designprozess viel einfacher . Weil Sie all diese Dinge in Ihren Benutzerabläufen bestimmen . Sie können sie verwenden, um neue Produkte zu erstellen, oder Sie können sie mit bestehenden Produkten verwenden, um die Pfade zu verfeinern , die Ihre Benutzer innerhalb dieses Produkts einschlagen können, und um die Optimierung zu erhöhen oder Konvertierung oder was auch immer das Ziel dieses Projekts ist. Also, wie gesagt, sie können für neue oder bestehende Produkte erstellt werden . Und sie sind sehr nützlich wenn Sie Komponenten erstellen, die Sie später in Ihren Entwurfsphasen dieses Designprojekts verwenden werden, da einige Komponenten häufig verwendet werden, wie Fußzeilen für die Navigation. Und in dieser Phase Ihres Projekts können Sie ganz einfach festlegen, was sich in dieser Navigations- oder Fußzeile befinden wird. Sie können sie auch verwenden, um sogenannte Heldenbilder zu erstellen, oder Schieberegler sind verschiedene Komponenten wie die Dosis. Und später können Sie diese Komponenten problemlos skalieren oder neu skalieren, unabhängig davon, ob Sie sie später in Ihrem Projekt benötigen oder nicht. Schließlich gibt es eine wirklich großartige Möglichkeit , Ihren Teamkollegen, Kunden und Entwicklern Ihre Ideen zu diesem Projekt zu zeigen . All diese verschiedenen Teile , die Ihre Benutzer übernehmen können. Weil die Validierung in diesem Teil des Projekts wirklich wichtig ist , weil, wie ich bereits mehrfach erwähnt habe, es Ihr Design beschleunigen wird. Teil dieses Projekts sind viel mehr weil in diesem Teil Mit diesen Benutzerabläufen werden Sie all diese wichtigen Details ermitteln . Und später wird das Design einfach viel einfacher und viel unterhaltsamer sein . Denn es ist eher die Erkundung der Kreativität als Bewältigung all dieser komplexen Aufgaben, die Benutzer lösen müssen. Apropos Benutzerabläufe im nächsten Video, wir werden tatsächlich Benutzerabläufe mit Adobe XD erstellen . Also werde ich dich dort sehen. 48. user in Adobe Xd erstellen: Es gibt viele verschiedene Wege, die Ihre Benutzerflüsse einschlagen können. Es gibt viele verschiedene Formen, die Sie verwenden können. Aber es gibt einige Grundformen, die jeder Designer oder so verstehen sollte. Sie sind seit Jahrzehnten im Grunde der Standard in der Branche. Und es ist wirklich sehr wichtig, sie zu kennen, besonders wenn Sie mit Remote-Teams arbeiten. Wenn du später einer Agentur beitrittst oder wenn du bereits in einer Agentur arbeitest und versucht hast, uns eine Sprache zu vermitteln , die jeder verstehen kann. In diesem Video zeige ich Ihnen eine Vorlage. Sie werden in der Lage sein, diese Vorlage herunterzuladen und sie näher zu erkunden und dann auf dieser Vorlage aufzubauen. Und später in der Klasse werde ich Ihnen einige komplexere Vorlagen zeigen, werde ich Ihnen einige komplexere Vorlagen zeigen die Sie tatsächlich bekommen können, wenn Sie möchten und dann diese grundlegenden Vorlagen erweitern und einfach darauf aufbauen können. Also hier ist diese Vorlage. Das nennt man Taskflow-Elemente. Und wenn Sie diese Vorlage erhalten möchten, laden Sie sie einfach aus den Klassendateien herunter und dann können Sie sie in Adobe XD öffnen. Also, was wir hier haben, sind alle Elemente, alle Komponenten. Wir haben also Eintrag, Aktion, Prozess, Entscheidungspfeil und Minuspfeil, und das sind deine Farben. Also Einstiegskragen, White Collar, was im Grunde überall die Farbe des Textes ist , und Schrittfarbe. Wenn Sie diese Farben z. B. an die Marke Ihres Kunden anpassen möchten z. B. an die Marke Ihres Kunden anpassen möchten können Sie einfach mit der rechten Maustaste klicken. Sie können dies kopieren oder bearbeiten und dann einfach diese Farbe ändern, wie Sie möchten. Wie Sie sehen können, werden sie in Echtzeit aktualisiert. Sie können Ihren Hex-Code hier einfügen, wenn Sie möchten. Und dann wird es auf die Hex-Farbe aktualisiert , die Sie ausgewählt haben. Lassen Sie mich ein bisschen zurückgehen. Also, wie gesagt, dies ist die wirklich grundlegende Bare-Bones-Vorlage und dann können Sie auf dieser Vorlage aufbauen. Wenn wir also auch ein bisschen hineinzoomen, all diese verschiedenen Elemente, werde ich Ihnen zeigen, was sie alle sind und was sie alle tun. Zuallererst haben wir also einen Eintrag, und dies ist der Eingangskreis, oder der Einstiegspunkt wird normalerweise als Kreis angezeigt, aber Sie können ihn auf viele verschiedene Arten anzeigen, die Sie möchten. Nichts davon ist tatsächlich standardisiert. Dies sind nur Designer in der Branche all diese Elemente und Vorlagen jahrzehntelang verwenden. Und dann lassen Sie sich einfach all diese verschiedenen Lösungen einfallen . Wir haben also einen Einstiegspunkt und das kann auch der Ausgangspunkt sein. Einstiegspunkt kann also, wenn Sie sich an die vorherigen Videos erinnern , die ich erwähnt habe , z. B. eine Landingpage Ihrer Website oder ein Anmeldebildschirm Ihrer App oder was auch immer sein Landingpage Ihrer Website oder . Der Einstiegspunkt, an dem Benutzer Ihr Design, Ihr Produkt, Ihre mobile App, Ihre Website, was auch immer es ist, tatsächlich Produkt, Ihre mobile App, Ihre Website, eingeben. Danach haben wir Maßnahmen. Benutzer können also klicken, Benutzer können stöbern, Benutzer können behaupten, Benutzer können all diese verschiedenen Dinge eingeben, die Aktionen sind. Aktionen können auch erfolgen, wenn Sie in Ihrer App auf die Schaltfläche Weiter klicken , z. B. um zwischen verschiedenen Bildschirmen zu wechseln. Oder wenn Sie auf ein bestimmtes Symbol klicken, z. B. Pfeil, um nach links und rechts zu gehen, oder wenn Sie wischen, um die Paginierungsaktion zu verwenden , ist der Kreis einfach da. Und das werde ich Ihnen in nur einer Sekunde mit dieser wirklich einfachen Vorlage zeigen , die ich online gefunden habe , und dann habe ich sie einfach mit diesen Elementen neu erstellt. Also all diese Elemente habe ich für euch erstellt und ihr könnt diese Vorlage einfach herunterladen und verwenden. Wie ich schon erwähnt habe. Als nächstes haben wir verarbeitet. Was passiert also, nachdem wir diese bestimmte Aktion abgeschlossen haben? Also sind wir auf eine bestimmte Seite gegangen? Sind wir z. B. von einem kleinen Bild zu einem Bild in voller Breite übergegangen ? Sind wir zur nächsten Folie gegangen? Haben wir das Produkt gekauft? Bist du auf die Checkout-Seite gegangen? All diese Dinge sind innerhalb des Prozesses wirklich wichtig. Sie müssen das also aufschreiben, damit Sie es als Designer verstehen, oder wenn Sie mit Teamkollegen, Entwicklern oder Kunden zusammenarbeiten , müssen Sie ihnen diesen Prozess zeigen. Als nächstes haben wir diese Diamantform, die die Entscheidung ist. Das heißt also im Grunde, wenn sich der Benutzer verpflichtet hat , zu einem bestimmten Prozess oder einer bestimmten Aktion Ja oder Nein zu sagen . Was ich damit meine, ist, wenn Sie beispielsweise auf unsere Checkout-Seite kommen und ein Produkt kaufen möchten? Dies kann eine Ja- oder Nein-Entscheidung sein. Ja, ich möchte das Produkt kaufen. Und dann gehst du zur Checkout-Seite, du gehst zur Zahlungsseite und so weiter oder wenn nein, wenn ich auf Nein klicke, wohin führt es mich? Deshalb ist dieser Diamant sehr wichtig und wird normalerweise als Entscheidungsdiamant bezeichnet . Ich werde Ihnen zeigen, wie ich all diese Elemente in nur einer Sekunde bearbeite. Aber als nächstes haben wir Pfeile. Nun, diese ausgefüllten Pfeile haben wir, wie Sie sehen, zwei Typen. Diese ausgefüllten Pfeile sind also im Grunde genommen Stufenpfeile. Sie bewegen die Benutzer also von einem Schritt zum anderen. Und dann sind diese Pfeile im Grunde das, was ich sie hier beschriftet habe. Negative Pfeile in sind, wenn ein Benutzer sagt , nein sagt oder wenn Benutzer eine bestimmte Aufgabe nicht erledigen kann, z. B. wenn die Suche nichts findet, dann erscheint kein Pfeil und es werden sie zu einem nächsten Schritt oder zum vorherigen Schritt oder so ähnlich. im Grunde der Grund, warum diese Pfeile verwendet werden. Wenn ich jetzt nur ein bisschen abzoome, können Sie diesen Ablauf sehen. Und im Grunde habe ich mich online inspirieren lassen und sie mit diesen Elementen ungerecht nachgebaut. Da der Benutzer hier eingibt, er mit einer Willkommensseite oder einem Willkommensbildschirm begrüßt , z. B. kann er dann eine Aufgabe auswählen. Die Aufgabe wird ausgewählt, und dann können sie weitermachen. Wenn es korrekt ist, können sie zur Detailseite übergehen. Wenn es nicht korrekt ist, dann das. Wenn sie auf Nein klicken, werden sie z. B. zu den ausgewählten Aufgaben zurückkehren. Dieser Knoten kann also eine konkrete Schaltfläche sein, wenn sie auf Nein klicken, oder sie können ein X sein, z. B. wenn sie das Pop-up schließen wollen oder auch immer Sie Ihr Layout strukturieren, im Grunde geht es um gleich. Sie können entweder vorwärts gehen, also ja, oder sie können rückwärts gehen. Also nein, deshalb werden diese verwendet. Also dann gehen wir zum Beispiel auf diese Detailseite und von der Detailseite aus kann ich auf die Suche klicken, sagen wir, um etwas zu finden. Und wenn ich mich dann zur Suche verpflichte, kann ich nach Artikeln suchen. Wenn ich keine Artikel gefunden habe , werden keine gefundenen Artikel angezeigt. In diesem Fall habe ich mir also ein X-Symbol vorgestellt, also z. B. kein Objekt gefunden. Und dann können Sie schließen , um eine Suche abzuschließen. Wieder einmal ist der To-Gegenstand gefunden, das Ziel ist in diesem speziellen Fall abgeschlossen , da dies das Ziel dieses Gegenstands ist. Und dann können Sie auf Bestellen klicken. Und das ist dein Ausgangspunkt, also angeordnet. Oder wenn ich nicht bestellen möchte, kann ich vielleicht auf Nein klicken oder stornieren oder so etwas Ähnliches. Und es bringt mich zurück zu dieser Detailseite. Sie können also an diesem wirklich schnellen und einfachen Beispiel sehen diesem wirklich schnellen und einfachen Beispiel wie nützlich diese Flussdiagramme sind. Dies ist im Grunde ein Aufgabenablauf, den ich bereits erwähnt habe , weil er nur eine einzelne Aufgabe anzeigt. Im nächsten Video werden wir fortgeschrittenere Vorlagen und einige fortgeschrittenere Schritte besprechen , die Sie beim Erstellen dieser Flows ausführen können . Aber im Grunde ist dies nur eine wirklich einfache Vorlage. Sie können es erneut herunterladen, in Adobe XD verwenden und erkunden. Und ich ermutige Sie wirklich, auf dieser Vorlage aufzubauen, mehr Seiten hinzuzufügen, mehr Bildschirme hinzuzufügen und so weiter. Und eine Sache, die ich dir nicht gezeigt habe, ist z.B. zu dieser Aufgabe hier, ich möchte hineinzoomen und sagen wir, anstatt eine Aufgabe auszuwählen, möchte ich etwas anderes machen. Sie können den ersten Satz sehen, also ist es eine kostenlose Google-Schrift. Sie können es völlig kostenlos auf Google Fonts und Adobe Fonts herunterladen, was auch immer Sie verwenden. Also, was ich hier gemacht habe, ist, dass ich die Polsterung mitgeliefert habe. Was ich damit meine ist, wenn ich genau dort klicke, können Sie sehen, dass das Padding diese Komponente aktiviert ist. Wenn ich also genau hier doppelklicke, kann ich etwas eingeben, z.B. das sichtbarer machen und du kannst sehen, wie sich das Feld erweitert. Also im Grunde habe ich in diesem Fall, wenn ich zurückgehe, 20 verwendet, wie Sie hier sehen können, Abstände zwischen all meinen Elementen. Aber du kannst zehn benutzen, du kannst fünf benutzen. Sie können diese Pfeile sogar überlappen. Wenn ich es also genau hier positioniere, können Sie sehen, wie gut es sich mit diesem Schritt überschneidet. Du kannst also wirklich machen, was du willst. Wenn Sie diese Komponenten ziehen, ziehen Sie sie außerdem einfach hierher. Ich möchte es ändern, doppelklicken Sie z. B. auf Einstiegspunkt oder was auch immer, oder den Ausgangspunkt, was auch immer. Sie können es hier positionieren, Sie können es in der Mitte platzieren, indem Sie diese beiden Elemente auswählen so positionieren. Oder du kannst es einfach löschen. Sie können das für all diese anderen Elemente tun , die Ihnen gezeigt werden. Und schließlich können Sie für diese Pfeile, weil diese recht einfach sind, weil diese recht einfach sind, doppelklicken. Sie können die Umschalttaste an diesem Pfeil genau hier gedrückt halten. Und dann können Sie direkt hier in die Position klicken, um sie zu formen. Wenn Sie diesen Pfeil kürzer machen möchten, z. B. wenn Sie nicht möchten, dass er aus irgendeinem Grund so lang ist. Und auch für diese Pfeile, wenn ich zu meinem Ebenen-Panel gehe und sie öffne, können Sie sehen, also negativer Pfeil, wir haben die Bezeichnung, das ist diese Knotenbezeichnung, innerhalb Sie auch ändern können, wenn Sie möchten, z. B. negativ oder keine Option, oder das ist keine Option oder was auch immer Sie schreiben möchten. Und dann haben wir Links- Rechtspfeile und wir haben diese Pfeillinie in der Mitte. Also, was kann man eigentlich damit machen? Sie können auf den Linkspfeil klicken, z. B. die Umschalttaste gedrückt halten und ihn näher rücken. Sie können dasselbe mit diesem tun, oder wenn Sie möchten, können Sie sie sogar weiter voneinander entfernen. Also sagen wir so. Und dann kannst du auf dieses Zentrum klicken und es einfach so erweitern. Wenn Sie nicht möchten, dass es so ist, können Sie einfach auf den Pfeil klicken und dies anpassen, sodass Sie sehen können, dass wir die Randfarbe haben, die diese Farbe ist. Und dann haben wir die Strichbreite, wir haben die Strichbreite. Also im Grunde die Breite zwischen all diesen verschiedenen Strichen. Sie können alles anpassen, was Sie möchten, um einen bestimmten Stil zu erzielen , den Sie suchen. Und im Grunde ist das der Sinn dieser Vorlage, um Ihnen bei diesem Erkundungsprozess zu helfen. Wie ich im nächsten Video erwähnt habe, werden wir uns etwas komplexeren Vorlagen befassen. Ich werde dir zeigen, wo du die Vorlagen bekommen kannst, die eigentlich von mir sind, und dann, was du wirklich damit machen kannst. Also werde ich dich dort sehen. 49. Arbeiten mit Flussdiagrammen in Adobe Xd: In diesem Video werde ich einige komplexere Vorlagen zeigen . Erstellung dieser Vorlagen dauerte Monate. Diese Vorlagen sind tatsächlich einige , die ich und mein Team in der Vergangenheit erstellt haben. Und Sie können diese Vorlagen erhalten, Links, die im PDF enthalten sein werden mit Rabatten, da es sich um Premium-Vorlagen handelt. Und ich werde Ihnen zeigen, wie sie alle erstellt werden, wie sehen sie in Adobe XD aus? Du kannst sie bekommen, wenn du willst. Wenn nicht, können Sie Ihr eigenes erstellen, wie Sie möchten. Also hier ist meine Website namens Web donut.net. Auch hier wird der Link in einem PDF sein und dies ist die erste Vorlage, die als Flowy bezeichnet wird. Und Sie können sehen, dass Sie 108 Bildschirme, 128 Elemente und zwei verschiedene Papiere haben. Sie können diese Dokumente also verwenden, wenn Sie Ihr Flussdiagramm ausrichten möchten , und es später ausdrucken , um es Ihren Teamkollegen zu zeigen. Kunden sind Entwickler. Wenn es also Plural ist, nur ein bisschen, können Sie sehen, wie einige dieser Elemente aussehen, und wir werden sie in nur einer Sekunde in Adobe XD untersuchen. Aber im Grunde ist das das Wesentliche. Es gibt viele verschiedene dieser Elemente und diese Papiere und wir haben Wasserflussdiagramme, und diese sind viel größer. Wir haben also insgesamt 400 Komponenten. Also nochmal 200 Bildschirme, 200 Elemente und zwei Papiere, und dieses Mal haben wir eine helle und eine dunkle Version, also können wir das sogar erforschen. Und Sie können sehen, dass sie anpassungsfähig sind, was enthalten ist. Sie haben also drei verschiedene Dateitypen, Photoshop, Sketch und XD. In diesem Fall haben wir Photoshop- und Sketch-Dateien. Da XD jedoch von Adobe erstellt wurde, können Sie einfach eine Photoshop-Datei öffnen . Es wird in XD perfekt funktionieren, weil es dafür integriert ist, pixelgenaue Komponenten, pixelgenaue Komponenten, kostenlose Google Fonts oder überall dort verwenden, wo Sie Schriften finden. Und wenn Sie kaufen, handelt es sich tatsächlich um Video-Tutorials für beide, die in einer organisierten Ebenenstruktur enthalten sind. wirst du in nur einer Sekunde sehen. Dies sind die Papiere für den Druck US - und A4-Format, wenn Sie möchten, unbegrenzten Variationen und Sie können sehen, wie einige dieser Elemente aussehen. Nun, wenn ich das minimiere und zu XD zurückkehre, ist das die Steuer für unsere Radiosendung. Du, du kannst sehen, wie einfach es ist, aber wenn ich dir z.B. Flowy zeige , kannst du sehen, wie es aussieht. Also kombiniere ich diese drei tatsächlich. Lassen Sie mich das etwas näher bringen. Das sind also Webelemente, sind mobile Elemente, und das sind all die zusätzlichen Elemente. Wenn Sie diese also kaufen, werden sie in drei Dateien geliefert, aber Sie können sie in einer Datei in XD kombinieren, wie Sie hier sehen können. Sie können einfach doppelklicken, um dies zu ändern. Das sind also z. B. mobile Elemente und was kann man eigentlich mit diesen Elementen machen? Sie können also ganz einfach direkt hier zu Ihrer Zeichenfläche kommen und eine Zeichenfläche erstellen, die z. B. 1920 mal 1080 groß ist Nehmen wir an, ich möchte mit einem Login-Bildschirm beginnen. Ich kann es kopieren, ich kann es hier einfügen. Und lassen Sie uns das tatsächlich auf diese Farbe ändern. Lassen Sie mich also, lassen Sie mich tatsächlich eine schöne hellgraue Farbe damit Sie ein bisschen besser sehen können, was ich mache. Und dann kann ich mit diesem Pfeil z.B. genau hier beginnen. Also kopiere es, füge es hier ein. Und vielleicht kann ich es genau hier positionieren. Also, wenn meine Benutzer auf diese Schaltfläche klicken, wohin werden sie gehen? Da dies vielleicht ein Anmeldebildschirm ist, haben wir, wie Sie sehen können, hier verschiedene Kategorien. Vielleicht springen wir in den E-Commerce und vielleicht gehe ich zu diesem, dann zu diesem. Und dann schauen wir mal, vielleicht auch diesen Bildschirm, so. Ctrg C, springe genau hier, kontrolliere V, um sie alle einzufügen. Und ich werde das machen. Also werden sie z. B. genau hier auf diesen Bildschirm kommen. Und dann dupliziere ich meinen Pfeil Control C Control oder Control D, was auch immer du willst. Und wenn sie dann z. B. darauf klicken, positionieren Sie es oben. Wenn Sie auf dieses Produkt klicken, z. B. oder direkt hier, und wir haben hier verschiedene Pfeile. Wenn ich dieses also tatsächlich gelöscht habe, kann ich z.B. diesen Pfeil verwenden damit Sie sehen können, warum diese Vorlagen wichtig sind, weil Sie dabei tatsächlich viel schneller arbeiten können . Also wenn ich X, Control V kontrolliere, positioniere es genau hier. Wenn sie hier klicken, nehmen wir an, das ist eine Schaltfläche. Und du kannst dasselbe tun , was ich zuvor gezeigt habe. Sie können diese also erweitern, wenn Sie möchten. Und lassen Sie mich tatsächlich bis genau hier ausdehnen. Ich kann tatsächlich zu diesem Bildschirm springen. Sie können also sehen, dass dies nicht mit all diesen vorherigen Aufgabenabläufen übereinstimmt , da dies ein viel komplexerer Benutzerablauf ist komplexerer Benutzerablauf da wir, wie Sie sehen, zwei Schaltflächen haben. Sie können z. B. auf Abbrechen klicken und wir können diesen Pfeil tatsächlich duplizieren. Ich kann es tatsächlich umdrehen, um dir zu zeigen, wie das aussehen könnte. Also vielleicht kann ich es genau hier positionieren. Vielleicht kann ich die beiden ein bisschen nach oben bewegen. Ich kann das hier platzieren. Vielleicht können sie genau dort klicken. Und dann führt dieser Pfeil sie tatsächlich zu diesem ersten Bildschirm, z. B. können Sie ihn sogar umdrehen und dann diese Elemente positionieren. Ich werde dir das in nur einer Sekunde zeigen. Also Control D bei diesem. Und du kannst es gleich hier positionieren. Dann kannst du das verlängern. Und vielleicht sieht das ein bisschen langweilig aus, aber es ist wirklich wichtig, diesen Benutzerfluss zu verstehen. Und von hier an zum Beispiel wenn sie tatsächlich auf diesen blauen Button klicken, wohin führt es sie? Und nehmen wir das, nur um es ein bisschen einfacher zu machen , sich zurechtzufinden. Also werde ich das hier hin verschieben, vielleicht so, und es dann ein bisschen nach innen positionieren. Ich werde diesen löschen. Sie können sehen, wie schnell das tatsächlich erstellt werden kann. Wenn sie dann auf den blauen Button klicken, können sie vielleicht zu diesem Bildschirm kommen. Und von da an positioniere ich diesen Pfeil tatsächlich ganz nach oben, genau hier, positioniere ihn hier. Und dann kann ich tatsächlich genau hier klicken und das so verschieben und es nur ein bisschen neu organisieren . Vielleicht ist das unser Bestätigungsbildschirm oder was auch immer, wir können es so nennen. Und wenn sie dann auf diese blaue Schaltfläche klicken, können sie tatsächlich zur Einkaufsseite gehen und diesen Schritt tatsächlich abschließen. Nun, was wir mit diesem tun können, ist, dass wir sie tatsächlich mit den ursprünglichen Aufgabenabläufen kombinieren können sie tatsächlich mit den ursprünglichen Aufgabenabläufen kombinieren , die ich Ihnen gezeigt habe. Z.B. Ich kann diesen Eingabekreis verwenden. Und dann entschuldigen Sie mich einfach, ich habe viele davon offen. Ich kann es genau hier positionieren und verschieben. Sie können sehen, dass es verknüpft ist, weil es sich tatsächlich um eine Instanz aus unseren verschiedenen Komponenten handelt. Also kann ich hier mit der rechten Maustaste klicken und es lokal machen. Und dann kann ich tatsächlich springen beide so auswählen und die Umschalttaste drücken und sie ein wenig reduzieren. Ich kann auch meine Texte reduzieren. Also vielleicht zehn, so etwas. Dann können wir es hier als Einstiegspunkt verwenden. Sie können diese aber auch verwenden. Also das ist z. B. unser Zuhause, vielleicht ist das unsere Eingangskontrolle C. Und dann kann ich, statt dieses Eingangskreises, es ein bisschen interessant aussehen lassen, indem ich sie positioniere. Also kann ich das so positionieren, dass es mein Eingangskreis N ist, z. B. ich kann diese Farbe verwenden, wenn ich möchte. Ich kann dieses Symbol ändern. Wenn ich will. Ich kann sogar die Farbe des Symbols ändern. Klicken Sie einfach dort, Sie können damit machen, was Sie wollen. Was Sie hier auch sehen können, sind all diese verschiedenen Modelle, bei denen es sich im Grunde nur um Formen handelt. Und dann können Sie diese Mockups verwenden, um beispielsweise zu zeigen dass dies eine Ansicht einer mobilen App ist. Und ich kann dieses einfache Modell verwenden. Vielleicht positionieren Sie es genau hier oben, vielleicht schreiben Sie ein paar Texte hier. Verschiebe all diese Elemente ein bisschen nach unten, also vielleicht, und schreibe dann genau hier. Dies ist ein Blick darauf, wie die mobile Version auf z. B. Android oder iOS oder was auch immer Sie wollen aussehen wird . Oder ich kann all diese anderen benutzen. Also Browser, Laptop-Version, Desktop-Version, was auch immer. Wenn der Schritt dann abgeschlossen ist, können wir diesen verwenden, also positionieren wir ihn z. B. genau hier. Und ich kann es tatsächlich so in der Mitte meines Pfeils positionieren . Und dann kann ich tatsächlich meine Hauptfarbe verwenden, um z. B. zu sagen, dass der Schritt abgeschlossen ist, oder ich kann das genau hier positionieren , genau da herum, vergrößern, wenn ich möchte. Ich kann sogar einen Rand hinzufügen. Was auch immer ich verwenden kann auf diesem Hintergrund einen Schlagschatten darauf verwenden. So kann ich mich da positionieren. Was auch immer Ihr Stil für diesen speziellen Benutzerfluss ist, Sie können diesen Stil mithilfe dieser Vorlagen implementieren. Und Sie können in nur wenigen Minuten sehen, wenn Sie nicht so sprechen wie ich, können Sie dies natürlich in viel kürzerer Zeit erstellen . Das war also fließend. Wenn wir gleich hier springen, nur um Ihnen schnell Webelemente des Luftflussdiagramms zu zeigen . Und Sie können hier sehen, wie viele verschiedene Elemente wir haben. Und natürlich können Sie Komponenten aus diesen Elementen erstellen . Sie können ihre Farben ändern. Also z. B. ich möchte die Farbe dieses Headers ändern. Ich kann es genau hier positionieren. Oder wenn ich die Farbe meines Hintergrunds komplett ändern möchte , kann ich sie so ändern. Und natürlich, wenn Sie Farben haben, wie ich sie Ihnen bereits in dieser Standardvorlage zeige. Wenn Sie also Ihre Farben erstellt haben, können Sie diese Farbe einfach auf dieses Element anwenden. Weise wirst du viel schneller arbeiten. Aber wenn du es nicht tust, ist es in Ordnung. Du kannst gleich hier reinspringen und auch hier die Farben ändern. Also das kann z.B. knallrot oder was auch immer sein. Und dann kann das dieselbe Farbe sein. Also kann ich es so auswählen und du kannst sehen , wie das aussieht. Offensichtlich sind hier viele Optionen enthalten und all diese Elemente sind gleich. Sie können sehen, dass wir viele verschiedene Pfeile darin enthalten haben . Von einem Einstiegspunkt zu vielen Ausgangspunkten. Du kannst machen, was du willst. Sie können Gefahr verwenden, Sie können die Aktualisierung verwenden. Und ich ermutige Sie wirklich, Ihre eigenen Icons zu verwenden. Sie können diese linken und rechten Symbole für die Schritte verwenden , wenn Sie möchten. Aber im Grunde kann man sehen, wie diese aussehen. Sie enthalten viel mehr Details. Anstatt die, die ich Ihnen zuvor für die Aufgabenabläufe gezeigt habe . Im Grunde haben Sie also zwei Möglichkeiten. Sie können diese Version verwenden, die extrem leicht ist, oder Sie können diese Version verwenden, die viel komplexer ist. Dies ist jedoch kein finales Layout. Diese dienen nur dazu, Ihre Ideen Ihren Teamkollegen, Ihren Kunden, Ihren Entwicklern viel besser zu vermitteln Teamkollegen, Ihren Kunden, Ihren Entwicklern viel besser . Dies hat den Vorteil, dass Sie mehrere Ein- und Ausstiegspunkte sowie mehrere Flüsse haben. Also wenn ich zum Beispiel zu dem gehe, das wir mit Flowy erstellt haben, also so, kann ich erstellen, wie ich es hier erwähnt habe. Wir haben also diese beiden Pfeile, z. B. haben wir hier eine Schaltfläche zum Schließen, z. B. wohin führt uns diese Schaltfläche zum Schließen zurück, sie bringt uns zurück zum Anmeldebildschirm oder zu diesem Bildschirm. Sie können sich also einfach vorstellen, dass Sie diese mehreren Flows, komplexe Flows und dasselbe wie eine Vorlage erstellen können diese mehreren Flows, komplexe Flows und dasselbe wie eine Vorlage erstellen komplexe Flows und dasselbe , die ich Ihnen kostenlos gebe. Du kannst gleich hier reinspringen. Und Sie können all diese Elemente einfach anpassen und verkleinern. Wenn Sie eine andere Farbe auftragen möchten , können Sie das auch tun. Sie können also jede gewünschte Farbe für diese verwenden. Und natürlich, weil es viele, viele dieser verschiedenen Elemente gibt, viele dieser verschiedenen Elemente in Kategorien wie Werbe-Testimonials, Team, Blog, E-Commerce usw. unterteilt sind. Sowohl für die Mobil- als auch für die Desktop-Version wird Ihr Arbeitsablauf viel schneller und Ihre Lieferzeit wird viel schneller sein. Und noch einmal, der Vorteil dieser Anwendung ist, dass Ihre Kunden verstehen werden dass Sie viel besser sind, als wenn Sie einfach so etwas verwenden würden. Das ist ein fantastischer Ausgangspunkt. Aber falls es mal etwas komplexer sein muss, z.B. wie ich es dir hier zeige. Sie müssen also mehrere Flows erstellen, natürlich wie in jeder einzelnen App hier, dann empfehle ich wirklich, eine Premium-Vorlage wie diese zu verwenden , da dies Ihren Arbeitsablauf wirklich verbessern wird dramatisch. Und es wird dir wirklich ermöglichen, viel schneller zu arbeiten und deine Ideen deinen Teamkollegen zu zeigen. Kunden sind Entwickler , die sie verstehen werden , denn gerade bei Kunden wird es nicht einfach sein, ihnen so etwas zu zeigen , sie zu verstehen, sondern es ihnen zu zeigen so etwas, z. B. wird es ihnen helfen, es viel besser zu verstehen , weil sie zumindest einige dieser Elemente erkennen werden , anstatt ihnen nur diese leeren Formen zu zeigen wie Kreise und Quadrate und Diamanten und solche Sachen. Das war also ein wirklich schneller Blick in diese Premium-Vorlagen. Noch einmal, wenn Sie sie mit einem sehr großen Rabatt erhalten möchten , finden Sie Links im PDF. Sie können einfach auf diese Links klicken und einfach den Rabattcode eingeben, ich Ihnen geben werde, und ihn dann abrufen und in XD verwenden. Sie können sehen, wie so etwas kann Ihren Arbeitsablauf dramatisch verbessern. Sie erhalten diesen grundlegenden Aufgabenablauf natürlich weiterhin kostenlos. Und du kannst es herunterladen und verwenden. Aber wenn Sie Ihr Spiel verbessern möchten, wenn Sie Ihre Ideen Ihren Kunden, Teamkollegen und Entwicklern bestmöglich zeigen möchten, dann wird die Verwendung dieser Premium-Vorlagen besser . dieser Arbeitsablauf ist massiv. Wie Sie gesehen haben, können Sie alles ändern, Sie können sie nach Belieben anpassen. Sie können so schnell oder so langsam arbeiten, wie Sie möchten. Du kannst alle möglichen Farben verwenden, alle möglichen Formen und Symbole und solche Sachen. Wenn Sie also noch einmal so etwas verwenden möchten, gebe ich Ihnen die Links und Rabatte in einem PDF und Sie können sie sich ansehen. Im nächsten Video werden wir darüber sprechen, wie Sie so etwas mit Ihren Teamkollegen, Kunden und Entwicklern teilen so etwas mit können. Also werde ich dich dort sehen. 50. Deine Abläufe teilen: Teilen Ihrer Benutzerabläufe ist ein wirklich wichtiger Teil des gesamten Prozesses, da es Ihren Kunden, Teamkollegen und Entwicklern ermöglicht , Ihren Denkprozess hinter all dem zu verstehen . Und das wird die Diskussion wirklich viel einfacher machen , als das einfach zu tun und es ihnen dann einfach in Worten oder so zu sagen. In diesem Video zeige ich Ihnen einige praktische Möglichkeiten, mit denen Sie dies Ihren Kunden und Entwicklern zeigen können . Also die erste ist eine, ich habe diese für meine Premium-Vorlagen erstellt , die dir gezeigt werden. Also sowohl für einen Flowy, den Sie hier sehen, auch für Luftflussdiagramme. Und du kannst sie öffnen, wenn du sie kaufst, was ich im vorherigen Video erwähnt habe. Das sind diese Papiere. Das ist also A4-Größe, das ist US-Buchstabengröße. Und du kannst sie einfach während der Arbeit öffnen und all deine Elemente hier ausrichten und sie dann einfach alle ausdrucken. Sie können dies auswählen. Sie können in XD Strg oder Command E drücken und dann hier PDF auswählen. Dann können Sie auf Exportieren klicken und es wird dieses druckfertige PDF exportieren. Sie können es ausdrucken und dann Ihren Kunden zeigen. Oder wenn Ihre Kunden remote arbeiten und Sie nicht in ihrer Reichweite sind oder etwas Ähnliches, dann können Sie diese PDFs einfach mit Ihren Kunden teilen und dann können sie diese PDFs ausdrucken und dann hinterlassen Sie Notizen zu diesen PDFs. Oder noch besser, Sie können sie einfach hier ausrichten und dann hier klicken, um dies mit Ihren Entwicklern oder Kunden zu teilen . So funktioniert das, Sie können einfach hier klicken. Und es wird diesen öffentlichen Link generieren. Und dann kannst du ihm gleich hier einen Namen geben, z. B. sagen wir Webflow-Element oder Wire Flow für eine Website oder so. Und dann kannst du es gleich hier zeigen. Dies ist der Linkname, und dann können Sie diesen Link einfach kopieren und dann mit Ihren Kunden teilen. Sie können dann im Browser deine Kommentare direkt hier hinterlassen, und dann kannst du einfach ändern, wie dieser Benutzerfluss in deinem XD aussieht , und dann direkt hier im Tab Teilen zurückkehren. Und dann aktualisiere einfach diesen Link und komm dann zurück und teile diesen Link noch einmal mit deinem Kunden. Kundenname, Projektname, Frist, Anzahl der Webseiten und Anzahl der App-Bildschirme sind das, was wirklich wichtig ist und was wirklich darüber entscheidet, wie viel Sie tatsächlich berechnen werden am Ende dieses Projekts oder wie lange das Projekt dauern wird. Denn in der Regel berechnen vor allem freiberufliche Designer das gesamte Projekt. Sie wissen also z. B. aus Gesprächen mit dem Kunden, ob der Kunde ein bestehendes Projekt oder ähnliches hat , sie wissen bereits, wie viel sie berechnen werden , wenn sie alle diese Informationen. Aber wenn nicht, können Sie einfach in Etappen arbeiten. Sie können also für diese Phase der Erkundung und Benutzertests sowie der Benutzerforschung Gebühren erheben . Und nachdem Sie dies abgeschlossen haben, werden Sie anhand dieser Benutzerabläufe wissen, wie viele Bildschirme Sie später entwerfen werden, wie viele Webseiten Sie entwerfen werden. Und anhand dieser Nummer können Sie dann eine fundierte Vermutung anstellen und diesen Geldbetrag Ihren Kunden in Rechnung stellen. Deshalb ist das Teilen in dieser Phase des Projekts wirklich wichtig. Weil Sie anhand dieser Benutzerflüsse leicht wissen , wie viel Geld Sie Ihren Kunden tatsächlich in Rechnung stellen werden . Nun, dies ist eine der Methoden und dann können Sie dieser Vorlage folgen, insbesondere wenn Sie diese kaufen oder wenn nicht, können Sie einfach so etwas verwenden. Nehmen wir an, Sie haben das erstellt. Du kannst ihm hier einen Namen geben, also kannst du ihn mit einem Doppelklick nennen, wie du willst. Also z. B. mobiler Flow, das wird natürlich viel sauberer sein wenn Sie ihn tatsächlich erstellen. Sie können Strg - oder Befehlstaste E drücken und dann anstelle von PDF können Sie JPEG oder PNG wählen. Sie können auf Exportieren klicken und es dann auf diese Weise an einen Kunden senden. Sie können diese Seiten auch verbinden. Nehmen wir an, das ist Port Nummer eins, das ist unser Port Nummer zwei. Sie können in den Prototypmodus wechseln, sie verbinden, und dann können Sie diesen Prototyp einfach teilen, wie ich hier erwähnt habe, und dann diesen Link kopieren und mit Ihrem Kunden teilen. Der Vorteil, so etwas direkt in Adobe XD zu verwenden, besteht darin , dass Sie kein Papier verschwenden. Du verschwendest deine Zeit nicht. Du verschwendest nicht ihre Zeit. Sie können einfach einen Link teilen. Sie können auf diesen Link zugreifen, diesen Link kommentieren und sich mit ihren Änderungen bei Ihnen melden. Du kannst es in XD ändern, den Link aktualisieren, ihn erneut senden und dann können sie das neue Feedback hinterlassen, und dann können sie das neue Feedback hinterlassen bis alle zufrieden sind. Danach beginnen Sie den Designprozess mit klaren Anweisungen Ihrer Kunden, mit klaren Anweisungen Ihrer Kunden, einem klaren Verständnis von ihnen und den Entwicklern was darin getan werden muss. projekt. 51. ABSCHNITT 6 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, die von mir bereitgestellte Vorlage zu verwenden die von mir bereitgestellte Vorlage , um Ihren eigenen Benutzerfluss zu erstellen. Sie sehen, wie einfach es zu erstellen ist, und Sie sehen, wie einfach es zu verstehen ist und warum es tatsächlich ein nützlicher Teil Ihres Designprozesses ist. Also versuche es dir zu eigen zu machen. Ich habe versucht, mir einen imaginären Kunden vorzustellen und was Ihre Benutzer mit diesem speziellen Projekt erreichen sollen . Also mach dich an die Übung, versuche es selbst herauszufinden. Sie können die Farben ändern, Sie können die Typografie ändern, Sie können die Reihenfolge ändern. Sie können diese Pfeile beliebig positionieren. Versuche es dir zu eigen zu machen und versuche besser zu üben und zu lernen. 52. ABSCHNITT 7 Paper: Bereitstellung von Rahmen ist ein wichtiger Teil des Designprozesses da es viel einfacher ist, einen Fehler auf einem Blatt Papier zu machen, es zu verschrotten und wegzuwerfen. Um dann immer mit Ihrer Designsoftware zu beginnen, müssen Sie sie immer starten, Sie müssen sie einrichten, Sie müssen sie für Ihren Arbeitsablauf vorbereiten , all diese Dinge. Papier-Wireframes sind also da, um diesen Prozess zu beschleunigen , und was auch immer Sie für eine Idee haben, werfen Sie sie auf das Blatt Papier. Es spielt keine Rolle, ob es funktioniert oder ob es nicht funktioniert. Sie möchten einfach all Ihre Ideen, die Sie in Ihrem Kopf haben, auf das Blatt Papier bringen, zwei oder drei der besten Ideen auswählen und dann zur Designsoftware Ihrer Wahl übergehen. Dies ist besonders wichtig, wenn Sie als Teil eines Teams arbeiten, da jeder im Team viel schneller auf ein einzelnes Blatt Papier springen kann viel schneller auf ein einzelnes Blatt Papier springen als wenn Sie ein Design-Tool verwenden und möchten mit Ihren Teamkollegen zusammenarbeiten. Also lass uns anfangen. 53. Was sind paper: Papier-Wireframes sind wirklich wichtige Bestandteile Ihres UX-Designprozesses, da sie eine kostengünstige, einfache und einfache Möglichkeit sind , Ihre Ideen von Kopf nach unten auf ein Blatt Papier zu bringen . Diese Ideen sind nur für Sie, denn in dieser Phase werden Sie nur diese möglichen Layouts und Layoutkombinationen erkunden, die Sie untersuchen werden. Wirst du z.B. viele Bilder oder mehr Texte oder viele Icons oder ähnliches verwenden ? Es wird also nur das mögliche Layout untersuchen. Sie können diese Wireframes natürlich auch mit Ihren Kunden, Entwicklern, Stakeholdern und Teamkollegen teilen , um den Input für sie zu erhalten und um zu verstehen, ob Sie in die richtige Richtung gehen, Wireframes sind nur um diese Layouts zu erstellen, bevor Sie tatsächlich Software beginnen, weil es viel schneller auf einem Blatt Papier zu entwerfen und diese regelmäßigen Formen einfach auf ein Blatt Papier zu zeichnen diese regelmäßigen Formen einfach auf ein Blatt , nur um deine Ideen aus deinem Kopf und nur um zu verstehen wohin dieses Projekt möglicherweise führen wird. Im nächsten Video besprechen wir mögliche Layoutkombinationen und einige Hauptelemente, die Sie in Ihre Papier-Wireframes einbauen können . Nun, diese Elemente sind nur einige der wichtigsten Elemente, die ich gefunden habe, oder meine 15-jährige Erfahrung in diesem Geschäft funktioniert am besten mit Papier-Wireframes. Aber natürlich können Sie jederzeit zurückgehen und zusätzliche Elemente zu diesen regulären Elementen hinzufügen. Also werde ich dich dort sehen. 54. Welche Elemente einzubeziehen sind: Es gibt vier Hauptelemente, die Sie in Ihre Papier-Wireframes aufnehmen können . Und das sind Bilder, Text, Schaltflächen und Formulare oder Felder. Bilder sind da, weil sie wirklich dazu beigetragen haben, eine Geschichte zu erzählen und Ihre Benutzer zum möglichen Endziel zu führen. Das Endziel kann nun sein dass sie ein Produkt kaufen, das Sie verwenden, oder einen Service buchen, Sie anbieten, oder ein anderes Ziel. Aber im Grunde sind Bilder da, um die Geschichte viel einfacher zu erzählen weil Sie wissen, dass Bilder 1.000 Wörter sagen und wenn Sie von Wörtern sprechen, Text verwenden müssen. Wenn Sie jetzt Texte verwenden, verwenden Sie sie in Verbindung mit Ihren Bildern, um die Geschichte besser zu erzählen und Ihre Benutzer besser durch diese Geschichte zu führen . Denn die Kombination von Texten und Bildern wird Ihr Design wirklich beeinflussen , egal was Sie erstellen. Ob es sich um eine Website handelt, ob es sich um eine mobile App oder produktbasiertes Webprodukt oder etwas Ähnliches handelt, es wird einfach dazu beitragen, eine bessere Geschichte zu erzählen und Ihre Benutzer viel besser zu beraten. Ich gebe dir ein kurzes Beispiel. Wenn Sie beispielsweise einen Schuh verkaufen, nehmen wir an, ein gutes Bild von diesem Schuh wird viel besser konvertiert weil Ihre Benutzer alle Details über den Schuh verstehen. Ist es ein Laufschuh? Ist es nur ein normaler Wanderschuh? Welche Farbe hat es? Welche Materialien werden verwendet und solche Sachen. All diese Elemente werden also viel besser dargestellt, wenn Sie qualitativ hochwertige Bilder haben, dann, wenn Sie Bilder von geringer Qualität und nur textfeldbasierte Elemente und nebenbei ein Layout haben nur textfeldbasierte Elemente . Bild. gleichzeitige Verwendung von Texten und Bildern wird Ihren Benutzern also viel mehr Wert bringen. Sie werden Ihr Produkt oder Ihre Dienstleistung viel besser verstehen . Aber am Ende des Ziels müssen sie etwas tun. Und hier kommen Knöpfe ins Spiel. Schaltflächen sind extrem wichtig, da sie normalerweise CTA oder Call to Action genannt werden. Und genau das sind sie. Benutzer müssen bestimmte Aktionen ausführen. Sie müssen das Produkt kaufen, z. B. den Schuh, den ich gerade erwähnt habe, oder sie müssen eine Dienstleistung buchen, z. B. du bietest einen freiberuflichen Service oder einen Designservice oder was auch immer, sie haben um es am Ende ihrer Reise zu buchen. Journey wird mit Bildern und Texten unterstützt. Und dann gibt es am Ende eine Schaltfläche, aber sie müssen in deinem Design einige Informationen eingeben . Hier kommen Formen und Felder ins Spiel. Nun, Foren oder können viele verschiedene Layouts, Kombinationen sein, und sie können für verschiedene Dinge verwendet werden. In der Regel sind sie jedoch dazu da, Benutzerinformationen zu sammeln, z. B. E-Mail-Adressen, Kreditkarteninformationen, die Erstellung von Benutzerkonten und ähnliches. Foren und Felder sind also wirklich wichtige Bestandteile deiner Papier-Wireframes. Nun gibt es viele verschiedene Elemente, die Sie in Ihre Papier-Wireframes aufnehmen können, z. B. Logos, Avatare, Partnerlogos. Sie können die Breadcrumbs, Seitennummerierung, verschiedene Pfeile, Tooltips und ähnliches hinzufügen. Aber all diese Elemente, ich werde aus diesen vier Hauptkategorien stammen, von denen ich im Laufe der Jahre festgestellt habe , dass sie auf dem Weg zum Papierwireframing am besten funktionieren . Mittlerweile gibt es viele verschiedene Arten von Papier-Wireframes. Und je nachdem, wie viel Zeit Sie haben und wie groß das Budget für dieses Projekt ist, werden Sie diese möglichen Stile erkunden. Und im nächsten Video werden wir uns diesen Stilen befassen und ich werde Ihnen einige der wichtigsten Stile zeigen , die beim Wireframing auf Papier verwendet werden, aber auch einige der Stile , auf die Sie zeichnen können diese, um das Gesamtbild und die Qualität Ihrer Papier-Wireframes zu verbessern . 55. Wireframe: Es gibt viele verschiedene Wireframe-Stile von einfachen Boxen, die Sie auf ein Blatt Papier zeichnen können , nur um Ihre Ideen von Kopf nach unten auf dieses Blatt Papier zu legen Ihre Ideen von Kopf nach unten auf dieses Blatt Papier angefangen von einfachen Boxen, die Sie auf ein Blatt Papier zeichnen können, nur um Ihre Ideen von Kopf nach unten auf dieses Blatt Papier zu legen und einfach zu formen. dieses mögliche Layout. Aber auch hier hängen sie davon ab, wie groß dieses Projekt ist, wie viel Zeit Sie dafür haben und wie groß das Kundenbudget ist. Am Ende des Tages werden Sie verschiedene Stile erstellen und verschiedene Layoutkombinationen ausprobieren. In diesem Video werde ich diese Stile zeigen und zeigen, was Sie mit Papier-Wireframes machen können. Wenn wir also zurück zu Google wechseln und nur eine schnelle Google-Suche nach Papier-Wireframes durchführen nur eine schnelle Google-Suche nach , wenn Sie zu Bildern wechseln. Und natürlich gibt es viele verschiedene Websites , die Sie dafür erkunden können. Aber wir können Google Images einfach erkunden , weil es am schnellsten ist. Sie können es hier für die Website, für die App, für den mobilen Android-Design-Envision-Prototyp sehen, was auch immer. Sie können all dies und im Grunde ein solches Layout erkunden . Lassen Sie mich zu hier wechseln, damit Sie besser sehen können . Dieses Bildlayout, wie dieses, ist das gebräuchlichste Layout, da diese Boxen Bilder darstellen , die große Elemente auf Ihren Papier-Wireframes darstellen. Und diese Kritzeleien unten stellen den Text dar. Jetzt können Sie diesen Text auf viele verschiedene Arten anzeigen. Sie können dickere Linien verwenden. Sie können die Linien farblich hervorheben. Und darüber werden wir in einigen zukünftigen Videos in diesem Kurs sprechen . Aber jetzt ist dies nur ein schlichter, regelmäßiger Stil, den die meisten Designer verwenden. Sie werden diesen Stil verwenden, wenn Sie nicht zu viel Zeit für dieses Projekt haben, wenn das Budget für den Kunden begrenzt ist und solche Dinge. Aber im Grunde ist dies der Hauptstil, den die meisten Designer da draußen gerne verwenden, wenn ich diesen Stil zeigen würde, z.B. kannst du dir diese Zeichnung hier ansehen. Nun, das ist der nächste Stil und Sie können natürlich den Text sehen, was in diesem Fall der echte Text ist, was wiederum viel mehr Zeit in Anspruch nimmt. Denken Sie also beim nächsten Mal einfach an all diese Dinge , wenn Sie diese Papier-Wireframes zeichnen. Denn wenn Sie nicht zu viel Zeit für Ihre Projekte haben, wenn der Kunde Ihnen nicht zu viel Geld zahlt, dann investieren Sie nicht zu viel Zeit in Papier-Wireframes. Auch hier besteht der Sinn von Papier-Wireframes darin, schnelle Ideen zu entdecken und sie vom Kopf nach unten auf ein Blatt Papier zu bringen . Das ist letztlich der Sinn von Papier-Wireframes. Investieren Sie also nicht zu viel Zeit. Sie können sehen, wie chaotisch diese sind, z. B. sind das nur ein paar Kritzeleien und Sie können eine Kombination dieser einfachen Elemente sehen , z. B. diese Boxen, diese Kritzeleien für die Texte aber auch normale Texte wie E-Mail, Passwort und solche Sachen. Sie können die Schaltfläche „Bearbeiten“ genau hier sehen. Sie können sehen, dass sich diese Art von Zeichnung eine Person für das Profil leisten kann. Sie können dieses Häkchen für das Gespeicherte sehen. Also noch einmal, Sie können all diese Elemente kombinieren je nachdem, wie viel Zeit Sie für dieses Projekt haben. Aber wenn ich das wirklich schnell schließe und verschiedene Layouts durchsuche, sieht man dieses , das gut organisiert ist. Und ich persönlich mache diesen Stil gerne. Und das wirst du in einigen der späteren Videos dieses Kurses sehen . Ich lasse mir gerne Platz auf der rechten Seite oder auf dem Papier, weil ich dort meine Ideen zeichnen kann. Ich kann von meinen Teamkollegen mögliche Richtlinien für die Kunden und solche Dinge ziehen . Wenn Sie z. B. eine Idee haben, haben Sie diesen leeren Raum rechts oder links, je nachdem, ob Sie mit der rechten oder linken Hand schreiben , ist das eigentlich egal. Der springende Punkt hier ist, Platz für Notizen zu lassen, z. B. können Sie sich später daran erinnern, was haben Sie sich zum Zeitpunkt der Erstellung dieses Papierdrahtmodells gedacht ? Also, wenn du das nächste Mal darauf zurückkehrst, kannst du dich daran erinnern, okay, genau das habe ich gerade gedacht. Ein Leerzeichen wie dieses ist also wirklich wichtig und es wird dir später wirklich helfen , auch für das Layout, du kannst den Text hier sehen, aber du kannst auch sehen diese schlichten Boxen. Aber wenn ich darauf klicke, kannst du sehen, wie detailliert es ist. Also genau hier haben wir all diese tollen Illustrationen, damit Sie z. B. Layouts wie DOS erkunden können. Und hier haben wir Marker. Wir haben all diese verschiedenen Elemente, die Sie verwenden können. Wenn ich auf diesen klicke, kannst du sehen, dass diese Person Markierungen verwendet. Sie verwenden all diese Wireframes. Und wenn ich auf diesen klicke, kannst du sehen, dass diese Person, dieser Designer, das Feld ausfüllt. Also das ist z.B. die Hauptfarbe der App und man sieht, dass sie überall verfärbte Herztasten verwendet hat . Sie können sich also wirklich für diesen Stil entscheiden , wenn Sie die Farbe des Markenlogos Ihres Kunden oder ähnliches betonen die Farbe des Markenlogos Ihres Kunden möchten. Wenn ich dann etwas weiter nach unten scrolle, können Sie diesen Ansatz sehen , der in Büros auf der ganzen Welt verwendet wird . Also verwenden Designer diesen Ansatz zum Beispiel sehr gerne , weil sie dies dem Team leicht zeigen können. Sie können dies dem Kunden oder den Beteiligten präsentieren , weil sie es auf ein Blatt Papier zeichnen, mit einer Schere ausschneiden und dann einfach an die Wand kleben können es auf ein Blatt Papier zeichnen, mit einer Schere ausschneiden , z. B. und diese einfach präsentieren Wireframes für ihre Kunden um den Gesamtablauf der App oder der Website zu verstehen , z. B. wenn ein Benutzer auf diesen Session-Button klickt, wohin wird er gehen? Sie können also Vorlagen dieser Mobilgeräte oder Website-Geräte verwenden , was auch immer. Und dann können Sie Ihre Benutzer einfach durch Ihr Papier-Wireframe führen . Und wenn ich etwas weiter nach unten scrolle, versuche ich nur, z.B. diesen Stil zu finden , man sieht viel detaillierter, sehr unterschiedliche Stifte werden in verschiedenen Layouts verwendet. Sind Sie, wie Sie sehen, das Popup-Menü, das genau hier verwendet wird. Sie können also all diese Elemente verwenden die Ihnen, Ihren Benutzern und Teamkollegen helfen, zu verstehen, wie diese Wireframes später in ein echtes Design umgewandelt werden in ein echtes Design umgewandelt , sobald Sie in Ihre Software von Wahl. Meine bevorzugte Software ist Adobe XD, was unglaublich ist, aber es ist immer noch so, als würde ich Papier-Wireframes in all meinen Projekten verwenden Papier-Wireframes in all meinen Projekten weil, wie ich in diesem Video und in diesem Kurs immer wieder erwähne , gibt mir nur die Möglichkeit , all diese schnellen Ideen auf ein Blatt Papier zu schreiben und sie einfach mit meinen Kunden zu kommunizieren. Noch einmal, Sie können in diesem Beispiel sehen, Sie können in diesem Beispiel sehen, Sie mit Papier-Wireframes detailliert werden können oder Sie mit Papier-Wireframes chaotisch werden können. Es hängt also wirklich alles von Ihnen, dem Budget des Kunden und der Zeit ab, die Sie für dieses Projekt haben. Denn wie ich in diesem Kurs immer wieder erwähne, wirst du nicht zu viel Zeit damit verbringen diese detaillierten Illustrationen, diese Detailsymbole zu zeichnen. Wenn der Kunde Ihnen nicht genug Geld zahlt , um dies für dieses spezielle Projekt zu tun. Also behalte diese Dinge einfach im Hinterkopf. Und was den Stil angeht, können Sie sehen, wenn Sie nicht wirklich gut zeichnen können, so wie ich, ich nicht, ich bin nicht wirklich gut im Zeichnen, aber ich verwende diese Papier-Wireframes immer noch für mehr als seit zehn Jahren, und damit hatte ich nie ein Problem. Du kannst also immer ein Lineal benutzen, z.B. nur um deine Linien gerade zu halten. Oder Sie können verschiedene Punktpapiere verwenden, die später in dieser Klasse erwähnt werden . Aber der springende Punkt hier ist, diese Ideen von Ihrem Kopf auf ein Blatt Papier zu bekommen diese Ideen von Ihrem Kopf auf ein Blatt Papier , denn es gibt keine einzige Software , die schneller ist als Ihr Gehirn und Ihre Hand. Also behalte diese Dinge einfach im Hinterkopf. Im nächsten Video werden wir besprechen, was Sie von der Ausrüstung zum Zeichnen dieser Papier-Wireframes benötigen Ausrüstung zum Zeichnen , da es einige wirklich grundlegende Ausstattungsoptionen gibt und es gibt einige wirklich fortschrittliche Ausrüstungsoptionen. Also werde ich sie einfach mit dir teilen. Und noch einmal, je nach Kundenbudget und wie viel Zeit Sie tatsächlich für dieses Projekt haben, werden Sie das eine oder andere verwenden. Also werde ich dich dort sehen. 56. Ausrüstung, die du brauchst: Wenn es um Ausrüstung geht, gibt es viele verschiedene Möglichkeiten. Sie können von einer wirklich Standardausrüstung ausgehen. Und ich empfehle wirklich, besonders wenn Sie gerade erst anfangen, mit Standardausrüstung zu beginnen, vor allem, wenn Sie noch nie Papier-Wireframes verwendet haben. Und dann geh die Leiter hinauf und kaufe dann einfach all diese teureren Optionen wenn du aufsteigst. In diesem Video zeige ich Ihnen nur einige der Geräte, die ich verwende ein Romanautor im Laufe der Jahre verwendet hat. Und nur um dir zu zeigen, was das alles ist. Also hier ist die gesamte Ausrüstung, die ich derzeit habe und die ich derzeit besitze und die ich in all meinen verschiedenen Projekten verwendet habe . Also das hier ist nur ein einfaches weißes Blatt Papier. Das ist das Druckpapier , weil ich in Europa ansässig bin. Ich verwende A4-Papier, wenn Sie bei uns sind , dann ist die Buchstabengröße für Sie. Aber im Grunde verwende ich dieses A4-Papier, weil mein Drucker es unterstützt. Und wenn Sie sich erinnern, habe ich das gerade erwähnt als ich diese Wireframes mit meinen Kunden, mit meinen Teamkollegen und solchen Dingen teilen möchte. Ich finde es wirklich am einfachsten , das mit einem Scanner zu tun. Also kann ich einfach dieses A4-Papier nehmen , es scannen und es dann an all die betreffenden Personen schicken . Als nächstes haben wir nur diesen schlichten alten Stift. Und mit diesem Stift können Sie auf dieses Blatt Papier zeichnen , was Sie wollen. Und nur die Grundausstattung ist da. Als nächstes habe ich diesen Stift und du kannst jeden Stift verwenden, den du willst, aber ich empfehle wirklich , entweder einen schwarzen oder einen blauen Stift zu haben . Egal, was Sie verwenden, Sie werden immer einige davon verwenden müssen. Und dann habe ich auch dieses Band, das komplett schwarz ist, aber ein bisschen dunkler ist, wie du hier sehen kannst. Diese Band hilft mir wirklich dabei einige Details wie Schlagschatten usw. bekannt zu geben. Oder wenn ich es einfach mit Farbe füllen möchte. Als nächstes habe ich ein Lineal und in den meisten meiner Wireframes verwende ich überhaupt keine Lineale, weil ich festgestellt habe, dass deine Lineale mich nur sehr verlangsamen. Aber wenn du möchtest, kannst du immer ein Lineal benutzen, nur um dir den Einstieg zu erleichtern, nur um ein gewisses Fundament zu legen. Denn wenn Sie mit freier Hand zeichnen, werden Ihre Layouts natürlich so aussehen, z. B. wenn Sie sich an das vorherige Beispiel für die Bilder erinnern , die ich Ihnen gezeigt habe. Aber wenn du willst, kannst du das Lineal benutzen um zu solchen perfekten Linien zu kommen, aber du kannst sehen, wie viel langsamer das im Vergleich dazu ist. Also noch einmal, wir werden immer zu diesem Zeitplan und Projektzeitplan zurückkehren . Es hängt also wirklich davon ab, wie viel Zeit Sie für Ihr Projekt haben , das eine oder andere verwenden werden. Als nächstes haben wir all diese Marker, sodass Sie verschiedene Marker verwenden können. Und das ist nur eine Sorte, die ich in meinem Laden vor Ort bekommen habe. Es ist also nicht wirklich wichtig, um welche Art von Hersteller es sich handelt. Das ist, mal sehen, Firebird-Pastell. Das ist Pelican Fiber, Christelle, das ist eine unbekannte Marke, Neon oder was auch immer. Es spielt also keine Rolle, denn auch hier sind diese Marker nur dazu da, die Farbe hervorzuheben , die Ihr Kunde verwendet. Nehmen wir an, wir haben eine Schaltfläche, und lassen Sie uns gleich hier eine Schaltfläche erstellen. Und nehmen wir an, ich möchte diese Schaltfläche mit dieser Farbe hervorheben , damit Sie sehen können, wie schnell das geht. Und wenn Sie sich an das Beispiel erinnern, ich Ihnen online zeige, können Sie diese Farbe einfach hervorheben und einfach in Ihr Projekt integrieren. Wenn dies die Kundenfarbe ist, möchten einige Kunden, sobald Sie anfangen , an Dynamik zu gewinnen. Sobald Sie anfangen, nicht viel Geld zu verdienen, aber sobald Sie anfangen, mit diesen Projekten genug Geld zu verdienen , um wieder in sich selbst und in Ihre Ausrüstung zu investieren . Ich empfehle wirklich , dass Sie sich diese besorgen. Nun, das ist sogenanntes Punktgitterpapier. Und dieses Papier gibt es in vielen verschiedenen Kulturen, viele verschiedene Größen wirken wieder wie dieses Papier. Aber der Unterschied sind all diese Punkte, diese Punkte sind dazu da, dir zu helfen, kein Lineal zu benutzen. Jetzt können Sie wieder ein Lineal verwenden. Und in den nächsten Videos werden Sie sehen, sobald wir mit dem Zeichnen dieser Wireframes beginnen, werde ich aufgrund der Konsistenz, wegen des Layouts tatsächlich das Lineal verwenden der Konsistenz, wegen des Layouts tatsächlich das Lineal Kombinationen und solche Sachen. Weil ich an dieser Stelle daran gewöhnt bin. In den meisten Fällen verwende ich den Roller nicht, weil diese Ideen im Grunde nur für mich selbst sind. Diese Papiere, wenn Sie anfangen, sie zu benutzen oder verschiedene Geräte benötigen, denn wenn ich zeige, wenn ich z. B. diesen Marker nehme und anfange, darauf zu zeichnen, können Sie diesen Marker nicht sehen wirklich gut, denn dieses Punktgitterpapier ist viel dicker als dieses Papier. Diese Marker funktionieren hier also nicht wirklich. Sie benötigen also spezielle Ausrüstung wie diese. Nun, das sind Jelly Roll Stifte und dieser ist von Sakura. Das ist, ich weiß nicht, eine andere Marke, es ist nicht wirklich wichtig. Marke spielt in diesem Fall also wirklich keine Rolle. Es kommt darauf an, wie diese funktionieren. Grunde genommen enthalten diese Stifte, Gegensatz zu diesen Stiften, z. B. oder Stiften, die Sie normalerweise verwenden werden, im Gegensatz zu diesen Stiften, z. B. oder Stiften, die Sie normalerweise verwenden werden, kein Gel darin. Dieses Gel ist es, was diesem Wireframe hilft, sich von anderen abzuheben. Sie können also sehen, weil ich all diese Punkte habe, ist es für mich viel schneller, ohne Lineal zu zeichnen. Und ich werde immer noch eine gewisse Konsistenz und ein gut aussehendes Layout haben . Und Sie können den Unterschied zwischen diesem und dem deutlich erkennen . Wie viel besser sieht das aus, weil es auf einem schwarzen Blatt Papier ist. Ich verwende diese weißen Stifte als diesen, weil sie auf einem weißen Blatt Papier sind und ich sie verwende, sodass sie viel besser zur Geltung kommen. Es sieht viel ausgefeilter und professioneller aus. Und es wird Ihre Kunden wirklich viel besser einbeziehen. Ich habe im Laufe der Jahre herausgefunden Kunden wirklich gerne sehen, woran Sie arbeiten, weil sie Sie am Ende des Tages natürlich für Ihre Arbeit bezahlen . Du musst ihnen also wirklich zeigen , wohin ihr Geld fließt. Also im Grunde war's das für die Ausrüstung. Du kannst klein anfangen. Jeder kann sich eines davon und eines davon leisten. Du kannst also klein anfangen, du kannst langsam anfangen. Und sobald Sie ein Upgrade abgeschlossen haben, sobald Sie anfangen, Geld zu verdienen, können Sie in verschiedene Marker investieren. Auch hier müssen sie nicht diese ausgefallene Marke sein oder die Farben von Markern oder nichts von dem Zeug. Weil Sie kein Illustrator sind, zeichnen Sie nicht, Sie skizzieren diese Ideen nur auf einem Blatt Papier, um sie Ihren Kunden zu präsentieren. Im nächsten Video beginnen wir mit dem Skizzieren. Ich werde dir einige Ideen zeigen und ich werde dir zeigen, wie du mit diesen Papier-Wireframes arbeiten kannst und wie du deine Ideen, die du im Kopf hast, tatsächlich umsetzen kannst . Legen Sie sie auf ein Blatt Papier und machen Sie daraus ein Layout, das Sie dann in Ihrer Lieblingssoftware verwenden können. Also werde ich dich dort sehen. 57. Zeichnung auf Normalpapier: In diesem Video zeichnen wir auf ein normales Blatt Papier, und ich werde zeigen, wie Sie unser Layout, das Sie in Ihrem Kopf haben, ändern und auf dieses Blatt Papier legen können . Weil ich in einem meiner vorherigen Videos erwähnt habe, unser Schuhbeispiel, Dent, wenn Sie Bilder in Verbindung mit Text verwenden, ist es wirklich wichtig, ihnen einen Kontext zu geben. Und es ist wirklich wichtig , qualitativ hochwertige Bilder zu haben , die dazu beitragen, Ihren Benutzern eine bessere Geschichte zu erzählen . In diesem Beispiel werden wir zeichnen, wir werden das Schuhbeispiel verwenden , das ich im vorherigen Video erwähnt habe. Also lass uns anfangen. Was ich hier habe, wie Sie sehen, ist nur ein normales Stück bedrucktes Papier, wie ich es Ihnen zuvor gezeigt habe. Ich habe zwei Markierungen , die ich nur verwenden werde , um Schaltflächen anzuzeigen, z. B. und anklickbare Bereiche. Ich habe mein Lineal und ich habe einen Bleistift und ich habe diesen Stift. Ich werde den Stift für Schlagschatten verwenden, z. B. nur um einige dieser Schlagschatten anzukündigen. Also, ohne weitere Umschweife, lasst uns anfangen. Was ich wirklich gerne auf all meinen Wireframes mache, ist, wie ich im vorherigen Video erwähnt habe, dem wir Wireframing-Stile untersuchen Ich lasse diesen Teil meines Papiers wirklich gerne leer, weil er hilft mir, einige Notizen aufzuschreiben , die ich habe, die wirklich hilfreich sein werden, um mich später zu treffen, wenn ich mich an etwas erinnere, oder an meine Teamkollegen oder meine Kunden, wenn ich sie in eine bestimmte Richtung führen möchte . Also, was werden wir tun? Zuerst werden wir einen kurzen Überblick zeichnen. Also wie gesagt, Sie können ein Lineal verwenden, aber es ist wirklich nicht vorgeschrieben. Und Sie können sehr streng mit Ihren Winkeln sein, z. B. Sie können gerade Winkel machen. Man kann die Lineale verwenden, die z.B. Autodesigner verwenden , nur um all diese Winkel und solche Dinge zu geben. Aber das werde ich nicht tun. Ich werde mich nicht mit zu vielen Details beschäftigen. Ich werde einfach so etwas machen. Das hier wird also unsere Navigation hier oben sein . Ich werde ein Flugzeug und einen Navigationsstil verwenden, da Ihre Benutzer daran gewöhnt sind, bestimmte Navigationstypen zu zertifizieren. Machen Sie es also nicht zu kompliziert, achten Sie darauf, etwas zu verwenden , das jeder verstehen kann. In den meisten Fällen sich Navigationen bereits bewährt. Versuchen Sie also nicht, heißes Wasser zu erfinden nur weil Sie es wollen, verwenden Sie Navigationen, die bereits funktionieren, wenn Sie bereits konvertieren. Nun, in diesem Fall werde ich die Navigation verwenden. Ich werde hier ein Logo platzieren. Und um das zu tun, werde ich einfach einen Kreis zeichnen. Und ich kann sofort meine Farbe verwenden , damit ich sie so schön ausfüllen kann. Und dann kann ich so etwas machen. Also kann ich mein Lineal wieder benutzen, achte darauf, dass ich irgendwo in der Mitte hingehe. Es ist nicht wirklich wichtig. Und ich werde diese verwenden, die meine Navigation genau hier anzeigen. Was ich machen werde, ich werde zwei Knöpfe zeichnen. Also werde ich diese freie Hand haben. ZB so. ZB so. Diese Schaltfläche hier wird die Anmeldeschaltfläche sein, z. B. weil das der Hauptpunkt ist. Ich möchte, dass sich meine Benutzer anmelden und so viele Benutzer wie möglich haben. Und das kann z.B. Schaltfläche „ Registrieren“ sein, die meine Benutzer wieder zu ihren Profilen bringt. Ich werde das aufschreiben. Also werde ich einen Pfeil wie diesen zeichnen. Also hat es tatsächlich diesen benutzt. Damit wir es besser sehen können. Also melde dich an und das hier kann angemeldet werden. Ich kann es unterstreichen, weil es noch einmal viel wichtiger ist, als sich anzumelden weil Sie diese Benutzer bereits haben, aber Sie müssen neue Benutzer konvertieren und neue Benutzer auf Ihre Website bringen. Als nächstes möchte ich ein schönes großes Heldenbild erstellen , damit ich es ungefähr hier positionieren kann, z. B. und weil wir Schuhe erwähnt haben, ich nicht wirklich gut zeichnen, aber ich Ich werde das nur hier veranschaulichen. Natürlich kannst du das. Wenn du gut zeichnen kannst, kannst du das zeichnen. Sie können auch Bilder aus dem Internet aufnehmen, ausschneiden und dann auf ein Blatt Papier kleben . Aber auch hier erfordert dieser Ansatz viel Zeit und Energie. Stellen Sie also sicher, dass Sie das verstehen, bevor Sie tatsächlich in einen solchen Prozess einsteigen. In meinem Fall werde ich einfach etwas kritzeln , das einem Schuh ähnelt. Aber bevor ich das tue, möchte ich einen Text positionieren. Also werde ich hier einen schönen großen Titel verwenden. So wie. Und ich werde es mit Farben wie dieser ausfüllen. Dann verwende ich hier Untertitel. Und dann kann ich es tatsächlich hier mit meinem Bleistift ausfüllen. Und dann darunter kann ich einen Button benutzen, weil diese genau hier sind und dein Produkt beschreiben. Schieß in unserem Fall. Und ich werde diese Farbe wieder verwenden. Lassen Sie uns jetzt einfach eine Grundform erstellen , die dem Schuh ähnelt. Auch hier kann ich nicht wirklich gut zeichnen. Also werde ich, sagen wir, so etwas machen, vielleicht so, und es dann hier beenden. Vielleicht so, so, und dann bring es gleich hier runter. Vielleicht sind die für die Schnürsenkel, so etwas. Und lassen Sie uns Streifen an der Seite verwenden. Also vielleicht haben Sie hier eine Form, und los geht's, wir haben etwas das einem Schuh ähnelt. Und dann, was ich hinten machen kann, kann ich vielleicht einen Kreis oder eine Form kreieren, was einfach unseren Schuh bringt, die Vorderseite, so etwas. Da hast du es. Das ist unser Heldenbild. Der Sinn dieses Heldenbildes besteht also darin, Ihre Nutzer besser zu konvertieren. Dieser Titel wird also zeigen, was das ist. Es ist ein Schuh. Also der Name des Schuhs, der Name der Marke oder so etwas. Der Untertitel wird etwas mehr Details über die Show beschreiben. Also zum Beispiel Materialien, aus denen es hergestellt ist oder wofür ist es? Ist es zum Laufen, ist es zum Gehen, solche Sachen? Und dann die Schaltfläche, Benutzer können das tatsächlich überprüfen und auf eine separate Seite gehen, die für diesen bestimmten Schuh bestimmt ist. Also behalte all diese Dinge im Hinterkopf. Dann kann ich hier tatsächlich eine Paginierung zeichnen. Benutzer können also tatsächlich auf diese Punkte klicken. Und nehmen wir an, dieser Punkt ist ausgefüllt. Oder das kann ein automatischer Schieberegler und er kann einfach automatisch nach links und rechts gehen. Und Benutzer können nicht wirklich darauf klicken, um sie zu ändern, oder sie können, je nachdem , für welches Layout Sie sich am Ende entscheiden. Als nächstes werde ich unten eine Art Logo-Streifen erstellen. Verwenden wir also ein Lineal und lassen Sie uns einige einfache Kreise erstellen. Also vielleicht kann ich vielleicht vier Kreise erstellen. Und dann mach einfach so etwas. Und positionieren Sie das, z. B. Partner oder Partnershops, etwa so. Nehmen wir an, dies ist ein bekannter Schuh. Und dann können diese Partner all diese berühmten Geschäfte vertreten, z. B. wo dieser Schuh Salz ist. Als nächstes kann ich ein Video hinzufügen, z. B. dieses. Und ich habe nur Ideen. Ich teste diese Dinge nur und erkunde sie einfach. Also vielleicht können wir so etwas tun. Vielleicht kann ich sofort so einen Kreis erstellen. Und dann benutze diesen Stift, um eine Wiedergabetaste wie folgt in die Mitte zu setzen . Das kann also ein Video sein. Und dann kann ich hinter diesem Video z.B. einen schönen Schlagschatten wie diesen einbauen. Und dieser Schlagschatten zeigt an, dass Benutzer auf dieses spezielle Video klicken können. Ich kann aber auch angeben , dass dies das Bild ist. Obwohl es ein Video ist, ist es immer noch ein Bildelement. Und dann kann ich hier einen schönen großen Titel schreiben. Dann füge einen großen Untertitel dahinter, tut mir leid, darunter, so. Und dann z. B. eine Schaltfläche, auf der Benutzer tatsächlich klicken und gehen und eine bestimmte Aktion ausführen können . Nehmen wir an, dieses Video beschreibt diesen Schuh oder den Entstehungsprozess dieser Schuhe oder etwas Ähnliches. Im Folgenden können wir z. B. einige Dienste anbieten und Hintergrundinformationen zu den Diensten bereitstellen , die diese Website tatsächlich anbietet. Also zum Beispiel, abgesehen vom Verkauf des Schuhs, nehmen sie vielleicht gebrauchte Schuhe und stellen sie dann auf ihre Website. Vielleicht renovieren sie sie. Sie müssen also wirklich mit Ihrem Kunden über all diese Details sprechen und darüber, was er tatsächlich tut. Aber in unserem Fall verkaufen wir z. B. vielleicht nicht nur Schuhe, vielleicht verkaufen wir auch Kleidung. Also zum Beispiel verkaufst du T-Shirts, wir verkaufen Jacken, wir verkaufen all diese Dinge. Also werde ich diese drei Boxen platzieren. Eines meiner Bilder, und lassen Sie uns vielleicht etwas wie dieses verwenden , um anzuzeigen , dass dies unsere Bilder sind. Noch einmal, wenn du diese freie Hand hast, wirst du viel schneller sein. Aber ich werde dir in diesen Videos nur zeigen, dass du ein Lineal wie dieses verwenden kannst. Das sind also die Bilder, sagen Analysten andere Dienstleistungen, welche anderen Produkte? Also noch einmal, ich kann später, wenn ich hier zurückkehre, wissen , was das sind. Also vielleicht haben wir einen größeren Text. Also z. B. Titel dieses Produkts, dann haben wir eine Beschreibung wie diese und dann haben wir einen Link. Also kann ich es so machen. Dann kann ich es mit dieser Farbe hervorheben. Und dann kann ich darauf hinweisen, zu folgen und Link zu sagen. Benutzer können also tatsächlich hier klicken, um auf dieses Produkt zuzugreifen. Was wir darunter tun können , ist vielleicht, dass wir ein großes Bild und ein großes Heldenbild oder ein Video, das in einer Schleife abgespielt wird, wie dieses einfügen können großes Heldenbild oder ein Video, das in einer Schleife abgespielt wird, . Also vielleicht mit dem Produkt modellieren. So wie das. Und dann darunter können wir das z.B. mit einem anderen Abschnitt wie diesem abschließen . Vielleicht können wir also z.B. etwas über den Hersteller dieses bestimmten Produkts oder so etwas sagen. Oder vielleicht können wir hier sogar ein anderes Produkt mit einem Bild zeigen . Und weil wir hier ein linkes Layout verwendet haben, können wir hier vielleicht ein rechtes Layout verwenden, nur um unser Layout ein bisschen so aufzuteilen . Und ich kann dieses Produktbild so nennen. Und dann kann ich hier einen Titel eintragen, schönen großen Titel-Untertitel hier, quasi so. Und dann setze hier einen Knopf. Benutzer können dieses Produkt also erneut kaufen oder zumindest eine Seite besuchen, um dieses Produkt zu kaufen. Darunter können wir ein Kontaktformular erstellen. Was ich also tun kann, ist hier einen Titel einzufügen, z. B. einen Untertitel hier und dann ein paar davon. Also lass uns das ausfüllen. Füllen wir das aus. Also, was das ist, z. B. ich kann es hier ablegen. Also Kontaktformular, z. B. würden wir uns freuen, von Ihnen zu hören, kontaktieren Sie uns über die unten angegebenen Kontaktinformationen und dann Adresse, Kontaktnummer, E-Mail-Adresse oder etwas Ähnliches. Dann können wir hier unser Kontaktformular platzieren. Das sind also Formularfelder wie dieses. Und ich kann z.B. eine Zeile wie diese schreiben, nur um z.B. deine E-Mail, deinen Namen, deine Adresse, etwas Ähnliches anzugeben deine E-Mail, deinen Namen, . Und dann können wir unter all diesen eine Schaltfläche setzen. Lassen Sie uns hier eine Schaltfläche platzieren, nur um unser Layout ein wenig zu unterbrechen, weil wir hier eine linke Taste haben, wie diese. Was ich dann am Ende tun kann, ist, dass ich das abbrechen kann , z. B. so. Und dann kann ich genau hier ein Logo platzieren, wie dieses. Und dann kann ich Menü-Navigationselemente hinzufügen. Also lass uns sehen, 123-456-2345. Vielleicht kann ich Jeremy und noch einer hier. Das wird also unser Navi sein, also z.B. Original Copyright 2022 und Markenname wie dieser, zB und dann kannst du die Nutzungsbedingungen eingeben. Sie können eine Datenschutzrichtlinie oder etwas Ähnliches angeben. Sie können also in nur ein paar Minuten, etwa 10 Minuten, sehen, dass Sie etwas erstellen können, das ziemlich gut aussieht und es Ihren Kunden wirklich zeigt, dass Sie es haben oder dass Sie Und du kannst diese Idee so auf ein Blatt Papier bringen. Aber ich habe vergessen, hier zu schreiben, also Hintergrundschatten zu setzen, z. B. ich kann sogar darauf hinweisen, es in Schlagschatten nennen, damit Kunden, Teamkollegen, Entwickler, alle Beteiligten wissen was du damit eigentlich meintest. Also los geht's. So einfach ist es, auf ein normales Blatt Papier zu zeichnen. Und wenn Sie gerade erst anfangen oder bereits in diesem Geschäft tätig sind, würde ich Ihnen wirklich empfehlen, dieses Papier zu verwenden, da es extrem billig ist. Wie Sie sehen, ist es extrem schnell, darauf zurückzugreifen. Aber im nächsten Video werde ich das Papier mit Punktraster zeigen, das schwarze, das ich habe. Sie können aber auch viele andere Farben bekommen. Und nur um dir zu zeigen, wie das aussieht, dieses Layout sieht aus wie auf diesem Blatt Papier. Und dann kannst du vergleichen, was dir eigentlich besser gefällt. Normales Stück Papier oder das Punktraster Papier, wenn Sie etwas mehr Geld darauf investieren möchten . Also werde ich dich dort sehen. 58. Zeichnung auf dot: In diesem Video verwenden wir das schwarze Punktgitterpapier, das ich Ihnen gezeigt habe. Und wir werden genau das gleiche Layout erstellen , das wir zuvor mit dem schlichten weißen Stück Papierdruckpapier gemacht haben zuvor mit dem schlichten weißen Stück . Und ich werde einige Unterschiede zwischen diesem dunklen Stück schwarzem Papier und diesem weißen Blatt Papier zeigen diesem dunklen Stück . Also lass uns anfangen. Und das Wichtigste zuerst, Sie haben all diese unterschiedlichen Dicken Ihrer Stifte. Das ist also Nummer fünf, z. B. das ist Nummer acht, das ist Nummer zehn. Je größer die Zahl, desto dicker wird natürlich die Linie sein. Also fange ich mit nur diesem leichtesten an. Also werde ich dasselbe tun wie zuvor. Ich werde einfach die Gliederung erstellen. Und es ist viel einfacher, Ihr Lineal hier auszurichten, weil Sie diese Notizen verwenden. Ich werde so etwas machen. Ich werde so etwas machen, z. B. wie gesagt, es ist viel schneller und einfacher, wenn man tatsächlich zählen kann , wie viele dieser Punkte man hat. uns zunächst Lassen Sie uns zunächst diese Navigation erstellen, damit ich eingekreist für mein Logo erstellen kann. Und weil ich keine orange Farbe habe, die wir zuvor verwendet haben , werde ich diese nur verwenden, um sie auszufüllen. So wie es ist. Dann werde ich den gleichen Stil verwenden. Also lass uns das nur machen , um sie anzugeben. Und ich werde diese beiden Buttons einfach noch einmal erstellen. Also kann ich eine Schaltfläche wie diese erstellen , eine Schaltfläche wie diese. Und dann verwende ich diese graue Farbe, um meinen Anmeldeschaltfläche auszufüllen. Und ich werde diese lila Farbe verwenden um meine Anmeldeschaltfläche auszufüllen. Auch hier können Sie verschiedene Farben verwenden. Wenn ich das nehme und wir es testen lassen lesen Sie und sehen Sie, ob es besser funktioniert. glaube ich nicht. Aber lassen Sie uns tatsächlich damit weitermachen. Es ist tatsächlich viel dunkler als dieses lila. Also werde ich tatsächlich so wechseln, aber je nach Farbe des Kunden werden Sie natürlich die eine oder andere verwenden . Das habe ich schon erwähnt. Also lass uns mit dem nächsten weitermachen. Ich werde Nummer acht verwenden, weil ich finde, dass diese Linien nicht dick genug sind. Also lass es uns so aufstellen. Und du kannst sofort das Herz dunkler sehen. Deshalb werde ich diese für meinen Titel verwenden, also lass uns ihn z. B. so ausfüllen. Dann verwende ich diesen grauen Wollstoff für meinen Untertitel. So wie das hier. Es gibt keinen großen Unterschied, aber Sie verstehen, worum es geht. Und ich werde diesen roten für unseren Button verwenden. Füllen wir es schön aus, so. Und dann verwende ich diese Kreise für unsere Seitennummerierung. Füllen wir das aus. So wie es ist. Dann werde ich diesen leichteren verwenden, um meinen Schuh so herzustellen, z. B. so. Und natürlich, je nachdem, wie viel Zeit Sie investieren möchten, wie viel Zeit Sie für Ihr Projekt haben. Ich kann mich noch einmal wiederholen oder Sie können je nach Projekt investieren. Also lass uns dasselbe fühlen. Lassen Sie uns diese Linien sehr schnell ziehen, wie wir es zuvor getan haben. Und wenn du dich erinnerst, hatten wir diesen Kreis. Jetzt verwende ich Nummer zehn, die dickste, die ich habe, und fülle sie einfach hier mit etwas Hintergrundfarbe aus. Was Sie jetzt auch tun können, ist, diese z.B. mit dieser Farbe auszufüllen. So wie es ist. Ich gehe immer wieder darauf zurück, wie viel Zeit Sie tatsächlich für dieses Projekt haben. Also kannst du damit machen , was du willst. Als nächstes haben wir den Logo-Streifen. Also lass mich genau hier kreieren. Und wir hatten diese Kreise. Es ist also für verschiedene Kreise positioniert. Mein Excel. Und darunter hatten wir dieses Video , so wie dieses. Und ich werde tatsächlich einen Kreis in der Mitte wie diesen erstellen . Und schau einfach, wo meine Nummer zehn ist. Also hier ist es. Ich werde einfach den Play-Button mit meiner weißen Farbe hineinzeichnen . Und ich kann diese Nummer zehn weiterhin für meinen Titel verwenden. Ich kann diese graue Farbe für meinen Untertitel verwenden. Und lass uns sehen. Ich kann diese Nummer fünf gebrauchen. Ich kann das für den Button verwenden und ihn dann einfach so mit meiner roten Farbe ausfüllen . Als nächstes haben wir diese Titel. Lassen Sie uns also weiterhin Nummer zehn verwenden. Siehe Titel. Ich mache das so mit freier Hand. Also Haupttitel, Untertitel. Und was wir unten hatten , das ist in diesen Bildern. Das Tolle an diesem Papier ist also , dass Sie tatsächlich zählen können. Ich werde mir nicht die Mühe machen weil wir dieses Layout bereits erstellt haben, aber wenn Sie möchten, können Sie tatsächlich zählen, wie viele dieser Punkte Sie für Ihr Layout verwenden. So können Sie sicherstellen, dass alle Ihre Linien perfekt sind, alle Ihre Höhen sind perfekt. Was wiederum zu einem viel saubereren Layout führen wird. Also noch einmal, je nachdem, was Sie erreichen möchten, was Sie verwenden möchten, können Sie sich für das eine oder andere entscheiden. Ich bevorzuge dieses schwarze Papier etwas, weil sich Details viel besser abheben als auf einem weißen Blatt Papier. Es ist natürlich ein bisschen teurer und dann ein weißes Stück Papier. Aber je nachdem, was Sie erreichen möchten, was Sie schaffen möchten, entscheiden Sie sich für das eine oder andere. Da haben wir diese erstellt und lassen Sie uns mit diesem fortfahren. Also hatten wir diesen Titel wie diesen. Ich werde für die kleineren Linien wie diese zu diesem wechseln . Und endlich hatten wir diesen Link am Ende. So wie es ist. Als nächstes hatten wir dieses große Bild. Lassen Sie uns diesen verwenden, um es ein wenig aufzuschlüsseln. So wie es ist. Und ich werde einfach Freihand benutzen, um nicht zu viel Zeit zu verschwenden. Und ich denke, die beste Option wäre, dies mit der Zahl Zehn etwas besser zu skizzieren. Zum Beispiel, weil es die gesamte Website tatsächlich viel besser umreißen wird , Nummer fünf, aber wie gesagt, Sie können alles erkunden und tun, was Sie wollen. Lassen Sie uns nun mit der Erstellung dieses Titels fortfahren. Also lass uns das machen. Ich werde diesen Titel hier positionieren. Wir werden diesen Untertitel haben. Und was wir damals hatten, ist dieses Bild. Sie sehen also schon einige Flecken auf dem Papier. Hoffentlich lenkt es nicht zu sehr ab, wenn eine Kamera ist, aber was Sie damit machen sollten, ist ein bisschen zu warten, nur um ihnen einfach etwas mehr Zeit zum Einstellen zu geben. Sobald sie das getan haben, können Sie mit der Erstellung fortfahren, aber Sie sollten ihnen wirklich etwas Zeit geben, um sie einzurichten. Und zweitens, bilden Sie ein bisschen so. Dann haben wir unseren Button. Lass uns eine rote verwenden. Ich versuche jetzt wirklich, hier so schnell wie möglich vorzugehen, nur um dich nicht zu sehr mit diesen Details zu langweilen , weil wir diesen Prozess schon einmal mit einem weißen Blatt Papier durchgemacht haben. Was wir dann unten haben, ist der Titel. Versuchen wir also, es in der gleichen Zeile zu halten. Wir haben also den Titeluntertitel. Und dann hatten wir den Titel auf der rechten Seite. Dann hatten wir den Untertitel darunter. Und dann hatten wir diese Zeilen. Also benutze sexuell etwas dünneres. Das ist also Nummer acht. Lass uns mit Nummer fünf weitermachen, denn ich möchte diese kleineren Linien hier so zeigen . Und dann lass uns sehen. Ich kann Nummer acht verwenden , um solche Formularfelder tatsächlich zu erstellen . Sie können also sehen, dass Sie leicht zwischen der Verwendung eines Lineals oder der Verwendung dieses Notizrasters wechseln können , denn das ist der springende Punkt , wenn Sie es überhaupt haben. Sie können also ohne Lineal sehen wie viel schneller ich diese erstellen kann, aber trotzdem das gleiche Layout, die gleiche Konsistenz beibehalten , alles sieht so aus, wie es sollte. Lassen Sie uns zum Schluss unseren Button genau hier positionieren , genau hier, füllen Sie ihn mit Farbe aus. Das, so. Und zum Schluss, lassen Sie uns die Dinge zusammenfassen. Lassen Sie uns diese Fußzeile erstellen. Also kann ich das wie hier positionieren. Und ich kann das abschließen. Fußzeile war etwas größer als zuvor, aber das ist eigentlich egal. Und was ich hier tun kann, ist diese sechs zu erstellen. Also 123456. Und ich kann in meinem Kreis für mein Logo zeichnen. Ich kann meine Farbe verwenden, fülle das gut aus. Schließlich sehen Sie sich das unten an. Verwenden wir also eine dünnere. Also stellen wir es tatsächlich in die Mitte. Also OC 2022. Und was ich tun kann, ist Nummer zehn oder noch besser Nummer acht zu verwenden Nummer zehn oder noch besser Nummer , um die Nutzungsbedingungen anzugeben, z. B. die Datenschutzrichtlinie. Und da hast du es. Natürlich können Sie all diese Details zeichnen. Also lass uns mit diesem gehen, z. B. Partnershops. Aber ich möchte Sie nicht mit zu vielen Details langweilen , da wir diesen Prozess bereits zuvor durchlaufen haben. Also im Grunde ist es das. So verwenden Sie dieses Punktrasterpapier und das Papier mit schwarzen Punkten. In meinem Fall sollte ich wirklich Ticker-Marker finden, diese Gelstifte farblich um diese Farben ein bisschen besser zu akzentuieren , weil einige Farben gut funktionieren, wie diese goldene Farbe, was ich dir zeigen werde. Sie können das z. B. für Ihre Buttons verwenden, aber wenn Sie die exakte Farbe der Marke Ihres Kunden verwenden möchten , dann werden Sie in einigen Fällen Probleme haben, besonders wenn Sie diese nicht haben. Nun, das ist eine meiner Lieblingsmarken. Es heißt Sokoto. Es ist aus Japan. Und sie stellen wirklich diese fantastisch aussehenden Stifte her. Sie können sehen, wie, wie gut Sie mit diesen Stiften tatsächlich ein Ergebnis erzielen können . Also verkaufen sie diese tatsächlich in einer Vielzahl von verschiedenen Farben. Und du kannst sie kaufen, wenn du willst. Aber diese drei kosten bis zu 20 davon. Das ist also der springende Punkt, das ist der ganze Grund dahinter. Aber ich wollte Ihnen zeigen, dass Sie diese in verschiedenen Varianten und zu unterschiedlichen Preisen bekommen können , genauso wie bei diesen Markern, die Sie für weißes Blatt Papier verwenden werden . Lassen Sie mich das jetzt klären und lassen Sie mich Ihnen den Unterschied zwischen diesem schwarzen und weißen Blatt Papier zeigen den Unterschied zwischen diesem schwarzen . Also hier ist es. Es ist dasselbe Layout mit zwei verschiedenen Techniken und zwei verschiedenen Papieren. Also hier haben wir dieses Whitepaper , das wir bereits behandelt haben, und hier haben wir dieses Black Dot-Papier. Und Sie können grundsätzlich Ihr Urteil fällen. Das ist viel cooler und es ist viel schneller, mit freier Hand zu erstellen , da Sie dieses Punktraster haben. Aber wenn Sie die Mühe, diese zu benutzen, im Grunde genommen überstehen wollen die Mühe, diese zu benutzen, im Grunde genommen überstehen , denn sie sind wieder mit diesem Gel gefüllt und dieses Gel wird sich auf ein Blatt Papier übertragen. Ich bin bereit, das durchzumachen, weil meine Kunden von einem Ergebnis wie diesem viel mehr begeistert sind von einem Ergebnis wie diesem viel mehr begeistert von unserem Ergebnis wie diesem. Aber wenn Sie gerade erst anfangen, wenn Sie sich nicht die Mühe machen können, diese zu verwenden und vielleicht ein bisschen professioneller auszusehen , aber den Preis zahlen. Dann kannst du natürlich mit diesen gehen. Natürlich, was auch immer Sie wählen, um Ihre Pipe Paper Wireframes zu erstellen. Viel wichtiger ist, welche Geschichte sie erzählen und wie das Layout und wie das Layout aussieht. Welches Papier verwendest du dann? Aber wenn Sie darauf zurückkommen, können Sie natürlich günstigere Optionen verwenden. Sie können viel teurere Optionen verwenden. Aber am Ende des Tages kommt es auf das Ergebnis an und nicht auf das Stück Papier. Es gibt noch einen weiteren Tipp, den ich in diesem Kurs mit Ihnen teilen möchte , und zwar die Verwendung von Vorlagen. Und darauf werden wir im nächsten Video eingehen. Also werde ich dich dort sehen. 59. Druckvorlagen verwenden: Eine gute Möglichkeit, Ihre Geschwindigkeit und Produktivität bei der Arbeit mit Papier-Wireframes zu verbessern bei der Arbeit mit Papier-Wireframes , ist die Verwendung von Principal Templates. Nun, das sind nur Vorlagen bekannter Geräte, z. B. Telefongeräte, Browsergeräte, Uhrgeräte und was auch immer Sie sonst noch arbeiten, Sie können Tablets verwenden, Sie können Laptops verwenden, was auch immer Sie wollen. In diesem Video zeige ich Ihnen nur eine kostenlose Ressource, die ich anbiete, damit Sie sie nutzen können. Aber das hat auch einen Vorbehalt. Sie müssen einige dieser Größen korrigieren , da sie etwas älter sind. Ich werde auch Vorlagen bereitstellen , die ich Ihnen in nur einer Sekunde zeigen werde. Sie sind als PDF druckbar , sind als PDF druckbar , sodass Sie sie sofort ausdrucken können. Aber ich werde Ihnen auch einige Premium-Links im PDF zeigen . Sie können dort klicken und sie besuchen und kaufen , wenn Sie möchten. Aber es ist nicht wirklich verpflichtend. Ich gebe Ihnen all diese kostenlosen Ressourcen, aber wenn Sie möchten, können Sie diese Premium-Ressourcen kaufen. Also hier ist meine Website, web donut.net, und das sind druckbare Geräte, Vorlagen. Wie bereits erwähnt, werde ich den Link unten im PDF belassen und Sie können klicken, um darauf zuzugreifen . Laden Sie sie einfach herunter. Sie sind Photoshop-Dateien. Sie können Photoshop-Dateien auch in Adobe XD öffnen , wenn Sie nicht über Photoshop verfügen. Und was sie im Grunde sind, sind nur Modelle dieser Telefone. Wir haben also Smartwatches, wir haben Mobiltelefone und Sie können iPhone 7 und Galaxy Pixel, Samsung Galaxy S7 sehen . Diese Geräte sind zu diesem Zeitpunkt also etwas älter, aber wie gesagt, man kann sie einfach verwenden. Sie können z. B. diese Tasten entfernen, Sie können diese Kameras entfernen, die Kamera in der Mitte positionieren, z. B. um das Gerät auf den neuesten Stand zu bringen. Lass uns so gehen. Sie können diese Elemente auch kombinieren, aber wie Sie sehen, gibt es keine Kerbe. Aber ich werde es in nur einer Sekunde zeigen, ich werde Ihnen eine druckbare Vorlage als PDF zur Verfügung stellen , damit Sie ein Telefon mit einem Bogen haben können, wir haben Tablets, wir haben den Google Chrome-Browser, und das ist es im Grunde. Also komm einfach her, lade es jetzt herunter. Und das ist im Grunde genommen ein Schlag auf M, um dir zu zeigen, was du bekommen wirst. Dies sind druckbare Vorlagen, die Sie im PDF-Dateiformat erhalten können . Drucken Sie diese einfach aus. Und wie Sie sehen können, ist dies der Browser , den ich Ihnen gerade gezeigt habe. Dies sind die Telefone, die die Kerbe oben haben. Also habe ich tatsächlich weitergemacht und sie erstellt. Und das sind Smartwatches, also z.B. für Apple Watch oder so ähnlich. Also, wie kannst du diese kleinen benutzen, lass uns mit diesem gehen. Zeichnen Sie z. B. einfach auf sie und sie sind wirklich nützlich, weil Sie Ihren Kunden und Ihren Teamkollegen zeigen können Ihren Kunden und Ihren Teamkollegen zeigen , wie all diese aussehen werden , sobald Sie sie tatsächlich platziert in Ihrer Software und sobald Sie tatsächlich mit der Erstellung beginnen. Also verwenden wir zum Beispiel ein Logo genau hier in der Mitte auf allen dreien. Und lass uns ein Lineal benutzen. In diesem Fall können Sie sehen, warum Lineal hier wirklich nützlich ist. Weil ich z.B. eine Tab-Leiste genau hier unten platzieren auf allen drei gleichzeitig eine Tab-Leiste genau hier unten platzieren kann. verstehst also, worum es geht. Du kannst einfach hier zeichnen. Und ich habe absichtlich all diesen leeren Raum um mich herum gelassen. Also kannst du das z.B. immer noch tun. Du kannst hier Text eintragen, du kannst damit machen, was du willst. Aber im Grunde sparen Ihnen druckbare Vorlagen viel Zeit, insbesondere wenn Sie sie später Ihren Kunden präsentieren. Ich fand, dass diese äußerst nützlich sind, wenn Sie solche mobilen Apps erstellen. Und wenn Sie Uhrenkonzepte wie diese entwickeln, weil Sie sehen, dass diese Uhren nur ein kleines bisschen kleiner sind. also wirklich nützlich, ein Modell zu erstellen, das im Grunde ist also wirklich nützlich, ein Modell zu erstellen, das im Grunde so aussieht, wie das Endprodukt am Ende aussehen wird, um es Ihren Kunden zu zeigen. Aber was ist mit dem Internet? Nun, das ist ein bisschen knifflig. Was wir hier haben, ist Google Chrome, im Grunde eine Vorlage. Was Sie hier tun können, ist, wenn wir zu dem Beispiel zurückkehren , das ich Ihnen zuvor gezeigt habe, damit wir z. B. den Schuh noch einmal zeichnen können . Noch einmal mit meinem Epos. Ich probiere hier Fähigkeiten aus, aber du verstehst, worum es geht. Sie werden dies verwenden, um Ihren Kunden schnelle Konzepte zu zeigen. Und was Sie natürlich auch tun können, ist das umzudrehen. Also benutze in diesem Bereich und benutze einfach diese Leiste. Drehen Sie es um und positionieren Sie es einfach neu und hier oben in Photoshop. Und dann wirst du unten viel mehr Platz haben. Was Sie auch tun können, ist den gleichen Ansatz zu verwenden. Verwenden Sie also diesen Balken, drehen Sie ihn um, grenzen Sie ihn ein wenig ein und positionieren Sie ihn einfach genau hier oben. In diesem Fall haben Sie also den ganzen Platz unten leer. Das sind nur einige der Beispiele, die ich Ihnen zeigen wollte. Diese sind kostenlos. Du wirst sie bekommen. Sie können sie einfach herunterladen und in Ihrem Projekt verwenden, oder? Nun, wenn ich hierher zurückkehre, ist dies die von meiner Website, web donut.net. Und ich werde auch einige Premium-Ressourcen mit noch viel mehr dieser Geräte bereitstellen mit noch viel mehr dieser Geräte mit einigen Richtlinien, z. B. und ähnlichem im PDF. kannst du dir holen , wenn du willst. Und Sie fragen sich vielleicht, es ist toll, dieses weiße Blatt Papier zu verwenden, aber was ist mit diesem schicken schwarzen Punktpapier? Nun, das ist ein bisschen schwierig , weil Sie sicherstellen müssen all diese Mockups anhand dieses Rasters ausgerichtet werden. Stellen Sie also einfach sicher, wo auch immer Sie Ihr Punktgitterpapier kaufen, fragen Sie sie nach den Abmessungen oder noch besser, Sie können einfach ein Lineal verwenden und dann können Sie die Abmessungen messen zwischen den Rändern Ihres Papiers. Also nur die Außenkanten Ihres Papiers. Also z. B. diese Kante, diese Kante, diese Kante, weil die Mitte nicht wirklich wichtig ist. Warum wir das tun. Nun, wenn Sie diese erstellen und vor dem Drucken auf das Blatt Papier legen , können Sie einfach sicherstellen, dass Sie sie richtig ausmessen können Sie einfach sicherstellen, dass Sie , alles passt wie es sollte. Wenn Sie sie dann ausdrucken, wird es aufgereiht und kohärent aussehen. Alles wird mit deinem Punktraster übereinstimmen. Wenn du dann anfängst, alles zu zeichnen, werde ich viel mehr Sinn machen denn wenn du sie so ausdruckst, dann werden all diese Rahmen nicht an deinem Punktraster ausgerichtet sein was dann den Zweck des Punktrasters von vornherein zunichte macht. Achten Sie also nur darauf, auf solche Details zu achten. Auch hier ist die Verwendung von Vorlagen wie diesen eine großartige Möglichkeit, Ihren Kunden oder Ihren Teamkollegen zu präsentieren , nur um ihnen zu zeigen, wie das fertige Produkt aussehen könnte. Also schau sie dir einfach an. Ich gebe Ihnen erneut kostenlose und erstklassige Ressourcen damit Sie entscheiden können, was Sie verwenden möchten. 60. Wireframes teilen: Wie ich in diesem Kurs und diesen Wireframes auf Papier gesagt habe , sind hauptsächlich für Sie und Ihre Ideen gedacht, nur um die möglichen Layouts herauszufinden , die Sie in Ihrem Design verwenden werden , sobald Sie Software. Aber wenn Sie als Teil eines Teams mit einem anderen Designer zusammenarbeiten Teil eines Teams mit einem anderen Designer oder wenn Sie Ihren Prozess einfach mit dem Kunden teilen möchten . Und der Kunde möchte sehen, wo Sie sich zu diesem bestimmten Zeitpunkt bei diesem Projekt befinden , dann können Sie diese Papier-Wireframes tatsächlich mit Ihrem Kunden teilen . Aber wie kann man das eigentlich machen? Wenn der Kunde oder Ihre Designteamkollegen vor Ort sind, können Sie einfach ein Blatt Papier nehmen und sie einfach ins Büro bringen und ihnen diesen Weg zeigen. Wenn Sie sich erinnern, als ich Ihnen im vorherigen Video mögliche Stile für das Wireframe gezeigt habe, haben Sie gesehen, dass einige Designer diese Wireframes tatsächlich aus dem Blatt Papier schneiden diese Wireframes tatsächlich aus dem Blatt und ihnen dann präsentieren Weg. kannst du auch tun. Aber der einfachste Weg, den ich im Laufe der Jahre gefunden habe, besonders bei Kunden, die einfach nur sehen wollten, waren einfach neugierig, weil die Mehrheit der kleineren Kunden nicht wirklich versteht Ihren Prozess nicht wirklich versteht und sie wissen nicht wirklich, was Papier-Wireframes sind, und sie wollen nur sehen, wofür sie bezahlen. In diesen Fällen können Sie also einfach Ihr Telefon verwenden, ein Blatt Papier ablegen, gute Beleuchtung sorgen und dann einfach ein Bild von Ihrem Telefon aufnehmen. Sie müssen nicht alle Papier-Wireframes teilen , denn wenn Sie z. B. 20 verschiedene Seiten auf einer Website haben, haben Sie 20 verschiedene Blätter Papier. Sie können also einfach ein oder zwei teilen, nur damit sie sehen und verstehen, was Sie tatsächlich tun und wofür sie Sie bezahlen, wenn der Kunde den gesamten Prozess sehen möchte und alles Papier-Wireframes, das können Sie auch. Oder wenn Sie einen Scanner haben, was der einfachste Weg ist, den ich im Laufe der Jahre gefunden habe, können Sie einfach all diese Papiere scannen. Sie können sie z. B. in einer Zip-Datei ablegen und diese Zip-Datei dann einfach per E-Mail an Ihren Kunden oder an Ihre Entwickler, Teamkollegen usw. senden an Ihren Kunden oder an . Also noch einmal, nicht jeder wird das von Ihnen verlangen. Aber wenn sie das tun, dann haben Sie all diese Optionen, um Papier-Wireframes mit ihnen zu teilen , da sie jedes Recht haben , zu verstehen, woran Sie an diesem Projekt arbeiten und wo Sie sich gerade befinden. 61. ABSCHNITT 7 AUFGABE: Ihre Aufgabe für diese Sitzung ist es, jede Art von Papier-Wireframe zu erstellen, die Sie möchten. Es kann eine Website sein, wie wir es in diesem Kurs tun. Es kann eine mobile App sein, es kann an ein Board angeschlossen werden, es kann sein, was auch immer Sie wollen. Übe einfach mit einigen dieser Boxen. Sie können verschiedene Stile verwenden , die in dieser Klasse gezeigt werden. Du kannst machen, was du willst. Hier geht es nur ums Üben. Sie sich keine Gedanken über die Verwendung von ausgefallenen Papieren. Sie sich keine Gedanken darüber, schicke Stifte oder Stifte zu verwenden. Verwenden Sie einfach jedes Blatt Papier, das Sie möchten. Sie können sogar eine Serviette und etwas Stift verwenden. Stellen Sie also sicher, dass Sie üben, probieren Sie es aus und versuchen Sie zu verstehen, warum es Ihren Designprozess erheblich beschleunigt, sobald Sie den Dreh raus haben. 62. ABSCHNITT 8 Layout und Raster: Das Erstellen gemeinsamer Layouts im UI-Design ist äußerst wichtig, da sich diese Layouts bereits bewährt haben, oder? Sie haben bereits bewiesen, dass sie tatsächlich arbeiten. Versuchen Sie also nicht einfach, heißes Wasser zu erfinden , denn zum Spaß sollten Sie immer versuchen, diese bewährten Methoden zu verwenden diese bewährten Methoden Diese bewährten Layouts und Raster sind nur dazu da , unsere Inhalte ein wenig zu organisieren etwas besser über verschiedene Breakpoints oder Bildschirmgrößen hinweg. Also lass uns anfangen. 63. Was ist ein Layout: Das Layout im UI-Design kann einfach als die Organisation von Elementen bezeichnet werden, die auf einer Seite oder auf einem mobilen Bildschirm enthalten sind . Grundsätzlich kann alles, was in Ihrem Design enthalten ist und wie es strukturiert und organisiert es strukturiert und organisiert ist, als Layout kategorisiert werden. Es gibt viele verschiedene Layouts da draußen. Es gibt also mobiles Layout, Es gibt Desktop-Layout, Tablet-Layout. Es gibt auch Landschaftslayouts, Portrait-Layouts und vieles mehr. Aber im Grunde ist das Wichtigste, was Sie hier wissen müssen , wenn jemand das Layout erwähnt, im Grunde genommen über die Gesamtstruktur all Ihrer Elemente spricht , die zu einer Seite führen oder ein einzelner Bildschirm. Wie Sie Ihr Layout erstellen, hängt von Ihrem Projekt ab. Wie komplex ist Ihr Projekt, wie groß ist Ihr Projekt. Verwenden Sie ein Grid? Verwenden Sie Hilfslinien, verwenden Sie einige Komponentenzustände, einige Elemente. All diese Dinge können also von Ihrem Layout und dem Endergebnis Ihres Layouts abhängen . In diesem Kurs konzentrieren wir uns darauf, wie Sie Ihr Layout erstellen, wie Sie Raster verwenden, wie Sie Ihre Inhalte innerhalb Ihrer Raster und innerhalb Ihres Layouts strukturieren Ihre Inhalte innerhalb Ihrer . Das ist es also, worüber wir in diesem Kurs sprechen werden. kannst du aber jederzeit online stöbern Nach diesem Kurs kannst du aber jederzeit online stöbern und dir verschiedene Layouts ansehen. Und verstehe einfach, was andere Leute in anderen Themen, in anderen Klassen, in anderen Projekten verwenden . Und du wirst es nach diesem Kurs viel besser verstehen . 64. Was ist ein Gittersystem und warum es wichtig ist: Rastersysteme werden im Design verwendet , um Ihre Inhalte viel besser zu organisieren. Denn wenn Sie keine Rastersysteme verwenden, wissen Sie nicht, wo bestimmte Elemente links oder rechts oder oben und unten ausgerichtet sein sollen . Rastersysteme sind also im Grunde darauf ausgelegt , Ihre Inhalte zu organisieren, Ihre Inhalte kohärent aussehen zu lassen und dafür zu sorgen, dass Ihre Ansicht viel besser wahrgenommen wird, weil sie um diesen organisierten Inhalt zu sehen und nicht diese verstreuten Elemente, die nicht aufeinander abgestimmt sind. Grid-Systeme werden auch für Entwickler verwendet , da Entwickler viel einfacher und viel einfacher programmieren können als ohne Grid-Systeme, da sie den Inhalt in Container und dann legen Sie die feste Breite dieser Container fest. Oder sie können variabel sein, wenn sie so etwas wie ein flexibles Inhaltslayout verwenden . Daher können diese Inhalte viel einfacher skaliert werden , wenn sie responsives Design erstellen Sie als Designer können diese Inhalte viel besser für responsives Design entwerfen, können diese Inhalte viel besser für weil Sie unter Verwendung dieser Netzsysteme. Das bekannteste Grid-System auf dem Markt ist Bootstrap. Es gibt auch viele andere da draußen. Und in dieser Klasse werden wir Bootstrap erwähnen, und wir werden auch ein sogenanntes Acht-Pixel-Grid-System erwähnen , weil dieses Rastersystem meiner Meinung nach wirklich das am besten skalierbare ist meiner Meinung nach wirklich das am besten skalierbare ist da alle Elemente durch acht teilbar sind. Grid-Systeme sind großartig, weil sie, wie gesagt, Ihre Inhalte dort auf einer Linie halten und Ihre Inhalte organisieren. Und sie sind für Entwickler sehr einfach zu programmieren. Denn gerade bei diesen bekannten Grid-Systemen wie Bootstrap verfügen sie z.B. bereits über diese Komponenten. Es wird also ihre Entwicklungszeit viel kürzer halten , da sie all diese Komponenten bereits vorgefertigt haben . müssen sie nur in ihren eigenen Code eingeben. In der nächsten Lektion zeige ich Ihnen, wie Sie Raster in Adobe XD einrichten. Es ist super einfach, also sehen wir uns dort. 65. Wie man Raster in Adobe Xd einrichtet: In dieser Lektion zeige ich Ihnen, wie Sie Raster in Adobe XD einrichten. Lassen Sie uns also sofort zu Adobe XD wechseln. Und hier in Adobe XD können Sie sehen, dass ich diese Grafikkarten von 1920 mal 1080 erstellt habe, und ich werde Ihnen das schnell in Adobe XD zeigen, aber Sie können es auch in Sketch einrichten . Du kannst das in Figma einrichten. Und Figma ist meiner Meinung nach eines der besten Tools auf dem Markt, weil es standardmäßig die meisten Funktionen enthält. XD ist großartig. Und aufgrund der Community werden sie irgendwann all diese Optionen enthalten, die Figma bereits hat, da diese Tools ständig konkurrieren. Und es ist großartig für uns als Designer, weil wir im Grunde davon profitieren, Grunde davon profitieren, diese Tools miteinander konkurrieren, weil wir immer die neuesten Tools und die neuesten erwarten können Funktionen in den neuen Updates. Weil ich Adobe XD liebe, verwende ich es seit Jahren, ich verwende es jeden Tag bei meiner Arbeit. Dieser Kurs ist Adobe XD gewidmet. Aber wenn Sie ein Figma - oder Sketch-Benutzer sind, können Sie dies auch in diesen Tools tun. Oder wenn Sie nicht wissen, wie Sie einfach online nach Kursen suchen oder nach YouTube-Videos suchen können. Wenn Sie also, wie gesagt, zu Adobe XD zurückkehren, haben wir hier die Flughäfen von 1920 mal 1080. Es ist nur ein regulärer Flughafen. Sie können dies von hier aus einrichten. Sie können auf Artboard klicken und es dann einrichten oder auf dem Startbildschirm. Um unsere Raster einzurichten, müssen Sie nur noch diese Zeichenfläche auswählen. Geh genau hier hin, wo Grid steht. Und Sie haben zwei Möglichkeiten. Sie haben Grundriss und Quadrat. Wie gesagt, figma hat mehr Optionen als Adobe XD. Und ich hoffe wirklich, dass das Adobe XD-Team bald all diese anderen Optionen in Adobe XD aufnehmen wird. Aber im Moment haben wir, wie gesagt, das Layout und wir haben das Raster. Zurück zu Adobe XD, wie Sie sehen können, haben wir das Layout und das Quadrat, und ich werde das Layout auswählen, um es Ihnen zu zeigen. Und Sie können direkt hier klicken, um Ihr Layout anzuzeigen. Was wir hier haben, unsere Spalten, wir haben Dachrinnenbreite, Spaltenbreite und wir haben Ränder, die genau hier verlinkt sind. Sie können dies als Standard verwenden. Sie können dies als Standard festlegen, oder Sie können all diese Werte ändern und diese Vorlage dann als Standard festlegen. Das ist jetzt großartig. Wenn Sie mit etwas wie Bootstrap arbeiten, können Sie hier ein Bootstrap-Grid erstellen und es als Standard festlegen. Und wenn Sie dann zurückkommen und immer mit Bootstrap arbeiten, müssen Sie Ihre Zeit nicht damit verschwenden diese ständig zu erstellen. Sie können einfach auf Als Standard festlegen klicken, es öffnen und es wird als Standard angezeigt. Wenn wir also zu hier zurückkehren, was Sie hier sehen können, sind die Spalten, das sind diese blauen Bits hier, wir haben die Dachrinnenbreite, das ist der Abstand zwischen Ihren Spalten. Wir haben die Spaltenbreite, die die Breite dieser blauen Bits ist , die die Spalten sind. Und schließlich haben wir Ränder links und rechts. Und Sie können auch direkt hier klicken, um obere Ränder und untere Ränder einzurichten. Wir haben linke Ränder und rechte Ränder. Wenn Sie hier klicken , werden die Ränder einfach links und rechts verknüpft die Ränder einfach links und rechts und was auch immer Sie hier eingestellt haben, es passt hinein. Wenn ich also z. B. meine Spalten breit machen möchte, z. B. ich weiß nicht, 65, drücken Sie Enter oder Return. Du kannst sehen, was es macht. Also wurde die Dachrinnenbreite vergrößert. Es hat meine Spaltenbreite genau hier gespeichert. Und es hat mir diese verknüpften Ränder einfach so gezeigt. Ich mag den Abstand dieser Dachrinnen nicht allzu sehr. Ich werde sie ändern, z. B. hier klicken. Und dann einfach in etwas kleineres geändert, ich weiß nicht, 40 z. B. und wenn ich die Eingabetaste oder die Eingabetaste drücke, wie Sie sehen können, werden diese Werte geändert. Was Sie hier also tun müssen, ist, mit diesen Werten in Adobe XD herumzuspielen , um die gewünschten Werte zu erhalten. Und normalerweise können Sie, wenn Sie die Werte einrichten , mit denen Sie zufrieden sind , fortfahren und sie als Standard festlegen. Oder jedes Mal, wenn Sie zu Adobe XD zurückkehren, wenn Sie Ihre erste Zeichenfläche erstellen und mit dem Entwerfen beginnen. Erstellen Sie diese dann, wenn Sie diesen Flughafen tatsächlich auf einen anderen Flughafen kopieren , werden dupliziert. Wenn ich also gleich hier zurückgehe und Ihnen das auch zeige, haben wir genau hier diese erste Kunsttafel und sagen wir zum Beispiel , dass dies unsere Werte sind. Vielleicht möchte ich das vielleicht auf 60 ändern, oder das auf 40 ändern, das auf 100 und das auf 2,0, 80. Und Sie können sehen, wie sich dieses Layout ändert. Nehmen wir an, das ist mein Standardausgang. Alles was ich tun muss, ist Strg oder Befehl D zu drücken , um diese Zeichenfläche zu duplizieren. Und wie Sie sehen können, wird es diese Werte für Sie speichern. Eine weitere Sache, die ich Ihnen zeigen wollte, ist, ob ich Control Zero drücke , um an der ausgewählten Stelle noch einmal einzurasten. Klicken Sie hier. Hier können Sie die Farbe dieser Spalten ändern. Wenn Ihnen diese blaugrüne Standardfarbe , die Adobe XD bietet, nicht gefällt diese blaugrüne Standardfarbe , die Adobe XD bietet, können Sie sie einfach nach Belieben ändern. Und schließlich können Sie die Opazität genau hier verringern. Es ist also nicht allzu störend , wenn Sie anfangen zu arbeiten. Also im Grunde war's das für Adobe XD. Wie Sie sehen, ist es extrem einfach. Sie können alle Arten von Berichten erstellen, Sie können Desktop-Bereiche wie diese erstellen, Sie können Tablet-Flughäfen und Telefon-Kunsttafeln erstellen. Sie können sie horizontal und vertikal drehen. Und dann können Sie diese Raster für Ihre Designs erstellen. In der nächsten Lektion werden wir über Bootstrap sprechen, und wir sehen uns dort. 66. Arbeiten mit Bootstrap: Die überwiegende Mehrheit der Entwickler und Designer arbeitet gerne mit Bootstrap, weil es eine bekannte Grundlage und seit Jahren bekannte Grid-Systeme ist. Und viele Websites da draußen wurden tatsächlich auf Bootstrap entworfen und erstellt, wobei etwas verwendet wird, mit dem Sie vertraut sind und mit dem die meisten Menschen vertraut sind. Es ist großartig, weil das Design und Der Entwicklungsprozess kann viel schneller ablaufen. Wenn ich Sie also direkt hierher bringe, ist dies eigentlich die Adobe XD-Website. Und Sie können direkt hier zu den Funktionen gehen. Und Sie können zu den UI-Kits wechseln , da dies die Komponenten sind, die Sie tatsächlich von der offiziellen Website von Adobe herunterladen können. Was wir hier also haben, wie Sie sehen können, ist Apple-Design. Wir haben Google Material Design, und Sie können diese UI-Kits verwenden. Sie können sie herunterladen und in Ihren eigenen Projekten verwenden . Was uns jedoch für diese spezielle Lektion interessiert , ist Bootstrap. Wenn du also ganz nach unten scrollst, kannst du hier einen Bootstrap sehen. Also Bill schnell reagierende Websites mit vorgefertigten Assets und Komponenten mit Bootstrap Five. Jetzt hat Bootstrap seine eigenen Versionen, sodass Sie Ihre Website auf Bootstrap entwerfen können Drei Jahre Bootstrap dafür sind die Bootstrap Five zum Zeitpunkt der Erstellung dieser Klasse. Also, wenn du dir diesen Kurs in der Zukunft anschaust und direkt hierher kommst und sagst Bootstrap six oder sieben oder zehn oder was auch immer, dann weißt du einfach, dass dies die Version des Bootstrap ist, aber wisse einfach das die mündliche Struktur, das Gesamtdesign ist im Grunde dasselbe. Sie enthalten einfach immer mehr Komponenten, immer mehr Code in jeder einzelnen Version. Und was uns in dieser Klasse interessiert , ist nur ein Design, nur die Komponenten, nur die Komponentennamen , die Ihnen in nur einer Sekunde angezeigt werden. Wenn wir also zu hier zurückkehren, können Sie einfach auf Kit herunterladen klicken. Wenn du es hast, lass mich das schließen. So sieht es aus, wenn Sie es in Adobe XD öffnen. Also was du hier hast, ich habe diese fehlenden Schriften und du kannst sie installieren, wenn du willst. Wenn du hier ein Recht hast, wird es dir zeigen, dass dir einige Schriften fehlen. Was wir hier haben, sind diese Farben. Wir haben Charakterstile, weil sie Helvetica verwenden. Ich habe es nicht auf meinem Windows. Deshalb werden sie als vermisst angezeigt, aber ich kann sie einfach ersetzen, wenn ich möchte. Als nächstes haben wir diese Komponenten. Wir haben diese Icons und all diese Elemente. Also Toggle Switches, Fremdschalter und so weiter Spinner. All dies sind also Komponenten von Bootstrap. Lassen Sie mich hier zu meinem Ebenen-Panel wechseln. Und wenn ich hier ganz hineinzoome, können Sie einfach hier klicken, zur Vorschau gehen, wenn Sie möchten, und dann können Sie z. B. auf das Rastersystem klicken, es wird zum Rastersystem weitergeleitet wenn das etwas ist , das du willst. Aber ich möchte einfach hier stöbern. Fangen wir also mit dem Layout an. Nun, das Layout ist extrem wichtig, da das Layout Ihnen hilft zu verstehen wie der Bootstrap vorgestellt wird , und Sie können all diese anderen Dinge wie Bootstrap online leicht verstehen . Zum Beispiel hat Foundation eine und viele andere da draußen. Aber im Grunde haben sie alle eine ähnliche Philosophie, wie sie erstellt, wie sie verwendet werden und wie sie aktualisiert werden, um mit den neuesten Funktionen des Internets Schritt zu halten. Wenn wir also hierher zurückkehren, können Sie sehen, dass wir ein Gittersystem haben. Nun, was das ist, wenn ich etwas näher hineinzoome, wie Sie sehen können, haben wir die Spalte und wir haben all diese Abstandshalter auf jeder Seite. Wir haben also die rechte Markierung und die linke Markierung. So nennen sie sie. Und das werden wir in nur einer Sekunde erklären. Aber was wir darunter haben , unsere Netzgrößen. Rastergrößen, falls Sie sich daran erinnern, wenn Sie Ihre Zeichenflächen auswählen und direkt hier klicken können, um dieses Raster zu erstellen. Nun, das sind die Rastergrößen. Wir haben also die extra großen, und diese sind ab 1.200 Pixeln auf Wörtern. Wenn Sie also etwas erstellen, das größer als 1.200 Pixel ist, können Sie diese Größe verwenden und es wird offensichtlich Skalierung entsprechend Ihrer Größe Ihres Viewports kodieren. Viewport ist im Grunde der Desktop, z. B. oder das Handy, oder welcher Bildschirm auch immer Ihr Benutzer auf Ihre Website oder Ihre App schaut Das ist Ihre Viewportgröße, in diesem Fall 1.200. Und das besagt im Grunde , dass das gesamte Raster 100,11, 40 Pixel breit sein wird. Also 1140 Pixel breit ist das Ganze. Und wenn ich es auswähle, kannst du gleich hier klicken und in deiner Breite sehen, wir haben diese Größe, also 1140. Wenn wir nun etwas tiefer graben und bevor wir das tun, haben Sie all diese anderen Größen und Sie können sehen, wie Ihre Spalten und Ihr Inhalt auf all diesen anderen Geräten skaliert werden. Aber wenn wir diese schnell auswählen, haben wir die Spalten. Wir haben 12 verschiedene Spalten. Wenn Sie sich an das vorherige Video in Adobe XD erinnern, wir tatsächlich diese 12 Spalten erstellt und alle diese Spalten haben Dachrinnen und Abstandshalter, aber sie unterscheiden sich ein bisschen, weil sie Bootstrap und ich werde es in nur einer Sekunde zeigen. Also, wir haben die Dachrinnen genau hier. Wir haben also die linke Dachrinne und die rechte Dachrinne. Und das ist tatsächlich der entscheidende Unterschied zwischen Bootstrap und etwas anderem, das Sie selbst erstellen oder selbst etwas herausfinden könnten . Bootstrap hat das eigentlich komische Ding, dass sie diese Dachrinnen links und rechts anbringen . Also vor den Rändern links und rechts hat man diese Dachrinnen. Also wenn ich es zurück zu Adobe XD nehme. Du kannst sehen, was ich meine. Stellen Sie sich also vor, dass dies der linke Rand ist und dies der rechte Rand sein wird, genau hier. Also all diese leeren Räume auf der rechten Seite, und anstatt eine Spalte, die bis hierher führt, haben sie stattdessen die Dachrinne verlassen. Also ich weiß wirklich nicht, warum sie das tun. Ich habe es im Code gesehen. Was Sie im Grunde tun müssen, wenn Sie diese erstellen ist, dass Sie vorsichtig damit sein müssen, wie Sie sie erstellen. Im Grunde müssen Sie von diesen 101.140 Pixeln Breite für Ihre Spalten Pixeln Breite für Ihre Spalten diese linken und rechten Dachrinnen abziehen, sodass Sie Ihren Inhaltsbereich dort haben . Also, was ich tun werde, ist diesen zu benutzen, Strg C zu drücken, um ihn hier zu entfernen. Und ich werde auch reinspringen und mich in diesem öffnen. Benutze Strg C und springe dann nach draußen, kontrolliere V. Und wenn ich eine Kopie mache , Strg D, springe hinein und du wirst in nur einer Sekunde sehen, was ich mache. hier hin und geh bis hierher. Zoomen Sie hinein und richten Sie sie so aus. Und dann ändere einfach die Farbe etwas anderes, das du tatsächlich sehen kannst, z. B. diese blaue, was du in blauer Farbe sehen kannst, eigentlich der Inhaltsbereich. Dieser Inhaltsbereich ist also der Bereich, in den Ihr eigentliches Design gehen wird, in den all Ihre Elemente gehen werden. Und diese Paarungen links und rechts sind eigentlich diese Dachrinnen, in denen sie gelassen haben. Ich weiß nicht, warum sie das tun, aber im Grunde ist dieser blaue Teil, den ich gerade erstellt eigentlich dein Inhaltsbereich. Wenn wir nun zu XD zurückkehren, können Sie sehen, dass sie all dies in ihren Größen für das Raster haben . Und Sie können Ihren Inhaltsbereich für all diese Dinge einfach anpassen, ändern und erstellen. Also statt 1140 für die Breite wird Ihre tatsächliche Breite tatsächlich 1108 sein. Und dann müssen Sie diese Inhalte und Spalten darin erstellen . Ein wichtiges Feature von Adobe XD, das eigentlich ziemlich schlecht ist. Wenn Sie für Bootstrap erstellen, können Sie diese Dachrinnen nicht links und rechts anzeigen . Denn wenn ich das noch einmal für diese Zeichenfläche auswähle und nicht darauf achte , dass dieser Flughafen extrem riesig ist. Ich möchte nur den Punkt klarstellen. Wenn ich hier rechts klicke, können wir, wie Sie sehen, die Dachrinnen links und rechts nicht verwenden. Daher sind wir nur auf das beschränkt, was Adobe XD uns zu bieten hat. In diesem Fall müssen Sie also eigentlich Lassen Sie uns gleich hier weitermachen. Lass mich meine Kunsttafel erstellen und tun, was sie gesagt haben. Also 1.200 mit 1080 oder was auch immer. Die Höhe spielt also keine Rolle, da die Höhe tatsächlich mit Ihrem Design skaliert. Also, wenn wir hierher springen und ich das tatsächlich auswähle und lass uns tatsächlich die linke und rechte Dachrinne entfernen. Und lassen Sie uns diesen und diesen auswählen. Also Control C, ich springe hier rein, kontrolliere V, vergewissere dich, dass sie in der Mitte sind. Das ist also eigentlich unser Inhaltsbereich. Was Sie in diesem Fall tun können ist, dass Sie tatsächlich Hilfslinien zeichnen können. Wenn ich das also nach unten verschiebe, damit Sie sehen können, was ich mache, können wir tatsächlich Leitlinien zeichnen. Also zuerst Guides, also bewege den Mauszeiger einfach hier und positioniere es einfach dort. Wenn du dort eine Anleitung zeichnen willst, zeichne dort eine weitere. Und dann müssen Sie diese Anleitungen während Ihres gesamten Designs erstellen . Also so, so wie das. Und dann fange tatsächlich mit jeder einzelnen Spalte da draußen an. Was ich also empfehlen würde, ist, wo auch immer Ihre Dachrinne ist. Also genau da, zieh einfach das Gitter hier rein. Es gibt auch einige Plug-ins , die Sie installieren können und die Ihnen dabei helfen werden . Aber ich zeige dir nur die langsamere, langweiligere Version. Wenn Sie das alleine machen, möchten Sie nur so präzise wie möglich sein, aber Sie können natürlich ein Plug-In installieren, um dies viel schneller zu tun. Denken Sie jedoch daran, dass Sie das Plug-In überprüfen müssen und sehen was es tut und was es getan hat und ob es gute Arbeit geleistet hat. Wenn wir also zu hier zurückkehren, können Sie sehen, können Sie sehen wie breit Ihre Spalte in diesem Fall ist. Also dupliziere ich mein blaues Bit, drücke Strg-D und ich werde es tatsächlich auf hier einschränken, es nach oben bewegen und einfach sehen, was daraus wird. Was wir also haben, ist die Breite von 63. Das ist also die tatsächliche Breite unserer Spalte. Und was ich jetzt tun kann ist das Wiederholungsraster aus diesem zu erstellen. Was ich also tun möchte, ist zu wissen, wie umfangreich das ist. Und ich kann einfach die Ctrl-Taste gedrückt halten und sehen, dass meine linke Dachrinne 16 ist. Was Sie tun können, ist, dass Sie zwei Möglichkeiten haben. Sie können das Wiederholungsraster verwenden. Sie können diese erstellen und dann einfach Mauszeiger dazwischen bewegen, bis Sie 16 Jahre alt sind, wie folgt. Und dann einfach. Passen Sie das an. Wenn wir also schweben, sind wir bei 16, wie Sie sehen können. Alles was wir also tun müssen, ist im Grunde 12 davon zu erstellen. Also 24681012. Also muss ich es dort schneiden, wo es ist, genau hier. So wie es ist. Und natürlich habe ich hier einfach mit dieser Dachrinne gerechnet . Was Sie tun müssen, ist von hier aus zu beginnen. Und wie Sie sehen können, haben wir diese Dachrinne genau hier. Und wir haben diese Dachrinne genau hier, weil es 16 doppelt ist, bis 16 tatsächlich 32 ist. Was wir also tun werden, ist, genau hier in unser Wiederholungsraster zu springen und einzukerben, um es so zu machen. Und jetzt können Sie sehen, dass wir genau die gleiche Einstellung für einen Schreibtisch haben genau die gleiche Einstellung wie die Bootstrap-Schulden. Was wir als Nächstes tun müssen, ist, dass Sie diesen löschen können, wenn Sie möchten. Und ich kann tatsächlich weitermachen und diesen löschen, wenn ich möchte. Und was ich tun werde, ist das zu entfernen. Und ich werde sie tatsächlich behalten, oder ich kann dieses entfernen, wenn ich möchte, weil diese Menge in der Mitte ist. Was Sie also tun müssen, ist, dass Sie nicht von dieser Linie nach vorne oder auf der linken Seite entwerfen können , tut mir leid, denn das ist die Dachrinne , die sie mit der Polsterung auf der linken Seite hatten. Die gleiche Geschichte gibt es auch hier. Also im Grunde wird dein Inhalt hier sein. Was ich an dieser Stelle tun werde, wenn Sie diesen Ansatz noch einmal verfolgen möchten, ist, dass ich mit der rechten Maustaste die Gruppierung des Rasters aufheben werde. Und das kannst du z.B. eins für die erste Spalte nennen , das ist 23. Das können vier sein und lassen Sie uns das schnell in 567-89-1011 umbenennen. Und schließlich 12. Wenn Sie möchten, können Sie die Karte bestellen. Anstatt also 12 oben auf deinem Ebenenstapel zu stehen, kannst du sie nach unten verschieben. Nummer eins, bewege es ganz nach oben. Es liegt also an dir, wie du das ändern willst. Wenn wir zu diesem Zeitpunkt zurückkehren, können Sie sie in dieser Phase einfach anpassen, also bewegen Sie sie so nach unten. Und du kannst sie einer Gruppe zuordnen, nenne dieses Raster. Sie können es tatsächlich sperren, damit es sich nicht bewegt. Und was du auch tun kannst, ist hier reinzuspringen. Und Sie müssen all diese auswählen und einfach die Opazität reduzieren. Aber weil es gesperrt ist, reduziere jetzt einfach die Opazität auf sagen wir mal zehn Prozent, ungefähr so. Und dann kannst du es bis hierher verschieben. Und jetzt, wenn du fertig bist, kannst du es einfach sperren und dann kannst du deine Inhalte hier reinschieben. Also, wie dein Inhalt aussehen wird, sagen wir, wir erstellen, verwerfen Sie z. B. zwei gleich hier. Dann kannst du es einfach so anstupsen , bis du damit zufrieden bist. Und lassen Sie uns die Ecken abrunden, z. B. legen wir es hier hin. Vielleicht ist es so etwas wie ein Bild. Dann Control D, wenn Sie z. B. eine Schaltfläche im gleichen Stil erstellen möchten . Nehmen wir an, es wird vier Spalten breit sein und ungefähr so. Verschieben wir es auf eine Höhe von 17 oder so. Und lassen Sie uns das auf zehn reduzieren, weil 20 zu viel sind. Sie können sich also vorstellen, wie das funktionieren wird. Du kannst sehen, wenn du diese Elemente nach links und rechts bewegst, wie das funktioniert, wie du damit herumspielen kannst, also Was Sie also genau hier tun müssen, ist innerhalb des Bootstrap, sie haben 12 Spalten, acht Spalten, sechs Spalten, vier Spalten und zwei Spalten. Und natürlich eine Spalte , die die Grundlage von allem ist. Wenn wir also zu diesem Punkt zurückkehren, können Sie Ihr Design tatsächlich gemäß Bootstrap und diesen Spalten skalieren . Also werde ich das in nur einer Sekunde teilen. Sie haben das genau hier erstellt. Sie können also sehen, dass dies eine Spalte oder eine kleinere Spalte ist, wie auch immer Sie sie anpassen möchten. Und wenn ich diesen lösche, kannst du hier deutlich sehen, was sie getan haben. So können Sie gerade Spalten erstellen, vier Spalten mit Standardrinnen, drei Spalten, zwei Spalten, eine Spalte. Wie auch immer Sie möchten, Sie können sie sogar erstellen. Das bedeutet, dass Sie eine große Spalte und eine kleine Spalte erstellen können , um im Grunde genommen den Raum von 1140 auszufüllen. Und du kannst mit deinem Layout herumspielen wie Schulden, aber das werde ich dir hier zeigen. In diesem Beispiel haben wir weiße Elemente mit zwölf Spalten. Dann, wenn ich es dupliziere und vier Spalten wie diese entferne. Also hier haben wir die acht Spalten breiten Elemente und rasten sie genau hier ein. Wenn ich es dupliziere, verschiebe es hierher. Entferne zwei. Jetzt haben wir hier sechs Positionen, jetzt haben wir vier. Und du hast die Idee, du kannst zu 2.21 gehen. Und im Grunde funktioniert Ihr Layout in Bootstrap mit Adobe XD so. Wie Sie sehen können, ist es wirklich ganz einfach, wenn Sie den Dreh raus haben. Aber Sie müssen dieses Raster selbst erstellen , da wir, wie gesagt, keine Option für die Polsterung links und rechts haben . Und du kannst diese Anleitungen einfach links rechts lassen, damit du weißt, wohin deine Inhalte gehen können. Und das spielt natürlich keine Rolle wenn Sie diese großen Bilder verwenden. Lassen Sie mich Ihnen das in nur einer Sekunde schnell zeigen. Stellen wir uns also vor, wir verwenden ein riesiges Bild , das wachsen wird. Sehen wir uns die Breite von 246 Spalten an. Und nehmen wir an, ich möchte dieses Bild auf der linken Seite positionieren , sodass es bis zum Rand meiner Zeichenfläche reicht. kannst du tatsächlich tun. Die Position ist genau hier. Und Entwickler im Code, lassen Sie uns tatsächlich oben links entfernen, das ist dieser, gehen Sie auf Null. Und wir müssen diesen entfernen, der unten links ist. Also finde es einfach hier, das ist eins zu Null. Diese beiden sind also bei Null und diese beiden sind zeltartig. Du kannst das also tatsächlich tun. Und Entwickler werden die Breite dieses Bildes tatsächlich im Code erweitern. Aber wie Sie sehen können, nimmt es immer noch sechs Spalten ein. Ihr Inhalt wird nur mit dem Rand skaliert, den Sie hier auf der linken Seite haben. Das ist der Bootstrap. Kurz gesagt, wie Sie sehen, ist es wirklich ganz einfach, es zu erstellen, sobald Sie loslegen. Und ich habe dir nicht wirklich gezeigt, was in diesem UI-Kit enthalten ist . Also kann ich dir das in nur einer Sekunde zeigen. Wir haben also den Inhalt genau hier, wir haben die Topographie, wir haben diese Zahlen, wir haben diese Symbole, wir haben verschiedene Tabellen. Wir haben hier verschiedene Farben. Wir haben verschiedene Formen. Wir haben Eingabegruppen, verschiedene Komponenten, Komponenten, Staaten, Badges, Breadcrumbs, Schaltflächen. Wir haben Karten, Karussells brechen zusammen. Sie haben also all diese Elemente. Ich ermutige Sie wirklich, wenn Sie Bootstrap verwenden oder darüber nachdenken, Bootstrap zu verwenden, dann tauchen Sie einfach hier in diese Elemente ein, um sie ein bisschen genauer zu erkunden und zu verstehen Bootstrap ein bisschen besser, bevor du dein nächstes Projekt startest. Im nächsten Video werden wir über ein Pixelraster sprechen . Also werde ich dich dort sehen. 67. Arbeiten mit 8px-Rastersystem: Ein Rastersystem, das viele Designer verwenden ist das Acht-Punkt-Rastersystem oder das Acht-Pixel-Designsystem. Und ich werde Ihnen zeigen, wie das in Adobe XD geht. Wenn wir also gleich hier springen, können Sie sehen, dass ich mein Standarddokument erneut erstellt habe , also 1920 mal 1080 und wir können genau hier hingehen, wo Raster steht. Aber statt des Layouts gehen wir tatsächlich zu Quadraten über. Und Sie können die Quadratgröße genau hier festlegen. Und noch einmal, genau wie beim Layout, können Sie Standard verwenden, als Standard festlegen, und der Standardwert ist in diesem Fall acht. Das ist also im Grunde das, worum diesem Acht-Pixel-Design-Grid geht. Ihr gesamter Inhalt wird innerhalb dieser acht Pixelquadrate erstellt. Und im Grunde benutzen sie acht, weil acht durch vier durch 16 teilbar ist, durch 32 durch 64. Und Sie werden diese Größen später verwenden, wenn Sie dieses Acht-Punkt-Rastersystem und sein Pixelrastersystem verwenden , um Ihre Inhalte tatsächlich zu erstellen und Ihre Inhalte gleichmäßig zu verteilen. Lassen Sie mich Ihnen zeigen, was das bedeutet. Wenn wir gleich hier zu XD zurückkehren. Also nochmal, wenn ich ganz schön hineinzoome und nah dran bin, wähle mein Rechteckwerkzeug und erstelle ein Rechteck wie dieses. Sie können sehen, dass es acht mal acht ist, also acht Pixel mal acht Pixel. Daher ist dies das Acht-Pixel-Rastersystem. Und nehmen wir an, ich möchte so etwas entwerfen und den Rand entfernen. Lassen Sie uns die graue Farbe hier einbeziehen. Und im Grunde 12345678. Das ist eigentlich die Breite. Acht Boxen, acht Quadrate entsprechen also 64, weil jedes davon acht Pixel breit ist. Das ist also genau das, was Sie beachten müssen, was auch immer Sie mit diesem Acht-Pixel-Designsystem und Rastersystem erstellen , Sie werden im Grunde alle Ihre Elemente von acht. Lass uns reingehen und das noch einmal ausprobieren. Wenn wir also z.B. den Text nehmen und ich gleich hier eintippe, also nennen wir ihn, das ist ein Titel. Und lass es uns genau dort schließen. Was Sie tun müssen, ist es tatsächlich auf etwas wie, ich weiß nicht, 16 einzustellen. Denn wieder einmal erstellen wir mit einem Acht-Pixel-Designsystem. Und ich werde es in diese Position bringen. Machen Sie sich darüber keine Sorgen, Sie können jederzeit zu hier zurückkehren und sehen, dass der Zeilenabstand da ist. Und Sie können sicherstellen, dass Sie all diese Dinge ändern, wenn Sie möchten. Wenn wir es also auf 16 setzen, wird es tatsächlich so eingerichtet. Aber wenn ich es auf 32 setze, wird es zB verschoben. Also, wenn du anfängst, diese zu erstellen, und lass uns zu 16 zurückkehren, einfach so. Ich wollte es nur zeigen, also ist das ein Titel. Sobald Sie die Eingabetaste gedrückt haben, gelangen Sie zu einer neuen Zeile und einem Untertitel. Und wenn ich es schließe, kannst du sehen, was es macht. Es lässt also immer diesen Abstand nur ein bisschen übrig, aber du kannst diesen immer mit einbeziehen und einfach schubsen. Etwa bis 20, glaube ich. Etwas wie 19 vielleicht. Es ist wirklich schwierig, den Text auf diese Weise zu beurteilen , da dies nur Adobe XD ist ein Problem, weil sie diese ungleichmäßigen Abstände enthalten. Ohne diese Boxen kommst du also nie an deinem Text vorbei. Es ist einfach taubenweiß. Stellen wir uns also einfach vor, das ist unser Titel, das ist unser Text, z. B. Control D. Und ich möchte das auf acht verschieben, du kannst sehen, oder z. B. 16. Auf diese Weise werden wir unser horizontales Schreiben weiter wachsen lassen. Nehmen wir an, ich möchte das verdoppeln. Sie können also jederzeit wieder hierher zurückkehren, um die Eingabetaste zu drücken. Und es wird tatsächlich den Taschenrechner für dieses Beispiel verwenden . Wir haben also 64, ich gebe hier 64 mal zwei ein. Es werden also 128 sein. Du kannst diesen Rechner immer benutzen oder du kannst ihn, wie gesagt, gleich hier machen, aber aus irgendeinem Grund funktioniert er nicht. Ja. Es arbeitet mit den Abteilungen zusammen. Lass es uns so machen. Also zB 32. Und aus irgendeinem Grund funktioniert es nicht so. Also lassen Sie uns es auf 64 erweitern. Verschieben Sie es hierher auf 64, und dann egal 128, Sie erhalten das Bild. Auf diese Weise erhalten Sie im Grunde den horizontalen und vertikalen Rhythmus mithilfe der acht Pixelraster. Und im Grunde werden alle Ihre Inhalte eine schuldenstrategische Positionierung haben. Und in den nächsten Videos, die ich in diesem Kurs erstellen werde, werde ich Ihnen zeigen, dass wir bei echtem Design über horizontalen, vertikalen Rhythmus sprechen werden. Und ich werde diese vorgefertigten Komponenten verwenden , die ich aus einer meiner vorherigen Klassen erstellt habe, nur um Ihnen zu zeigen, wie Ihr Layout und Ihr vertikaler Rhythmus in XD aussehen wird. Also werde ich dich dort sehen. 68. Horizontaler Rhythmus in Adobe Xd: In diesem Video werden wir über den horizontalen Rhythmus in Adobe XD sprechen horizontalen Rhythmus in Adobe XD Dazu verwenden wir die erstaunliche Funktion Stack. Ich habe also ein Projekt geöffnet, und dieses Projekt stammt tatsächlich aus einer meiner Klassen namens Adobe XD Masterclass. Wenn Sie interessiert sind, können Sie es finden und ansehen. Es ist über 20 h lang. Und alles, was Sie hier in diesem Dokument sehen , haben wir tatsächlich in dieser Klasse erstellt. Wenn Sie also interessiert sind, schauen Sie einfach vorbei und erkunden Sie vielleicht, wie Sie all diese Elemente erstellen können. In diesem Kurs konzentrieren wir uns jedoch nur auf den horizontalen Rhythmus in Adobe XD mithilfe von Stacks. Wenn ich eine dieser Zeichenflächen auswähle, nehmen wir diese, z. B. drücken Sie Strg D. Und ich werde ein Duplikat davon erstellen und es zur Seite verschieben. Es lenkt also nicht irgendwo hier ab. Und ich möchte dir nur die Macht von Stacks zeigen. Stapel befinden sich genau hier auf der rechten Seite. Und im Grunde ist es einfach , stellen Sie sich vor, dass Sie viele Ihrer Komponenten positionieren, von denen Sie bereits viele Ihrer Elemente in einer Gruppe haben . Und dann erstellen Sie diese Stapel, die eigentlich Räume oder Dachrinnen sind, wenn Sie so wollen, für Ihr Design. Stapel eignen sich hervorragend, weil Sie sie horizontal oder vertikal erstellen können . in diesem Fall untersuchen, Lassen Sie uns in diesem Fall untersuchen, wie das funktioniert. Also wie gesagt, wir haben die Stapel und wenn ich gleich hier springe, habe ich schon einen Stapel dabei. Es ist ein horizontaler Stapel von zwei O2, also im Grunde 202 Pixel, aber ich kann noch mehr hineinspringen und dann die Änderungen auf diese Weise vornehmen. Weil ich dieses Layout genau hier habe. Ich habe 12 Spalten. Dachrinnenbreite beträgt 60, Spaltenbreite 82 und die Ränder sind verknüpft a, links und rechts, R1, 38. Das sind also das Raster und das Rastersystem , die verwendet werden, um dieses Design und diese gesamte Klasse, die Sie sich hier ansehen, zu erstellen . Also offensichtlich haben wir hier zwei O2, weil das zur Breite der oralen Spalte passt. Wenn ich gleich hier springe, können Sie diesen Text in eine Gruppe einfügen, diesen Text in eine Gruppe, und dieser Button befindet sich in einer Gruppe selbst. Und dann können Sie einen Stapel dafür erstellen. Wenn ich also meine Stapel auswähle, kannst du sehen, dass es es weiß. Ich möchte einen vertikalen Stapel und du kannst sehen, dass es 40 sind. In diesem Fall sind also alle Abstände 40. Also 40 genau hier, 40 genau hier. Aber was passiert, wenn Sie dies ändern möchten , sodass Sie einfach klicken und ziehen können , um es auf 80 zu positionieren, z. B. so ist es 80 genau hier und es sind 40 genau hier. Sie können das tun, wenn Sie möchten oder wenn nicht, wenn Ihr Kunde Sie fragt, z. B. Hey, lassen Sie uns den Abstand hier ändern. Du kannst einfach Intrasite 60 springen, z.B. achte darauf, dass du das in die Mitte bewegst und los geht's. Also ich mag dieses Layout sehr und du kannst jederzeit zwischen deinen vertikalen und horizontalen Stapel wechseln zwischen deinen vertikalen und horizontalen Stapel wenn du das möchtest. Lassen Sie uns das in der Mitte positionieren und ich möchte zeigen, wie das funktioniert. Im Moment haben wir also diesen Stapel, der der horizontale Stapel von zwei O2 ist. Aber wenn ich hier klicke, wie Sie sehen, wird es auf den vertikalen Stapel umgestellt. Dieses Layout hat sich nicht geändert, weil wir nicht all diese Elemente in einen Stapel gelegt haben. Also, wenn ich dir zeige, dass wir das, das, das haben , und lass uns das alles mit einbeziehen. Also, wenn ich genau hier und genau hier drücke, bis hin zu unserem Text. Halte meine Shift-Taste gedrückt, wähle alles aus, drücke Strg-G, um sie alle in eine Gruppe zu bringen, füge sie dann in einen Stapel ein. Und dann schauen wir mal, also das sind 150 zwischen ihnen. Lassen Sie uns das also auf ein Fünftel setzen, wenn wir wollen. Es ist schon um 01:50 Uhr. Also positionieren wir es so. Und alle unsere Elemente werden jetzt um 01:50 Uhr positioniert. Nun, das war nicht enthalten, weil wir hier nicht 150 hatten. Wenn ich also zurückgehe und das auf Null reduziere oder noch einmal zurückgehe, wird es bei Null sein, weil wir 150 hier haben. Wir haben 150 hier. Und für all diese, aber wir haben keine 150 zwischen dieser und der Fußzeile. Dies ist also wieder einmal die großartige Möglichkeit, Stacks in Adobe XD zu verwenden , um Ihren Rhythmus zu erstellen. Wenn du mit deinem Rhythmus zu kämpfen hast, gilt grundsätzlich die Faustregel ihn zu verdoppeln oder zu verdreifachen, wie auch immer du ihn einbeziehen möchtest. Nehmen wir also im Grunde an, dass ich hier 40 verwende. Wenn ich die Zwischenräume verschieben möchte, sagen wir mein Bild und meinen Text unter meinem Bild. Dann verwende ich etwas wie 60, 80 oder einundzwanzig oder so etwas. Also multiplizieren Sie einfach Ihre Werte. Sie können es jederzeit verdoppeln oder Drillinge verwenden, wenn Sie sich nicht sicher sind, wie Sie sie verwenden sollen und einfach, wenn Sie etwas finden, das funktioniert , das gut aussieht, was unsere Kunden z.B. genehmigt oder was Sie einfach finden es sieht visuell ansprechend aus , als einfach dazu zu gehen und damit weiterzumachen. Aber fangen Sie an und stellen Sie sicher, dass Sie Kohärenzabstände haben. Stellen Sie sicher, dass Sie kohärente Werte haben. Das bedeutet also im Grunde, wenn Sie AT gewählt haben, dann bleiben Sie bei AT, Sie nicht , zu versuchen, sagen wir, hier 60 für Sie aufzunehmen , weil Ihr Layout Um es aufzuschlüsseln, werden Ihre Abstände nicht kohärent sein. Ihr Design wird nicht kohärent aussehen und daher wird es für Ihre Entwickler ein Albtraum sein , es später zu entwickeln , weil Sie ihnen einfach sagen können: Okay, Abstände zwischen z. H1 und mein Bild sind 40. Sie werden es wissen und das in den Code für all Ihre Designs aufnehmen . Stellen Sie also sicher, dass Sie konsistent sind, so konsistent wie möglich. Also, wenn Sie gerade erst anfangen, weil dieser Kurs wirklich für Anfänger gedacht ist. Wenn du gerade erst anfängst, achte bei der Erstellung deiner ersten Elemente darauf, ob du möchtest, wie sie aussehen, achte darauf, dass du in deinen Designs deine Größen verwendest . Denn wie gesagt, es wird für Sie viel einfacher sein, sich daran zu erinnern, was Sie zuvor für all diese Abstände verwendet haben. Und es wird für Ihre Entwickler viel einfacher sein , es zu entwickeln , weil sie Ihre Abstände viel leichter erkennen werden. Wenn wir zu XD zurückkehren, möchte ich Ihnen am Ende vier zeigen, dass Sie diese im Grunde in einem Stapel positionieren können. Also ich habe dir schon gesagt, wenn wir hier klicken, kannst du sehen, dass wir hier zwei O2 haben, was offensichtlich viel zu viel ist. Was Sie also tun können, ist hier zu klicken und dann genau hier zu klicken und zu ziehen, oder Sie können es manuell anpassen. Nehmen wir an, ich möchte es auf 18 setzen. Und so sehen die Daten aus. Also kann ich gleich hierher springen und das so ändern. Und das Tolle an den Stacks ist, dass Sie hier doppelklicken und sie organisieren können. Also wenn mir das nicht gefällt, kann ich es einfach umschalten. Also positioniert ist es oben, dieses unten. Und ich kann einfach zwischen diesen Elementen hin und her gehen , was Sie auch innerhalb der horizontalen Stapel tun können . Wir sind also bei Horizontal Stack, wenn ich das aus irgendeinem Grund hier platzieren möchte. Wie Sie sehen können, wird X d es leicht wechseln, aber es wird es nicht ausrichten. Ich muss es genau hier ausrichten , weil dieses Bild bis hier reicht . Wenn das Bild hingeht oder wo sich mein Raster befindet, wird es einfach an diesem Wert ausgerichtet. Sie können sehen, wie einfach es zu bedienen ist. Diese Stacks sind, wie toll sie sind, wie einfach sie mit deinem Rhythmus zu verwenden sind. Sie können das Wiederholungsraster in Adobe XD verwenden, aber ich habe es wirklich vorgezogen, Stapel zu verwenden, da Sie damit viel mehr Kontrolle über Ihr Layout Ihres Designs und über Ihre Abstände haben. Also im Grunde ist das alles für Adobe XD und ich benutze es sehr gerne. Ich ermutige dich wirklich, es zu benutzen. Und wenn Sie es nicht oder nicht ausprobiert haben, stellen Sie sicher, dass Sie dies tun, da sie die kostenlose Version haben und Sie diese kostenlose Version jederzeit verwenden können, Sie müssen nicht dafür bezahlen. Falls du dir nicht sicher bist. Wenn Sie etwas aufmerksamer erkunden möchten und Figma Sketch gelernt hat, z. B. ich empfehle Ihnen wirklich, Adobe XD auszuprobieren, probieren Sie es aus und probieren Sie all diese Werte aus. Und natürlich werde ich die Links zu allem hinterlassen, was ich in diesem Kurs erwähnt habe. In der PDF-Datei können Sie sie einfach öffnen, darauf klicken und Sie werden zu all diesen Dingen weitergeleitet, sodass Sie nicht selbst danach suchen müssen . 69. ABSCHNITT 8 AUFGABE: Ihre Aufgabe für diesen Abschnitt besteht nur darin , mit verschiedenen Rastern herumzuspielen. Stellen Sie sicher, dass Sie versuchen, beispielsweise ein Desktop-Raster, ein Tablet-Raster und ein Telefonraster zu erstellen beispielsweise ein Desktop-Raster, ein Tablet-Raster . Und der Versuch, eine unterschiedliche Anzahl von Spalten mit unterschiedlicher Dachrinnenbreite einzubeziehen , z. B. und der Spaltenbreite. Versuche einfach herumzuspielen und versuche, verschiedene Ergebnisse zu sehen , die du erzielen wirst. Spielen Sie auch mit der Farbe der tatsächlichen Spalten herum. Und nur um zu sehen, was für dich besser funktioniert. Vielleicht funktioniert Blau für manche Menschen besser. Für manche Menschen liest es besser, für manche Menschen funktioniert Schwarz besser, nur um ihres Sehvermögens willen. Versuche zu verstehen, was für dich funktioniert. Versuchen Sie zu üben und zu sehen, warum diese Funktionen so wichtig sind , sobald wir mit dem Design beginnen. 70. ABSCHNITT 9 Typografie und Font: Einer der wichtigsten Bestandteile jeder Design-Typografie ist es, neben Bildern eine Geschichte zu erzählen. Und je besser sich die Topographie auf Ihre Nutzer auswirkt , desto besser wird die Geschichte zusammen mit den Bildern erzählt. In diesem Abschnitt des Kurses werden wir also über Typografie und insbesondere über die Kombination von Schriften sprechen . So paarst du deine Schriften auf unterschiedliche Weise. Und was sind einige verschiedene Schriften , die Sie miteinander kombinieren können? Also lass uns anfangen. 71. Schriftarten VS: Einer der Hauptfehler, den junge Designer meiner machen, ist, dass sie Schriften als Schriften bezeichnen , was nicht wirklich stimmt. Typeface ist wirklich eine Familie von Schriften. Und die Schrift ist nur eine Variante innerhalb dieser Familie. Lassen Sie mich Ihnen ein kurzes Beispiel geben. Stellen Sie sich vor, Sie verwenden z. B. die Roboto-Schrift und dann haben Sie innerhalb der anderen Wasserschrift Bolt, Regular, Zinn, Ultra Bold. All dies sind Schriften, aber der Bericht selbst ist eine Schrift. Verschuldete Familien sind die wichtigsten Missverständnisse , die Designer haben. Sie versuchen, die Vorstellung durchzusetzen , dass Schrift alles ist, obwohl sie es wirklich nicht ist. Was Sie haben können verschiedene Arten von Schriftvariationen innerhalb der Single-Familie oder eine Flasche ist wirklich gutes Beispiel, weil Sie Roboto Regular, Roboto normal haben und dann etwas namens Roboto Slab, das komplett aus Schriften besteht, wirklich dicke Linien, und es wird hauptsächlich für den Druck verwendet, aber Sie können es auch in einer Art fett gedruckten Webdesign verwenden. Aber genau darum geht es hier. Versuchen Sie nicht, Schriften mit Schriftfamilien zu verwechseln, da Schriftfamilien mehrere verschiedene Schriften enthalten können . Und Schriften sind nur Variationen innerhalb dieser Schriftfamilie. Wie gesagt, innerhalb einer einzigen Familie kann es mehrere Schriften geben. Denken Sie also daran und lassen Sie sich nicht verwirren. Sie können die gesamte Familie oder Schriftart in Ihrem Design verwenden , oder Sie können nur eine Variante verwenden, wie, sagen wir in diesem Beispiel, Roboto regular oder Roboto bold. Wir werden in diesem Kurs in nur wenigen Videos darauf eingehen. Aber darauf wollte ich nur hinweisen. 72. Schriftarten: Wenn ich junge Designer interviewe, wenn ich mit ihnen spreche, wissen sie oft junge Designer interviewe, wenn ich mit ihnen spreche, nicht wirklich, was der Unterschied zwischen Serif und Sans Serif ist, wenn es um Schrift geht Es ist wirklich super einfach. Und ich habe weitergemacht und einen wirklich guten Artikel gefunden. Ich werde es in der Klassenressourcendatei verlinken. Schauen Sie es sich also unbedingt an und lesen Sie es selbst, denn wir werden uns in diesem Video nicht zu sehr damit befassen, aber ich möchte Ihnen nur kurz zeigen , was die Unterschiede zwischen Serifen sind ohne Serifen, und wenn jede von ihnen verwendet wird. Also hier haben wir den Artikel, den ich erwähnt habe , und er ist von adobe.com, Creative Cloud Design Discover. Und ich werde den Link zu diesem Artikel hinterlassen, wie ich in den Klassenressourcendateien gesagt habe. Sie können sich hier also einige Beispiele ansehen. Vielleicht scheint das für Sie keinen Unterschied zu machen. Vielleicht hast du solche Schriften gesehen. Vielleicht hast du solche Schriften gesehen. Aber was ist wirklich der Unterschied zwischen Serif und Sans Serif? Hier haben wir also den Hinweis im Namen und den Hauptunterschied zwischen diesen Schriften. Diese Dinge am Ende des Briefes selbst sind also Surfen. Und du kannst genau hier sehen, wir haben sie nicht, dass Sandsurfen nicht, wenn ich mich nicht irre, das ist Französisch. Also ohne diese Serifen am Ende. Das ist also der Hauptunterschied zwischen Serifen und Send Serves. Jetzt, wann Sie sie verwenden können, können Sie sehen, wann Serifenschriften verwendet werden sollten. Es wird also sehr ausführlich darauf eingehen, wann und wie man sie benutzt. Sie können sie hier in gedruckter Form sehen. Sie also unbedingt diesen Artikel, um mehr darüber zu erfahren. Und natürlich können Sie weiter herausfinden, wann Sie diese finden können. Aber kurz gesagt, wenn man Serifen und Sensoren verwendet, ist es wirklich sehr einfach. Es ist, alles kommt auf das Thema Ihres Designs und auf die Designrichtung Ihres Designs an und darauf auf die Designrichtung Ihres , wofür Sie entwerfen. Wenn Sie also beispielsweise mutiges Webdesign entwerfen , vielleicht etwas Neues, etwas Frisches, etwas für die jüngere Generation, werden Sie keine Serifen verwenden, die die Schriftarten für diese Dinge sind. Am Ende jedes Buchstabens werden Sie serifenlose Schriften verwenden , da Cera-Schriften wirklich etwas Altem zugeschrieben werden . Und wenn Sie für etwas entwerfen, das alt ist, z. B. Sie eine Vintage-Website machen oder eine Oldtimer-Ausstellung vielleicht eine Oldtimer-Ausstellung machen oder etwas, das sie gelöst haben. Dann verwenden Sie die Serifenschriften, denen diese Dinge am Ende der Buchstaben stehen. Aber im Allgemeinen gilt die Faustregel, wenn Sie nicht für etwas entwerfen, das traditionell , elegant, was alt ist, dann werden Sie diese serifenlosen Schriften verwenden , weil diese modernere und benutzerfreundlichere Schriftarten, insbesondere im Webdesign, da sie online funktionieren und für die Online-Arbeit optimiert sind, für Lesbarkeit, Barrierefreiheit, für Skalierbarkeit. Aus all diesen Gründen sind serifenlose Schriften viel besser zu verwenden, insbesondere im Website-Design. Aber wie gesagt, Sie können immer noch Tausende verschiedener Serifenschriften finden , wenn Sie sie in Ihrem Webdesign oder App-Design verwenden möchten . All dies hängt von Ihrem Thema ab, wofür Sie entwerfen, wer Ihre Zielgruppe ist und was Sie vermitteln möchten , welche Art von Emotion, welche Art von Erfüllung mit der Schrift du wählst. Sie also einfach an diese Dinge Denken Sie also einfach an diese Dinge, wenn Sie für das Web entwerfen. 73. Schriftstärken und wie man sie verwendet: Wenn Sie anfangen, eine Schriftfamilie zu verwenden, , abhängig von der Familie selbst, werden Sie, abhängig von der Familie selbst, feststellen, dass sie viele verschiedene Schriftarten enthält, die mit unterschiedlichen Namen beschriftet sind z. B. regulär , fett , kursiv, fett, kursiv und viele, viele mehr, abhängig von der Schriftfamilie selbst. Diese werden Gewichte genannt. Und wie man diese Gewichte in verschiedenen Szenarien verwendet. Darüber werden wir in diesem Video sprechen. Und ich werde Ihnen ein Beispiel zeigen und Ihnen nur eine Idee geben , wo Sie sie verwenden können. Also hier ist das Beispiel, und ich bin in Adobe XD, das ist die Designdatei aus einem meiner vorherigen Kurse, und ich verwende sie nur als Beispiel, um Ihnen all diese verschiedenen Schriftstärken und deren Verwendung zu zeigen , um das zu betonen, was Sie in Ihren Designs zeigen möchten . Also, was wir genau hier in der Heldenabteilung haben, wenn ich es auswähle und gleich hier auf die rechte Seite komme . Lassen Sie mich einfach diesen wählen. Da haben wir's. Sie können sehen, dass der Schriftname Open ist. Sans, Größe ist 24 und das Gewicht ist normal. Warum ist es also regelmäßig? Nun, weil ich einfach möchte, dass die Leute das zuerst sehen, das ist offensichtlich größer, ausgeprägter und hat eine andere Farbe. Das wird Aufmerksamkeit genannt, weil ich ihre Aufmerksamkeit zuerst auf diesen weißen Text lenken möchte, weil ich wollte, dass sie diesen Text zuerst lesen. Deshalb möchte ich, dass es anders aussieht als dieser Text oben und unten, während sie hier in der Mitte stehen und lesen, dass dieses Heroin ein Boutique-Hotel ist. Ich möchte, dass er sieht, dass oben und unten noch ein Text steht. Und dann möchte ich sie lesen. Ich möchte, dass sie es lesen , weil sie da sind. Wenn ich also den Prototyp hier schnell auf den Markt bringe, können Sie sehen, wie das aussieht. Also hier bin ich in der Heldenabteilung und alles, was sie sehen können, ist das. Ihr Blick wird also Natur aus in die Mitte dieser Seite gelenkt , in die Mitte dieses Bildes. Und Sie können lesen, dass Hetero Boutique-Hotel nach Schulden bedeutet . Sie können alles sehen, es gibt dort noch andere Texte. Willkommen im Boutique-Hotel von Halloween. Okay, dein Zuhause, weit weg von zu Hause. Das ist also die Schriftstärke. So benutzt man sie. Und Sie können feststellen, dass diese Schrift anders aussieht. Sie können sehen, dass es serif ist, wie wir in einem früheren Video erwähnt haben. Also, warum ist das so? Weil das Branding dieses Hotels und dieses Designs es wirklich erfordert. Und deshalb habe ich mich für diese Art von Look entschieden. Wenn ich also das wähle, kannst du sehen, dass es Playfair Display 70 heißt, was die Schriftgröße ist, in diesem Fall viel größer ist. Denn um nicht noch einmal all diese Dinge zu erwähnen, die ich erwähnt habe, sondern um darauf aufmerksam zu machen. Und dann sieht man kalt fett, kursiv ist das Gewicht. Es ist Italica. Es neigt sich also irgendwie zur rechten Seite und es ist mutig. Es ist ausgeprägter als in normaler Schrift. So können Sie Ihre Schriftstärken in vielen verschiedenen Beispielen ausbalancieren . Und wenn wir etwas nach unten scrollen, können Sie noch einmal sehen, hier ist dieselbe Schrift jetzt in einer anderen Farbe, um den Kontrast zwischen weißem Hintergrund und Schrift selbst zu erzielen . Und Sie können Ihr Zuhause fern von zu Hause sehen. Also kehren wir vielleicht noch einmal zu diesem Slogan zurück. Dann kannst du dir hier etwas wirklich Interessantes ansehen. Wenn ich also dieses auswähle, kannst du sehen, dass es Open Sans 24 bolt ist. Und wenn ich dieses auswähle, Open Sans 24 regular. Und Sie können sehen, indem Sie einfach Bolt und Normal auswählen und eine andere Farbe wählen, ich richte ihre Richtung in eine andere Richtung und lenke ihre Aufmerksamkeit in eine andere Richtung. In diesem Beispiel können Sie sehen, dass ich diesen Untertitel lesen wollte , weil er wirklich wichtig ist. Ich möchte, dass ihr Verstand nur auf diese drei Dinge achtet. Also Kingsize-Betten, Essen inklusive Strandzugang, weil dies wirklich wichtige Verkaufsargumente für diese spezielle Website sind wirklich wichtige Verkaufsargumente für diese spezielle Website um neue Besucher zu gewinnen. Und wenn sie wollen, können sie natürlich den Text darunter lesen. Deshalb ist dieser fett und dieser regelmäßig. Dieser hat eine etwas dunklere Farbe als dieser, weil ich möchte, dass ihre Augen zuerst auf diesen Text gelenkt werden. Gleiche Geschichte wie mit diesem und mit diesem hier. Wenn wir jetzt ein bisschen scrollen, können wir hier dieselben Texte sehen. Headwinds Boutique Hotel ist in Ordnung. Und hier haben wir ein Zitat von einem unserer früheren Kunden zu dieser Website oder ein Testimonial, Sie können Jenny aus London sehen, aber dieses ist viel ausgeprägter. Es ist viel größer. Wenn ich es also auswähle und gleich hierher komme, kannst du sehen, dass es Open Sans 36 kursiv ist. Und es hat diese dunklere Farbe als diese, die Open Sans 24 unregelmäßig ist. Also noch einmal, ich möchte, dass sie zuerst das Zitat lesen und dann sehen, von wem das Zitat stammt. Der Name ist in diesem Fall nicht wirklich wichtig. Sie können es für die Layout-Segues loswerden. Es spielt keine Rolle, was zählt ist ihre Erfahrung mit diesem Hotel, denn der nächste Kunde, den Sie für Ihr Hotel gewinnen möchten, wird dieses Erlebnis zuerst sehen wollen . War mir egal, ist es Jenny, Mark, ist es wer auch immer? Sie kümmern sich nicht wirklich darum, sie kümmern sich wirklich um die Erfahrung. Und dann können Sie den Kontrast darunter mit der Schaltfläche Jetzt buchen sehen , die blau ist und darin weißen Text enthält. Noch einmal, um des Kontrasts willen, wenn wir etwas nach unten scrollen, können Sie dies in diesem gesamten Design sehen. Und nicht nur dieses Design, sondern jedes einzelne Design, das ich erstelle. Weil ich immer über diese Dinge nachdenke. Was ist wichtiger? Was ist weniger wichtig? Was werden die Leute zuerst sehen? Und wie kann ich das mit meinen Schriften und Schriftstärken unterstreichen ? Du kannst es gleich hier sehen. Für die Namen des Raums ist die Schrift also viel größer als alle unten. Und das können Sie an den Funktionen sehen, ja und nein. Natürlich wählen wir dann verschiedene Farben, um zu zeigen, welche Funktionen verfügbar sind und welche nicht. Und dann haben wir noch einmal das andere Styling mit dem Link unten. Erfahren Sie mehr, sie können auf diesen Link klicken, es ist anders. Also wenn sie, wie sind, werden sie die Veränderung sehen. Also musst du über all diese Dinge nachdenken. Hier. Sie können die Funktionen sehen. Wir haben also einen privaten Pool, wir haben einen schönen Garten, wir haben einen privaten Parkplatz. All dies ist super einfach zu lesen und hat einen bestimmten Zweck. Deshalb habe ich diese Schrift gewählt, die viel größer ist, die etwas anders ist, nämlich Boulder, hat eine dunklere Farbe als die Schrift darunter. Wieder einmal habe ich Open Sans als Hauptschrift verwendet. Das hier und Playfair Display für diese große, fette Schrift. Wenn wir noch einmal etwas nach unten scrollen, können Sie sehen, wie dies erneut passiert. Also besuche Delos, das ist der Titel, und das ist der Text. Wenn ich diesen Text also nicht lesen möchte, kann ich nur sehen und alles, was ich wissen muss, ist Delos zu besuchen. Displays gibt es also etwas zu tun. Und wenn wir noch einmal etwas nach unten scrollen , buchen Sie Ihren Aufenthalt bei uns. Es lädt sie also wirklich ein , ihren Aufenthalt bei diesem Hotel zu buchen. Und wieder einmal können Sie diesen Kontrast genau hier mit dem weißen Hintergrund und diesem dunkelgrauen Text sehen mit dem weißen Hintergrund . Und das letzte Beispiel ist die Anmeldung für Newsletter. Es ruft dich also wirklich zum Handeln auf, zum Handeln. Und dann siehst du das. Melden Sie sich zunächst für einen Newsletter an. Das ist es, was Sie an zweiter Stelle sehen, und das wieder einmal mit einem bestimmten Zweck denn ich möchte das aussprechen, für einen Newsletter anmelden, weil ich möchte, dass er das tut. Und sobald ich ihre Aufmerksamkeit mit der Anmeldung für den Newsletter habe , melde dich an und erhalte Neuigkeiten und Updates und blah, bla. Das ist wirklich zweitrangig, weil ich möchte, dass sie so lange wie möglich auf diesem Teil der Seite bleiben. diese Weise können Sie Schriften, Schriftarten und verschiedene Farben und vielleicht sogar verschiedene Schriftfamilien verwenden , um das hervorzuheben, was Ihre Benutzer auf Ihrer Seite sehen sollen. Sie können dies in viel mehr Details untersuchen. Und abhängig von deinem Farbschema für dein Projekt kann das wirklich noch komplexer oder sogar einfacher sein komplexer oder sogar einfacher als das Beispiel, das ich dir gerade gezeigt habe, das nur ein paar Farben enthält. 74. Auswahl von Schriftarten: Wenn es um die Auswahl von Schriften für Ihr Projekt geht, gibt es zwei Hauptüberlegungen. Sie sollten über vorhandene Schriften und das Hauptthema des Projekts verfügen . Die vorhandenen Schriften sind offensichtlich die Schriften , die Ihr Kunde zuvor verwendet hat. Dann können Sie sich diese Schriften ansehen. Sehen Sie sich die gesamte Schriftfamilie an, sehen Sie, was darin enthalten ist, und denken Sie vielleicht darüber nach, wie Sie sie ein bisschen stärker betonen können. Worüber wir in einem früheren Video dieses Kurses gesprochen haben. Wie können Sie sie etwas anders verwenden, um einige Hauptmerkmale des Produkts oder einer Dienstleistung zu zeigen einige Hauptmerkmale des Produkts oder , die Ihr Kunde anbietet. Und dann können Sie sich die Farben ansehen, sehen, wie die zuvor diese Schriftfamilie mit diesen verschiedenen Farben verwendet haben. Vielleicht können Sie diese Farben ändern, wenn Sie dazu in der Lage sind. Vielleicht kannst du einige dunklere Farben oder hellere Farben hinzufügen. Vielleicht kannst du Farben dieser verschiedenen Farben hinzufügen , die sie bereits verwenden, oder ganz neue Farben in das Projekt einführen , um mehr Leben und Geschicklichkeit zu verleihen dem Projekt mehr Leben und Geschicklichkeit zu verleihen. an dem du gerade arbeitest. Die andere Möglichkeit, dies zu tun, ist mit neuen Schriften. Und wenn Sie neue Fonds auswählen, achten Sie darauf, was ich bereits in einem der vorherigen Videos erwähnt habe. Wird vom Projekt selbst betrachtet. Natürlich wirst du diese fetten, hellen, verrückten Schriften nicht verwenden . Wenn Sie eine Website für eine Bank erstellen, vielleicht weil die Bank versucht, ein Gefühl von Vertrauen, Sicherheit und Stabilität zu vermitteln . In einigen Fällen kenne ich den Adel nicht. Also solltest du darauf achten. Worum geht es in deinem Projekt? Was wird versucht, den Benutzern selbst zu vermitteln. Daher müssen Sie diese Schriftarten verwenden, die dem Team des Projekts gut entsprechen . Natürlich, wenn das Projekt in Ordnung ist, nehmen wir an, Sie erstellen eine Website für eine Comicbuchfirma oder ein Spielzeuggeschäft oder für jegliche Art von Inhalten, die mit Kindern zu tun Comicbuchfirma oder ein Spielzeuggeschäft oder haben, wie Spiele oder Spülungen oder Möbel was auch immer es mit Kindern zu tun hat. Aber auch mit Kindern gibt es immer noch einige Einschränkungen , gibt es immer noch einige Einschränkungen wann Sie bestimmte Schriftarten verwenden können und wie Sie sie verwenden können. Da Erblichkeit wirklich der Schlüssel ist, insbesondere online, möchten Sie sicherstellen , dass Ihre Schriften am Ende des Tages lesbar sind, unabhängig davon, wer Ihre Zielgruppe ist, egal ob es seriös ist. oder verspielt, wenn es bunt, alles einfarbig ist, du willst trotzdem erkennen können , ob es lesbar ist oder nicht. Und wie Sie das tun können, ist, es auf verschiedenen Geräten zu testen. Wenn Sie eine Website erstellen, müssen Sie sie z. B. auf großen Bildschirmen wie Desktop-Bildschirmen und Laptop-Bildschirmen testen , aber Sie müssen auch sicherstellen, dass sie gut funktioniert und auch auf kleinstem Raum lesbar ist Bildschirme wie Formulare. Wenn Sie so etwas wie Webflow verwenden, ist das ganz einfach. Erstellen Sie einfach eine responsive Seite aus Ihrem Design und senden Sie sich einfach den Link, vielleicht senden Sie diesen Link an jemanden, der älter ist, die neue vielleicht, und schauen Sie, ob sie leicht lesen können , ob die Farbe Der Kontrast ist gut, wenn die Schriftstärken gut sind, wenn Ihr Farbrhythmus gut ist. Damit sie es wirklich vorlesen können. Sie können es wirklich verstehen und sie können sehen, was Sie auf dieser bestimmten Seite vermitteln wollten . Stellen Sie also sicher, dass Sie immer testen und immer im Voraus nachdenken. Mit wem sprichst du? wem sprichst du? Wer ist dein Hauptpublikum? Und sind die Schriften mit diesen Farben vor diesem Hintergrund lesbar ? 75. Schriftart-Paarung: Manchmal möchten Sie in einigen Beispielen verschiedene Schriftfamilien verwenden, wie in dem Beispiel, das ich Ihnen zuvor mit dieser Reisewebsite gezeigt habe. Vielleicht möchtest du einen anderen Abschnitt dieser Seite oder eine mobile App mit einer bestimmten Schriftfamilie anzeigen . Und dann noch ein Abschnitt, vielleicht möchten Sie, dass sie das Gefühl haben, einen Artikel zu lesen. Deshalb wirst du keine verrückte, verrückte Schrift verwenden. Sie möchten nur eine normale, schlichte alte Schrift zusammenfassen , die wirklich lesbar, verständlich und für sie sehr einfach zu sehen und zu lesen ist. Daher müssen Sie sich mit dem Pairing von Schriften auskennen und wissen, wie Sie Geld koppeln können? Nun, es gibt verschiedene Online-Tools , die Ihnen dabei helfen können. Und ich werde einige in diesem speziellen Video zeigen. Hier sind wir also mit der ersten dieser kalten Aspiration. Und ich habe bereits ein YouTube-Video erstellt. Ich werde es in den Klassenressourcen verlinken. Sie können einfach klicken und sich das gesamte Video ansehen , in dem ich all diese verschiedenen Tools erkläre. Aber ich gebe Ihnen nur einen kurzen Überblick. In diesem speziellen Video haben Sie Inspiration und Anleitungen, die Ihnen zeigen , wie Sie diese verschiedenen Schriftarten kombinieren können. Auch hier kommt es darauf an, was in diesem Video bereits ein paar Mal erwähnt wurde, das Thema Ihres Projekts und auf das Publikum, mit dem Sie sprechen möchten. Daher werden Sie keine verrückten Schriften verwenden da sie immer wieder Bankern gegenüber erwähnt werden, z. B. oder einem seriösen Publikum. Bei Kindern kann man aber auch andersherum gehen und etwas verspieltere Farben und etwas verspieltere Schriften verwenden. Tippe Inspiration ist also die erste Website und du kannst viele verschiedene Stile wählen. Sie können Open Sans and Cream sehen. Bei einigen Texten handelt es sich um die hier verwendeten Schriften. Das sind die Farben. Sie können verschiedene Farben wählen von. Hier können Sie die Schriftarten für Überschriften und für den Hauptteil wählen. Die Schriftart für Überschriften ist diese hier oben, die für Kopfzeilen oder für Titel verwendet wird. Und die Body-Schriftart ist genau hier diese, die hauptsächlich für Absätze und für alle Inhalte verwendet wird , die mehr Text enthalten. Und es ist eher für längere Raten gedacht. Im Grunde sind Titel mehr Drüsen, aber auch kann man sie und Atlanta sehr schnell lesen, aber Absätze, kann man wirklich seine Zeit damit verbringen müssen , sie zu lesen. Und das ist der Hauptpunkt hier. Mit Absätzen können Sie verschiedene Schriftarten und Schriftstärken verwenden. Bei Absätzen möchten Sie jedoch sicherstellen, dass Ihre Schrift lesbar ist dass die Farbe einen schönen Kontrast zum Hintergrund hat. Und es ist wirklich keine allzu große Belastung Ihre Augen, diesen Artikel länger zu lesen, besonders wenn es einen längeren Artikel gibt, wenn Sie eine Website für, für Nachrichten erstellen , z. B. extrem wichtig. Das ist das Hauptproblem, das Sie in diesem speziellen Projekt zuerst und sofort angehen sollten , denn der Sinn einer Nachrichtenwebsite besteht darin, dass denn der Sinn einer Nachrichtenwebsite besteht darin Leute viel Zeit damit verbringen, diese Artikel zu lesen. Daher möchten Sie eine großartige Schrift haben , die wirklich lesbar ist. Und diese Titel , die wirklich gut sichtbar sind , weil Sie nicht möchten, dass sie zu sehr hervorstechen, insbesondere auf solchen Websites, weil Sie möchten, dass sie immer wieder gelesen werden diese Artikel unten. Erkunden Sie also diese Website. Wie gesagt, ich werde auf das Video verweisen, das ich bereits auf meinem YouTube-Kanal erstellt es um dieses Zeug geht. Und ich erkläre das genauer. Und ich werde die Links in dem Video hinterlassen, also schaut es euch unbedingt an. Schriftpaar ist ein anderes. Sie können also genau hier sehen, dass wir eine serifenlose Platte haben. Sie können also sehen, dass es sich um eine fette Monospace-Display-Handschrift handelt. Es gibt also eine Reihe dieser verschiedenen Schriftstile , aus denen Sie wählen können. Und Sie können all diese wichtigen Schriftarten und Hauptschriften sehen. Sie können Kombinationen genau hier sehen, Sie können mehr Schriftpaarungen sehen. Wählen wir also Display-Schriften aus und es werden Ihnen all diese Display-Schriften angezeigt. Du kannst sie erkunden. Dann haben wir das, nämlich Schriftpaarungen, Punkt py people.com. Sie können hier eine Schriftfamilie auswählen. Und nachdem Sie das getan haben, können Sie einen anderen Textstil und den Stil auswählen. Das ist also regulär, das ist fett, diese Platte sekundäre Texte, das sind die Absatztexte, die wir gerade erwähnt haben. Und dann erhalten Sie verfügbare Paarungen. Und schließlich Font Joy, das super, super einfach zu bedienen ist. Wir haben also Generate und es wird eine andere Schriftpaarung generieren. Sie können mehr Kontrast wählen, oder Sie können mehr Ähnlichkeit oder einen ausgewogeneren Kontrast wählen. Du kannst zwischen Schwarz und Weiß wechseln , um zu sehen, wie es aussehen wird. Vor allem, wenn Sie auf Ihrer Website oder Ihrer App einen Dunkelmodus entwerfen , können Sie Schriftpaarungen und verschiedene Textgrößen, unterschiedliche Gewichte usw. sehen . Also hier haben wir Montserrat, das ist dieser hier. Hier haben wir diese nachgebildete Varney-Schrift, die hier genau hier ist. Sie können also H1, H2 und Absatz oder Überschrift eine Überschrift , zwei Absätze oder einen Haupttitel , einen Untertitel und einen Absatz sehen. Sanchez ist der Text für den Absatz selbst. Sie können also klicken. Sie werden zu Google-Schriften weitergeleitet, was diese Sanchez-Schrift vier ist. Und dann kann ich gleich hier klicken und ich kann, ich weiß nicht, vielleicht dieses auswählen ich weiß nicht, vielleicht dieses nur um zu sehen, wie es aussieht. Wenn es mir nicht gefällt, wird es weitermachen und diese wechseln. Also sagen wir, ich mag diese oder diese nicht wirklich. Vielleicht kann ich etwas Helleres wie dieses nehmen. Ich kann es hier sperren. Und es wird dieses Montserrat sperren. Ich mag diesen nicht wirklich, also kann ich weitermachen und mehr generieren. Du kannst sehen, dass Montserrat verschlossen ist, vielleicht mag ich diesen, aber ich mag diesen nicht. Wir können zur Sache kommen. Sie können immer noch ganz nach unten scrollen. Und wenn Sie am Ende, wie bereits erwähnt, die perfekte Schriftkombination gefunden haben, die Sie verwenden möchten , können Sie hier klicken. Sie werden zu Google Fonts weitergeleitet. Stellen Sie sicher, dass Sie die Schriftfamilie Montserrat in Montserrat herunterladen, und schneiden Sie sie dann aus. Und Pylon Quinn stellt in diesem speziellen Beispiel sicher, dass sie alle heruntergeladen und auf einem Computer installiert wurden. Sie haben also all diese verschiedenen Schriftstärken, wie ich bereits erwähnt habe, regulär fett gedruckt und vieles mehr. Da hast du es. So einfach ist Font Pair. Achten Sie unbedingt auf Folgendes , auf den Kontrast, auf die Lesbarkeit und auf das Thema wofür Sie entwerfen . Du bringst all das in Ordnung. Dann wird es wirklich einfach zu entwerfen sein und es wird kaum einfach zu testen sein. Apropos Testen: Stellen Sie sicher, dass Sie immer mit Ihrem Publikum testen, insbesondere, wenn Sie Zugang zu ihnen haben. Wenn Sie also z. B. für Kinder entwerfen, können Sie vielleicht Zugang zu Kindern haben und sehen, wie sie mit dem Prototyp interagieren, wie sie mit der Website, mit der mobilen App interagieren . Ist es für sie leicht zu verstehen, wo sie klicken müssen, oder stolpern sie über diese verschiedenen Elemente Ihres Designs, könnte es sein, dass sie zu viel Aufmerksamkeit auf sich ziehen. Oder wenn Sie mit einem älteren Publikum arbeiten, vielleicht, weil ich immer wieder die Banken nenne, haben Sie vielleicht Zugang zu den Leuten, die in der Bank arbeiten. Wenn Sie in diesem speziellen Fall für eine Bank arbeiten, können Sie es vielleicht mit ihnen testen, ihnen eine konkrete Aufgabe geben, sehen, wie einfach es für sie ist, diese Aufgabe zu finden, wie einfach es für sie ist um in Ihrer App zu navigieren und zu erfahren, wie einfach es für sie ist, den Text zu lesen , den Sie auf dieser bestimmten Seite anzeigen möchten. 76. Font: Wenn Sie für das Web oder für mobile Apps entwerfen, möchten Sie eine umfassende Skalierung über Ihre Schriftgrößen und Schriftstärken haben . Und das kann mit einer Schriftskala erreicht werden. Sie können eine Schriftskala erstellen, sodass es für Entwickler später viel einfacher ist, zu verstehen, welche Art von Schriftgröße für was ist, und das können Sie in Ihren Styleguide aufnehmen, nur um sie zusammen mit Ihrem Farben, neben Ihren Bildern, Ihren Stilen und vielem mehr. In diesem Video zeige ich Ihnen, wie Sie eine einfache Schriftskala erstellen. Sie müssen diesen Ansatz nicht verwenden. Sie können andere Ansätze online finden. Es gibt buchstäblich Dutzende verschiedener Ansätze online. Finden Sie heraus, welches für Sie, Ihr Projekt und Ihre Skalierungszwecke geeignet ist. Also lass uns anfangen. Also hier sind wir in Adobe XD und ich werde Ihnen nur zeigen, wie Sie mit Adobe XD eine schnelle Schriftskala erstellen. Wenn Sie Figma Photoshop verwenden, was auch immer Sie dort erstellen können. Aber für diesen Zweck werde ich x D verwenden, weil ich es wirklich mag und es jeden Tag benutze. Also klicke ich auf T, um H1 zu erstellen dann verwende ich, sagen wir, eine Flasche wie diese. Statt regulär nehme ich, sagen wir, Schwarz. Und ich nehme Größe 80. So wirklich riesig. Und das wird mein H1 sein. Vielleicht, vielleicht sogar noch größer, vielleicht 88, so etwas. Da haben wir's. Dann drücke ich Control D oder Command D und senke das auf vielleicht etwas wie 64. Da hast du es. Statt Schwarz entscheide ich mich für Bolt. Und statt H1 nenne ich es H2. Was hier geschaffen wird, ist ein klarer Unterschied zwischen Heather, Heather und hier. Das eine werde ich in meinen Heldenbildern verwenden, z. B. in der Mitte des Designs selbst, in der Mitte dieser Heldenbilder. Im Gegensatz zu dem Beispiel, das ich Ihnen zuvor gezeigt habe. Aber das ist einfach akzentuierter, größer, mutiger, in diesem Fall schwarz, aber dieser hier ist fett, weil ich ihn vielleicht vielleicht als Titel meiner Abschnitte verwenden möchte ihn vielleicht vielleicht als Titel meiner Abschnitte verwenden oder so ähnlich. Deshalb ist es fett und nicht schwarz und es ist 64 88. Wenn wir also etwas weiter nach unten gehen, können Sie in diesem Fall einen H3 erstellen. Und statt 64 können wir für diesen Fall vielleicht 48 verwenden. Und statt Bolzen, eigentlich nein, lassen Sie es uns dafür mutig halten. Wenn wir dann etwas nach unten gehen, können wir so etwas wie H4 erstellen. Und statt 48 können wir vielleicht 40 nehmen, in diesem Fall n. Verwenden wir diesmal unregelmäßig. Sie können also den Unterschied zwischen diesen deutlich erkennen. Also, wenn wir H5 ein bisschen runtergehen, und in diesem Fall können wir vielleicht etwas gebrauchen, ich weiß nicht, 24. Vielleicht, da haben wir es. Vielleicht können wir das als Absatztext oder einige Beispiele oder so verwenden , etwas, das etwas kleiner ist und H6, lass uns weitermachen mit, ich weiß nicht, 16 vielleicht wollen wir in meinen Fällen wirklich nicht gehen nicht weiter als 16. Wir haben also H1, H2, H3, H4, H5 und H6. Vielleicht kannst du diesen H6 umbenennen und ihn Absatztexte nennen. Vielleicht kannst du deinen Entwicklern so etwas zeigen , sehen, was sie denken. Und was Sie auch tun können, ist bei jedem von ihnen noch einmal Strg-D zu drücken jedem von ihnen noch einmal Strg-D und das Alphabet einzugeben. Also a, a, B, B, B, C, C, D, D, E und so weiter und so weiter. Sie können also das gesamte Alphabet eingeben und die Schriftstärke und die Schriftgröße in diesem speziellen Beispiel über das Alphabet anzeigen Schriftstärke und die Schriftgröße , oder etwas anderes, das Sie tun können, ist , Sie können etwas verwenden wie Ich weiß nicht, Lorem Ipsum Text oder so ähnlich. Ich habe hier nicht die Tastenkombination und ich habe das Plug-In nicht hier installiert. Also lass uns damit weitermachen. Also hat sich Lorem Ipsum ROC getroffen, vielleicht kann ich diesen Text kopieren und dann kann ich dasselbe mit diesem tun. Einfach einkleben. diese Weise können Sie Ihrem Kunden und Ihren Entwicklern zeigen, wie ein bestimmter Text in bestimmten Anwendungsfällen aussehen wird . Nehmen wir an, ich habe absichtlich mit dieser speziellen Farbe angefangen. Und warum ich mich dafür entschieden habe, ist nur, um Ihnen die wichtigsten Unterschiede zwischen diesem Text zu zeigen. Aber in diesem speziellen Fall würde ich bewusst weitermachen und diese Farbe in etwas viel, viel, viel Dunkleres ändern . Und vielleicht speichern Sie es gleich hier als Farbmuster. Oder ich kann weitermachen und gleich hier meine Farben bearbeiten. Was ich dann tun kann ist. Wirf diesen weg. Vielleicht kann ich gleich weitermachen und dieselbe Farbe wählen, aber gehe ein paar Schritte weiter zu so etwas wähle dann eine andere Farbe aus. Was Sie tun können, ist Ihren Farbfeldern sofort Namen zu geben. Dieser hat also H2-Farbe. Da hast du es. Dieser ist H1. Und vielleicht können wir noch weiter gehen. Entschuldigung, speichern wir das als H2. Also kann ich zurückgehen und den H12 benutzen und dann einen Schritt nach oben gehen, ungefähr so. Speichere es gleich hier, speichere es gleich hier. Nennen Sie es Drei. Da haben wir's. Und dann endlich, vielleicht möchte ich etwas noch Besseres nehmen. Für diesen vielleicht, vielleicht nicht, aber es liegt ganz bei dir. Vielleicht so etwas. Da hast du es. Und ich kann ihm den Namen H4 geben. In diesem speziellen Fall können Sie sehen, dass sie sich sehr ähnlich sind. Aber da ist der Sinn dieses Videos, aber Ihre Kunden haben vielleicht die Hauptfarbe, sagen wir, das Blau ist ihre Hauptfarbe. In diesem Fall können wir vielleicht mit etwa drei C6 FF gehen. Also wirklich helles und kräftiges Blau, vielleicht ist das ihre Hauptfarbe. Wie können Sie diese Farbe also in Ihr Design integrieren? Offensichtlich wirst du es nicht dafür verwenden. Das ist wirklich für Helden-Sektionen, Sachen, die ich schon erwähnt habe. Vielleicht wirst du es für jeweils drei verwenden. Drei sind also C6, F, F. Und wie Sie sofort sehen können, sieht es in diesem Beispiel viel besser aus als in diesem Beispiel. Warum ist das so? Denn wenn Sie es für die größte Textgröße verwenden , die Sie in Ihrem Design haben, wird es die Aufmerksamkeit des Benutzers von allem anderen ablenken. Das ist nicht etwas , was du willst. Text ist wirklich dazu da, Dinge zu erklären , Ihren Benutzern zu zeigen, was sie als Nächstes tun müssen, und um ihnen wirklich zu helfen, das Ziel für ihren Besuch auf Ihrer speziellen Website oder mobilen App zu erreichen . In diesem Fall würde ich also Farbe für Text verwenden , etwa so. Und ich würde es nicht für Absatztexte verwenden , weil Sie, wie ich bereits erwähnt habe, möchten, dass Ihre Absätze lesbar sind. Sie möchten, dass sie leicht verständlich sind, und Sie möchten, dass Ihre Benutzer problemlos in Ihrem Design navigieren können . Eine letzte Sache , die ich vergessen habe zu tun, ist, dass ich diese Farbe speichern möchte. Wir haben es schon. Da hast du es. Also H5, ich möchte es speichern. Da haben wir's. H5. Und wir werden dieselbe Farbe für den Absatz selbst verwenden . Und eine letzte Sache, die ich tun möchte, ist, alle meine Schriftgrößen auszuwählen und direkt hier zu den Zeichenstilen zu kommen und dort zu klicken. Sie können also sehen, dass es so etwas behaupten wird. Aber was ich tun kann, ist Control oder Command Z zu gehen. Klicken Sie hier, um diesen als ersten zu speichern. Und dann so und runter so. Und geh einfach rauf und rauf und rauf. Da haben wir's. Und natürlich kannst du sie umbenennen. Sie können direkt hierher kommen und H1 eingeben. Und das kannst du mit all diesen anderen tun. Also H2, H3 und so weiter und so weiter. Ich werde dich damit nicht zu sehr belästigen. Aber hier geht es darum, sie umzubenennen. Wie gesagt, es ist für Entwickler später viel einfacher zu verstehen was Sie vermitteln wollten, wenn Sie dieses Design nicht selbst entwickeln. Also los geht's. So super einfach ist es zu bedienen. Und du kannst sehen, wenn du es vermasselst, wie ich es gerade zuvor getan habe, du kannst einfach alle Ks in H1 sehen, die hier ausgewählt sind. Oder wenn Sie versehentlich die Farbe geändert haben, können Sie weitermachen und sehen, okay, es ist ein H1-Klick genau dort und es wird die entsprechende Farbe verwendet. Sie können also sehen, wie super einfach das ist. Und ich werde diese Datei, die ich dir gerade gezeigt habe, als Übungsdatei für dich zur Verfügung stellen die ich dir gerade gezeigt habe, als , damit du sie ausprobieren kannst. Stöbern Sie herum, nutzen Sie es für sich selbst aus, spielen Sie vielleicht mit diesen verschiedenen Farben herum , die Ihnen gerade gezeigt wurden, oder vielleicht ganz verschiedenen Schriftfamilien. Also verwenden wir Roboto in diesem speziellen Fall, vielleicht möchten Sie etwas mit einer Oberfläche im Inneren verwenden , wie die Playfair-Displayschrift, die ich bereits erwähnt habe, oder möchten Sie noch mutiger werden als Roboter? Du kannst das richtig machen. Da. Da haben wir's. Das sind die Schriftskalen, und so benutzt man sie. Wie gesagt, Sie werden diese Übungsdatei haben, stellen Sie sicher, dass Sie sie ausnutzen, stellen Sie sicher, dass Sie herumspielen, um ein perfektes Ergebnis zu erzielen. Oder wenn Ihnen dieser Acht-Pixel-Ansatz nicht gefällt, wie ich zu Beginn dieses Videos sagte, haben Sie eine Menge dieser verschiedenen Beispiele online. Stellen Sie sicher, dass Sie sie selbst erkunden und herausfinden, was für Sie am besten funktioniert. 77. ABSCHNITT 9 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, eines dieser verschiedenen Tools zu verwenden , die ich Ihnen in diesem Abschnitt gezeigt habe. Und versuche, verschiedene Schriften zu paaren und zu sehen, ob sie zusammen funktionieren? Wenn ja, warum arbeiten sie zusammen? Welches funktioniert besser für die Überschriften? Welches funktioniert besser für Absätze, z. B. und habe versucht, mit verschiedenen Farben zu experimentieren , indem ich eines dieser Tools verwendet habe, die ich Ihnen gerade gezeigt habe. Und versuche zu verstehen, welche Farbkombination, welche lustige Kombination dir eigentlich am besten gefällt. Experimentieren Sie vielleicht sogar mit verschiedenen Größen und finden heraus , welche Größe für Sie als Zuschauer die bessere Wirkung erzielt. Und es wird offensichtlich die gleiche Wirkung für Ihre Benutzer haben. Also experimentiere einfach, hab Spaß und lerne etwas Neues. 78. ABSCHNITT 10 Ikonografie: Als Design-Assets sind Icons unglaublich wichtig, denn Bilder 1.000 Worte und Symbole sind dazu da, zu beweisen, dass, richtig, Sie verschiedene Symbole verwenden können, um eine bessere Geschichte zu erzählen, anstatt nur ein paar zu verwenden Bei Texten können Sie alle Texte durch ein einfaches Symbol ersetzen, das eine bessere Geschichte erzählt als all der Text, den doch niemand lesen wird. Icons sind also unglaublich wichtig, aber welche Stile werden Sie verwenden? Wie kombiniere ich verschiedene Icons, wo finde ich Icons? Darüber werden wir in diesem Abschnitt sprechen. 79. Was sind Symbole: Symbole sind grafische Elemente , die in Ihren Designs verwendet werden , um Ihren Benutzern zu helfen , Ihre Designs besser zu verstehen. Sie sind nur da, um besser mit dem Text oder den Bildern zu korrespondieren . Achten Sie darauf, dass Sie es nicht übertreiben, wenn Sie Symbole verwenden , da der Sinn von Symbolen darin besteht, Ihren anderen Inhalten zu helfen , nicht dem mündlichen Schweißen. Das bedeutet im Grunde, wenn Sie Symbole verwenden, stellen Sie sicher, dass Sie sie an bestimmten Stellen verwenden , an denen es Sinn macht. Stellt sicher, dass Sie, wenn Sie mehrere Bereiche in Ihren Designs und viel Platz in Ihren Designs haben mehrere Bereiche in Ihren Designs , keine Symbole verwenden , da Bilder auf diese Weise in Ihren Designs viel besser aussehen. Icons werden auch verwendet, um Benutzern zu erklären, was sie noch ein bisschen besser machen müssen. Ich meine damit, wenn Sie einfach keine Bilder verwenden können, wenn Sie einfach keine Bilder finden, die komplexe Situationen erklären könnten. Nun, wenn wir an bestimmten Stellen kein Video verwenden können, sind Icons viel besser, da Sie jederzeit mehrere Symbole hinzufügen können, um mehrere Themen an einem einzigen Ort zu erklären. Und aus diesem Grund sind Icons ein großartiger Ansatz und eine großartige Möglichkeit, sie in Ihren Designs zu verwenden. Symbole können einfach oder komplex sein. Sie können farbig oder schwarz-weiß sein. Und wir werden in den nächsten Videos über alle Klassifizierungen sprechen , wo du die Unterschiede zwischen verschiedenen Symbolen findest und wie du deine Icons richtig verwendest. 80. Verschiedene Arten von Symbolen: Es gibt viele verschiedene Arten von Icons. Und je nachdem, warum Sie sie verwenden, verwenden Sie eine bestimmte Art von Symbol, bei dem dieser, dieser Umriss mit Farben gefüllt ist. Und es gibt mehrere Möglichkeiten, Symbole zu verwenden, auf die wir später in diesem Kurs eingehen werden. Es gibt aber auch mehrere Kategorien. Also hier habe ich Materialsymbole, und Sie können sie hier oben sehen , die wir skizziert haben. Und Sie können all diese umrissenen Symbole sehen. Sie können sehen, dass die Grundvoraussetzung von Gliederungssymbolen, aber nicht für alle Symbole, insbesondere für dieses Herz, das Sie hier sehen können , darin besteht, einen leeren Raum darin zu haben und dann einfach Umriss außerhalb des Symbols. Wenn ich es wieder ins Feld schalte, kannst du sehen, wie sie alle aussehen. Aber auch hier kann man mit einer Suche sehen, dass es z.B. keinen Sinn macht einige Icons komplett auszufüllen. Denn wenn wir dieses Suchsymbol vollständig spüren, verliert es seinen Zweck. Es wird verschwinden. Dieser Leerraum dazwischen für diese Abmeldung, dasselbe für diese Phase, dasselbe für diesen bevorzugten Rand. Das Gleiche gilt für abgerundete, im Grunde werden Ihnen nur die abgerundeten Ecken dieser Symbole angezeigt. Wenn wir scharf wählen, zeigt es Ihnen die scharfen Kanten. Und das wird im Grunde so sein, all diese Symbole sind pixelperfekt , weil die meisten von ihnen SVG sind. Und darauf werden wir etwas später im Adobe XD-Teil dieses Kurses eingehen . Wann werde ich verschiedene Dateiformate erklären und wie Sie mit verschiedenen Dateiformaten arbeiten können . Und schließlich müssen wir hier rechts abbiegen, damit der Ton, wie der Name schon sagt, all diese Konturen hat, all das in Farben gefüllt. Aber auch dieses zweifarbige Design zeigt Ihnen , im Grunde eine Farbe, in diesem Fall ein Ton für die Kontur und ein Ton und eine Farbe für die Inline dieses Gehäuses. Noch einmal, je nachdem, welche Symbole Sie für welchen Zweck verwenden , werden sie unterschiedlich angezeigt. Und wenn ich Ihnen hier in diesem Beispiel zeige, ist dies das Premium-Paket von Envato Elements, das Sie hier sehen können, ist das farbige Symbol. Wenn ich hier rechts klicke, um dieses Bild zu vergrößern und dir den Unterschied zu zeigen. Das sind also die farbigen Symbole und das sind das Gliederungssymbol. Sie können also sofort den Unterschied zwischen diesen Symbolen erkennen , im Grunde in der Gliederung, genauso wie ich es Ihnen hier auf diesen kostenlosen Materialsymbolen von Google gezeigt habe . Übrigens, all diese Ressourcen, die ich erwähne, werden in einem PDF verlinkt. Stellen Sie sicher , dass Sie das PDF herunterladen und all diese Links erkunden und selbst darauf zugreifen können, klicken Sie einfach auf den gewünschten Link. N bringt Sie in Ihrem Browser dorthin. Wenn wir, wie gesagt, hierher zurückkehren, haben wir diese skizzierten Symbole und wir haben diese umrissenen Symbole genau hier. Der Unterschied zwischen diesen beiden ist offensichtlich die Dicke und der Stil. Wenn ich Sie also direkt hier zurück zu den Materialsymbolen bringe, können Sie sehen, dass sie extrem einfach sind. Sie sind wirklich einfach zu bedienen. Aber wenn ich Sie gleich hier zu diesen Reiseikonen führe, können Sie sehen, dass sie viel komplexer sind. Sie haben reichere Elemente im Inneren. Sie haben einen mehrfachen Teint, sie haben sogar unterschiedliche Striche. Sie sind also sehr komplex. Wenn du solche Sachen machen willst. Auch hier werden Sie je nach Projekt entweder diese einfacheren Symbole oder diese komplexen Symbole verwenden . Und schließlich, wenn ich Sie zu diesen farbigen Symbolen führe, können Sie sehen, dass wir immer noch all diese Striche haben, aber jetzt haben wir Farbe und mit farbigen Symbolen werden Sie manchmal feststellen, dass sie können Sie sehen, dass wir immer noch all diese Striche haben, aber jetzt haben wir Farbe und mit farbigen Symbolen werden Sie manchmal feststellen, dass sie eine Farbe oder wie in diesem Fall verwenden sie mehrere Farben. Sie können also sehen, wir haben Grün, Rot, wir haben dieses Dunkelgrau, wir haben dieses Hellgrau und wir haben diese fast weiße Farbe. Wir haben auch diese blaugrüne Farbe, wir haben diese gelbe Farbe, rote Farbe. Je nachdem, um welches Projekt es sich handelt und was Sie mit Ihren Icons machen, wählen Sie entweder einen dieser Stile, einen der beiden, die ich Ihnen hier mit den Materialsymbolen gezeigt habe . Also wirklich einfache Stile. Oder wenn Sie wieder auf der Suche nach diesen komplexen Stilen sind, können Sie entweder Konturen oder Farben wählen. Und da ich Envato Elements seit Jahren verwende, weiß ich natürlich , dass all diese Symbole wirklich von hoher Qualität sind, sodass Sie all diese Farben anpassen können. Also möchte ich z. B. Farben meiner Marke verwenden . Nehmen wir an, Ihr Kunde hat zwei Farben, z. B. Blau und Rot. Wenn wir dann zu diesen zurückkehren, können Sie all diese Farben anpassen. Anstelle von Gelb statt Grün statt all diesen, nehmen wir an, Sie verwenden Blau und Rot. Sie können dieses Ergebnis leicht erzielen , indem Sie diese Farben einfach in dem Tool Ihrer Wahl anpassen. Für diesen Kurs verwenden wir Adobe XD. Ich werde das auch etwas später zeigen und wie Sie einige dieser Symbole an Ihre Marke anpassen können. Aber das ist die ganze Prämisse dieser farbigen Symbole. Also nochmal, je nachdem, was für ein Projekt Sie gerade tun, an welchem Projekt Sie gerade arbeiten, an Projektkomplex, was versuchen Sie , ihren Besuchern gegenüber Benutzern zu beschreiben? Ist es etwas wirklich Einfaches? Dann wirst du diese kostenlosen Materialsymbole verwenden. Was sind, Sie können sogar Premium-Symbole verwenden, die so einfach sind wie diese Materialsymbole. Oder auf der anderen Seite verwenden Sie etwas viel Komplexeres, wie diese Premium-Symbole, die ich Ihnen von Envato Elements gezeigt habe . 81. Symbolbibliotheken, Packs und Dateiformate: Je nachdem, was Sie mit Ihren Icons verwenden werden, wählen Sie entweder die Icon-Bibliothek oder das Icon-Paket. Der Unterschied besteht darin, dass es in Bibliotheken manchmal Tausende verschiedener Symbole gibt , wie die Materialsymbole, die ich Ihnen gezeigt habe. Und es ist für Sie nicht wirklich machbar die gesamte Bibliothek herunterzuladen, da diese Bibliotheken, wie gesagt, manchmal bis zu 10.000 oder 15 oder 20.000 verschiedene Symbole haben können . also wirklich schwierig , all diese Icons herunterzuladen und zu sortieren ist also wirklich schwierig , all diese Icons herunterzuladen und zu sortieren. Dann kannst du etwas namens Icon Jar verwenden, das leider nicht unter Windows funktioniert, aber es funktioniert auf Mac. Wenn Sie also einen Mac verwenden, können Sie Icon Jar ganz einfach verwenden. Navigiere dich in diesen verschiedenen Paketen zurecht. Die meisten dieser Pakete sind Premium-Pakete, sodass Sie für sie bezahlen müssen. Aber wenn Sie so etwas wie Materialsymbole verwenden können Sie damit durchkommen, sie kostenlos zu verwenden. Und wir werden etwas später in diesem Kurs auf kostenlos versus Premium eingehen. Lassen Sie mich zunächst diese verschiedenen Dateitypen und Dateiformate kurz erklären. Also, wenn ich dich direkt hierher zu Adobe X d bringe, das ist mein Chat, ein UI-Kit, und du kannst es dir holen. Der Link wird unten im PDF stehen, wenn du willst, aber das ist nicht obligatorisch. Ich zeige es dir hier nur als Beispiel. Was wir hier haben, ist ein UI-Kit, aber Sie können sich vorstellen, dass es wie ein Projekt ist, an dem Sie für Ihren Kunden arbeiten werden. Und stellen wir uns vor, dass Sie einige Icons verwenden werden. Wo findest du dann diese Icons? Web, wie ich es dir gezeigt habe. Sie finden sie online auf diesen Premium-Ressourcen und Premium-Websites wie Envato Elements. Und ich werde das in einer Sekunde öffnen, nur um es dir zu zeigen. Aber wenn ich zu XD zurückkehre, findest du dieses Plugin-Menü auch hier, und du kannst so genannte Icons für das Design verwenden, z. B. gibt es viele verschiedene Plugins da draußen, und du kannst direkt hier klicken greifen Sie auf das Plugin-Menü zu. Und dann können Sie hier einfach nach Symbolen suchen, Enter oder Return drücken. Und es wird dir all diese verschiedenen Icon-Packs zeigen . Seien Sie gewarnt, dass die meisten von ihnen kostenlose Versionen haben. Also sind nicht alle Icons kostenlos. Sie haben nur einige kostenlose Versionen und kostenlose Icons, die Sie verwenden können. Weil die meisten davon, wie ich bereits erwähnt habe, Icon-Bibliotheken sind . Sie geben dir also die Möglichkeit, ein kostenloses Symbol zu verwenden. Wenn du also eines dieser Plugins installierst, sei gewarnt, dass es dir all diese Icons zeigen wird und du denkst, dass, ja, all diese kostenlos sind, das ist großartig. Aber das sind sie eigentlich nicht. Sie bieten dir nur einige kostenlose Optionen, aber für die meisten Icons musst du bezahlen. Wenn wir also zu hier zurückkehren, wenn Sie dieses Icons für das Design-Plugin installieren, funktioniert es zum Zeitpunkt der Aufnahme dieser Klasse, aber stellen Sie sicher, dass Sie das verstehen. Es liegt nicht in meiner Fähigkeit , sicherzustellen, dass all diese Plug-ins ständig funktionieren. Denn genau wie die Software, einfach wie alles im Leben, einfach kommen und gehen. Schauen Sie sich also unbedingt diese Plugins an , wenn Sie Adobe XD verwenden, Sie sich die Benutzerstimme an und schauen Sie sich den offiziellen Adobe XD-Blog an, um zu sehen, wann sie diese Dinge aktualisieren speziell für die Icons. Denn wie gesagt, manchmal kommen und gehen diese Plugins einfach. Entwickler langweilen sich und aktualisieren sie monatelang nicht, sodass sie nicht richtig funktionieren. Und stellen Sie sicher , dass Sie verstehen, ob Sie diesen Weg mit diesen Plugins in Adobe XD einschlagen. Machen Sie sich mit, ob das Plug-In tatsächlich funktioniert. Und wenn Sie die Möglichkeit haben, diese Icons in Ihren Premium - oder Ihren kostenlosen Projekten zu verwenden , ist das wirklich wichtig, da diese Icons manchmal für vorab kostenlose Projekte verwendet werden können, aber manchmal können sie kann auch für Pre- und Premium-Projekte verwendet werden. Machen Sie sich also mit der Option vertraut , die sie Ihnen anbieten. Wenn Sie beispielsweise ein Tool wie Envato Elements verwenden, bieten sie Ihnen die Möglichkeit, diese Assets nach Belieben zu verwenden. Und wenn wir hier zu Envato Elements zurückkehren, haben Sie die Möglichkeit, all diese Elemente zu verwenden. Also von Stock-Videos, Musik, Soundeffekten, Grafikvorlagen, UI-Kits, Fotos, Webvorlagen, 3D-Modellen und Symbolen, z. B. haben Sie die Möglichkeit, sie alle zu verwenden, wie Sie möchten, wann immer Sie möchten Sie wollen in welchem Projekt auch immer Sie wollen. Aber natürlich ist es Premium, also musst du dafür bezahlen. Stellen Sie einfach sicher, dass Sie verstehen, ob Sie kostenlose Software, kostenloses Plug-In oder kostenloses Symbol verwenden . Stellen Sie sicher, dass Sie die Lizenz auf ihrer Website sehen. Oder wenn das Plugin eine Website hat, sicher, dass Sie sich damit vertraut machen, denn das Letzte, was Sie in Ihrem Leben tun und haben möchten , ist die Klage von jemand anderem, der dieses Asset erstellt hat. Du denkst nur, oh großartig, das ist alles kostenlos, aber in den meisten Fällen, allermeisten Fällen, ist es nicht kostenlos. Sie müssen zumindest für einige Plugins bezahlen, die ich Ihnen gezeigt habe und die eine kostenlose Version haben, aber sie sind nicht vollständig kostenlos. Bevor wir weitermachen, stellen Sie also noch einmal sicher, was auch immer Sie verwenden, um sich vertraut zu machen. Wenn Sie nur Material verwenden, ist das in Ordnung, da es sich um Open Source handelt, das von Google erstellt wurde, genau wie Google Fonts. Es ist kostenlos und du kannst es verwenden, wie du willst. Wenn wir also, wie gesagt, hierher zurückkehren , haben wir diese Ikone für Design. Und wenn ich hier etwas wie Herz eingegeben habe, was Sie hier sehen können, ist all dies Icon-Bibliotheken sind, also werden kostenlose Icons aus Icon-Bibliotheken abgerufen, die ich nicht mag. Das ist also sofort das Problem. Dies ist das Problem , das ich im ersten Video dieses Kurses über den ständigen Stilwechsel erwähnt habe im ersten Video dieses Kurses . Weil dies das Hauptproblem ist, das ich sehe, wenn es darum geht, Designer da draußen zu sein. Sie verstehen es einfach nicht. Sie verwenden ein Symbol aus einer Rückwärtsbibliothek, anderes Symbol aus einer anderen Packer-Bibliothek. Und sie haben einfach nicht die Konsistenz und ihr Design. Ein Look, der nicht poliert ist, kein professioneller Digest-Look für Amateure. Und das merkt man wirklich, nicht nur als Designer, sondern auch als Kunde, der selbst kein Designer ist. Stellen Sie noch einmal sicher, dass Sie diese verwenden, sicher, dass Sie sich mit ihnen vertraut machen und dass Sie sie alle im gleichen Stil und mit demselben Erscheinungsbild verwenden. Denn auch hier werden Ihre Designs nur nicht professionell und nicht poliert aussehen. Wie Sie an diesem Feder-Icon-Paket sehen können, haben wir z. B. nur ein Symbol. Aber von diesen großartigen Icons zurück haben wir mehrere Icons, aber noch einmal, nicht, nicht im selben Stil. Ich möchte z. B. die Gliederungssymbole weil sie gut zu meinem Projekt passen. Aber diesen Stil finden Sie hier nicht. Für ikonisch finden Sie verschiedene Stile. Aber was ist, wenn Sie nach einem anderen Symbol suchen und es nicht in Iconic haben? ZB. Ich möchte dieses iOS-Herz leer verwenden, z. B. lass uns liefern. Vielleicht arbeite ich an einer Lieferstelle. Sie können sehen, dass es auf dieser Rückseite kein einziges Symbol gibt. Das ist also sofort ein Problem. Wenn Sie Konsistenz erreichen und Ihre Designs professionell und ausgefeilt aussehen lassen möchten. Was Sie in diesem Fall tun können, ist, entweder eine Bibliothek zu finden , die die meisten dieser Symbole enthält , und sie kostenlos verwenden , wenn Sie gerade erst anfangen. Aber wenn Sie schon angefangen haben und eine gewisse Zugkraft haben, ich wirklich nicht genug oder einen Service empfehlen , der sich auszahlt und Ihnen all diese Symbole zur Verfügung stellt jederzeit an Ihren Fingerspitzen. Ich zeige dir jetzt das Premium-Paket. Das ist die große Konstante , die ich von, äh, es ist ein Premium-Paket bekommen habe. Aber wenn ich etwas näher heranzoome, können Sie sehen, dass all diese Symbole in diesem Stil sind. Also Gliederungsstil, es gibt keinen ausgefüllten Stil, es gibt nichts anderes. Einfach skizzierter Stil, was großartig ist, wenn Sie diesen Stil in Ihrem gesamten Projekt verwenden. Also weil das, glaube ich, tatsächlich etwa 240 oder 2.400 hat. Auf Zoom ein bisschen. Ja, ich glaube, es ist 22400, weil wir all diese verschiedenen Pakete haben und ich würde sie einfach so aufheben. Aber ich kann online stöbern und sehen, aber ich denke, es sind 2.400 verschiedene Icons. Sie können sich also einfach vorstellen, dass sie das Symbol für jeden möglichen Anlass haben . Und wenn Sie genau diesen Stil verwenden, können Sie ihn in Ihren Projekten und in Ihrem Design verwenden. Stellen Sie einfach sicher, dass Sie genau diesen Stil verwenden, um diese Konsistenz und diesen professionellen Look zu erzielen. Und das können Sie tun, weil alle diese Symbole gleich aussehen. Weil sie von demselben Team von Leuten erstellt werden. Sie können sehen, dass sie alle gleich aussehen. Sie sehen aus, als ob sie in der Spezifikation zueinander gehören , und Sie können sie einfach anpassen. Sie können die Farbe ändern, Sie können diesen Umriss ändern, mit ihnen machen, was Sie wollen. Sie können z. B. diese Farbe ändern und Sie können die Dicke des Randes ändern , wenn Sie ihn im Adobe Illustrator-Dateiformat öffnen. Und ich denke, dies ist die beste Zeit, um über Dateiformate zu sprechen. Im Grunde sind Dateiformate also sehr wichtig, je nachdem mit welchem Projekt Sie arbeiten. Wenn Sie mit JPEG-Bildern arbeiten, steht Ihnen die Transparenzoption nicht zur Verfügung. Das bedeutet im Grunde die Hintergrundfarbe Ihres JPEG-Bildes, das angezeigt wird. Sie können dieses Symbol nicht verwenden. Sie können die Farbe nicht ändern, ohne die allgemeine Locke des Bildes zu ändern. Also im Grunde ist es nur ein eingebranntes Bild. Es ist ein Bitmap-Bild. Wenn Sie also sehr nah heranzoomen , verliert es dramatisch an Qualität. Sie können es also nicht wirklich für Webseitenprojekte verwenden, für unsere Seitenprojekte, bei denen Sie Skalierbarkeit erreichen müssen. Sie können es sicherlich nicht zum Drucken verwenden, denn sobald Sie mit dem Drucken beginnen, insbesondere bei größeren Drucken, werden Sie einen Qualitätsverlust feststellen . Es gibt auch P und G, was im Grunde nur ein Bitmap-Bild wie das JPEG ist, aber mit der Transparenz. Mit JPEG haben Sie also das eingebaute Hintergrundbild und Sie haben keine Transparenz. Mit PNG haben Sie Transparenz. Aber da es sich um ein Bitmap-Bild handelt, stoßen wir immer noch auf dieses Problem des Qualitätsverlusts. Sobald Sie also mit dem Heranzoomen beginnen, werden Sie diesen Qualitätsverlust feststellen. Für so etwas wie große Drucke ist es also wirklich ein No-Go , ein PNG zu verwenden. Was Sie in diesem Fall tun können, ist, dass ich allen Ihren Projekten wirklich empfehlen kann, mit SVG-Bildern zu arbeiten. Was das im Grunde bedeutet, wenn ich zurück zu hier gehe, wenn ich dieses Icon extrem genau hineinzoome, kann man keine Pixel sehen. Also, wenn ich Sie noch einmal zurückbringe, weil ich es für dieses spezielle Beispiel heruntergeladen habe . Also, wenn ich zu Adobe XD zurückkehre, klicke genau hier auf deinem Computer, öffne BSD oder AI. Weil Adobe XD das Produkt von Adobe ist. Und weil Adobe Illustrator und Adobe Photoshop, was dieses Ding ist, im Grunde Produkte von Adobe sind. So können Sie problemlos jedes dieser Dateiformate öffnen. Und es wird die Konsistenz beibehalten wird die Qualität behalten. Denn es ist wieder einmal das Produkt derselben Firma. Wenn wir also hierher zurückkehren, öffnet sich PSD oder AI in einem Ordner mit diesen speziellen Symbolen von Envato Elements. Das sind also Reiseikonen. Und was wir hier haben, ist AI für Adobe Illustrator, EPS, was auch ein anderes Dateiformat ist das die Konsistenz beibehält. Es ist ein Vektordateiformat wie Adobe Illustrator, wie SVG. Es wird also die Qualität behalten. Leider wird EPS von Adobe XD nicht unterstützt. Alle diese Symbole sind also genau gleich, aber in diesen verschiedenen Dateiformaten haben wir unten das Icon Jar, das ich zuvor erwähnt habe. Wenn Sie also einen Mac verwenden, können Sie Icon Jar jederzeit öffnen und sie zu Ihrer Sammlung hinzufügen. Wir haben das PNG und ich bin nicht tot gegen PNG. Sie können immer noch PNG-Symbole und JPEG-Bilder verwenden, wenn Sie möchten, z. B. Beiträge in sozialen Netzwerken, da diese keine so hohe Auflösung benötigen. Sie können also immer noch mit PNG-Bildern durchkommen , wenn das das einzige ist, was Sie haben. Aber für etwas Größeres, z. B. Druck, oder vor allem für etwas, das die Leute sehr genau hineinzoomen können , wie Webseiten, Webprojekte und mobile Apps ist es wirklich empfehlenswert, gehe mit so etwas wie SVG. Wenn wir hierher zurückkehren, haben wir jetzt den SVG-Unterschied zwischen diesen und Sie werden ihn in den meisten anderen Symbolpaketen und Icontypen sehen. Wenn Sie SVG verwenden, werden diese SVG in den meisten Fällen getrennt. Und es werden separate Symbole angezeigt. Wenn wir also zu hier zurückkehren, können Sie sehen, dass wir erklärt und unerklärt haben, was im Grunde die Menge an Details ist. Wenn wir also hierher gehen, haben wir Farbe und Umrisse, wie ich es dir gezeigt habe. Und es zeigt nichts, weil Sie SVG direkt aus dem Ordner öffnen müssen , aber sie sind da. Es wird sie im Grunde als diese PNGs zeigen. Hoffentlich taucht es hier auf. Lass mich sehen, ob ich das ändern kann. Nun, weil wir das als PSD und KI geöffnet haben , aber das spielt keine Rolle. kann ich zeigen, wenn ich sie in einem Ordner wie diesem öffne oder die Farbe vergrößere. Das sind also die SVG-Symbole. Das habe ich erwähnt, werde es ihnen einzeln zeigen. Sie können diese SVG-Symbole also immer noch per Drag & Drop von hier ziehen, was ich in nur einer Sekunde zeigen werde. Aber um darauf zurückzukommen, was ich in diesen Fällen tun würde, ist künstliche Intelligenz, da KI oder Adobe Illustrator ein Vektordateiformat sind und es niemals an Qualität verlieren wird. Sie können es für jede Art von Projekt verwenden , an dem Sie gerade arbeiten. Sie können es für kleine und große Größen verwenden. Es wird immer die Konsistenz der Qualität und der Details in diesen Symbolen beibehalten. Wenn wir also zu dem zurückkehren, was wir haben, haben wir Farbe und Farbe erweitern, was in diesem speziellen Fall dieses speziellen Pakets nur die Menge an Details und den Detailreichtum ist . Aber in einigen anderen Paketen wirst du nicht sehen , dass wir Reisen und Reisen erweitern. Reisen ist also grundsätzlich ohne Farbe, bereiste Farbe ist mit Farbe. Also lasst uns z.B. Reisefarben öffnen, weil ich zeigen möchte, wie man diese Farben ändern kann. Und während sich das öffnet, lassen Sie mich das minimieren und zurückbringen. Weil ich nur zeigen will, dass du es immer noch kannst, das sind SVG. Sie können sie anklicken, ziehen und in Ihre Adobe XD-Datei ziehen. Und wenn ich ganz nah hineinzoome, sehr nah, können Sie sehen , dass wir keinen Detailverlust haben . Wir haben all diese Details in diesem Symbol enthalten. Und wenn ich zu diesem Icon Pack zurückkehre, das ich gerade geöffnet habe, kannst du sehen, wie es aussieht. Also lassen Sie mich diesen tatsächlich löschen. Ich kann wieder hierher gehen. Lassen Sie mich das kurz zeigen , damit Sie sehen können, wie es aussieht. Wenn ich es also öffne und Control Zero drücke , um es einzurasten, zoome es sehr genau hinein. Sie können also all diese verschiedenen Schatten sehen. Sie können sehen, dass die Qualität wirklich erstklassig ist. Wenn wir also zurückgehen und z. B. Ich weiß nicht auswählen , lassen Sie uns mit diesem fortfahren. Drücken Sie Strg C. Gehen Sie zurück zu hier, drücken Sie V, um es in eine beliebige Zeichenfläche einzufügen eine beliebige Zeichenfläche und Sie können sie einfach an die gewünschte Stelle verschieben. Nun, weil ich hier schon einige Farben vorbereitet habe. Wenn ich dieses Symbol an meinen Stil anpassen möchte, würde ich es einfach z.B. auswählen. Sie können die Strg-Taste gedrückt halten und hineinklicken. Und wir haben die Grenze genau hier. Wenn wir diesen Rand auswählen, können Sie sehen, dass er sich geändert und auf diese Farbe aktualisiert hat. Und zB möchte ich dasselbe mit diesem machen. Vielleicht kann ich das hier machen. Und das haben wir genau hier. So können Sie sehen und sich ein Bild davon machen, wie Sie diese an Ihr Projekt anpassen werden, z. B. wird es so hellblau sein. Und ich werde diese Farbe verwenden, um damit zu arbeiten. Und vielleicht habe ich diese Orange, vielleicht möchte ich sie genau hier für diese verwenden. Vielleicht möchte ich das nutzen, um, ich weiß nicht, auch weiß zu sein . Wir haben die Grenze, also. Lass uns mit diesem weitermachen. Und für diesen roten, lassen Sie uns mit diesem fortfahren, damit Sie sich ein Bild davon machen können , wie einfach es ist, ihn anzupassen. Und wir sind nur ein paar Klicks. Sie können diese Symbole ganz einfach an Ihren Stil anpassen . Das ist natürlich mit den farbigen Icons, sodass Sie sehen können, wie es jetzt ist. Also, wenn wir Sie dazu zurückbringen, wie es vorher war und wie es jetzt ist. Sie können also eine vollständige Veränderung sehen. Und wenn ich dich direkt hier zu den Ebenen führe, kannst du all diese Ebenen sehen. Nun, was ich dir auch zeigen möchte, ist das. Also, wenn Sie diese Symbole als Konturen verwenden. Wenn ich also zurück zu hier gehe, Farbe erweitere, wir haben umrissen und lass uns mit dem Aufzug weitermachen, der dasselbe Symbol ist. Wenn wir ganz nah heranzoomen, können Sie sehen, dass wir keine Farbe im Inneren haben. Wir haben nur diesen Überblick. Wenn ich das ändern möchte, klicke einfach hier und du kannst sehen, dass es in Echtzeit entsprechend meinen Farben aktualisiert wird und du kannst sehen, dass es in Echtzeit entsprechend meinen Farben aktualisiert , die ich benötige. Das ist also die Option, die Sie haben , wenn Sie diese Premium-Symbole verwenden. Und zum Schluss möchte ich mit Ihnen den eigentlichen Export für die Icons selbst teilen . Also manchmal exportierst du diese Icons für Entwickler, wenn sie keine Plugins verwenden, wenn sie Bridge-Optionen wie z. B. Zeplin verwenden, und sie diese nicht verwenden. Sie sind ein Tool, mit dem Sie Symbole manuell exportieren können, damit sie sie in bestimmten Fällen verwenden können. Sie können das also auch in Adobe XD tun. Und um Ihnen diese Exportoptionen zu bieten, gehen wir zurück zu hier und wählen wir das Symbol aus, und wählen wir das das ich bereits hier habe. Also ich habe diese verschiedenen Icons genau hier. Wenn ich also dieses auswähle, darauf klicke und zum Ebenenbedienfeld gehe Dort siehst du das Profilsymbol. Wenn ich also nur einen Export auswählen möchte, diesen, würde ich Strg oder Befehl E drücken Dadurch wird mir dieser Dialog angezeigt. also noch einmal daran, worüber wir vor einer Minute über diese Dateiformate gesprochen haben. Wenn ich also zurück zu diesem Punkt komme, haben wir P und G. Also, wie gesagt, PNG eignet sich hervorragend für soziale Medien und meiner Meinung nach, ehrliche Meinung, wirklich nichts anderes. Sie können hier klicken, um SVG auszuwählen, was großartig ist. Noch einmal, wenn Sie es für etwas mit hoher Qualität exportieren möchten , das Qualität erfordert. Stellen Sie also sicher, dass Sie das tun. Wir haben auch PDF. Pdf eignet sich hervorragend zum Exportieren, wenn Sie z. B. einen Styleguide mit mehreren Symbolen darin haben , wenn Sie z. B. einen Styleguide mit mehreren Symbolen darin und diesen Styleguide nur für Ihren Kunden exportieren möchten diesen Styleguide nur für Ihren Kunden , um zu überprüfen , ob er wollen. Es eignet sich hervorragend für Moodboards, z. B. damit sie das PDF ausdrucken und dann einige Notizen machen können , es vielleicht scannen und an Sie zurücksenden können. Je nach Anwendungsfall kann PDF also wirklich nützlich sein. Und schließlich haben wir das JPEG. Jpeg ist wirklich nützlich, wenn Sie es nur zur Überprüfung an Ihren Kunden senden möchten , um zu sehen , ob das Symbol wirklich das ist, was er benötigt. Wenn das Symbol etwas ist , das ihnen gefällt. Vielleicht werden Sie dieses JPEG verwenden, aber für Entwickler, für Entwicklung, für Entwicklungszwecke würde ich immer, immer, immer SVG-Symbole empfehlen. Das war's also im Grunde für Icons. Ich hoffe wirklich, Sie haben die Idee und hoffen, dass Sie sich ein Bild davon machen, wie man sie benutzt. Unterschiede zwischen Paketen, Premium-Paketen und kostenlosen Paketen. Wir werden das gleich in einem separaten Video in diesem Kurs besprechen , weil ich denke, dass es gerade für unerfahrene Designer sehr wichtig ist, was und wo man es verwendet für welche Art von Projekten. Stellen Sie nur sicher, dass Sie es lizenzgemäß verwenden. Wenn du sie also für Vorprojekte verwenden kannst und meisten Icons da draußen auch für Vorprojekte verwendet werden können, vor allem, wenn du nur für dich selbst arbeitest, nur zu Präsentationszwecken auf Behance oder Dribbeln, z. B. Schulden. Fast immer in Ordnung. Aber nur um sicherzugehen, erkundigen Sie sich beim Ersteller auf seiner Website, ob Sie über eine entsprechende Lizenz verfügen. 82. Kostenlose VS Premium: Abgesehen vom Preis besteht der Unterschied zwischen kostenlosen und Premium-Icons offensichtlich in der Vielfalt und Freude. Mit kostenlosen Icons, wie ich Ihnen im vorherigen Video gezeigt habe, haben Sie manchmal einfach eine Auswahl von zwei, vielleicht drei Symbolen, aber mit Premium-Symbolen. Angesichts der Fälle werden Sie Hunderte verschiedener Optionen zur Auswahl haben . Abhängig von Ihren Projekten funktionieren diese drei Symbole manchmal möglicherweise nicht richtig. Und was noch wichtiger ist, wenn Sie weiterhin kostenlose Icons verwenden, was am Anfang in Ordnung ist, wenn Sie gerade erst in diesem Geschäft anfangen. Aber sobald du etwas Geld hast, sobald du etwas Traktion hast, wird dir immer empfohlen, Premium-Symbole zu verwenden , da du dich dadurch von Anfängern unterscheiden wirst. Und es wird Ihren Kunden zeigen, dass es Ihnen wichtig ist, weil Ihren Designs Sie Ihren Designs diese professionelle Note verleihen und sie zwischen all diesen anderen unterscheiden Designs auf dem Markt. Wie ich bereits erwähnt habe, verwende ich sehr gerne Envato-Elemente weil Sie bei Envato Elements all diese verschiedenen Optionen haben. Und ich habe dir gerade die Spitze des Eisbergs gezeigt. Und wenn ich Ihnen zB zeige verwenden wir diese Icons und sie sind von just icon, was eine großartige Option auf Envato Elements ist. Sie können sehen, dass diese Person diese Symbole erstellt hat , und Sie können einfach hier klicken , um genau den gleichen Stil der Symbole zu finden , die wir gerade verwenden. Wenn wir also gleich hier vorgehen, können Sie sehen, dass sie über 1.000 verschiedene Vermögenswerte haben. Also wenn ich auf Grafikvorlagen klicke und hier runter scrolle. Wenn wir nun zur Grafik zurückkehren und nach unten scrollen, können Sie sehen, dass wir diese Symbole im exakt gleichen Stil haben . Wenn Ihnen also die Konsistenz gefällt, können Sie diese verschiedenen Pakete jederzeit hier auf Envato durchstöbern diese verschiedenen Pakete . Elemente von genau demselben Creator und der Mehrheit dieser Creator zerlegen diese Rudel einfach von einem riesigen, gigantischen Rücken. Nur damit es für Sie als Verbraucher viel einfacher ist, auf diese Pegs zuzugreifen. Und noch einmal, Sie müssen Envato nicht verwenden . Elemente sind wirklich so, weil sie all diese Dinge auf Envato-Elementen sind , die ich erwähnt habe , von Grafiken über Fotos bis hin zu Videos Schriften, zu Musik, zu allem, was Sie sonst noch benötigen. Aber in diesem Kurs dreht sich alles um das Symbol, also das ist es, was ich hier erwähne. Gut. Stell dir vor, dass ich z.B. benutzt habe, ich erinnere mich an so etwas wie vor zwei Jahren oder so etwas. Und ich benutze es jetzt seit über fünf Jahren. Dieses Envato Elements von dir, ich habe Icons von einem Creator verwendet. Es war nicht dieser Schöpfer, wenn dieser andere Schöpfer, aber es spielt keine Rolle. Ich habe ein Symbol für ein Hotelprojekt verwendet, das ich hatte. Und dann hatte ich ein Projekt für eine Autovermietung. Und ich verwende dasselbe Creator-Symbol von Envato Elements auch für dieses spezielle Projekt, wodurch ich viel einfacher stöbern konnte , da ich an zwei Projekten gleichzeitig gearbeitet habe. Also habe ich mir ein Creator-Icon angesehen und sie passten zu beiden Projekten. Beide Projekte, an denen ich gleichzeitig gearbeitet habe, hatten also die Icons vom selben Ersteller, aber sie sehen völlig anders weil ich auf einer Website farbige Icons verwendet habe. Auf einer Website habe ich Gliederungssymbole verwendet, aber sie waren vom selben Ersteller, sodass es für mich sehr einfach war, darauf zuzugreifen. Auch hier müssen Sie Envato Elements nicht verwenden , nur weil Sie den Service wünschen, es gibt Tausende verschiedener Dienste. Ich benutze sie sehr gerne, weil wie ich schon mehrfach erwähnt habe, mir sehr gut gefällt, dass Sie all diese Dinge hier haben , weil es kein Projekt gibt kein Projekt gibt, das nicht erfordern, dass Sie Fotos verwenden, um verschiedene Schriftarten zu verwenden. Apropos Schriften Schriften ist es genauso, mit Bildern wie mit Icons, wenn Sie Premium-Dinge verwenden. Hochwertige Icons, Schriften und Bilder sorgen dafür, dass Ihr Design wirklich ausgefeilt und professionell aussieht. Und es wird es wirklich von der Masse abheben. Und es wird hoffentlich auch für Ihre Kunden Klicks oder Bindungen oder Anmeldungen anziehen für Ihre Kunden Klicks oder Bindungen oder Anmeldungen , weil es viel ausgefeilter und professioneller aussehen wird als die Konkurrenz, weil die Mehrheit von Der Wettbewerb, insbesondere für kleinere Unternehmen da draußen, nutzt Websites wie Unsplash oder verwendet Websites wie Materialsymbole für Symbole. Und sie sehen im Grunde alle gleich aus. Alle Designer , die an diesen Websites arbeiten, sehen also genau gleich aus. Das ist also Ihr Hauptvorteil und Differenzierungspunkte stellen Sie sicher, dass Sie, sobald Sie können , diese Premium-Symbole und Premium-Dienste, Premium-Pakete, verwenden können, nur um sich zu unterscheiden Wenn Sie sich von der Masse abheben , wird Ihr Design viel professioneller und ausgefeilter aussehen. Und ganz zu schweigen davon, dass Sie keine Probleme bekommen werden denn wie ich in früheren Beispielen erwähnt habe, wenn Sie diese kostenlosen Ressourcen online verwenden, werden Sie in Schwierigkeiten geraten, wenn Sie sie nicht verwenden sie richtig. Stellen Sie also sicher, dass Sie sich immer bei der Lizenzierung erkundigen. Wenn wir also hier ganz nach unten scrollen und die Lizenz erkunden können, klicken Sie hier. Sie können also einmal eine einfache kommerzielle Lizenz sehen, sodass Sie sie für alles verwenden können, was Sie wollen. Sie können Artikel jedes Mal registrieren, wenn Sie sie verwenden. Klare Richtlinien für das, was nicht erlaubt ist. Sie können sie also nicht weiterverkaufen, Sie können sie nicht auf On-Demand-Dienste wie, ich weiß nicht, z. B. Creative Market UI anbieten. Im Grunde können Sie also nicht alles, was Sie hier finden , als Ihre eigene und zukunftssichere Lizenz verkaufen, was bedeutet, dass Sie auch später, wenn Sie sich von ihrem Service abmelden, immer noch abgedeckt sind diese Lizenz, die mir sehr gut gefällt. Ihr Kunde hat also z. B. festgestellt , dass Sie abgesichert sind und Sie immer noch Zugriff auf all diese Symbole haben . Was das im Grunde bedeutet, ist später. Wenn Sie eine dieser kostenlosen Software und kostenlosen Tools verwenden , besteht die Möglichkeit, dass es eine Schuld gibt, insbesondere bei den Plugins, die ich in einem erwähnt habe von den vorherigen Videos, dass sie sich mit diesem Projekt einfach langweilen werden. Sie werden es töten und verschwinden. Also später, z. B. ruft dich dein Kunde an, du hast an einer Website gearbeitet und du verwendest Icons aus diesem bestimmten Plug-In, z. B. aber das Plugin existiert nicht mehr, also kann keine Icons finden, die Sie zu diesem bestimmten Zeitpunkt im Projekt verwendet haben. Sie können diese Icons nicht mehr finden. Also, was kannst du tun? Du steckst im Grunde fest. Sie müssen andere Symbole finden , die nicht mit diesen Icons identisch sind. Im Gegenzug wird Ihr Design nicht so professionell, ausgefeilt und kohärent aussehen wie zuvor. Sie müssen also andere Wege finden , damit dieses Projekt funktioniert. Deshalb mag ich und was für zwei Elemente, denn wie gesagt, du kannst jederzeit zurück gehen, du kannst herunterladen, du kannst dir deine bisherigen Projekte ansehen und du kannst immer laden Sie diese Icons weiter herunter. Also noch einmal, wenn Ihr Kunde möchte, dass Sie an zukünftigen Seiten arbeiten, zukünftigen Bildschirmen für seine mobile App, zukünftigen Präsentationen, Folien, was auch immer Sie in Zukunft arbeiten, z. B. wenn sie gerade gestartet werden. Sie können jederzeit zu Envato Elements zurückkehren, immer zu dieser bestimmten Kategorie zurückkehren, zu diesem bestimmten Projekt , an dem Sie gerade arbeiten, diese Symbole nehmen und trotzdem im gleichen Stil weitermachen, indem Sie dieselben Symbole, denselben Dienst verwenden, dieselbe Lizenzierung verwenden wie zuvor, arbeiten Sie einfach weiter an diesem Projekt. Wie gesagt, das ist es, was ich an diesen Premium-Diensten wirklich mag. Und mit kostenlosen Diensten bekommen Sie es nicht. Vorbehalt hier ist mit Materialsymbolen, das verstehst du. Da es sich also um kostenlose Open-Source-Icons handelt, können Sie sie jederzeit verwenden. Aber wir alle wissen, wie Google mit seinen Produkten umgeht. Also garantiert dir niemand , dass sie nicht irgendwann Material Design-Ikonen töten werden. Was können Sie an diesem Punkt also tun? Noch einmal, ich verwende dieses Video und diesen Kurs nicht , um dich zu drängen, etwas zu kaufen. Es liegt ganz bei dir. Sie können mit Ihrer Karriere machen, was Sie wollen. Ich dränge dir nicht wirklich meine Meinung auf. Ich erzähle dir nur, wie deine Designs von jemandem gesehen und angeschaut das seit fast zwei Jahrzehnten macht. In meiner Karriere habe ich viele Designer für beide Unternehmen und für mein eigenes Unternehmen engagiert und entlassen . Und ich kann wirklich leicht erkennen , ob jemand kostenlose Ressourcen verwendet hat, insbesondere mit Symbolen, aber auch mit Schriften, mit Bildern, oder ob er Premium-Ressourcen verwendet hat. Und man kann wirklich den Unterschied zwischen polierten und Amateurdesigns erkennen. Also behalte das einfach im Hinterkopf. Noch einmal, ich dränge Sie nicht, etwas zu kaufen. Du kannst mit deiner Karriere, mit deinem Leben machen, was du willst . Also wieder kein Druck für mich. Ich sage nur, dass es viel professioneller und ausgefeilter aussieht , wenn Sie Premium-Ressourcen als kostenlose Ressourcen verwenden. 83. Tipps für beste Ergebnisse: In diesem Video gebe ich Ihnen einige Tipps, um meiner Meinung nach die besten Ergebnisse zu erzielen. Und diese werden Sie wirklich von Ihrer Konkurrenz, von anderen Designern unterscheiden . Und es wird Ihre Designs wirklich von anderen nicht professionellen Designern unterscheiden . Nummer eins ist also, ich lese hier direkt aus der Liste. Es ist viel einfacher für mich. Verwenden Sie einzigartige Symbole. Diese einzigartigen Icons habe ich hier auf Envato Elements erwähnt. Ich werde also nicht noch einmal darauf zurückkommen, sondern einzigartige Icons verwenden, weil das Sie als Designer von anderen unterscheidet und Ihr Design Ihren Kunden von der Masse abhebt. Und es wird dir wirklich helfen , eine bessere Geschichte zu erzählen. Denn wenn Sie einzigartige Symbole verwenden, hilft das Ihren Kunden wirklich dabei, sich von der Marke abzuheben , da diese Symbole wirklich viel klarer mit dieser Marke verknüpft werden . Und dadurch wird es sich viel deutlicher von der Masse abheben. Nummer zwei ist, stellen Sie sicher, dass es Sinn macht. Wenn Sie diese Symbole verwenden, stellen Sie also sicher, dass sie Sinn machen. Platzieren Sie Symbole also nicht einfach auf einer zufälligen Seite, zufälligen Stelle auf der Seite und erwarten Sie einfach, dass Ihre Benutzer es verstehen und sehen, was Sie als Designer sehen, niemand ist ein Designer , aber du selbst. Stellen Sie sicher, dass Sie wissen, dass Sie verstehen, dass Ihr Kunde kein Designer ist. Andernfalls werden sie dich nicht als Designer einstellen. Stellen Sie also sicher, dass Sie verstehen , wo Sie diese Symbole platzieren. Stellen Sie sicher, dass es Sinn macht. Achte darauf, sie nicht zu überwältigen. Stellen Sie sicher, dass Sie diese Symbole an Stellen platzieren , an denen es Sinn macht. Denken Sie also noch einmal daran, Symbole da sind, um den Text zu erleichtern. Verwenden Sie also nicht zu viele Texte, sondern verwenden Sie stattdessen ein Symbol. Oder wenn nicht genug Platz für ein Bild vorhanden ist, können Sie vielleicht das Symbol verwenden. Wenn Sie Gruppen von Symbolen verwenden, wenn Sie Reihen von Symbolen verwenden, stellen Sie sicher, dass dies Sinn macht, insbesondere wenn Sie den Prozess oder eine Geschichte erzählen. Sie dann in diesen Fällen sicher, dass Sie Symbole verwenden, aber stellen Sie erneut sicher, dass Sie sie verwenden, wenn es Sinn macht . Der nächste Schritt ist, konsistent zu sein. Also haben wir in diesem Kurs darüber gesprochen. Wenn Sie ein Symbol aus einer Bibliothek oder aus einer anderen Bibliothek verwenden, stellen Sie sicher, dass es konsistent ist. Wenn es sich also um eine Gliederung handelt, stellen Sie sicher, dass alle Ihre Symbole umrissen sind. Wenn es ausgefüllt ist, stellen Sie sicher, dass dies der Stil ist, den Sie bevorzugen. Wenn Sie farbige Symbole verwenden, wie ich es Ihnen in diesem speziellen Fall in Adobe XD gezeigt habe , achten Sie darauf, Farben zu verwenden, die gut zu dieser bestimmten Marke passen. Entferne dich nicht zu weit von diesen Farben. Rot und Grün sind in einigen Fällen in Ordnung , besonders für Warnungen, für Gefahren, für gut gemachte Arbeit für die korrekte Ausführung, solche Dinge. Sie können also eine rote und eine grüne Farbe verwenden, vielleicht auch eine blaue Farbe, wenn das die entsprechende Farbe ist. Und ich plane, später in diesem Jahr einen Farbkurs zu veranstalten. Schauen Sie also unbedingt noch einmal vorbei und sehen Sie sich das an. jedoch sicher, dass die Symbole Stellen Sie jedoch sicher, dass die Symbole aktiviert bleiben. Stellen Sie sicher, dass die Marke sicherstellt wo Sie bestimmte Farben in Ihren Symbolen verwenden können. Sei moderat, also übertreibe es nicht. An einigen Stellen kannst du Icons verwenden, aber sei nicht verrückt und verwende sie überall. Weil die Kunden einfach verwirrt sein werden. Auch wenn du moderat bist, mische, um deine Symbole zu erklären, falls das nötig ist. Wenn wir Sie also zurück zu Adobe XD bringen, lassen Sie mich Sie gleich hier zurückbringen. Also, was wir hier haben, ist diese Tab-Leiste und sie hat keinen Text darunter, aber ich kann den Text für diese Symbole einfach hinzufügen, z. B. hier, wo es heißt Vielleicht, es heißt, sagen wir Profil, vielleicht das kann Frankreich sein, das ist Tschad, das ist Setting. Verwenden Sie also die Texte, Erläuterungen, aber es macht Sinn und seien Sie einfach moderat. Wie du siehst, habe ich hier nur vier Icons. Ich habe also keine 60 verschiedenen Icons. Ich habe keine zwei Reihen von Symbolen. Ich habe vier, weil das wirklich genug ist. Und ich brauche nicht mehr als das. Ich muss nicht weniger verwenden. Es ist einfach in Ordnung. Und schließlich ist ein letzter Tipp: Viel Spaß, denn der Designprozess dient dazu, die Probleme Ihrer Kunden zu lösen, aber auch, dass Sie als Designer Spaß haben. Wenn Sie also diese neuen Icons erkunden , die Sie gerade herausgefunden haben, freuen Sie sich vielleicht sehr darauf , sie in die Projekte Ihrer Kunden zu integrieren. Stellen Sie sicher, dass Sie so viel Spaß wie möglich haben, denn das ermöglicht es Ihnen, kreativer zu sein, sich im Design selbst weiterzuentwickeln und neue Ideen auszuprobieren, mögliche Lösungen auszuprobieren, die Sie gelehrt z.B. waren vor wenigen Augenblicken nicht möglich. Es geht nur darum, Spaß zu haben. Es geht nur darum, Spaß zu haben. Stellen Sie also sicher, dass Sie diese Symbole verwenden um so viel Spaß wie möglich zu haben, und versuchen Sie , den Fonds darzustellen, den Sie nicht an der Benutzerfreundlichkeit des Designs selbst haben. Wenn Sie also z.B. einen Prozess erstellen, achten Sie darauf, diese Icons kreativ zu verwenden, aber übertreiben Sie es einfach nicht. Sei moderat. Beachten Sie unbedingt diese Tipps, die ich in diesem Video erwähnt habe. Achten Sie darauf, konsistent zu bleiben. Stellen Sie sicher, dass Sie denselben Symbolstil verwenden. Stellen Sie sicher, dass Sie so oft wie möglich dasselbe Icon-Pack verwenden und Spaß haben. Das ist es im Grunde, dass das alle Tipps für dieses Video sind. Und noch einmal, benutze einfach deinen gesunden Menschenverstand, wenn du diese Symbole verwendest. Übertreib es nicht. Achte nur darauf, den gleichen Stil zu verwenden und moderat zu sein und Spaß zu haben. 84. ABSCHNITT 10 AUFGABE: Ihre Aufgabe für diesen Abschnitt besteht nur darin, ein zufälliges Team auszuwählen. Sie können ein Team wählen, z. B. sagen wir Luxusautos. Und dann kannst du versuchen, die verschiedenen Symbole zu finden , die zu diesem Team passen. Wählen Sie vielleicht acht oder zehn verschiedene Symbole und versuchen Sie, sie miteinander zu kombinieren. Versuche, den gleichen Stil zu verwenden. Versuchen Sie, dieselbe Linienstärke zu verwenden, z. B. einen Randradius, oder verschiedene Hintergrundfarben, welche Art von Symbolstil Sie auch verwenden werden, haben versucht, genau die gleichen Größen zu verwenden und versuchen Sie Um einen gleichbleibenden Rhythmus mit Ihren Icons zu haben, z. B. wenn dieses Symbol den schwarzen Hintergrund hat, stellen Sie sicher, dass alle Symbole den schwarzen Hintergrund haben. Oder wenn die Linienstärke unterschiedlich ist, stellen Sie sicher, dass alle diese, die gleiche Dicke von Delight haben. Stellen Sie sicher, dass Sie sie organisieren und sehen, wie sie zusammen aussehen und ob sie bei den tatsächlichen Projekten gut aussehen würden? Versuche also, auf diese Weise zu üben. Wenn Sie also tatsächlich mit einem echten Projekt beginnen , wird es für Sie viel einfacher sein , zu verstehen, welche Art von Übung Sie verwenden sollten und wo wir die Symbole tatsächlich finden . das funktioniert für dich? 85. ABSCHNITT 11 Farbauswahl: Die Auswahl der richtigen Farben kann für manche Designer sehr schwierig sein , da Sie nicht möchten, dass Ihre Designs zu langweilig aussehen, aber Sie möchten auch nicht, dass sie zu verspielt aussehen. Es ist wichtig, dass Sie die Farben entsprechend Ihrem Projekt auswählen , dass Sie die Farben entsprechend Ihrem Projekt , dem Team Ihres Projekts, dem Tempo, dem Rhythmus Ihres Projekts und dem, was Ihr Projekt versucht den Benutzern vermitteln und vieles mehr. Darüber werden wir in diesem Abschnitt sprechen. So wählen Sie Farben aus, die für Ihr spezielles Projekt geeignet sind . 86. Warum Farbe wichtig ist: Neben Typografie, Rhythmus, Rastern und vielen dieser anderen Elemente ist Farbe eines der wichtigsten Elemente in jedem Design. Ohne Farbe wissen Benutzer nicht, wohin sie gehen sollen. Sie werden nicht wissen, was sie tun sollen, und werden nicht in der Lage sein, Elemente voneinander zu unterscheiden , da alle Elemente in Schwarzweiß einfach gleich aussehen würden. Lassen Sie uns in diesem Video besprechen, warum die Farbe wichtig ist und woran Sie denken sollten , wenn Sie Farben für Ihre UI-UX-Designprojekte auswählen . Es gibt den Ton Ihres Projekts an. Sprichst du also eher geschäftsorientiert zu deinen Zuschauern, dann wirst du andere Farben verwenden als wenn du auf spielerische, freundliche Weise sprichst . muss man immer nachdenken. Stellen Sie sicher, dass Sie mit Ihren Kunden sprechen tief verstehen , sie tief verstehen, ihre Branche verstehen, die Nische verstehen und daher, wenn Sie Farben für diesen bestimmten Kunden auswählen sorgt dafür, dass es den Ton angibt. Wenn der Ton geschäftlich ist, verwenden Sie den Business Stone, aber achten Sie darauf, diesen Ton in Ihrem gesamten Design zu befolgen. Es ist also nett und kohärent. Damit Ihre Benutzer immer wissen, was der Ton Ihres Designs ist , egal wo sie sich in Ihrem Design befinden, es bestimmt den Betrachtermodus. Was ich damit meine ist, wenn die Farben zu dunkel sind , werden die Zuschauer in einer bestimmten Stimmung sein. Wenn die Farben zu hell sind, werden sie in einem anderen Modus angezeigt. Wenn die Farben zu stark sind, wirken sie vielleicht stark auf ihren Augen. Sie werden unterschiedliche Stimmungen haben. Achten Sie also darauf, all das zu beachten und zu verstehen , welche Stimmung Sie für Ihre Zuschauer erzeugen möchten. Noch einmal, ist es das Verspielte? Ist es das Geschäft? Ist es das Lernen? Ist es der Fokussiermodus? Aus all diesen verschiedenen Kennzahlen muss man etwas über ihre Stimmung lernen. Wenn Sie also eine Farbe wählen, müssen Sie diese Stimmung im Hinterkopf behalten. Wenn wir also z.B. wollen, dass sie ruhig und entspannt sind, verwende ich einige Farben aus der Natur, z. B. Weiß und Grün und Braun und so etwas. Wenn ich sie auf Trab halten will, wenn ich will, dass ihre Energie steigt und sie hoch hält, dann möchte ich vielleicht einige kräftige Farben wie Rot, Dunkelblau, Grün und so etwas verwenden . Achten Sie also auf die Stimmung Ihrer Zuschauer da sie bei jedem Design äußerst wichtig ist. Es betont Aktionen. Wenn Sie beispielsweise möchten, dass sie auf eine Schaltfläche klicken, würden Sie die Farbe dieser Schaltfläche wählen, um sich von anderen abzuheben, weil Sie möchten, dass sie diese Schaltfläche betrachten und dann Maßnahmen ergreifen, also darauf klicken. Oder wenn Sie möchten, dass sie ein Formular einreichen, wenn wir möchten, dass sie Ihre E-Mail-Adresse hinterlassen, verwenden Sie Farbe, um die Bereiche hervorzuheben , auf die sie klicken oder Maßnahmen ergreifen sollen. Und je nachdem, welche Maßnahmen Sie von ihnen erwarten, je nachdem, in welcher Branche Ihr Kunde tätig ist, werden Sie natürlich Maßnahmen Sie von ihnen erwarten, je nachdem, in welcher Branche Ihr Kunde tätig ist, verschiedene Farben und verschiedene Schattierungen dieser Farben wählen und verschiedene Schattierungen dieser Farben Lenken Sie Ihre Zuschauer einfach auf die bestimmte Aktion, die Sie von ihnen erwarten. Es hilft bei der Lesbarkeit. Dies ist unglaublich wichtig, da Sehvermögen fast zwei Jahrzehnte lang wirklich beeinträchtigt ist , weil wir alle diese Geräte mit Bildschirmen haben und die Mehrheit der Menschen da draußen einige Probleme mit ihren Sehvermögen. Achten Sie also bei der Planung, insbesondere bei Absätzen, insbesondere bei Texten, darauf, Farben zu verwenden, die für die Augen Ihres Betrachters nicht beeinträchtigt werden. Was ich damit meine ist, dass sie nicht zu stark sind, aber gleichzeitig auch nicht zu schwach sind , denn wenn ihr Sehvermögen schwach ist, werden sie es nicht , sie werden es nicht lesen können. Die Farben sind zu schwach und umgekehrt, also musst du diesen glücklichen Mittelweg finden. Daher wird Ihre Lesbarkeit viel besser sein und Ihre Absprungrate wird viel niedriger sein , da sie viel länger auf der Seite bleiben und den Text lesen und die Informationen, die Sie in Ihr Design eingegeben haben. Und schließlich lenkt es die Augen des Benutzers. Ich meine damit, wenn Sie möchten, dass sie von links nach rechts schauen, können Sie Ihre Farben strategisch in diese Richtung positionieren , sodass Sie sie durch Ihr Design führen können. Sie können den Betrachter so erleben lassen, wie Sie es sich wünschen. Und wenn sie dann von links nach rechts schauen, können sie z.B. nach helleren Farben oder dunkleren Farben oder ähnlichem suchen . Sie sind derjenige, der für ihre Benutzererfahrung verantwortlich ist. daher die Benutzererfahrung in eine bessere um, indem Sie Farben verwenden und sie mithilfe von Farben durch Ihr Design navigieren Stellen Sie daher die Benutzererfahrung in eine bessere um, indem Sie Farben verwenden und sie mithilfe von Farben durch Ihr Design navigieren. Es gibt viele verschiedene Theorien und Techniken zur Auswahl der Farben, die für Ihr Design wichtig sind. Dies sind also nur einige, von denen ich im Laufe der Jahre festgestellt habe , dass sie für mich und meine Kunden besser funktionieren. Suchen Sie also unbedingt im Internet nach zusätzlichen Tipps und Tricks und einer Mischung, um zu verstehen, wenn Sie entwerfen, um all diese Dinge zu berücksichtigen. Und nur um Ihren die Verwendung von Farbe die bestmögliche Benutzererfahrung Benutzern durch die Verwendung von Farbe die bestmögliche Benutzererfahrung zu bieten. In der nächsten Lektion werden wir darüber sprechen, welche Farben es gibt. Also werde ich dich dort sehen. 87. Welche Farben gibt es: Es gibt viele verschiedene Farben, aber wenn Sie Farben für Ihr UI-UX-Design auswählen, müssen Sie grundsätzlich über drei Farben nachdenken, nämlich Hauptfarbe, Sekundärfarben und Tertiärfarbe. Die Hauptfarbe ist die Farbe, die die Gesamtfarbe Ihres Designs darstellt. Sekundärfarben werden verwendet, z. B. Schaltflächen oder für Texte, Links, Hyperlinks und ähnliches. Und Tertiärfarbe ist im Grunde die Akzentfarbe. Nun, das gilt nicht für alle Projekte. Manchmal wählst du einfach zwei Farben, z. B. und darüber werden wir etwas später in diesem Kurs sprechen . Das Wichtigste, was Sie als UX-Designer für Benutzeroberflächen beachten sollten, ist jedoch , dass Sie in den meisten Fällen keine CMYK-Farbe verwenden werden. Das bedeutet Cyan, Magenta, Gelb und Key. Der Grund dafür ist, dass diese Farben hauptsächlich für Grafikdesign und Druckarbeiten verwendet werden. Da wir Bildschirmarbeit machen, werden wir diese Farben nicht verwenden, da sie sich nicht gut auf die Bildschirmfarben übertragen lassen, die Sie verwenden werden. In den meisten Fällen handelt es sich bei Ihren UX-Designprojekten um Hex-Codes und RGB-Farben. Hex-Codes ist eine Abkürzung für Hexadezimal. Und im Grunde heißt es auf Platz 16, mach dir nicht zu viele Gedanken darüber. Es ist nur die Anzahl der Pixel innerhalb der Farbe, aber denken Sie daran, dass Hex-Farben all diese unterschiedlichen Codes haben. In den meisten Fällen werden Sie diesen Hex-Code verwenden. Und in einigen Fällen werden Sie auch RGB-Farbe verwenden. RGB steht für Rot, Grün und Blau. Und es gibt auch einige andere Farben wie HSL, das für Farbton, Sättigung und Helligkeit steht. Abhängig von den Entwicklern, je nach Projekt, je nachdem, ob der Kunde seine Farbkombinationen bereits hat und bereits für ihn erstellt wurden, werden Sie deren Farben verwenden und Farben in diesem speziellen Farbcode , den sie in ihrer Theorie erwähnt haben. Im Grunde werde ich Ihnen in diesem Video nur zeigen, wie das alles funktioniert und wie Sie diese Farben finden können. Hier sind wir auf den Apple-Websites und die meisten von Ihnen kennen Apple. Im Grunde entwickeln sie diese Technologiegeräte und Gadgets, und sie haben auch ihr Betriebssystem für ihre Mobilgeräte und Desktop-Geräte. All das spielt keine Rolle. Was zählt, ist, dass Sie mit der rechten Maustaste in Ihren Browser klicken und dieses Plugin namens Color Pick installieren können , insbesondere wenn Sie wie ich ein Google Chrome-Nutzer sind. Wenn Sie dort klicken, werden Ihnen all diese verschiedenen Farben angezeigt , die auf dieser speziellen Seite verwendet werden . Nun, das sind nicht alle Markenfarben. Es wird nicht von jeder einzelnen Seite dieser bestimmten Website Farben ziehen . Aber wenn Sie genau hier hinschauen, können Sie all diese Farben sehen. Sie können also diese rosa-lila Farbe sehen, z. B. dieser Uhr und den Texten um sie herum, Sie können diese blaue Farbe sehen. Vielleicht ist es dieser hier. Und wenn ich nach unten scrolle, können wir vielleicht diese Farbe finden. Hier ist es. Und wenn wir weiter scrollen, können Sie sehen, dass diese dunkle Farbe für den Text z. B. diese und diese ist . Wir können also leicht verstehen, welche Farbe die Marke auf dieser speziellen Seite verwendet hat? Noch einmal, ich erwähne diese spezielle Seite, denn wenn ich z. B. hier zur Mac-Seite wechsle , verwenden sie ganz andere Farben. Gehen wir also zurück zur Homepage und gehen wir zu hier. Nochmals, call it big ist völlig kostenlos. Ich werde es in einem PDF verlinken und Sie können darauf zugreifen. Sie können es einfach in Ihrem Browser installieren. Und warum das wichtig ist, ist, dass Sie einfach Farben probieren können , wie ich es Ihnen gezeigt habe. also einfach mit der rechten Maustaste auf die Farbe und wählen Sie aus den Seitenstilen. Es wird diese Farben von dieser speziellen Seite übernehmen und Ihnen dann all diese Farben hier zeigen. Was Sie sehen können, sind RGB-Werte für jede einzelne Farbe. Sie können diese Farbe entfernen, wenn Sie möchten, und Sie möchten sie hier nicht sehen. Wenn ich dann genau hier auf diese Uhr klicke, kannst du sehen, dass wir Hex-Farben haben. Wenn ich also zu Hex wechsle, kannst du sehen, wie das funktioniert. Wenn ich also zwischen RGB und Hex wechsle, kann man den Unterschied deutlich erkennen. Hex-Farben sind nun diese Farben, und das ist der Farbcode. Ich werde das etwas später in Adobe XD zeigen. Jetzt hat jedes einzelne Tool da draußen diese Hex-Codes. Wenn Sie also Photoshop, XD, Sketch, Figma verwenden, spielt das keine Rolle. Alle von ihnen haben sie, und alle haben normalerweise RGB und einige von ihnen haben auch HSL. Wenn Sie zu HSL wechseln , also Farbtonsättigung und Helligkeit, können Sie sehen, wie das aussieht. Im Grunde können Sie dies also kopieren, insbesondere mit Hex-Codes. Wählen Sie also diese Rechtsklickkopie aus oder steuern Sie C, Strg V und fügen Sie sie in ein bevorzugtes Werkzeug Ihrer Wahl ein. Und dann kannst du diese Farbe haben und mit dieser Farbe arbeiten. Dies ist besonders wichtig, wenn Sie mit Kunden zusammenarbeiten , deren Websites bereits fertiggestellt wurden. Wenn sie ihre Apps fertiggestellt haben oder so, und sie nicht wissen, welche Farben sie verwenden, dann kannst du einfach die Website aufrufen, dann kannst du einfach die Website aufrufen wie ich es dir gerade zeigen sollte, mit der rechten Maustaste eine farbige Auswahl von Seitenstile und dann können Sie einfach verstehen, welche Farben sie in ihrem Design verwendet haben. Das ist wichtig , denn wenn sie ihre Farbpalette ändern wollen , z. B. später. Oder wenn Sie eine bestimmte Farbe benötigen, können Sie diesen Ansatz verwenden, diese bestimmte Farbe kopieren und sie dann in Ihrem Design verwenden. Die andere Möglichkeit, dies zu tun, besteht darin, einen Screenshot ihres vorherigen Designs zu erstellen . Ziehen Sie es in Ihr bevorzugtes Tool Ihrer Wahl, in meinem Fall Adobe XD, und probieren Sie dann einfach diese Farbe aus Ihrem Design aus. Dies wird kein schuldengünstiger Ansatz sein da Sie einige Pixel verlieren werden , wenn Sie diese Screenshots machen. Daher werden diese Farben nur ein bisschen anders sein als wenn Sie diesen Ansatz verwenden da dies vom Seitenstil abhängt. Wenn ich es also noch einmal zurücknehme, genau hier, wenn ich mit der rechten Maustaste auf die Seite klicke und zu Inspect gehe, kannst du sehen, dass du 1d1df sehen kannst, wenn wir den Code durchgehen , wenn wir direkt hier gehen. Gehen wir also zu hier, eins d1, d1. Sie können also sofort sehen, dass es vom Seitenstil übernommen wird, sodass Farben direkt aus dem Code abgerufen werden. Da gibt es also keinen Platz für Fehler, da es direkt aus dem Code abgerufen wird. Jetzt denkst du vielleicht, ja, aber was ist mit diesen Bildern? Nehmen wir also dieses Bild auf, z. B. klicken Sie mit der rechten Maustaste auf Inspect. Hier sind wir und hier haben wir diese Farbe. Also wenn ich darauf klicke, kannst du es dir hier ansehen. Sie fragen sich vielleicht, was ist, wenn mein Kunde keine bestehenden Websites hat, auf denen Sie die Farbpalette auf der Grundlage dessen erstellen werden die Farbpalette auf der Grundlage worüber wir zuvor gesprochen haben, basierend auf dem, was wir besprechen werden zukünftige Unterrichtsstunden in dieser Klasse. Hauptsächlich aus der Nischenbranche, in der sie tätig sind, z. B. wenn sie in einem Bankensektor tätig sind, wenn sie im IT-Sektor tätig sind. Die Chancen hängen davon ab, wer die Zielgruppe ist, die Website oder das Handy App wird mit sprechen. Die Chancen stehen gut, dass sie in diesen Fällen bestimmte Farben wählen . Stellt sicher, dass Sie die Konkurrenz erkunden, sicherstellen, dass Sie sehen, was sie tun, und stellen Sie sicher, dass Ihre Farben auf die Bedürfnisse Ihres Kunden zugeschnitten sind und stellen Sie sicher, dass Ihre Farben , basierend auf der Konkurrenz, basierend auf dem Viewer-Modus, in den Sie sie versetzen möchten. Also möchte ich, dass sie etwas kaufen. Möchten Sie, dass sie den Inhalt genießen und länger bleiben? Ich will ernst sein, ich möchte verspielt sein. Aus all diesen Dingen werden Sie die Farbe bestimmen, die Sie in Ihrem Design wählen werden. Schließlich, wie gesagt, stellen Sie sicher, dass Sie Color Pick verwenden , da es wirklich ganz einfach ist. Klicken Sie einfach mit der rechten Maustaste auf eine Seite, um Ihnen all diese Farben zu zeigen. Und im Grunde kannst du diese Farbe auswählen, auf Kopieren klicken und sie in dein Design einfügen. Im nächsten Video dieser Klasse werden wir über Farbkombinationen sprechen und darüber, werden wir über Farbkombinationen sprechen warum sie wichtig sind , in welchen Farbkombinationen es gibt und wie man, ähm, welche, welche die richtige ist, auswählen kann für dich. Also werde ich dich dort sehen. 88. Farbkombinationen: Es gibt viele verschiedene Möglichkeiten, Farben für Ihre UI-UX-Designprojekte zu kombinieren . Aber in dieser Klasse und in dieser Lektion werde ich nur über vier sprechen, von denen die vier wichtigsten und die vier, die im Design am häufigsten verwendet werden, sowie über eine weitere, was irgendwie ein Bonus auf diese Lektion, die für unsere monochromen, analogen, komplementären und triadischen. Lassen Sie uns das alles untersuchen und sehen, was sie sind. Ein monochromatisches Farbschema ist das, was der Name vermuten lässt. Sie nehmen nur eine Farbe und wählen verschiedene Blätter aus dieser bestimmten Farbe aus. Sie wählen also z. B. eine blaue Farbe, die wirklich dunkel ist, dann wählen Sie verschiedene Farbtöne von dieser blauen Farbe um besser mit dieser dunkelblauen Hauptfarbe zu übereinstimmen. Daher werden Sie diese helleren Töne verwenden, z. B. für Ihre Schaltflächen oder umgekehrt, Sie können die helleren Töne für den Text oder die dunkleren Töne für die Tasten für Links und solche Sachen. Analoge Farben sind Farben, die auf dem Farbkreis nebeneinander liegen. Sie wählen drei Farben, Sie wählen drei Farben die sehr nahe beieinander liegen. Wenn Sie also ein Farbrad nehmen und dann verschiedene Farbtöne dieser Farben wählen können verschiedene Farbtöne dieser Farben , die direkt nebeneinander liegen. diese Weise können Sie Ihr Design viel kohärenter gestalten, weil es so aussieht, als ob es zueinander gehört. Ihre Elemente werden ähnliche Farben haben, eine ähnliche Betonung wie diese Farben weil Sie nicht verschiedene Farbnuancen wählen werden , sondern nur die Farben, die als nächstes kommen zueinander auf dem Farbrad. Kostenlose Farben ist das , was der Name schon sagt. Sie nehmen zwei Farben, die sich auf der völlig entgegengesetzten Skala des Farbkreises befinden. Und dann wirst du sie kombinieren. Sie können Ihre Hauptfarbe aus diesem Farbrad wählen. Und dann können Sie von Ihrer Hauptfarbe aus Ihr Farbrad so positionieren, dass Ihre komplementäre Farbe auf der komplett gegenüberliegenden Seite des Farbkreises angezeigt wird. Sie können verschiedene Farbnuancen dieser Farben verwenden, also mittlere und komplementäre Farben. Aber ich werde immer vorschlagen, dass Sie Ihre Hauptfarbe wählen. Dies ist am einfachsten , wenn Ihr Kunde bereits etwas wie ein Logo oder eine Visitenkarte oder die Farbe hat , die er mag. Und dann kannst du diese Farbe einfach in deine Farbe setzen. Wir wählen die komplementäre Farbe, und daher können Sie verschiedene Farbtöne dieser Farben wählen. Und Sie können wissen, welche Farbe die komplementäre Farbe für diese Farbe ist . Und schließlich haben wir triadische Farben. Nun, triadische Farben bestehen im Grunde nur aus drei Farben, die gleichmäßig in Ihrem Farbkreis verteilt sind. Sie können es sich also einfach als Dreieck vorstellen, und Sie können dieses Dreieck drehen, um die Hauptfarbe und die komplementären Farben auszuwählen , die sich auf der gegenüberliegenden Seite befinden und ein Dreieck bilden und Sie können dieses Dreieck drehen, um die Hauptfarbe und die komplementären Farben auszuwählen, die sich auf der gegenüberliegenden Seite befinden und ein Dreieck bilden. wähle deine Hauptfarbe, und deshalb kannst du die anderen beiden Farben wählen , die sich auf den geraden Seiten dieses Dreiecks befinden . Und der Bonus-Ansatz ist 603010. diesen Ansatz sind nun drei verschiedene Farben erforderlich , die Sie nach Belieben wählen können. Achten Sie jedoch darauf, dass Sie Ihre Hauptfarbe wählen, die 60% Ihres Designs ausmachen wird. 60 Prozent ist die Menge, in der Sie Ihre Hauptfarbe verwenden werden , 30% sind Ihre Sekundär - oder Ergänzungsfarbe, und dann sind diese zehn Prozent Ihre Akzentfarbe. Dies ist ein Ansatz, der häufig in UI, UX-Design und InDesign im Allgemeinen verwendet wird. Sie können also grundsätzlich jede dieser gerade genannten Methoden verwenden jede dieser gerade genannten Methoden , um die drei gewünschten Farben auszuwählen. Und Sie können Triade verwenden, wenn Sie möchten, nur um auf dem Rechteck zu sehen, wie diese drei Farben aussehen werden. Achten Sie jedoch darauf, diese Farben so zu formen , dass sie sich nicht gegenseitig überfordern. Wenn Ihre Hauptfarbe 60 Prozent beträgt, einfach sicher, dass Sie diese Farbe für 60% Ihres Designs verwenden , dann für 30% und dann für zehn Prozent was 100 Prozent Ihrer Farben ausmacht. Verwende keine anderen Farben. Stellen Sie nur sicher, dass Sie nur diese drei Farben verwenden, wenn Sie diesen Ansatz in dieser Methode verwenden. Dies sind also nur einige der wichtigsten Farbkombinationen. Wie ich bereits erwähnt habe, gibt es viele, viele andere Farbkombinationen, aber diese vier haben meiner Meinung Laufe der Jahre am besten für mich funktioniert. Und ich habe festgestellt, dass die meisten Designer in der Branche es verwenden. Im nächsten Video zeige ich Ihnen einige Tools, die Ihnen bei der Auswahl dieser Farben helfen werden . Also werde ich dich dort sehen. 89. Farbauswahl-Tools: In diesem Video werde ich einige Farbauswahlwerkzeuge zeigen , die ich in den letzten Jahren verwendet habe . Und ich habe festgestellt, dass die meisten davon, insbesondere Adobe, von den meisten Designern verwendet werden. Denn wenn Sie das Tool erst einmal kennengelernt haben, wenn Sie mit zwei vertraut sind, werden Sie mit ihm nicht weiterkommen und Sie werden es wieder verwenden , denn wenn es nicht kaputt ist, reparieren Sie es nicht. Wie ich in diesem Video sagte, werde ich Ihnen nur ein paar Beispiele geben. Wenn Ihnen keines davon gefällt, können Sie einfach im Internet nach dem suchen , das für Sie funktioniert. Also hier ist der erste , der Peloton heißt. Und Sie können dem Design auf der Website entnehmen, dass es wirklich ziemlich alt ist. Nun, wie das alles aussieht , können Sie hier klicken , um die einfarbige Einzelfarbe auszuwählen, über die wir gerade gesprochen haben, benachbarte Farben oder drei Farben, Sie können triadische Farben sehen. Also Dreifarbtriade, Tetraden, also für Farben. Und schließlich können Sie vier Farben frei wählen, und Sie können zwei Farben auswählen, drei Farben, wie Sie möchten. Also, wie ich im vorherigen Video erwähnt habe, werden Sie je nachdem, was Sie hier erstellen möchten, die einfarbigen Farben auswählen, z. B. oder benachbarte Farben, die komplementäre Farben sind oder so so. Also lasst uns in diesem Fall die Triade wählen. Sie können also sehen, wenn ich anfange, das zu drehen, Sie können die Farben sehen. Nehmen wir an, das ist meine Hauptfarbe. Und du kannst sehen, dass sie in diesem Dreieck gleichmäßig verteilt sind und es mir alle Blätter meiner Hauptfarbe zeigt . Und Sie können die Umschalttaste gedrückt halten , um die Farben einzeln zu verschieben. Wenn ich es also gedrückt halte und wenn ich diese Form auswähle, z.B. wenn ich diese auswähle, kannst du sehen, dass wir hier ganz andere Farben bekommen . Wenn ich es also hierher drehe, können Sie sehen, dass wir jetzt diese gleichmäßig übereinstimmende Palette haben. Jetzt können Sie zu Voreinstellungen gehen und verschiedene Voreinstellungen für diese triadische Farbe auswählen, was sehr hilfreich ist, wenn Sie nicht genug Zeit haben. Und anhand der Farben, die Sie ausgewählt haben , werden Ihnen diese Voreinstellungen angezeigt. Wenn wir also zurück zu Farben gehen, wenn du es hierher drehst, z. B. zurück zu den Voreinstellungen gehst, kannst du sehen, dass sie jetzt völlig anders sind. Sie können also diese Farben wählen, Sie können damit machen, was Sie wollen. Und wenn wir mich von hier aus verstecken, können Sie sehen, wie Tabellen exportiert werden. Wenn ich dort rechts klicke, kannst du sehen, du kannst sie als HTML, CSS, Less Sass, ACML und als Text exportieren , du kannst Farbfelder exportieren und du kannst diese Farbkombinationen für die exportieren , die wir erstellt, was ich für sehr wichtig und sehr hilfreich halte , da dieses Tool kostenlos ist. Übrigens werde ich all diese Tools, die in diesem Video erwähnt werden, im PDF verlinken . Stellen Sie also sicher, dass Sie es öffnen auf diese Links klicken, wenn Sie auf diese Websites und alle Ressourcen und Tipps zugreifen möchten und alle Ressourcen und Tipps , die in diesem Kurs erwähnt werden. Also im Grunde ist das die Pfalz für dich. Sie können randomisieren, Sie können zurücksetzen und zu den ursprünglichen Farben zurückkehren. Also genau hier, und wie gesagt, du kannst wählen, welchen Stil du willst. Als nächstes haben wir Color Hunt. Sie können also noch einmal sehen, jetzt haben wir hier einige verschiedene Auswahlen , weil diese vorausgewählt sind. Sie können also das Zufallsprinzip wählen, es werden nur zufällige Farben angezeigt. Sie können den beliebten Monat, das Jahr, alte Zeit wählen oder Sie können nach dieser wählen. Wenn ich also Pastellfarben bevorzuge, wenn das die Farben sind, die Sie für Ihr spezielles Projekt wünschen, haben Sie Retro-Vintage-Stil, hell, dunkel, besonders dunkel, ist heutzutage wichtig und beliebt und Alter, in dem wir den Dunkelmodus für das UX-Design der Benutzeroberfläche haben. Wenn Sie also für den Dunkelmodus entwerfen, Sie sich das unbedingt ansehen. Dann können Sie Hauttöne sehen, besonders für Beauty-Marken wichtig sind, z. B. wieder, wenn Sie zu der Stimmung Ihrer Zuschauer zurückkehren, wir kehren zu dieser Nische zurück. Wir gehen zurück zu diesem Kunden. Wenn Sie also all diese Punkte sammeln , wenn Sie sie verbinden, werden Sie verstehen, welche Art von Farbe und Farbkombinationen Sie für Ihr spezielles Projekt wirklich benötigen? Wenn wir also ganz nach unten scrollen, können Sie sehen, dass wir diese nicht haben. Wenn wir also zu hier zurückkehren, haben wir keine monochromatische Triade mit benachbarten Farben, aber wir haben diese. Das sind also die Modi, sind die Projekte, das sind zum Beispiel sagen wir, Branchen , in denen Ihr Kunde tätig ist. Also lass uns z. B. mit dunkel gehen und du kannst all diese sehen. Du kannst sie mögen, wenn du willst. Sie können sehen, dass es vor 13 Stunden gepostet wurde. Lass uns diesen wählen. Und wenn ich den Mauszeiger bewege, kannst du sehen, dass ich den Hex-Code direkt dort erhalte. Für jede dieser Farben. Diese Palette kann dir gefallen. Sie können es als Bild herunterladen. Und Sie haben all diese Farben hier als Hex-Codes und als RGB, was ich bereits erwähnt habe Die meisten UX-Designer verwenden Hex-Codes und in einigen Fällen RGB Farben, weil sie für Ihre Entwickler leicht in den Code zu integrieren sind. Deshalb benutzen sie sie. Und manchmal auch HSL-Farben , weil sie Prozentsätze verwenden können. Sprechen Sie also unbedingt mit Ihren Entwicklern. Wenn Sie gerade erst mit diesen Farben beginnen, stellen Sie sicher, dass Sie mit ihnen sprechen. Ist der Hex-Code für sie geeignet, oder ist RGB oder HSL, abhängig von diesen Werten und diesen, den Informationen, die Sie von Ihren Entwicklern erhalten, werden Sie wählen Ihre Farben für dieses spezielle Projekt. Also wieder einmal, Sie haben hier mehr dunkle Farbpalette für Erwachsene. Und wenn Sie der Meinung sind, dass diese Farbe nicht funktioniert, können Sie z. B. grüne Farben wählen, damit Sie mit diesen Farben herumspielen können . Als nächstes haben wir colors.com, sodass Sie mit der Generierung beginnen können. Noch einmal werde ich all diese Websites in einem PDF verlinken . Und was wir hier haben, ist diese Seife. Wir haben all diese verschiedenen Farben, die Sie erkunden können , Sie können sie ansehen, Sie können sie anpassen. Sie können bei Farbenblindheit sehen, wie es aussieht. Sie können also all diese auswählen. Und wenn wir es schließen. Sie können eine Collage erstellen und Sie können eine Palette aus einem Foto erstellen. Wenn Ihr Kunde Ihnen also das Logo oder die Farbe schickt, die ihm gefällt, können Sie das Foto hier hochladen. Es wird die Farbpalette aus dieser bestimmten Farbe generieren . Jetzt können Sie sehen, dass Sie die Namen direkt hier erhalten, was großartig ist, wenn Sie diese Namen später in Ihrem Design als Token verwenden möchten , z. B. wenn Sie Ihre Farben für Ihre Entwickler festlegen. Und dann werden sie leicht verstehen , welche Farbe Sie erwähnt haben, weil sie sie in den Code einfügen können . Also zum Beispiel dieser Holzwolf, Allah, Buster und kultiviert, sie können all diese Wörter in den Code einfügen sie in der Hauptdatenbank verbinden. Deshalb wird die Hauptdatenbank die Namen dieser Farben abrufen und sie als Website oder mobile App darstellen . Also, wie arbeitest du eigentlich damit? Nun, wir haben all diese Optionen hier, damit Sie die Farbe entfernen und Farbtöne sehen können. Nehmen wir an, ich möchte diesen benutzen. Jetzt nimm das. Sie können die Farbe als Favorit speichern. Du kannst es ziehen. Also genau hier positioniert, um das Aussehen Ihrer Farbpalette zu ändern. Sie können den Hex-Code kopieren und sperren. Sie können also eine dieser verschiedenen Farben wählen . Du kannst sie arrangieren. Also, wenn ein Medaillon, und sagen wir, ich möchte es genau hier positionieren , diese Farbe behält und es wird sich nicht ändern. Wie exportieren wir von hier aus? Du hast das. Nehmen wir an, dass mir diese Farbpalette gefällt, aber lassen Sie mich Ihnen tatsächlich solche Aussichtspunkte zeigen. Und sagen wir das, aber ich bin mir nicht wirklich sicher. Ich kann genau dort klicken. Dann genau hier. Wählen Sie das Hexadezimalsymbol oder eines davon. Lass mich zum Picker gehen und lass mich z.B. diesen dunklen Farbton hier auswählen . Ich mag es und ich kann es schließen. Und so kann ich meine Farben weiter von dieser bestimmten Farbe aus erforschen oder sie einfach so lassen, wie sie ist. Und schließlich, wenn ich es exportieren möchte, können Sie Control E verwenden oder Sie können URL kopieren, um es an Entwickler zu senden. Sie können es als PDF exportieren, was sich hervorragend als Bild eignet. Sie können die CSS-Farben erhalten, was für Ihre Entwickler erstaunlich ist. Offensichtlich. Ase, SVG, was auch großartig ist, und Sie können den Code bekommen, wenn Ihre Entwickler den Code auch wollen. Schließlich können Sie den Code für diese speziellen Farben einbetten , wenn Sie sie auf diese Weise für Ihre Kunden oder Entwickler speichern möchten . Als nächstes haben wir Adobe Color , eines der ältesten in der Branche. Aber meiner Meinung nach ist es vielleicht eines der besten, weil es in ist es vielleicht eines der besten, weil Adobe XD integriert ist. Mit Adobe-Produkten können Sie sie in einer toten Creative Cloud-Anwendung öffnen, einer toten Creative Cloud-Anwendung wenn Sie Creative Cloud-Benutzer Daher können Sie einfach auf diese Farben zugreifen und sie in der Software Ihrer Wahl öffnen. Sie können erstellen, Sie können forschen, Sie haben Trends und schließlich haben Sie Bibliotheken. In den Bibliotheken können Sie also Ihre Bibliothek erstellen und diese Bibliothek dann in Adobe XD öffnen, z. B. können Sie diese Farben einfach kopieren in Ihre XD einfügen. So einfach ist das wirklich. Wenn Sie Adobe-Benutzer sind, gibt es auch eine Photoshop-Integration, Illustrator-Integration. Unabhängig davon, welches Tool Sie aus der Adobe-Familie verwenden, Sie werden diese Integration haben. Also haben wir Extract Team, Extract Gradient Accessibility Tools, was auch großartig ist. Wenn ich also genau dort klicke, kannst du das Kontrastverhältnis sehen, du kannst die Punktzahl sehen, du kannst sehen. Sie können also Salz auf fehlerhafte 17 Punkte und weniger überprüfen. Also müssen wir diese Farbe anpassen, 18 Punkte höher bewerten und Symbole und umsetzbare Grafiken akzeptieren wenn Sie diese Farben verwenden. Was wir also im Grunde ändern müssen, ist die Farbe des Textes. In diesem speziellen Fall handelt es sich um Adobe-Fälle. Und hier auf der linken Seite haben Sie all die , die ich erwähnt habe. Derzeit ist es also auf Benutzerdefiniert, aber wenn ich zu analog wechsle und darauf klicke, kannst du sehen, dass wir nur diese eine Farbe wählen können. Wenn wir uns für monochromatisch entscheiden, können Sie sehen, wie das triadisch aussieht. Also im Grunde drei Farben. Und Sie können das Dreieck sehen, das wir erwähnt haben. Das ist also unsere Hauptfarbe, sind unsere Sekundär - und Tertiärfarben. Sie können kostenlos haben. Also auf den gegenüberliegenden Seiten dieses Farbrads, komplementär geteilt. Also im Grunde das, und Sie können dann wählen , wie nah oder fern Sie möchten. Und du kannst sie teilen, du kannst sie bewegen. Sie können diese verschiedenen Farben verschieben, um die bestmögliche Farbpalette zu erhalten . Und doppelklicken Sie kostenlos auf Split. Also im Grunde das Gleiche , aber die doppelte Farbe. Sie haben das Quadrat, das Compound und die Schatten. Je nachdem, was Sie wollen, was ich in diesem Kurs erwähnt habe, können Sie immer Benutzerdefiniert wählen und es anpassen, wie Sie es lösen möchten, z. B. ob ich kostenlos wähle und ob ich benutzerdefiniert und ich möchte diese anpassen, lassen Sie uns dieses einfach zufällig verwenden. Lass uns damit weitermachen. Sie können hier auch die Töne dieser bestimmten Farbe anpassen. Wenn ich diese Farbe auswähle, kann ich die Töne für diese bestimmte Farbe wie folgt anpassen . Ich kann all diese Dinge anpassen. Ich kann diesen Hex-Code schnell kopieren, wenn ich möchte. Und schließlich kannst du es als mein Farbteam speichern, z. B. Ich kann es benennen. Ich kenne Projekte meiner Website nicht, sagen wir mal. Und Sie können die Codes, die Sie erhalten werden, direkt dort sehen . Dies sind also die Tags, die Sie auf Barrierefreiheit überprüfen können. Noch einmal, nur um zu sehen, ob das gut genug ist. Das Team ist farbenblind und sicher, was großartig ist. Sie können es also speichern , wenn Sie möchten. Es wird in Ihren XD- oder Photoshop-Bibliotheken erscheinen . Schließlich können Sie das Team extrahieren. So können Sie die Farbe aus dem Bild extrahieren und als Farbpalette speichern. Sie können den Farbverlauf extrahieren. Also dasselbe. Noch einmal, Tools zur Barrierefreiheit, die wir bereits erwähnt haben, und wir haben ein Farbrad, was großartig ist. Wenn Sie es also verwenden , stellen Sie sicher, dass Sie es speichern Es wird in dem Tool Ihrer Wahl angezeigt. Du hast auch diese farbigen Spiele. Sie haben das Team gewechselt , sodass Sie es wählen können. Sie haben es erforscht, sodass Sie verschiedene Farbkombinationen erkunden können . Was ist im Trend, was nicht. Wenn ich also zu Trends wechsle, kannst du sehen, was mir das bringen wird. Also zum Beispiel wird es mir eine Menge Bilder geben , die im Trend liegen. Und Sie können die Farben sehen, die diesen speziellen Bildern entnommen wurden. Wenn Ihnen diese Farben gefallen, können Sie sie als JPEG herunterladen oder zur Bibliothek hinzufügen, was wieder in Ihrem XD- oder Photoshop Illustrator oder was auch immer Sie verwenden, angezeigt wird. Und schließlich die Farbauswahl, die wir bereits erwähnt haben. Wieder einmal, es ist großartig. Ich werde die Links zu allem, was ich im PDF erwähnt habe, hinterlassen . Aber ich würde dir wirklich empfehlen, die Farbe Rosa zu wählen, weil sie dir das Leben viel einfacher machen wird . Dies ist das Spotify, Sie haben also diese Farben von Spotify und natürlich können Sie auf die Website Ihrer Wahl gehen , wenn Sie die Farben von dieser bestimmten Website auswählen möchten . Und es wird dir genau hier von der Innenseite des Farbschnabels zeigen . Da haben wir's. Das sind die Farben, sind die Tools Ich hoffe wirklich, dass Sie sie nützlich finden. Ich werde Ihnen noch einmal all diese Links im PDF geben . Öffnen Sie das PDF, klicken Sie auf den Link, Sie zugreifen möchten, und stellen Sie sicher Sie mit der Erkundung dieser Farben beginnen. Schauen Sie sich diese Tools an, um herauszufinden, welches für Sie am besten geeignet ist. Und wenn Sie es einmal gefunden haben, stellen Sie sicher, dass Sie es genauer untersuchen , wie Sie es in der Adobe-Farbe gesehen haben. Stellen Sie sicher, dass Sie die Trends erkunden. Stellen Sie sicher, dass Sie Bilder hochladen , alles erkunden und einfach sehen und verstehen, wie Sie die Farben für Ihre Projekte am besten für Sie auswählen können. Im nächsten Video zeige ich Ihnen, wie Sie einen Export-Styleguide für Entwickler aus Adobe XD erstellen . Also werde ich dich dort sehen. 90. Style für Entwickler: Styleguide ist ein wirklich wichtiger Bestandteil Ihrer UX-Designs, da Sie darin alle Farben, Symbole, Bilder und all die anderen Elemente präsentieren , die Sie in Ihren UX-Designs für die Benutzeroberfläche verwendet haben . Sie werden sie Ihren Kunden und vor allem Ihren Entwicklern zeigen . Denn aus diesem Styleguide können sie wichtige Informationen wie Farben abrufen, können sie wichtige Informationen wie Farben abrufen um sie in Ihrem Code zu verwenden. Also werde ich dir ein Projekt zeigen, das ich zuvor für eine meiner Masterclasses gemacht habe . Und ich werde herausfinden, was Styleguide ist, und dir einige Tipps und Tricks zeigen. Also hier sind wir in Adobe XD, und das ist das neue Projekt zur Bank-Website. Und wie gesagt, das ist aus meiner Adobe XD-Masterclass. Ich werde es im PDF verlinken. Sie können es sich ansehen, wenn Sie interessiert sind. Und hier haben wir mit der Website-Architektur angefangen, zu Papier-Wireframes übergegangen, zu Wireframes in Adobe XD übergegangen, zum Website-Design und zum Dashboard-Design übergegangen. Und dann haben wir endlich Responsive Design und Dashboard-Responsive Design gemacht. Wir haben auch eine Projektpräsentation und schließlich einen Styleguide gemacht. Wenn wir also von Ebenen zu hier wechseln, was Document Assets ist, können Sie alle verwendeten Farben und Farbcodes sehen . Im Grunde handelt es sich also um farbige Spielsteine. Wenn Sie den Mauszeiger bewegen, können Sie sehen , dass schlichtes Weiß FFF ist. Wenn Sie den Mauszeiger hier rechts bewegen, können Sie also die RGB-Werte Opazität 100 sehen. Wenn wir ganz genau hineinzoomen, können Sie sehen, dass wir hier einen Styleguide für Projekte haben. Was ich Ihnen also empfehlen würde, ist wenn Sie diese Styleguides für diese Projekte erstellen, immer den Hex-Code anzugeben, falls dies die sind , die Entwickler benötigen, oder RGB-Codes. Wenn, noch einmal, dies diejenigen sind , die der Entwickler benötigt. Was Sie hier auch sehen können, ist dass wir schlichtes Weiß haben, das ist diese Farbe. Und ich habe auch den Hex-Code hinzugefügt, damit Entwickler diesen Hex-Code einfach auswählen können, wenn sie möchten. Und wenn Sie weiter gehen, können Sie all diese anderen Farben sehen. Was Sie tun können, ist, ihnen diese XD-Datei zu geben. Sie können das dann einfach nehmen. Also, wenn ich gleich hierher gehe, kann ich diese Farbe kopieren. Also klicken Sie mit der rechten Maustaste und kopieren Sie. Ich kann direkt hierher gehen, diese Farbe kopieren, z. B. in meinen Code-Editor eingefügt. Und deshalb kann ich es in meinem Code haben oder ich kann es von hier aus auswählen und kopieren. Oder noch besser, Sie können einfach Strg oder Command E auf Ihrer Tastatur drücken, um dies als PDF zu exportieren. Wenn Sie auf Exportieren klicken, wird es als PDF exportiert. Und wenn sie sie später öffnen, können sie einfach diesen Hex-Code aus dem PDF auswählen, kopieren und einfügen. Auch für Typografie können Sie sich die Ikonographie ansehen. Also alle Icons, die wir in diesem speziellen Projekt verwendet haben sowie alle Illustrationen und zusätzlichen Elemente, die Sie verwenden. Du kannst es direkt hier platzieren, aber du kannst es auch genau hier machen, wo ist deine Farbe? Du kannst jederzeit gegen Hintergrundschatten, Unschärfen, Opazität, Cover und all diese anderen Elemente kämpfen Hintergrundschatten, Unschärfen, Opazität, , genau hier, weil Türen auch zu einem Gelehrten beitragen, weil all diese Hintergründe Schatten und Unschärfen haben auch Farbe. Eine weitere Sache, die Sie mit diesem Ziel tun können , ist es zu teilen. Wenn ich also nur diese Art Board auswähle, gehe zu Teilen. Sie können sehen, dass es nur eine Auswahl ist. Wenn ich also die Zoomfunktion aufnehme, können Sie sehen, dass nichts anderes ausgewählt ist , weil ich gerade diesen bestimmten Flughafen ausgewählt habe. Also, aber es kann es teilen. Ich kann den Link erstellen, aber statt Design Review werde ich die Entwicklung verwenden. Ich kann einen Link erstellen. Und während der Erstellung möchte ich Ihnen hier zeigen, möchte ich Ihnen hier zeigen dass Entwickler diesen Link erhalten können. Sie können all diese Farben aus diesem speziellen Link ziehen. Und Sie können diesen Anteil auch für die Entwicklung für jede andere Zeichenfläche wählen , die Sie in Ihrem Design haben, z. B. haben wir hier ein Website-Design und wir haben viele dieser Grafikkarten, sodass Sie wählen können sie alle. Sie können sie zur Entwicklung teilen. Und deshalb werden Ihre Entwickler schuldenfarbig sein. Sie können es wählen. Wenn ich also hier für unseren Styleguide klicke, werden sie in meinem Browser geöffnet und in meinem Browser wird angezeigt, und in meinem Browser wird angezeigt wie das alles aussieht. Also, wenn ich es dir gleich hier zeige, während es eröffnet wird, damit wir Projektziele haben. Je nachdem, wie du deine Zeichenfläche benannt hast, wird sie auf diese Weise angezeigt. Also wieder einmal haben wir all diese verschiedenen Farben. Wenn ich also einen von ihnen auswähle, stelle z.B. sicher, dass dieser. Und wenn ich hier auf Code umstelle, kannst du alle Farben und alle Schattierungen meiner Farben sehen , die von hier abgerufen wurden. Wenn ich also dieses auswähle, kannst du sehen, dass es Danger read heißt und wir haben sofort CSS-Eigenschaften. Wir haben also Breite und Höhe oben links, wir haben Hintergrund, wir haben Hintergrund hier. Es ist also dieser Hex-Code und wir haben eine Opazität von 100. Im Grunde können sie von hier aus wählen, ob sie von hier aus kopieren möchten. Sie können auf diese Farbe klicken. Hier. Farbe kopiert, sortiert. Lass mich mich verstecken, nur damit du es sehen kannst. Wenn ich also diese Farbe auswähle darauf klicke, wird die Farbe kopiert, sodass sie kopiert und sie sie später in den Code einfügen können. Wir können auch zu hier wechseln. Sie können also die Wurzel für all diese Farben sehen. Also noch einmal, schlichtes Weiß, Hellgrau, Dunkelgrau, Hauptgrün, all die Farben, die ich Punktfamilien genannt habe. Wir haben also Schriftfamilien, die sich auch hervorragend für Entwickler eignen, sich alle hier in unserem Styleguide befinden. Und schließlich. Dieser Charakter hat den Stil neun. Also, wenn wir ganz nach unten scrollen, was ist dieser. Also, wenn ich genau das auswähle und zurück zum Code wechsle. Lassen Sie mich es also noch einmal auswählen. Sie können alle Bundesstaaten sehen, die ich für dieses spezielle Design erstellt habe . Wir haben also Visa, Black and White, Mastercard. Mastercard Black and White schlägt vor, all diese Logos zu ändern. Und im Grunde genommen, wenn ich hineindoppelklicke und mit dem Erscheinungsbild übergehe, wenn wir Strg wählen und klicken, können Sie einen linearen Verlauf sehen. Bei allen Farben eines linearen Farbverlaufs können Sie also die Richtung des Farbverlaufs, die Opazität und den Schlagschatten erkennen . Dies ist die, die ich zuvor erwähnt habe. Schlagschatten hat also diese Farbe und diese Werte. Im Grunde können Ihre Entwickler diese Werte also direkt von hier abrufen. Sie haben den CSS-Code wieder hier. Und wenn sie zu hören wechseln, können sie dies schließlich auswählen. Und dann können sie von hier aus alles im Root-CSS sehen . Im Grunde müssen sie diese Karte also nur hier finden und können den CSS-Code von dort kopieren. Also wenn ich zum Beispiel diesen auswähle und du den Standardstatus fast schwarz sehen kannst. Wenn ich also meine Strg-Taste gedrückt halte und hineinklicke, siehst du hellgrau. Wenn ich auswähle und hineinklicke. Sie können also diese Farbe sehen, die die Farbe seiner Haut ist. Und wenn ich hier etwas näher hineinzoome. Gehen wir also mit 100, z. B. wenn wir hineinzoomen und auf diese grüne Farbe klicken, z. B. können Sie die Farben sehen, damit sie klicken können, können sie in die Zwischenablage kopieren und im Grunde alles einfügen, was sie wollen. Schließlich können sie direkt hier auf die Kommentare klicken. Und diesen Stift können sie z.B. hier ziehen. Und du kannst etwas sagen wie Magst du diese Icons oder sollten sie schwarz-weiß sein? Wenn sie ja sagen, können Sie z. B. auf dieses Symbol klicken. Sie können zurück zum Code gehen und einen davon suchen. Also sagen wir zum Beispiel diesen. Und wir haben nur den Standardstatus dafür. Und zum Beispiel können Sie verschiedene Zustände für diese Icons erstellen. ZB haben wir Standard, wir haben Hover. Sie können also sehen, dass sich die Farbe für den Standardstatus und für den Hover ändert . Je nachdem, was Sie mit Ihren Farben gemacht haben, wird es also auf diese besondere Weise reagieren. Also Ikonographie, Farben, dasselbe, dieselbe Geschichte. Wenn sie also auswählen, erhalten sie CSS. Sie können einfach klicken, um es zu kopieren, die Zwischenablage und sie können es in ihren Code einfügen. So einfach ist es also im Grunde, mit Adobe XD mit Farben und Styleguides zu arbeiten . Und ich würde immer empfehlen, dass Sie dies als PDF exportieren , da Ihre Entwickler möglicherweise unterwegs sind. Manchmal besprechen sie dies möglicherweise mit Ihrem Kunden. Stellen Sie sicher, dass Sie ihnen den Link des Styleguides selbst schicken , sie nicht zu sehr zu verwirren, und stellen Sie sicher, dass Sie ihnen separate Links schicken. Oft entwerfen sie Wireframes, aus Papier, Wireframes, was auch immer Sie tun, denn auf diese Weise können sie all diese Farben problemlos überprüfen. Denn wenn du sie alle in einen Link einfügst, was du tun kannst, verwirrst du sie einfach. Und ich habe festgestellt, dass dieser Ansatz bei meinen Entwicklern besser funktioniert. Stellen Sie jedoch sicher, dass Sie immer zuerst mit Ihren Entwicklern sprechen , bevor Sie mit der Arbeit beginnen. Achten Sie darauf, Hex- oder RGB-Farben zu erwähnen. Achte darauf, ob sie zu einigen dieser Farben passen. Und schließlich, was ich dir nicht gezeigt habe. Wenn ich diese Farbe auswähle, kann ich z.B. gleich hier klicken. Lass mich mich verstecken. Sie können also sehen, dass wir in XD Volltonfarbe, linearen Farbverlauf, radialen Farbverlauf und Winkelverlauf haben , linearen Farbverlauf, radialen , wir haben Adipositas für die Farbe, wir haben verschiedene Farbtöne, genau hier haben wir die Opazität für den Alpha-Kanal für die Farbe selbst. Und schließlich haben wir Hex, RGB, HSB. Je nachdem, was Ihre Kunden und Entwickler wollen, können Sie es hier auswählen. Also im Grunde ist es das. Aus diesem Grund sind diese Styleguides für Projekte wirklich wichtig, da Sie an einem einzigen Ort all diese Elemente haben , die Sie in Ihrem Design verwendet haben. Wenn Sie an Ihren Projekten arbeiten, stellen Sie sicher, dass Sie diese Styleguides immer parallel zu Ihrer Arbeit erstellen Styleguides immer parallel zu , da es später viel einfacher sein wird , sie für Ihre Entwickler zu exportieren um einen Blick darauf zu werfen. Also im Grunde ist es das. Ich denke, Sie haben gesehen wie wichtig Styleguides für Entwickler sind. Sie sind nicht so wichtig für Sie, aber sie könnten wichtig für die anderen Designer sein , die möglicherweise nach Ihnen an diesem speziellen Design arbeiten. Denn in den meisten Fällen Sie möglicherweise nicht daran interessiert, an diesem speziellen Projekt weiterzuarbeiten. Vielleicht werden einige andere Designer in Ihre Fußstapfen treten und weiter an diesem Projekt arbeiten. Mit so etwas wie einem Styleguide wird es für diesen Designer immer viel einfacher sein , dort weiterzumachen , wo Sie aufgehört haben, im gleichen Stil. Und natürlich wird es für Entwickler viel einfacher sein, mit Styleguide zu arbeiten, da sie an einem einzigen Ort alle Informationen haben, die sie benötigen, um dieses Projekt aufzurufen. 91. ABSCHNITT 11 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, eines dieser Tools zu verwenden , die ich in diesem Abschnitt des Kurses erwähnt habe . Und um zu versuchen, Ihre Lieblingsfarben für ein Projekt auszuwählen. Versuchen Sie, imaginäres Projekt zu verwenden, wenn Sie in dieser Klasse bisher dasselbe imaginäre Projekt verwendet haben . Achten Sie darauf, auch die Farbauswahl dafür zu verwenden. Stellen Sie sicher, dass Sie eines dieser Tools verwenden. Versuche zu verstehen, welche Farben besser funktionieren würden und welche nicht, und versuche herauszufinden, ob diese Farben, sagen wir, visuell beeinträchtigend sind . Wenn Sie eines dieser Online-Tools verwenden, haben einige von ihnen dieses tatsächlich. Sie werden dir sagen, ob diese Farben vergehen werden oder nicht. Daher ist es sehr wichtig , diese Tools für farbbehinderte Menschen und für sehbehinderte Menschen zu verwenden für farbbehinderte Menschen und für , die tatsächlich Schwierigkeiten haben diese leuchtenden Farben zu lesen. Also wie gesagt, erkunden Sie, haben Sie Spaß und sehen Sie, welche Farben für Sie besser geeignet sind. Versuchen Sie, eines dieser Tools zu sehen und wählen Sie aus , welches für Ihren Prozess am besten geeignet ist. 92. ABSCHNITT 12 Bilder: Neben der Topographie sind Bilder ein entscheidendes Element, das in Ihrem Design eine Geschichte erzählt. also wissen, wie Sie ein Paar verschiedener Bilder auswählen , wird sich Ihr Design von der Masse abheben. In diesem Abschnitt werden wir über kostenlose und kostenpflichtige Bilder sprechen . So wählen Sie Bildsets aus, wie Sie das richtige Tempo für Ihre Bilder und das richtige Team wählen, abhängig von Ihrem Projekt und vieles mehr. Also lass uns anfangen. 93. Warum sind Bilder wichtig: Du weißt, was sie sagen, dieses Bild sagt 1.000 Worte. Nun, bei Gemälden ist es dieselbe Geschichte wie im Design, insbesondere im Grafikdesign, aber dasselbe kann im Webdesign und App-Design gesagt werden . Die Auswahl der richtigen Bilder kann also wirklich bestimmen , wie schnell die Zuschauer Ihr Projekt betrachten, unabhängig davon, ob es sich um ein App-Projekt oder ein Website-Designprojekt handelt. Es kann auch den Ton bestimmen , in dem Sie mit Ihren Besuchern sprechen. Das kann also entweder ernst oder lustig, verspielt sein. Es kann auch bestimmen , wie schnell sich Ihre Zuschauer Ihr Projekt ansehen können. Das bedeutet also, dass ich kleinere Bilder verwenden werde , größere Bilder verwenden werde. Werden Sie das Vollbildbild verwenden, sind Bilder in voller Breite und vieles mehr. Sie werden auch bestimmen , wie verspielt oder seriös unsere Website ist. Und sie werden auch die Farben bestimmen, die Sie verwenden werden. Es ist dein Design, denn der Ton deiner Bilder wird das wirklich bestimmen. Denn wenn du z. B. wirklich dunkle Bilder verwendest , dann wirst du einige Farben verwenden, die sich viel besser von diesen dunklen Bildern abheben. Oder wenn du wirklich helle und luftige Bilder verwendest, dann wirst du das kontrastieren, aber etwas viel Dunkleres verwenden, z. B. entweder ein dunkles Schwarz oder Dunkelgrau oder Dunkelgrün oder etwas Ähnliches. Bilder sind also wirklich der Schlüsselfaktor bei der Erstellung Ihrer Designs, und die Auswahl der richtigen Bilder für Ihre Designs wird Ihr Design beeinflussen oder unterbrechen. 94. 3 Arten von project: Wenn es um Projektbilder geht, gibt es wirklich drei Haupttypen. Nummer eins sind Bilder, die vom Fotografen aufgenommen wurden. sind also Bilder , die Ihr Kunde bereits von unserem Premium-Fotografen gemacht hat, der diese Bilder in Sets aufgenommen und wirklich die ganze Geschichte für Ihren Kunden kreiert hat, und diese Bilder dann liefert. zu Ihrem Kunden. Und dann wird Ihr Kunde Ihnen diese Bilder liefern und Sie wiederum werden sie in Ihren Designs verwenden. Zwei sind kostenlose Bilder. Das sind also die Bilder, die Sie normalerweise auf Websites wie Unsplash oder Pixabay finden werden. Und diese Bilder hier sind wirklich ein großer Fehler und diese Vielfalt. Das bedeutet also, dass Sie ein großartiges Bild von einem großartigen Fotografen finden können , und das ist im Grunde alles. Sie können also kein anderes Bild finden, z. B. ein Modell in einer anderen Pose oder einen Sonnenuntergang aus einem anderen Blickwinkel oder auch eine Stadtstraße aus einem anderen Blickwinkel. Sie können die also nicht finden. Und normalerweise haben diese Bilder wirklich keine so gute Qualität. Normalerweise gibt es so etwas wie 1920 x 1080 HD oder zumindest bis k groß. Endlich Nummer drei, unsere Premium-Sets. Nun, dies sind die Websites , die Sie online finden können. Normalerweise verwende ich gerne Envato Elements und ihre eigene Website 2020, was bedeutet, dass sie über 50 Millionen Bilder zur Auswahl haben . Und das bedeutet, dass diese Premium-Fotografen Szenen erstellen. Stellen Sie sich also vor, Sie werden z. B. im Büro gesehen und dann stellen sie die Szene dar. Sie richten das Büro ein. Sie zahlen für die Modelle und nehmen Hunderte verschiedener Bilder aus allen möglichen Blickwinkeln auf, wobei verschiedene Modelle unterschiedliche Dinge tun. Und der Hauptvorteil dieser Bilder ist, dass sie alle in einer kontrollierten Umgebung von einem einzigen Fotografen unter einer einzigen Lichtquelle mit denselben Modellen aufgenommen werden, mit demselben Team im selben Raum. Du verstehst also die Idee. Diese Bilder können problemlos in Ihren Projekten verwendet werden. Und wenn Sie z. B. die Breite geringfügig ändern müssen, z. B. Helligkeit, dann können Sie das in so etwas wie Adobe Lightroom tun . Und dann können Sie all die Bilder aufnehmen , die Sie für Ihr Projekt heruntergeladen haben. Du kannst einen einzelnen Tweet machen, z. B. zur Helligkeit oder zur Opazität, zur Vignettierung oder was auch immer du mit dem ersten Bild machst. Und wenn Sie dieselbe Änderung auf alle Ihre Bilder anwenden möchten , z. B. haben Sie das Set von 50 verschiedenen Bildern heruntergeladen, dann können Sie diese erste Änderung einfach auf das erste Bild anwenden und dann Wenden Sie es auf viele Ihrer anderen Bilder aus derselben Sammlung Sie können diese Änderungen einfach synchronisieren. Und zum Beispiel wird Adobe Lightroom diese Änderungen anwenden. Sie müssen Lightroom nicht verwenden. Ich benutze es sehr gerne, weil ich ein Adobe-Benutzer bin. Ich verwende Adobe XD oder Adobe Photoshop. Ich verwende Premier und natürlich Lightroom für alle meine Bilder. Und mir hat diese Funktion sehr gut gefallen, aber sie ist nicht nur in Lightroom. Sie können es in anderen Tools und Softwares finden. Stellen Sie also sicher , dass Sie danach suchen, aber das wird Ihnen eine Menge Zeit sparen. Egal, ob Sie Client-Images verwenden, vielleicht müssen Sie hier und da ein paar Dinge anpassen. Denn normalerweise machen diese Fotografen fantastische Bilder, aber vielleicht, wenn Sie Websites erstellen , die für unseren etwas dunkleren Ton entworfen sind, dann werden Sie einige von diese Änderungen zusätzlich zu diesen Bildern. Normalerweise lassen Fotografen diese Bilder gerne ziemlich reihenweise stehen. Deshalb werden die Designer diese Änderungen wiederum vornehmen. Also z. B. Sättigung, Helligkeit, Kontrast und so etwas wie Schulden zu diesen Bildern. Noch einmal, wenn Sie kostenlose Bilder verwenden, sind Todesfälle großartig, insbesondere für Kunden mit geringem Budget, da es ihnen egal ist, wie ihr Blog aussieht. Wenn Sie jedoch mit Kunden zusammenarbeiten , die über angemessene Budgets verfügen, können Sie diese Premium-Bildersätze problemlos von Websites wie Envato Elements, z. B. und mir in Ihre Arbeit integrieren von Websites wie Envato Elements, z. B. und mir in Ihre Arbeit Ich würde es wirklich empfehlen, da Sie Millionen dieser verschiedenen Bilder finden können. Und im Gegenzug werden sie Ihre Arbeit viel professioneller und ausgefeilter aussehen lassen , als wenn Sie nur diese drei Bilder verwenden würden. 95. Wie man niche auswählt: Es gibt viele verschiedene Möglichkeiten, Nischenbilder auszuwählen, aber ich werde Ihnen Nischenbilder auszuwählen, nur einige Tipps und Techniken geben einige Tipps und Techniken wie ich das mache und wie ich es in den letzten fast 20 Jahren gemacht habe . Je nachdem, in welcher Nische Sie arbeiten, gibt es also einen bestimmten Ton. Wenn Sie also z. B. eine Website für Herrenanzüge erstellen , besteht eine gute Chance, dass eine hochwertig aussehende Website handelt. Und sie versuchen, einen Ton von Professionalität, klarem Design und einem bestimmten Lebensstil zu vermitteln, den diese Anzüge vermitteln werden. Also natürlich wirst du nicht so etwas wie ein leuchtendes Gelb oder ein leuchtendes Rot oder etwas Ähnliches verwenden . Sie werden mit Sicherheit diese hellgrauen Farben verwenden , die dunkelgrau sind, möglicherweise einen Hauch von Blau, vielleicht sogar Gold, möglicherweise einen Hauch von Blau, vielleicht sogar Gold, an wenigen Stellen, wenn Sie gegen die schwarze Farbe arbeiten. So können Sie sich von anderen abheben , natürlich weiße Farben. Achten Sie also bei der Auswahl Ihrer Bilder darauf, diese Dinge zu berücksichtigen, denn Sie werden Ihre Modelle nicht vor diesem gelben Hintergrund und vor dem Hintergrund auswählen Ihre Modelle nicht vor diesem gelben Hintergrund und vor dem Hintergrund was das Aussehen deines Anzugs ruinieren wird. Offensichtlich wirst du dich auf den Ton einstellen. Das bedeutet also, dass Sie nach Modellen suchen werden, die sich in diesen Positionen befinden, z. B. auf ordnungsgemäß belichteten weißen Hintergründen weil es für Sie viel einfacher sein wird , diese zu integrieren Bilder in deine Arbeit. Auch Modelle auf schwarzem Hintergrund weil Sie so etwas wie eine Adipositas auf dem Bildschirm verwenden und dann diesen schwarzen Hintergrund gegenüber Ihrem Design reduzieren können . So können Sie Ihr Modell ganz einfach aus Ihrem Hintergrund extrahieren und problemlos an Ihr Design anpassen. Das ist also offensichtlich nur eines der Beispiele. Stellen Sie sicher, dass Sie den Ton angeben und sehen Sie , in welchem Ton Ihre Nische ist. Deshalb werden Sie nach Bildern suchen, die in dieser Nische und in diesem Ton sind, was wirklich wichtig ist da sich Ihre Besucher viel leichter ausrichten wenn sie sehen Dinge , die sie verstehen, eher die Dinge, die sie nicht sehen. wir also zum Beispiel zurück zu diesem Anzug-Beispiel. Stell dir vor, du bist dieser Gentleman auf der Suche nach einem Anzug für deine Hochzeit, z.B. für die Hochzeit deines Freundes oder so, dann suchst du wirklich Highclass, etwas wirklich Gehoben, etwas wirklich Teures, weil du an diesem Tag auftauchen willst und gut aussehen willst. Dann besuchst du diese Website, die alle schreienden Farben und alles rot, grün, blau ist. Es gibt dir nicht dieses Gefühl. Es gibt Ihnen nicht den Überblick über die Website, auf der diese teuren Anzüge verkauft werden. Also wird sich etwas nicht richtig anfühlen. Manche Dinge, die richtig aussehen werden. Vielleicht wirst du auf den ersten Blick nicht zu viel darüber nachdenken. Aber wenn Sie anfangen zu surfen, werden Sie offensichtlich feststellen, dass hier etwas nicht gut ist. Es wird Ihnen nicht das Selbstvertrauen geben , diesen Anzug zu kaufen, weil es Ihnen nicht die Atmosphäre gibt, die Sie normalerweise von der Anzug-Website erwarten. Dann gehen Sie auf die Website der Konkurrenz, die all diese Dinge enthält, über die wir für dieses spezielle Beispiel gesprochen haben über die wir für dieses spezielle Beispiel gesprochen Sie werden sich dort viel wohler fühlen. Sie werden sich mit Ihrer Kaufentscheidung viel wohler fühlen und Sie werden sich sozusagen viel wohler fühlen, weil Ihre Erwartungen eher von dieser Website erfüllt werden als diese vorherige Website mit all diesen grünen Farben. Deshalb ist es bei der Auswahl von Bildern wirklich wichtig, darauf zu achten, dass Sie Nischenbilder wählen, damit sich Ihr Publikum leicht identifizieren kann. Daher wird Ihre Website im Gegenzug viel besser mit Ihren Benutzern und mobilen Apps in Verbindung gebracht werden , da Ihre Benutzer diese Hinweise, diese Bilder, erkennen werden , diese Farben, diese Stile, weil sie an sie gewöhnt sind. Versuche also nicht zu viel zu experimentieren und lass dich von deinen Bildern leiten. Achten Sie darauf, dass Sie sich an das halten, was Sie wissen und achten Sie darauf, dass Sie sich an das halten, was funktioniert, was das Wichtigste ist. schließlich sicher, dass sich Ihre Nutzer wohl fühlen , wenn sie Ihre Website oder Ihre mobile App besuchen . Denn im Gegenzug wird das zu mehr Konversionen führen. 96. Kostenlose VS Premium: In diesem Video zeige ich Ihnen einige Hauptunterschiede, wenn Sie selbst nach Bildern suchen. Dies sind also die Beispiele, wenn Ihr Kunde keine Bilder hat. Sie müssen also nach Bildern für dieses bestimmte Projekt suchen . Und ich werde Ihnen einige wichtige Unterschiede zwischen kostenlosen und Premium-Bildern zeigen und darauf, worauf Sie achten sollten, wenn Sie nach Bildern suchen. Also hier haben wir unsere Website namens unsplash.com, was normalerweise das ist, was diese Designer heutzutage verwenden. Und es gibt auch pixabay.com und viele dieser anderen Websites. Aber normalerweise sind Unsplash und Pixabay die Websites, nach denen normalerweise gesucht wird. Also, wenn wir einen Anzug eintippen, z. B. wie ich es dir in den vorherigen Beispielen gezeigt habe. Und wie wir im vorherigen Video besprochen haben, werde ich Ihnen nur die Unterschiede zwischen kostenlosen und Premium-Websites zeigen und vergleichen . Also, wie gesagt, wir haben hier einen Anzug und ich werde diesen Text kopieren und ich werde zu dieser Website kommen , die in volatilen Elementen enthalten ist , eine Premium-Website. Und ich füge es einfach hier ein. Suchen Sie nach den Fotos, aber Sie können all diese verschiedenen Dinge durchsuchen. Also Stock-Video, Videovorlagen, Musik, Soundeffekte, Grafikvorlagen wie Druckvorlagen und UI, UX Kids, Grafikpräsentationen passieren, Fotos, Schriften, Add-Ons, Webvorlagen, 3D und vieles, vieles mehr. Also haben wir Anzüge eingegeben und sie haben auch diese Website namens 2020 mit 50 Millionen zusätzlichen Bildern. Ja, das sind 50 Millionen zusätzliche Bilder. Und all die Bilder, die wirklich von hoher Qualität sind wurden von all diesen unabhängigen Fotografen hochgeladen. Also, wenn wir auf diese Website gehen, die 2020 Stock and Tippsuit ist , genau hier. Wir haben also auf all diesen Websites genau dieselbe Suchanfrage . Und was wir hier auf Unsplash haben, ist, wenn wir schweben, haben wir dieses Jägerrennen. Wir haben einen anderen Fotografen, einen anderen Fotografen, einen anderen Fotografen. sind also alles unterschiedliche Fotografen. Also lass uns weitermachen, mal sehen, das ist Benjamin Roscoe auch so. Schauen wir uns also ihr Profil an. Wie Sie sehen können, machen sie Bilder von Skylines, Bars und umgekehrten Details. Genau hier haben wir einige Bilder von dieser Person in einem Anzug. Aber das ist es im Grunde. Sie können sehen, dass wir nur drei oder vier verschiedene Bilder haben. Und wieder einmal, diese Balkenbilder ganz unten. Noch einmal, wenn ich auf dieses Bild klicke, z. B. was ich hier habe, ist, dass ich auf Lesen Sie mehr klicken kann, um all diese verschiedenen Details zu sehen. Und ich kann die Informationen eingeben. Wir können sehen, dass es sich bei der Kamera um Sony handelt, ISO 400, und dies sind die Abmessungen. Diese sind in dieser Phase also eigentlich ziemlich gut. Und Sie können sehen, wie viele Downloads und Verwendungszwecke dieses Bild hatte. Aber wenn wir zurückgehen und auf dieses Bild klicken, z. B. dann geht es zur Info. Sie können sehen, dass es fünf K Aber wieder einmal haben wir das gleiche Problem. Wenn ich also auf dieses Profil klicke, kannst du z.B. sehen, dass wir diese vielen verschiedenen Bilder haben, aber es gibt nur ein Bild von einem Anzug. Stellen wir uns also vor , Sie möchten diese spezielle Anzugfarbe verwenden, z. B. und Sie möchten sie in dieser Umgebung verwenden. Also sagen wir mal, drinnen gegen diese Treppe und so. Du kannst dir also einfach vorstellen , dass dein Model drinnen fotografiert wird , z.B. sagen wir im Einkaufszentrum, bei einem Einkaufsbummel oder so. Du musst also Bilder dieser Art finden. Nun, das ist nur ein Bild und du steckst im Grunde fest. Sie haben keine anderen Optionen. Also, wenn wir zurückgehen und uns all diese anderen Bilder von einem Anzug ansehen . Wie Sie sehen, gibt es nicht viel mehr. Vielleicht gibt es diesen, aber darin ist ein Weihnachtsbaum. Es wird also nicht bei all Ihren Gelegenheiten funktionieren. Und wie Sie sehen, gibt es hier nicht viele Optionen für Ihr spezielles Projekt. Wir können also auf einige dieser Websites gehen und etwas finden, das für uns funktioniert. Nehmen wir an, dies ist das Einkaufszentrum und dies ist das Geschäft innerhalb des Einkaufszentrums. Lassen Sie uns das also in einem neuen Tab öffnen. Lassen Sie uns schnell feststellen, dass dies z. B. eine Größe von acht K ist und Sie können diese Informationen weiter lesen. Du kannst mehr darüber erfahren. Und wir können sehen, dass es vier sind, eine Schneiderwerkstatt erfordert. Aber wenn ich hier scrolle, können Sie sehen, dass alles aus derselben Serie stammt. Sie können also dasselbe Modell, denselben Hintergrund, dieselbe Beleuchtung, denselben Fotografen sehen . Sie können sich also über Bilder informieren, ist Fotograf. Also alle, und das Tolle daran ist, wenn ich auf „Mehr anzeigen“ klicke und in einem neuen Tab öffne, kannst du sehen, wie viele dieser verschiedenen Bilder wir haben. So können Sie aus all diesen Bildern eindeutig eine Geschichte erstellen . Sie können also auf Ihrer Seite beginnen, indem Sie z. B. Ihren Benutzer in Ihrem Shop begrüßen ihm dann erklären. Qualität deiner Anzüge und wie sie hergestellt werden, wie lange es dauert bis jede Person einen bestimmten Knopf gesehen hat, z. B. und solche Sachen. Sie können die Details mit diesen Bildern also wirklich vergrößern , da sie eine Acht-K-Qualität haben und sie wirklich riesig sind. Sie können ihnen dann sagen, wie Passform funktionieren wird, wenn sie den Anzug ausprobieren, wie sie sich dabei fühlen, wann die Materialien für den Anzug bezogen werden und vieles mehr. können Sie also mit diesen Premium-Bildern tun. Sie können wirklich eine Geschichte erzählen anstatt nur ein einzelnes Bild zu zeigen. Dadurch wird Ihre Website viel professioneller und ausgefeilter aussehen . Denn wieder einmal können Sie Ihren Betrachter in dieses Erlebnis eintauchen lassen , da Sie all diese verschiedenen Bilder aus demselben Set haben . Schauen wir sie uns also noch einmal an. Sie können sehen, dass sie Kaffee trinken. Wir haben Ausrüstung genau hier. Wir testen das Material. Wir haben Ausrüstung genau hier. Wir haben uns z. B. darauf geeinigt, dass wir verschiedene Materialien haben. Wir wissen, wie die Krawatte passen wird. Sie können also an nur einem Beispiel deutlich erkennen, ein Kredit dafür passt, wie viele dieser verschiedenen Bilder wir haben. Sie können sich also vorstellen, wie diese Details vergrößern und wie viel Sie mit all diesen verschiedenen Bildern tatsächlich tun können mit all diesen verschiedenen Bildern tatsächlich tun , anstatt nur mit einem einzigen Bild. Schließlich können wir hier dasselbe tun. Wenn ich also „verklagt“ tippe und es öffne, haben Sie diese verschiedenen Sammlungen. Und innerhalb dieser Sammlungen. Wenn ich sie also öffne, kannst du verschiedene Fotografen finden. Also z.B. gefällt mir dieser Anzug sehr gut. Vielleicht kann ich reingehen und danach suchen, oder vielleicht kann ich mir das sogar ansehen. Das sind also die Sammlungen. Sie können diese Sammlungen dieser verschiedenen Fotografen öffnen und dann weitere Bilder erkunden. Also hier haben wir dieses Bild und dieses Modell. Wenn ich also hier klicke und ihre Sammlungen öffne, haben wir diese verschiedenen Fotos, wir haben verschiedene Lieben, wir haben all diese verschiedenen Dinge genau hier. So können wir alle Bilder dieses Fotografen erkunden und sehen . Sie können deutlich sehen, dass wir eine Menge dieser verschiedenen Bilder haben. Aber noch einmal, wenn Sie keine Lust auf 2020 und all diese verschiedenen Bilder haben, können Sie jederzeit zu Envato Elements zurückkehren da diese beiden Teil derselben Sammlung sind. Wenn Sie also dieses Abonnement für Envato Elements erhalten, bei dem es sich um ein Jahresabonnement handelt, ist dies enthalten. Wenn Sie hier also kein Bild finden, dann können Sie es vielleicht 2020 ausprobieren. Sie können sehen, dass es von Envato heißt. Das sind also nur einige verschiedene Vergleiche zwischen kostenlosen und kostenpflichtigen Bildern. Stellen Sie nur sicher, dass Sie nicht professionell mit kostenlosen Bildern arbeiten können. Aufgrund dieser Einschränkungen, die ich gerade erwähnt habe, müssen Sie professionelle Ressourcen wie Bilder verwenden. von z. B. Envato Elements. Sie müssen keine Envato-Elemente verwenden. Es gibt eine Menge verschiedener Websites da draußen. Aber weil ich dir gezeigt habe, was in deinem Abonnement enthalten ist , haben sie mir sehr gut gefallen und ich verwende sie jeden Tag für meine Projekte. Im Gegenzug werden Ihre Projekte viel ausgefeilter und professioneller aussehen. Und wenn Sie versuchen, Ihrem Kunden Ihr Design zu verkaufen , z. B. wenn Sie versuchen, ihm eine Designidee oder eine Designänderung, ein komplettes Redesign oder etwas Ähnliches zu präsentieren eine Designidee oder eine Designänderung, . Mit diesen professionellen und ausgefeilten Bildern wird es viel einfacher sein, als einfach verschiedene Bilder von verschiedenen Fotografen mit unterschiedlichen Belichtungen zu schlagen verschiedene Bilder von verschiedenen , mit verschiedene Modelle auf einer Seite und dann versuchen, ihnen Schulden zu verkaufen. 97. Bildoptimierung: Ein weiterer wichtiger Teil beim Erstellen von Projekten mit diesen Bildern, insbesondere diesen riesigen Bildern, ist die Bildoptimierung. Das bedeutet, dass eine Software Ihrer Wahl die Größe des Bildes reduziert, was wiederum viel schneller auf den Server hochgeladen wird , z. B. das wiederum Ihre Website viel schneller lädt ihm ein besseres Google-Ranking zu geben, was eine bessere Suchmaschinenoptimierung bedeutet. Im Grunde ist diese SEO-Optimierung also äußerst wichtig, insbesondere bei Website-Designprojekten, bei mobilen Designprojekten ist auch sehr wichtig, besonders wenn Sie aus derselben Datenbank. Die Optimierung Ihrer Bilder wird Ihren Benutzern also ein viel besseres Erlebnis bieten , ohne Qualität dieser Originalbilder zu verlieren. Wenn ich Sie also noch einmal hier zu Envato Elements zurückbringe , können Sie z.B. dieses Bild sehen , das wir uns zuvor angesehen haben. Wie Sie sehen können, fast acht K groß. Wenn ich also auf Herunterladen klicke, werden all diese verschiedenen Klassenprojekte aufgerufen. Also werde ich es z. B. Imageprojekte nennen. Für unser Image-Projekt zum Beispiel und ich kann dieses Projekt einfach erstellen. Was das bei Envato Elements bedeutet, ist, dass ich all diese verschiedenen Elemente zu diesem speziellen Projekt hinzufügen kann . Sie können sich also einfach vorstellen, dass ich all diese verschiedenen Bilder verwenden werde . Ich werde verschiedene Icons verwenden, vielleicht sogar ein WordPress-Theme. Vielleicht brauche ich etwas Musik aus meinen Videos. All diese verschiedenen Elemente, die Sie von Envato Elements heruntergeladen haben , können Sie einfach in dieses Projekt einfügen, das wir gerade erstellt haben. Das bedeutet, dass es für Ihre Kunden viel einfacher sein wird für Ihre Kunden viel einfacher all diese Artikel zu lizenzieren , falls so etwas erforderlich ist. So können Sie z. B. ein Abonnement für eine unbegrenzte Anzahl von Kunden verwenden , und jeder Kunde kann seine eigenen Projekte haben. Das bedeutet, dass die Lizenzierung so einfach sein kann , wie einfach eine Lizenz zu kopieren und sie dann an Ihre Kunden zu senden. Sie wiederum werden diese Lizenz enthalten und sie werden sie behalten. Sie müssen diese Lizenzen also nicht jedes Jahr aktualisieren. Im Grunde genommen, sobald Sie dafür bezahlt haben, sobald Sie es heruntergeladen haben, das war's. So können Sie ganz einfach all diese verschiedenen Elemente, einschließlich Bilder, auf Envato Elements für Ihre Projekte lizenzieren all diese verschiedenen Elemente, einschließlich Bilder, . Wenn wir also zu hier zurückkehren, kann ich einfach auf unser Image-Projekt klicken , um dieses Projekt zu erstellen. Dann kann ich einfach hinzufügen und herunterladen. Und es wird gleich hier mit dem Herunterladen beginnen. Jetzt können Sie sehen, dass dieses Bild ziemlich groß ist. Es ist tatsächlich fast 18 MB groß. Sobald es heruntergeladen ist, ist es jetzt an der Zeit, unsere Bilder zu optimieren. Nun, Bildoptimierung ist nichts wirklich Neues. Es wird seit Jahrzehnten von Entwicklern und seit einigen Jahrzehnten auch von Designern gemacht . Im Grunde genommen wird es einfach die Anzahl der Pixel in Ihrem Bild reduzieren . Es wird die Größe Ihres Bildes enthalten. Es wird Schärfe enthalten, es wird Qualität enthalten. Aber im Gegenzug erhalten Sie eine viel kleinere Dateigröße, da all diese verschiedenen Kameras einfach die Dateigröße hinzufügen, insbesondere je nach dem Objektiv Sie in der Kameramodell, das Sie verwenden. Um Sie nicht mit zu vielen Details zu langweilen, werde ich Ihnen das in der Praxis zeigen. Da ich also Windows verwende, verwende ich etwas namens Riot. Und wenn Sie einen Mac verwenden, können Sie das sogenannte Image Optimum of a Loop verwenden, die PDF-Datei, und Sie können einfach auf den Link klicken, um die Datei herunterzuladen, die Sie neu benötigen. Und es gibt viele verschiedene Tools für beide Betriebssysteme, sowohl Windows als auch Mac. Es liegt also wirklich an Ihnen, zu entscheiden, für welches Sie sich entscheiden möchten. Ich entscheide, oder? Und ich benutze es jetzt seit Jahren und es hat gut für mich funktioniert. Also wenn ich dich zurücknehme, kannst du einfach sehen, wie das Rechte aussieht. Und da ist es. Es ist wirklich ein einfaches Tool und ich möchte wirklich , dass Sie leicht lernen können zu benutzen und im Grunde, was es tut. Es hat diese beiden Fenster und wenn ich mein Bild per Drag & Drop hineinziehe, ist dies das Bild , das wir ausgewählt haben. Sie können sehen, dass Sie Bilder öffnen Bilder stapelweise importieren können, was wiederum sehr wichtig ist, insbesondere wenn Sie mit diesen Sammlungen arbeiten. Also keine Zeit zu verlieren. Stell dir vor, du hast z.B. 50 verschiedene Bilder , die du herunterlädst. Und das ist der großartige Weg, z. B. von Envato Elements. Sie verwenden vielleicht nicht einmal alle diese Bilder, aber es ist großartig, weil sie da sind. Sie können sie einfach alle auswählen, alle herunterladen und in dieselbe Sammlung aufnehmen. Optimiere sie nun alle mit richtig, also verwende ich hier einfach ein Bild. Und was ich tun werde, ist es anzuklicken und hierher zu ziehen. Sobald es geladen ist, wird es mich dazu auffordern. Diese Datei enthält also ein hochauflösendes Bild, oder? Kann mit solchen Bildern umgehen, aber die Verarbeitung kann in dieser Situation ziemlich langsam sein. Sie wollen die Größe zuerst ändern. Es wird empfohlen, das Originalbild nicht zu ändern. Beachten Sie also einfach, was passieren wird, wenn ich auf Ja klicke. Es wird uns diese Originalgröße geben. Also wird es auf eine neue Größe skalieren , 100 mal 100. Behalten Sie also das Seitenverhältnis bei. Dies ist in Prozent angegeben, da Sie genau hier sehen und es auf bestimmte Pixel reduzieren können. Ich würde Ihnen jedoch empfehlen, diesen Prozentsatz gleich zu belassen. Dann wird es einfach gedacht, war es im Grunde auf 100 Prozent gesunken? Das bedeutet, wenn ich auf Okay klicke, kannst du das erste Bild hier sehen. Also 17,5 MB groß und das neue Bild ist 3,4 MB groß. Jetzt wird es viel langsamer geladen. Wenn ich also genau hier klicke und den Mauszeiger bewege, siehst du 17,5 MB. Und das ist das Bild genau hier. Aber wenn ich es optimiere, wird es 3.4 sein. Also, wenn ich auf Speichern klicke, alles klar, hier, wir wollen es ersetzen. Ich möchte eintippen, ja. Und es wird dieses Bild im Grunde ersetzen. Also wenn ich jetzt klicke und den Mauszeiger auf 17,5 MB bewege, lass mich es schnell aktualisieren. Und Sie können sehen, dass es 3,4 MB sind. Also haben wir im Grunde mit 17,5 MB angefangen. Wir sind jetzt bei 3,4 mb. Und was am wichtigsten ist, wenn ich hier den Mauszeiger bewege, siehst du 7952 mit 5304. Und wenn wir Sie hierher zurückbringen, können Sie sehen, dass dies genau die gleichen Abmessungen wie sie mit dem Originalbild funktionieren. Es reduziert nur die Größe des Bildes insgesamt. Was das für Sie bedeutet, im Grunde wird es Ihren Entwicklern viel mehr Spielraum geben , weil Sie diese Dateigrößen reduzieren, Sie können noch weiter gehen. Ich verwende z. B. täglich Adobe XD, um all meine Projekte zu entwerfen. Sie können sich also einfach vorstellen , dass ich dieses Acht-K-Bild in etwas einbauen werde , das beispielsweise 1920 mal 1080 ist . Und dann exportiere ich es von XD in dieser bestimmten Auflösung. Also 1920 mal 1080, was den Platzbedarf noch weiter reduzieren wird. N wird die Größe dieses Bildes noch weiter reduzieren. Du könntest sagen, warum benutzt du es nicht einfach sofort so? Nun, weil Sie all diese riesigen Bilder in die Software Ihrer Wahl übernehmen. In meinem Fall wird Adobe XD massiv hinterherhinken , weil es sich um riesige Dateien handelt. Wie Sie gesehen haben, ist nur dieses spezielle Bild 17,5 MB groß. Die meisten meiner Dateien sind etwa 20 MB groß. Sie können sich also vorstellen, dass die gesamte Designdatei 20 MB groß ist und dieses einzige Bild 17,5 MB groß ist. Denken Sie also einfach an diese Dinge, wenn Sie erstellen, insbesondere für das Web, da Sie versuchen , Google dazu zu bringen, diese Website zu optimieren. Sie versuchen, so viele Menschen wie möglich auf diese Website aufmerksam zu machen . Daher ist es wirklich wichtig dass Sie diese Bilder optimieren. Und wenn Sie mit mobilen Designprojekten arbeiten, ist dies ebenfalls wichtig. Denn dann werden das Betriebssystem und die App selbst nicht all diese riesigen Bilder aus der Datenbank abrufen diese riesigen Bilder aus der Datenbank sondern nur ein einzelnes Bild abrufen , das ziemlich klein ist. Und es wird immer noch diese enorme Qualität enthalten , die es ursprünglich hatte. Als der Fotograf das Bild gemacht hat. 98. Struktur benennen: Genau wie bei der Optimierung Ihrer Bilder ist es sehr wichtig, dass Sie Ihre Bilder richtig benennen , da sie ordnungsgemäß angezeigt werden auf Ihrer Website oder in Ihrer mobilen App ordnungsgemäß angezeigt werden. Es wird für Ihre Entwickler viel einfacher sein , diese Bilder zu finden sie in den Code aufzunehmen. Und es wird für Code viel einfacher sein , diese Bilder aus Datenbanken abzurufen. Lassen Sie mich Ihnen auf dem Bild, das wir gerade heruntergeladen haben, zeigen, was ich meine . Wenn wir uns dieses Bild ansehen, habe ich es im selben Projekt erneut heruntergeladen , damit Sie den Namen bis zum Jahr sehen können, Dash PA zu VBC und C4 oder was auch immer. Das heißt, das verkleinerte Bild. Wie Sie noch einmal sehen können, 17,5 MB Salz Originalgröße, und Sie können den Titel hier sehen. Und wenn ich deinen hier rechts nehme, kannst du sehen, dass wir einen solchen Namen haben. Was können wir also mit diesem Bild machen, weil es die Software unserer Wahl aufgenommen wird. In meinem Fall Adobe XD. In Ihrem Fall könnte es Sketch, Figma sein , Photoshop Illustrator spielt keine Rolle. Was Sie also mit diesem Bild machen können ist, dass Sie mit der rechten Maustaste darauf klicken und es so umbenennen können. Auf diese Weise merkt es sich diesen Namen, wenn Sie es per Drag & Drop in die Software Ihrer Wahl ziehen. Und wenn du es dann exportierst, wird es so exportiert. Die andere Sache, die Sie tun können, ist, zu etwas wie Lightroom zu gehen , zu etwas wie Lightroom zu und Sie können Metadaten dieses bestimmten Bildes bearbeiten, wodurch Sie viel mehr Details darüber erhalten , wann dieses Bild wurde mit welcher Kamera aufgenommen, mit welchem Objektiv man belichtet und so weiter. Dies könnte also von Ihnen verlangt werden, wenn Sie an einem Grafikdesign-Projekt arbeiten, z. B. für Editorials und ähnliches, besonders wenn das Bild auf riesigen Leinwänden gedruckt wird . Einige große High-End-Kunden werden also all diese Informationen für Mu benötigen. Stellen Sie also sicher, dass Sie verstehen , dass, egal an welcher Art von Projekt Sie arbeiten, einige Anforderungen von Ihnen gestellt werden, aber für die meisten dieser Web- und App-Design-Projekte einfach deine Datei umbenennen wird gut genug sein. Wenn ich dich also noch einmal hier zu unserem Bild zurückbringe , kannst du dir einfach vorstellen, dass dieses Bild z. B. in deiner Heldenabteilung zu finden sein wird. Was Sie tun können, ist mit der rechten Maustaste auf Rename zu klicken und es einfach Hero, IMG, zu nennen. Oder wenn Sie ein Entwickler Bindestriche hinzufügen möchten, fügen Sie Hero, Dash, IMG oder Underscore wie folgt hinzu. Also hier unterstreichen Sie IMG. Das hängt also wirklich von Entwickler zu Entwickler ab. Wenn Sie also mit Ihrem Design beginnen Zugriff darauf haben, die Kontaktinformationen Ihrer Entwickler, fragen Sie Kontaktinformationen Ihrer Entwickler, sie vielleicht einfach danach, oder fragen Sie einfach Ihre Kunden damit sie Ihren Entwickler fragen können. Dies wiederum wird für Sie viel schneller sein , wenn Sie mit der Erstellung beginnen, sodass Sie all diese Bilder und Assets, z. B. Symbole und Illustrationen, umbenennen können all diese Bilder und Assets, z. B. Symbole und Illustrationen, umbenennen , bevor Sie mit der Arbeit beginnen dann später, wenn du anfängst zu arbeiten. Und dann müssen Sie all diese Dateien umbenennen sobald Sie sie tatsächlich in die Software Ihrer Wahl aufgenommen haben. Ich weiß, dass es in Adobe XD wirklich ein großes Problem ist, wenn man Bilder wie bei diesem Namen bis zum Fehler 58 einfügt, was auch immer. Und wenn du dann versuchst, sie auf deinen Desktop zu exportieren und du sie an unsere Entwickler schicken möchtest, dann musst du sie alle manuell in deinem Exportordner umbenennen , z. B. und vor allem, wenn du teilst mit so etwas wie Sapling z.B. mit deinen Entwicklern, dann musst du sie in Sapling umbenennen. Es ist also wirklich ein Trubel. Wenn Sie alle Ihre Bilder oder zumindest einige Ihrer Bilder im Voraus umbenennen können . Denn auf diese Weise wird es für Sie viel einfacher sein , es zu entwerfen. Und stellen Sie außerdem sicher, dass Sie Ihre Entwickler fragen welche Art von Abkürzung sie mögen? Auch, wenn du z.B. dieses Heldenbild verwendest und dir einfach vorstellst, dass es vielleicht um uns geht, wenn ich dich hierher mitnehme . Das wird das erste Produkt sein, das wird der erste Blog-Bereich sein. Das wird ein Zeugnis oder was auch immer sein. Stellen Sie sicher, dass Sie alle Ihre Bilder korrekt umbenennen. Wenn Ihr Testimonial also beispielsweise vier Bilder enthält, fragen Sie Ihren Entwickler nach Abkürzungen. Also zB Testimonial Dash ein Testimonial-Strich, zwei Strich, drei Strich vier und was auch immer oder Unterstrich oder ohne Bindestriche, Unterstriche und so weiter. Also nur ein Zeugnis für alle zusammen. Stellt sicher, dass Sie sie fragen, ob die Feststelltaste aktiviert ist. Aber die Mehrheit der Entwickler nicht. Die meisten Entwickler, zumindest die ich kenne, verwenden gerne Bilder mit Kleinbuchstaben und Zahlen, damit sie nicht möchten, dass sie in Großbuchstaben geschrieben sind. Schau z.B. sind nur ein paar Tipps und Techniken. Ich teile es gerne mit Ihnen weil ich denke, dass es Ihre Zeit für diese Projekte erheblich verbessern wird und die Qualität Ihrer Lieferung an Ihre Kunden erheblich verbessern wird. 99. ABSCHNITT 12 AUFGABE: Ihre Aufgabe für diesen Abschnitt besteht lediglich darin, ein anderes Projekt auszuwählen , an dem Sie arbeiten möchten. Wenn Sie während des gesamten Projekts ein und dasselbe Team verwendet haben, können Sie dieses verwenden und sicherstellen, dass Sie fünf verschiedene Bilder auswählen , die für das jeweilige Projekt am besten geeignet sind , und versuchen Sie, es zu optimieren sie verwenden einige Tools, die ich in diesem Kurs erwähnt habe. Und habe gerade versucht herauszufinden , welche Auswirkungen das haben wird, wenn Sie tatsächlich mit Ihrem Design beginnen. 100. ABSCHNITT 13 Moodboards: Moodboards sind eine tolle Möglichkeit, dich in Stimmung zu bringen, daher der Name der Mood-Wörter sowieso, und sie sind unglaublich einfach zu erstellen. In diesem modernen Designwerkzeug , das früher ein echtes Geschäft war, wird Castle sein. In der Zeit, als wir Websites und Apps z. B. mit Photoshop erstellt haben, es jetzt mit diesen modernen Designtools einfacher denn je, ist es jetzt mit diesen modernen Designtools einfacher denn je, Moodboards zu erstellen. Und sie sind unglaublich nützlich, um Sie in Stimmung zu bringen, Sie zu inspirieren und um ein bisschen besser zu verstehen, ein bisschen besser zu verstehen was Ihr Kunde tatsächlich von diesem Projekt benötigt, welche Farben sollten Sie verwenden, welche Art von Bildern solltest du verwenden? Und nur um dich für dieses Projekt zu inspirieren. Also lass uns anfangen. 101. Was sind Moodboards und warum werden sie verwendet?: Moodboards sind wirklich extrem wichtig und meiner Meinung nach der wichtigste Teil jedes Designprozesses, egal ob das Projekt groß oder klein ist, denn in der Moodboard-Phase können Sie wirklich Kommunizieren Sie klar mit Ihren Kunden und kommen Sie zu dem Punkt, was sie benötigen. Mit wem sprechen sie? Wie groß ist das Projekt, wie groß ist das Publikum, wer ist das Publikum und all diese verschiedenen Fragen. Und Sie können das Moodboard verwenden, um die gesamte Projektrichtung zu bestimmen, in welche Richtung das Design gehen soll. Sie können dies tun, bevor Sie mit dem Entwerfen beginnen, was Ihnen viel Zeit spart, da Sie den Stil festlegen, das Projekt zahlt, die Farben, die Schriften, die Ikonographie und vieles mehr mehr in dieser speziellen Phase mit Moodboards als später, wenn Sie Ihre bevorzugte Designsoftware tatsächlich starten und mit dem Entwerfen beginnen, können Sie diese Werte Ihren Kunden klar und deutlich vermitteln. Beschreiben Sie dann Ihrem Kunden, was für dieses spezielle Projekt wirklich wichtig ist . So können sie verstehen , worauf sie sich konzentrieren müssen, bevor Sie mit dem Entwerfen beginnen ? Wie gesagt, diese Phase ist meiner Meinung nach sehr wichtig weil sie Ihnen und Ihrem Kunden später viel Zeit sparen wird . Denn in dieser speziellen Phase werden Sie festlegen, wohin sich der gesamte Projektstil entwickeln wird. Natürlich wird das Design später, wenn Sie mit dem Entwerfen beginnen , stark variieren . Aber der Gesamtton des Projekts mit den Farben, Schriften, der Designrichtung, alles wird in dieser speziellen Phase mit den Moodboards bestimmt. Später können Sie mit dem Entwerfen beginnen. Sie können all diese Arten von verschiedenen Elementen hinzufügen. Aber vorerst konzentrieren wir uns, wie gesagt, auf die Grundlagen und die wichtigsten Dinge. Sie werden Ihr Design-Briefing verwenden, um all diese Designelemente und Designentscheidungen zu bestimmen . Sie werden Ihrem Kunden all diese Designfragen anhand Ihres Design-Briefings stellen, z. B. wer seine Zielgruppe ist, was ist seine Nische? Gibt es Konkurrenten in dieser Nische? Wer sind die wichtigsten Wettbewerber? Wer sind die kleineren Wettbewerber? Was ist der allgemeine Ton des Designs? Also macht es Spaß oder ist es verspielt? Ist es ernst? Ist es ein Unternehmen? Wie ist der allgemeine Ton bei der Lieferung der Kopie der Website? Und vieles mehr. Also, wie gesagt, Sie werden all diese Elemente in der Moodboard-Phase und nicht später in der Designphase festlegen der Moodboard-Phase , wodurch Sie, wie gesagt, eine Menge sparen können Zeit für Design, sowohl für Sie als auch für Ihren Kunden. In der nächsten Lektion werden wir besprechen, welche Elemente Sie für Ihre Moodboards berücksichtigen sollten. Also werde ich dich dort sehen. 102. Welche Elemente zu berücksichtigen sind: Abhängig von der Nische in der sich Ihr Projekt befindet und in der sich Ihr Kunde befindet, werden Sie verschiedene Elemente einbeziehen oder erwägen, sie einzubeziehen. Wenn Ihr Stil also Corporate ist, werden Sie natürlich Unternehmensbilder verwenden. Sie werden eine klare Schrift verwenden, um zu lesen , weil Sie wissen müssen, wer Ihre Zielgruppe ist. Das sind also keine Kinder, wahrscheinlich sind das Menschen mittleren Alters oder ältere Menschen. Sie müssen also die Topographie berücksichtigen, Sie müssen den Kontrast berücksichtigen, wie einfacher die Website zu lesen ist. All diese Dinge müssen Sie also berücksichtigen , wenn Sie Ihre Nische und Ihr Projekt planen. Außerdem spielen Bilder eine wirklich wichtige Rolle, da Bilder den Ton angeben das Tempo des Projekts bestimmen werden. Sie müssen also berücksichtigen , dass Farben auch ein wichtiges Merkmal Ihres Website-Designs bei jedem Design sind. Man muss also Farben berücksichtigen. Sind die Farben lustig und verspielt, wie wird der Text zwischen diesen Farben kontrastieren? All diese Dinge können Sie also im Moodboard-Prozess, also im gesamten Designprozess, festlegen diese Dinge können Sie also im Moodboard-Prozess, . Sie werden also all diese Elemente beschreiben und entdecken, wenn Sie mit der Erstellung Ihrer Moodboards beginnen, nicht erst, wenn Sie mit der Erstellung Ihres Designs beginnen. Im nächsten Video zeige ich Ihnen, wie Sie Ihre Recherche durchführen, wie Sie sich z. B. auf verschiedene Nischen einstellen, verschiedene Elemente erkunden und sie Ihrem Kunden präsentieren können, sodass beide wenn Sie sich darauf einigen können , wohin dieses Projekt gehen wird und wie gehen wird und der mündliche Designstil und die Richtung aussehen. 103. Wie du deine Recherche durchführst: In diesem Video beginnen wir tatsächlich mit der Recherche. Und ich werde Ihnen einige Websites zeigen , auf denen Sie recherchieren und mit Ihrem Kunden klar darüber kommunizieren können, welche Elemente zu berücksichtigen sind , auf denen Sie recherchieren und mit Ihrem Kunden klar darüber kommunizieren können und mit Ihrem Kunden klar darüber kommunizieren . Also lass mich in meinen Computer springen und ich werde dir einige Websites zeigen. Die ersten Websites, die wir haben, sind also tatsächlich Dribble. Dribble wird, wie Sie wissen, wie oft für diese Designer zur Inspiration verwendet , insbesondere in der Welt des UI-Designs. Du kannst also direkt hier ganz einfach Dribble verwenden , um all diese Elemente zu erkunden. Sie können es also verwenden , um Bilder zu erkunden. Sie können es verwenden, um die Topographie zu erkunden und zu sehen wie die Topographie an einigen dieser Beispiele festgelegt ist. Wenn wir also direkt hier eine schnelle Suche durchführen, z. B. wenn ich Corporate eintippe, drücken Sie die Eingabetaste und sehen Sie, wohin uns das führt. Also lass uns mit dem Webdesign gehen, z. B. es gibt uns nichts. Verwenden wir also z. B. Bank oder Banking. Und mal sehen , wohin uns das führt. Sie können also gleich hier für das Banking sehen, es gibt keine schreienden Farben außer diesen Farbverläufen genau hier. Dies soll jedoch den Gesamtton der Website selbst bestimmen. Wahrscheinlich spricht diese Mobile-Banking-App hier ein anderes Publikum an. Also wahrscheinlich jüngeres Publikum. Aber du kannst hier sehen, dass sie wirklich all diese Rückenfarben verwenden. Sie verwenden diese schwarzen Farben, weiße Farben. Sie verwenden diese hellgrünen Fäden, z. B. Farbe spielt also wahrscheinlich eine wichtige Rolle und Sie können Ihre Recherchen direkt hier auf Dribble durchführen, um sie je nach Projekt zu erkunden Projekt zu erkunden und das Projekt, an dem Sie gerade arbeiten, welche Arten von Farben sollten Sie für Ihr spezielles Designprojekt verwenden . Wenn wir uns als Nächstes die Topographie ansehen, können Sie sehen, dass die Topographie hier wirklich klar ist. Es war wirklich gleichmäßig verteilt. Der Abstand ist hier also wirklich sehr gut gemacht. Und Sie können sehen, dass der Großteil dieses Textes schwarz ist, was wiederum den Text dem Betrachter näher bringt und zwischenzeitlich leichter lesbar macht. Also dieses Beispiel ist wirklich großartig. Und wenn wir andersherum gehen, können wir das in diesem Beispiel sehen, weil es mit all diesen Illustrationen und Farben spielerisch ist . Auch hier spielen Texte eine wichtige Rolle, weil sie sehr einfach zu lesen sind, wie Sie hier sehen können. Wenn wir Sie zu Behance bringen , einer weiteren Website, die Sie Inspiration verwenden können. Wenn wir gleich hier nachschauen und z. B. dasselbe eingeben. Also Bank Center, sieh, wohin es uns führt. Also lass uns, lass uns diesen benutzen und wir können sehen, dass er sich von Dribble unterscheidet , falls du es nicht schon wusstest. Denn auf Dribble kannst du wirklich kürzere Präsentationen wie diese posten , also z.B. nur das eine einzelne Bild. Wenn Sie auf Beacons sind, können Sie diese langen Präsentationen wirklich posten und eingehend mit dem Projekt befassen. Und dies kann wirklich eine großartige Möglichkeit für Sie sein, sich über die Konkurrenz Ihrer Kunden zu informieren, z. B. sagen wir, dass sie im Bankbereich tätig sind. Sie können dies z. B. nur verwenden , um zu verstehen, wie sie recherchieren, was ihre Zielgruppe ist, was sind ihre Farben und was ist der Grund für die Wahl dieser Farben? So können Sie das problemlos an Ihr spezielles Projekt anpassen. Wenn wir hier nach unten scrollen, um zu unserer Designphase zu gelangen, kannst du sehen, dass sie diese Rückenfarben wirklich verwenden. Also schwarz-weiß mit einem Hauch von Blau. Und das ist wirklich Corporate Design vom Feinsten. Sie können große Texte sehen, also super einfach zu lesen. Sie können Logos sehen, Sie können diesen Farbverlauf dahinter sehen. All diese Elemente fallen mir in diesem speziellen Beispiel wirklich als etwas auf, das greifbar, leicht zu lesen , leicht zu verstehen leicht zu reinigen ist. Und Sie können sehen, wie sich die Topographie vor einem weißen Hintergrund abhebt, wie sie sich von diesen Markierungen abhebt, z. B. Hochhäuser genau hier oben. Diese großen Titel. Es ist also super einfach zu lesen. Wenn wir uns die Bilder ansehen und das ist der Knaller, das ist Shopify seine eigene Website. Und ich werde Links zu allem, worüber ich im PDF spreche, hinterlassen . Sie können das PDF herunterladen und einfach auf diese Links klicken , um auf all diese Dateien zuzugreifen , die ich erwähnt habe. Und dies sind wirklich hochauflösende kostenlose Bilder, sowohl für den persönlichen als auch für den kommerziellen Gebrauch kostenlos verwendet werden können. Sie können hier also wirklich einige großartige Bilder finden, y2q hier dient in erster Linie dazu, Bilder zu erklären. Also erzählen z.B. dieses Bild und dieses Bild von dieses Bild und dieses Bild von Anfang an eine völlig unterschiedliche Geschichte, obwohl der Ton wirklich ziemlich ähnlich ist weil sie wahrscheinlich dieselben Fotografen verwenden. Diese Fotografen verwenden gerne bestimmte Filter, zum Beispiel für bestimmte Farben und mögen es, wie bestimmte Anrufe von den verschiedenen Farben abheben . Wie in diesem Beispiel müssen wir keinen blauen Himmel sehen. Wir können diesen ausgeblasenen Himmel mit einem Filter hier oben sehen . Diese Fotografen verwenden diese Techniken also gerne. Aber warum das für Sie als Designer wichtig ist, ist einfach zu verstehen, wohin Sie Ihr Projekt in Bezug auf Bildsprache führen können . Wenn wir also nach unten scrollen, können Sie verschiedene Sammlungen sehen. Nehmen wir also zum Beispiel , dass es sich um ein fragendes Café handelt. Und Sie können all diese Kaffeebilder mit einer Grunge-Textur sehen , insgesamt wirklich dunkle Filter. Und Sie können wirklich mit Ihrem Publikum sprechen , wenn dies Ihr Publikum ist, und Sie können leicht verstehen, wer Ihr Publikum ist, wenn Sie einfach diese Bilder durchstöbern. Die jüngeren Leute auch. Hier sind jüngere Leute. Genießen sie Kaffee? Ja. Ist das Café Ihrer Kunden in diesem Ton, in dieser Atmosphäre? Ist es so? Also ist es wirklich sauber und einfach? Oder ist es so etwas Grungy, etwas altmodischeres. So können Sie leicht erkennen und mit Ihrem Publikum sprechen , wenn Sie Bilder wie diese verwenden. Deshalb habe ich gesagt , dass Bilder in jedem Design eine wirklich wichtige Rolle spielen . Wenn ich dich endlich zu Envato Elements führe, einer meiner Lieblingswebsites für Ressourcen. Sie können hier sehen, dass ich all diese verschiedenen Bilder für das Kopfhörerdesign untersucht habe all diese verschiedenen Bilder für das Kopfhörerdesign untersucht . Und ich benutze junge Leute. Junge Leute in diesem Fall für Kopfhörerdesign, weil das die wichtigste demografische Gruppe meines Kunden ist die wichtigste demografische Gruppe meines und ich schaue mir einfach einige Bilder hier an. Jetzt ist Envato Elements ein Premium-Service, für dessen Nutzung Sie bezahlen müssen. Aber es ist fantastisch, denn an einem einzigen Ort finden Sie Stock-Videos, Videovorlagen , Musiksoundmessen, Grafikvorlagen und vieles mehr, einschließlich Bilder. In meinem Fall werde ich irgendwann diese Bilder kombinieren, die entsprechende Topographie mit entsprechenden Symbolen und vielem mehr, um das kohärente Bild zu erhalten, das sich mein Kunde wünscht wenn sie damit einverstanden sind, können wir einfach zur Entwurfsphase übergehen und z. B. mit Wireframes beginnen . Aber vor all dem möchte ich herausfinden, ob mein Kunde diesen Tutorial-Stil gerne verwendet? Interessieren sie sich dafür? Ist das etwas , das sie anspricht? Ist das die richtige Farbe? Ist das der richtige Ton? Nehmen diese Models die richtigen Posen ein? Also werde ich all diese Elemente berücksichtigen , bevor ich mit dem Design übergehe. Denn wenn ich mit dem Entwerfen anfange, wurden all diese Entscheidungen im Moodboard getroffen, und Moodboarding ist Teil des Prozesses. Also kann ich sie einfach auf mein Design anwenden und einfach mit der Arbeit an meinem Design beginnen. Deshalb sind Moodboards wichtig. So recherchieren Sie. Und im nächsten Video beginnen wir mit Adobe XD. Ich werde Ihnen einige bereits erstellte Beispiele zeigen und Ihnen zeigen, wie Sie Ihre eigenen erstellen und Ihre Ideen mit Ihren Kunden kommunizieren können . Also werde ich dich dort sehen. 104. Moodboard in Adobe Xd erstellen: In diesem Video verwenden wir Adobe XD, um unser Moodboard zu erstellen. Und ich werde Ihnen auch einige meiner Beispiele zeigen , die Sie kaufen können, wenn Sie möchten oder wenn nicht, können Sie sie einfach als Inspiration erkunden. Wenn wir weitermachen und zu Adobe XD wechseln, habe ich hier ein 1920 mal 1080 Dokument erstellt . Wenn Sie dieses Dokument nun drucken möchten, können Sie direkt hierher kommen und es drehen. Natürlich können Sie so präzise sein, wie Sie möchten. Sie können die genaue Pixelnummer Ihres Papierformats importieren , wenn Sie es später drucken möchten. Wenn Sie also z. B. A4 verwenden, können Sie entweder online nach A4 suchen oder Sie können es in Photoshop öffnen und Sie können einfach die genaue Pixelgröße sehen. Sie können diese Pixelgröße direkt hier eingeben. Denken Sie daran, dass Sie nicht 300 DPI verwenden müssen , da Adobe XD ein Vektorwerkzeug ist. musst du also nicht tun. Sie können hier einfach für 72 DPI importieren. Sie können einfach Ihr Moodboard erstellen und es später exportieren. Sie können es direkt hier speichern, wie Sie sehen, ich habe es in meinen Cloud-Dokumenten gespeichert, was großartig ist, weil ich darauf zugreifen kann, wo immer ich bin. Wenn ich also z. B. auf einem Desktop arbeite , wie ich es gerade mache, kann ich zu meinem Kundentreffen in deren Büro gehen, z. B. und ich kann meinen Laptop aufrufen. Ich kann Adobe XD mit demselben Konto öffnen. Und ich kann dieses Dokument einfach aus meiner Cloud aufrufen und wir können unser Moodboard einfach so besprechen. Wenn wir also wieder zu Adobe XD wechseln, nenne ich es einfach Moodboard hier. Bevor ich weitermache, möchte ich Ihnen meine Beispiele zeigen. Also hier ist meine Website, web donut.net. Und wie gesagt, Sie können diese Vorlagen kaufen , wenn Sie möchten. Sie können sie einfach in Adobe XD öffnen und dann so daran arbeiten. Wenn nicht, können Sie sie einfach als Inspiration verwenden. Was wir hier haben, sind diese Moodboards, und sie sind hier im A4-Format und im US-Letter-Format. Und Sie erhalten sie in Adobe XD in Photoshop-Dateien. Wenn es sich bei einigen dieser Produkte um Photoshop-Dateien handelt, können Sie sie problemlos in Adobe XD öffnen , da sie von derselben Firma erstellt wurden. Adobe besitzt also sowohl Photoshop als auch XD, und diese Dateien werden sowohl in Photoshop als auch in XD einwandfrei funktionieren . Wenn wir zu hier zurückkehren, können Sie all diese verschiedenen Layouts für Bilder und vier Farben sehen . Sie können diese Bilder einfach gegen Logos austauschen, z. B. und Sie können sehen, dass sie gedruckt sind, fertig und all diese Layouts, wenn wir wieder zu diesem wechseln, das ist für Instagram, weil es quadratisch ist, aber du kannst es leicht anpassen, um mit jeder Größe zu arbeiten, wie du es hier für die Stories oder für die Reals sehen kannst , z.B. das sind Instagram-Beiträge, sind Instagram-Geschichten. Sie können sehen, wie das aussieht. Und wenn wir zu dieser wechseln, ist dies für Moodboard-Vorlagen für soziale Medien. Noch einmal, das Gleiche. Und Sie können sehen, dass diese quadratisch oder rechteckig sind, was ideal für Facebook ist. Wenn Sie z. B. soziale Medien verwenden und sie einfach austauschen können, können Sie sie ändern. Sie können all diese verschiedenen Layouts verwenden , um Ihre eigenen zu erstellen. Und Sie können sie einfach anpassen und auf verschiedenen Social-Media-Seiten sehen, wie sie aussehen. Und endlich haben wir diesen. Also vier davon, und wie gesagt, ich werde sie alle in der PDF-Datei verlinken. Sie können einfach, wenn Sie für jeden einzelnen Link auf den Link klicken möchten , können Sie problemlos darauf zugreifen, wenn Sie möchten. Wenn nicht, wie gesagt, können Sie es einfach als Inspiration verwenden. Wenn wir also hier wieder wechseln, können Sie sehen, wie dieser aussieht. Also wieder ist es druckfertig. Sie können einige dieser Präsentationselemente sehen z. B. die verschiedenen Logos, verschiedene Farben, verschiedene Bilder, und Sie können das Ergebnis direkt hier sehen. Jetzt können Sie dies verwenden, wenn Sie sich auf einfache Weise eine Menge Zeit sparen möchten, wenn nicht, wie gesagt, sie eignen sich hervorragend als Inspiration. Sie können sich inspirieren lassen, wo Sie all diese verschiedenen Elemente positionieren sollen. Und wenn nicht, können Sie einfach Ihr eigenes erstellen , abhängig von dem Projekt, an dem Sie gerade arbeiten. Wie er in einem der vorherigen Videos sagte, je nach Projektgröße, je nachdem, in welcher Nische sich Ihr Projekt befindet , in der sich Ihr Kunde befindet werden Sie je nach Projektgröße, je nachdem, in welcher Nische sich Ihr Projekt befindet , in der sich Ihr Kunde befindet, mehr oder weniger Zeit investieren. Und dieser Teil der Projekte sollte nicht zeitaufwändig sein. Es sollte wirklich schnell und einfach sein. Fertigstellung sollte nicht länger als einen Tag dauern, unabhängig von der Größe des Unternehmens, unabhängig von der Größe des Projekts, unabhängig von der Nische , in der sich Ihr Kunde befindet. Also denk einfach darüber nach. Verbringen Sie nicht zu viel Zeit auf Moodboards da sie lediglich dazu da sind, die orale Paste, den Stil und den Ton des Projekts zu bestimmen . Und wenn Sie dann mit dem Entwerfen beginnen, werden Sie den Großteil Ihrer Zeit in diese speziellen Änderungen investieren . Wenn wir also in Adobe XD zurückschauen, sieht unser Dokument so aus, und ich kann es einfach so verzerren, z. B. wenn wir, wie und ich kann es einfach so verzerren, z. B. gesagt, etwas mehr wie eine Vier erreichen wollen , Sie können hier ganz einfach die richtigen Werte eingeben hier ganz einfach die richtigen Werte , wenn Sie das möchten. Fangen wir also mit Bildern , weil ich einige Bilder vorbereitet habe. Ich möchte einfach ein Rechteck erstellen und ich kann ein Wiederholungsraster verwenden , wenn ich ein solches Aussehen erzielen möchte, und ich kann wählen, ob ich so aussehen möchte, z. B. dann kannst du einfach die Gruppierung meines Rasters aufheben, doppelt- klicken Sie auf eines davon und bringen Sie es einfach hierher zurück. ZB. Ich kann es leicht skalieren. Und das muss nicht perfekt sein, wenn Sie es nicht einfach so anpassen möchten , um einen Kreis zu erstellen, z. B. oder ein Element wie dieses, sie können sich überlappen, Sie können verschiedene Schatten einbeziehen. Also z. B. so. Also 5520, sagen wir und lass uns diesen Schatten auf acht reduzieren, z. B. so etwas. Was ich tun werde, ist all meine Elemente so auszuwählen. Ich werde den Rand entfernen und etwas wie DDT hinzufügen, was eine schöne hellgraue Farbe ist. Ich kann es vielleicht ein bisschen auf so etwas herunterskalieren . Und z. B. kann ich das hier ansprechen. Ich kann es hier positionieren. Ich kann mit der rechten Maustaste weitermachen und das Erscheinungsbild mit der rechten Maustaste kopieren , sodass ich denselben Schatten einfügen kann. Aber ich werde einfach den Eckradius wieder auf Null reduzieren. Und vielleicht kann ich dieses Bild leicht hineinziehen. Vielleicht kann ich das nur ein bisschen auf so etwas erweitern . Vielleicht kann ich das bis hierher erweitern. Wie Sie sehen können, ist dies eindeutig eine andere Variante als die Beispiele, die Ihnen gezeigt werden. Wenn ich also zu diesen Beispielen zurückkehre, können Sie sehen, dass diese Bilder wirklich ziemlich klar sind. Sie können hier leicht Knochen enthalten. Und Sie können all diese verschiedenen Farben genau hier positioniert sehen . Sie können verschiedene Texte sehen, Sie können verschiedene Bilder sehen. Aber in unserem Beispiel ist alles überall. Ich mache das nur , um Ihnen zu zeigen, dass Sie auch diesen Ansatz verfolgen können. Noch einmal, je nach Projekt, je nach Nische. Weil Ihre Firmenkunden diesen Stil, den ich gerade in Adobe XD erstelle, nicht zu schätzen wissen werden. Aber Ihre Kunden, die gerne einen lustigen, verspielten Stil verwenden, werden diese Art von Design wirklich zu schätzen wissen. Also, wenn wir zu Adobe XD zurückkehren und ich Ihnen das hier zeigen werde. Also lassen Sie uns einfach die Position genau hier platzieren. Vielleicht verwenden Analysten irgendwo hier Control D. Ich werde es duplizieren und ungefähr hier positionieren, z. B. und vielleicht irgendwo hier. Und vielleicht kann ich in diesem Fall den gleichen Abstand von 52 verwenden , vielleicht schaffe ich das. Und ich kann vielleicht die Farbe hinter meinem Handy ändern , damit du es sehen kannst. Also kann ich die Farbe auf etwas Dunkleres ändern , weil wir dieses Farbfeld für unsere Farben verwenden werden. Also kann ich die Größe auf hier reduzieren und das Wiederholungsraster erneut verwenden, und das Wiederholungsraster erneut verwenden um einige Farben zu extrahieren, z. B. so etwas, vielleicht die Gruppierung aufheben, migrieren. Und ich kann das vielleicht ein bisschen genau hier positionieren. Vielleicht kann ich es so vergrößern. Und vielleicht kannst du noch einen benutzen. Also Control D. Ich kann es nur ein bisschen verkleinern und vielleicht genau hier positionieren. Jetzt, wo wir all diese Elemente haben, fehlt vielleicht etwas Typografie. So kann ich T drücken und z.B. spielerisch tippen . Das und ich kann z.B. so etwas wie Open Sans verwenden. In diesem Fall kann ich es vielleicht etwas fett verwenden und ich kann es auf 36 skalieren , vielleicht nur damit Sie es sehen können. So verspielt. Steuerung D, ich kann z.B. eintippen. Control D, so etwas wie Freundschaft. Control D, ich kann es hier hinstellen, Kaffee. Und sagen wir Control D. Relaxation. Da haben wir's. Das ist unser Moodboard vorbereitet. Was ich als Nächstes tun werde, ist einfach meine Bilder einzubringen. Ich habe bereits einige Bilder, die ich nur für diese Demonstration vorbereitet habe . Aber Sie können weitermachen und die Bilder Ihrer Kunden verwenden, oder Sie können eine der Websites verwenden, über die wir gesprochen haben, oder noch besser Envato-Elemente weil sie buchstäblich alles haben. Was ich tun werde, ist ein Bild hierher zu ziehen und dort abzulegen. Nur um es zu bevölkern. Ich werde es gleich hier fallen lassen. Übrigens, Sie können das Wiederholungsraster verwenden , wenn Sie es erstellt Sie können einfach ziehen und ablegen das erste Bild wird mit all Ihren Bildern gefüllt. Und dann kannst du all diese Änderungen vornehmen , die ich in diesem Fall vorgenommen habe. Aber ich mache es gerne so. Oder vielleicht kann ich das hier positionieren , weil es ein Café ist. Ich werde es genau hier platzieren. Vielleicht platziere ich dieses Bild genau hier. Doppelklicken Sie, verschieben Sie es so. Und mal sehen, vielleicht kann ich dieses Bild hier so positionieren . Das funktioniert in unserem Beispiel nicht. Was ich also tatsächlich machen werde, ist vielleicht Drag & Drop, sagen wir, dieses Bild so. Und ich denke, es ist viel besser. Als nächstes probiere ich einfach ein paar Farben aus. Aber bevor ich das tue, kann ich vielleicht ein anderes Bild finden , das dem entspricht, nun ja. Weil ich für genau hier kein Logo vorbereitet habe. Aber z. B. kann ich vielleicht gleich hier klicken und eines davon verwenden. Also lass uns sehen, was es ist. Ui-Logo. Also ich denke jetzt, weil Sie diese Plug-ins und Erweiterungen verwenden können , um dies einfach zu tun. Also, wie gesagt, Sie können entweder Bilder von Ihrem Client, von Ihrem Computer, von Envato Elements, z. B. oder von einem dieser Plugins abrufen von Ihrem Computer, von Envato Elements, z. B. . Aber sagen wir UI Faces. Und ich möchte von Unsplash hinzufügen, ich möchte, sagen wir, Filter für Männer und Frauen verwenden . Und ich werde nach dem Zufallsprinzip auf Anwenden klicken. Und es wird ein Bild auswählen und es wird nach dem Zufallsprinzip auf diesen bestimmten Bildplatzhalter angewendet. Wie Sie sehen können, hat es diesen positioniert. Wenn du das willst, dann gut. Aber lassen Sie uns tatsächlich zu unserem Ordner zurückkehren und sehen. Ich würde dieses gerne mitbringen, weil es ein Café ist. Und ich kann die Dose genau hier doppelklicken , weil Kaffee wirklich im Mittelpunkt dieses speziellen Designs stehen sollte . Schließlich möchte ich tatsächlich einige Farben probieren. Was ich also gerne tun würde, ist von heller zu dunkler zu wechseln. Es ist einfacher, nur in meinem Fall, aber du kannst andersherum gehen, wie du willst. Also für diesen kann ich einfach hier klicken und z.B. diesen auswählen. Und ich kann gleich hier klicken und vielleicht damit beginnen, ich weiß es nicht. Lass uns mit diesem weitermachen. Vielleicht. Ich kann hier klicken und eine davon probieren. Dann kann ich zu meinen dunklen Farben wie dieser wechseln. Das wäre wirklich toll, wenn Ihr Kunde z. B. schon einige Möbel hat und er Ihnen Bilder von seinem Café dort schickt . Sie können diese Bilder also ganz einfach hineinziehen und Farben aus diesen bestimmten Bildern ausprobieren und sie auf diesem Moodboard präsentieren. Also los geht's. Wie gesagt, Sie können wirklich in die Tiefe gehen. Sie können wirklich auf viele Details eingehen. Oder Sie können einfach etwas wie dieses veranlassen , das schnell ist und gereinigt wird, nur um Ihrem Kunden zu zeigen welche Möglichkeiten dieses spezielle Projekt bietet. Sie können aber auch einfach diese Farben auswählen. Springe direkt hier, klicke hier, um sie zu deinen Farben hinzuzufügen. Und wenn Sie z. B. diese Textfarbe ändern müssen, kann ich einfach hier klicken, z. B. und ich kann ganz einfach verschiedene Farben ändern und anwenden. Wenn Sie diesen noch verspielteren Look erzielen möchten, können Sie mit so etwas enden. Wenn Ihr Kunde das zu schätzen wissen wird. Wenn das ihre Nische ist, wenn sie das mögen, dann wird sie es versuchen. Aber wenn es ein bisschen unternehmerischer ist, als Sie vielleicht unerforscht hineinspringen. Ich werde es so gestalten, wie ich es dir in diesen Moodboards gezeigt habe , die wir erstellt haben. Abschließend möchte ich Ihnen zeigen, dass Sie einige Hintergrundelemente hinzufügen können. Also z. B. kann ich es zeichnen und ziehen und ein Rechteck wie dieses erstellen. Ich kann eine Farbe wie diese kreieren. Ich kann es genau hier positionieren. Und wenn mir die Farbe nicht gefällt, kann ich sie einfach austauschen und in so etwas ändern. Nur damit meine Bilder ein bisschen auffallen. Und vielleicht diese verspielten Elemente in das einzubeziehen , Ihr Kunde für die Beine. Und Sie können ein solches Ergebnis erzielen. Das war's für dieses Video. Im nächsten Video zeige ich Ihnen, wie Sie dieses Moodboard mit Ihrem Kunden teilen können. Wenn Sie online Feedback erhalten möchten oder nicht, können Sie es einfach ausdrucken. Und ich werde Ihnen zeigen, wie Sie für den Druck aus Adobe XD exportieren können und wie sie gedruckt aussehen und was Sie tatsächlich damit machen können. Also werde ich dich dort sehen. 105. Teile oder exportiere dein Moodboard: In diesem Video zeige ich Ihnen einige Einstellungen, mit denen Sie Ihr Moodboard und Ihre Schrift exportieren und ausdrucken können. Und ich kann Ihnen auch zeigen, was Sie tun können, um dieses Moodboard online mit Ihrem Kunden zu teilen Moodboard online mit Ihrem Kunden und auf diese Weise Feedback zu erhalten. Wenn wir also wieder zu Adobe XD wechseln, ist hier unser Moodboard , das wir erstellt haben. Was du tun kannst, ist es einfach so zu teilen. Sie können also diese spezielle Kunsttafel, die wir erstellt haben, mit Ihrem Kunden teilen wir erstellt haben, mit Ihrem Kunden und Sie können einfach nur diese Seite teilen. Oder du kannst direkt hier auf den Tab Teilen klicken. Klicken Sie auf der blauen Schaltfläche auf Link generieren, die gleich hier angezeigt wird. Sie können diesen Link kopieren und mit Ihrem Kunden teilen. diesem Link können Sie nun Feedback einholen und Ihr Kunde kann Ihr Feedback auf diesem speziellen Moodboard hinterlassen diesem speziellen Moodboard wenn er weit von Ihnen entfernt ist , z. B. Eine großartige Möglichkeit, mit Kunden zu kommunizieren, die nicht in Ihrer Nähe sind. Sie können diesen Link also einfach mit ihnen teilen. Sie müssen kein Adobe-Konto haben, kein Konto für diese Angelegenheit. Sie können einfach in diesen Link springen und Ihnen einfach Feedback geben. Sie können meine anderen Kurse zum Thema UI UX Design durchstöbern, um das in Aktion zu sehen und den Sharing-Prozess in Aktion zu sehen. Weil es wirklich in die Tiefe geht und man die Drehungen richtig ausrichten kann. Und sie können bestimmte Rückmeldungen zu bestimmten Teilen Ihres Designs usw. hinterlassen bestimmte Rückmeldungen zu bestimmten Teilen . Später, wenn Sie mit der Erstellung Ihres Designs in Adobe XD beginnen , können Sie z. B. diese vorhandene Datei erweitern , sodass Sie Wireframes hinzufügen können, Sie können Design hinzufügen. Du gehst zum Prototyping. Sie können Styleguides hinzufügen, Sie können alles in dieser einen Datei. Ihr Share-Link wird also offensichtlich wachsen. Stellen Sie sicher, dass Sie die kostenlose Version von Adobe XD verwenden , um nur ein Design mit Ihrem Kunden zu teilen nur ein Design mit , da dies das Limit beim kostenlosen Tarif ist. Wenn Sie einen Premium-Tarif und einen Premium-Tarif wie Adobe XD Creative Cloud-Abonnement oder ein Adobe XD-Premium-Tarif haben, haben Sie dieses Limit nicht. Wenn Sie jedoch die kostenlose Version verwenden, diese auf nur einen Link beschränkt , den Sie mit Ihrem Kunden teilen können. Also noch einmal, wenn Sie daran interessiert sind, schauen Sie sich unbedingt meine anderen Klassen an, da diese Typen wirklich detailliert werden können. Und ich glaube, in einer meiner vorherigen Klassen gibt es so etwas wie eine 3-stündige Sitzung. Wo wir hingehen, werden wir Details zu den Freigabeeinstellungen für Adobe XD finden , denn du kannst sie für Kunden teilen, du kannst sie für Entwickler teilen, du kannst deine Präsentation teilen oder du kannst sie individuell teilen und passen Sie all diese verschiedenen Einstellungen darin an. Ich habe also keine Zeit in diesem speziellen Kurs und ich möchte dich nicht wirklich langweilen, weil wir nur Moodboards haben. Wenn Sie jedoch mit der Expansion beginnen, ist dies wirklich wichtig, um zu verstehen was Sie tun müssen, um es mit Ihren Kunden zu teilen. Das nächste, was wir tun können, ist das zu exportieren. Wenn wir also hierher zurückkehren, kann ich zu Datei, Speichern unter gehen und es so speichern. Oder ich drücke einfach Control E auf meiner Zeichenfläche und ich kann es einfach so exportieren. Ich kann also PNG verwenden, ich kann SVG verwenden, ich kann PDF verwenden und ich kann JPEG verwenden. Sie können das Ziel genau hier festlegen. Das ist also die Ausgabe, in Ihre Datei gehen wird, sobald sie gespeichert ist. Also, was ich tun werde, ist JPEG zu drücken, Exportieren zu drücken und dann noch einmal Control E zu drücken. Dann ändere es in PDF. Und ich werde es noch einmal exportieren. Warum ich das mache, ist, dass ich einfach die Möglichkeit haben möchte , sowohl JPEG als auch PDF zu drucken und einfach zu vergleichen , mit welchem Elementtyp es am besten funktioniert. So haben z. B. in einigen Fällen PDFs eine höhere Qualität. In anderen Fällen sind JPEGs gleichmäßiger. Was ich also wirklich empfehlen würde, ist Bolt zu exportieren und zu sehen, wohin jeder von ihnen Sie bringen wird. Also werde ich es jetzt ausdrucken und zurückkommen und Ihnen zeigen, wie es gedruckt aussieht und was Sie mit diesen gedruckten Versionen machen können. Lass mich dir jetzt zeigen, wie es gedruckt aussieht. Also hier haben wir diese Adobe XD-Datei, und hier haben Sie sie gedruckt. Und mit dieser gedruckten Version können Sie einfach Stift und Papier verwenden und zu Ihrem Kunden springen und mögliche Lösungen besprechen, mögliche Änderungen besprechen. Wenn du sie also bei ihnen triffst, z. B. in ihrem Büro, könnten sie sagen, dass es zu dunkel ist. Das ist z.B. der Schlüssel, die Schlüsselwelt, die sie vielleicht in ihrer Kopie verwenden wollen, sagen wir mal. Oder wenn sie das anstreben. Sie können also wirklich mit ihnen all diese verschiedenen Themen besprechen , all diese verschiedenen Lösungen, die Sie hier erstellt haben, und sie hier ausdrucken. Also kann man z.B. sagen, dass diese Bilder nicht funktionieren. Und sie wollen mehr davon sehen. Zum Beispiel haben wir hier keine der Personen aufgenommen. Vielleicht mehr Leute. Bilder. Mehr von dieser Art von Kaffee, z.B. so etwas. Sie haben also die Idee, Sie werden mit ihnen über all diese Veränderungen, all diese verschiedenen Bilder, all diese Farben sprechen all diese Veränderungen, all diese verschiedenen Bilder, . Und wenn Sie damit einverstanden sind, z. B. hier, haben wir nur eine Schriftart hinzugefügt. Aber wenn du mehrere verschiedene Schriften in dein Moodboard aufgenommen hast, nehmen sie vielleicht diese und sagen, mach mit dieser. Und wenn Sie mehrere Schriftarten mit mehreren Farben ausgewählt haben , werden sie vielleicht sagen, ja, diese Schrift mit dieser Farbe funktioniert z. B. einwandfrei. In unserem Fall. Sie werden feststellen, dass sich ein bisschen wie ein Team, ein kleiner Trend entwickelt sobald Sie anfangen, dies zu untersuchen, sobald Sie anfangen, mit Ihren Kunden zu sprechen, habe ich absichtlich Leerzeichen um all meine Bilder, rund um all meine Farben, nur damit ich das leicht aufschreiben kann. musst du nicht tun. Sie können einfach umschalten n, z. B. können Sie dieses Bild mit der Nummer 1234 nennen. Und auf der anderen Seite kannst du es umdrehen, z. B. Bild eins, du kannst gut sagen. Bild drei, z. B. nicht gut oder zu dunkel oder was auch immer du haben willst. Als deine Referenz. Dies soll Ihnen nur helfen, wenn Sie mit der Entwicklung dieses Designs beginnen, wenn Sie anfangen, diesen Ton zu entwickeln. Und wie gesagt, das ist wirklich toll weil Sie es ausdrucken und Ihrem Kunden geben können. Sie können diese Notizen hinterlassen und sich leicht ein Bild davon machen, wohin dieses Projekt hin und her gehen wird. Wenn Sie können, können Sie diese Änderungen mit diesen Dingen vornehmen , die wir gerade besprochen haben. Und das kannst du noch einmal ausdrucken. Sie können zu Ihrem Kunden zurückkehren wenn er irgendwo in Ihrer Nähe ist, und dann können Sie sich noch einmal zu ihm setzen und ihn einfach fragen Ist das jetzt die richtige Richtung? Möchtest du, dass es mehr in dieser Richtung so aussieht? Magst du diesen Stil mehr und all diese verschiedenen Fragen? Also wenn sie ja sagen, kannst du gleich hier springen und dann kannst du diese ganz einfach nehmen z.B. so. Und wenn sie diesen nicht mögen, kannst du es vielleicht so machen. Also, wie gesagt, dies ist nur ein kurzes Beispiel dafür, was Sie mit diesen Mehrteilen machen können. Stellen Sie also sicher, dass Sie verstehen, dass dieser Moodboard-Prozess einige Zeit in Anspruch nehmen wird und Sie manchmal bei einigen Projekten z. B. 15 Minuten für die Erstellung und dann vielleicht 30 Minuten für die Diskussion benötigen. Bei einigen Projekten mit Ihren Kunden benötigen Sie einen Tag, um in zwei bis drei Tagen zu erstellen , um mit Ihrem Kunden zu besprechen, um den Gesamtstil zu bestimmen, z. B. eine neuronale Ausrichtung des Projekts selbst. also sicher, dass Sie dies in Ihrem Budget einkalkulieren, da dies der Teil des Designprozesses ist, für den Sie Moodboards in Rechnung stellen Ihrem Budget einkalkulieren, da dies der Teil des Designprozesses ist, sollten. Stellen Sie also sicher, dass Sie verstehen , dass Sie, wie gesagt, zu Beginn der Arbeit darauf achten, dass Sie es an Ihr Papierformat anpassen. Also das ist z. B. A4. Wenn Sie z. B. mit US-Buchstabengröße arbeiten können Sie diese hier in Adobe XD an diese bestimmte Größe anpassen . Also wie gesagt, du kannst direkt hier springen, die Pixel nach Bedarf anpassen, sie nach Belieben anpassen. Sie können das umdrehen, wenn Sie das möchten, und sicherstellen, dass Sie es drucken. Machen Sie sich keine Sorgen über 300 DPI, denn wie gesagt, Adobe XD ist ein Vektor-Typ-Werkzeug. Das ist es also. Stellen Sie sicher, dass Sie es testen, probieren Sie es aus, stellen Sie sicher, dass Sie mit Ihren Kunden sprechen. Denn wie ich in diesem Kurs mehrfach gesagt habe, dieser Teil des Designprozesses darin, den Gesamtstil, die allgemeine Richtung und Ihren Rollenton zu bestimmen . Stellen Sie also sicher, dass Sie dies in Ihren Entwurfsrichtungen berücksichtigen . 106. ABSCHNITT 13 AUFGABE: Deine Aufgabe für diesen Abschnitt ist es, deine eigenen Moodboards zu erstellen. Sie können nur einen verwenden, den Sie erstellen können, Sie können fünf erstellen, so viele Sie möchten, und wie viel Zeit Sie tatsächlich in eine investieren müssen. Aber versuche einfach, mit einem zu beginnen und versuche einfach , zufällige Farben aus zufälligen Bildern auszuwählen , die dir wirklich gefallen. Und versuchen Sie, sie zu etwas Nützlichem zu kombinieren , das Sie tatsächlich für Ihr Projekt verwenden können. Versuchen Sie, auf diese Weise zu üben, und später, wenn Sie es mit echten Projekten und echten Kunden versuchen möchten , achten Sie darauf, dass Sie ihr Logo nehmen und Farben daraus auswählen. Stellen Sie sicher, dass Sie ihre Lieblingsbilder, vorhandene oder solche, die sie tatsächlich mögen, verwenden, versuchen Sie, verschiedene Inspirationen von verschiedenen Websites zu verwenden , die sie in Design Brain bereitgestellt haben , z. und habe einfach versucht, alles zu einem brauchbaren Moodboard zu kombinieren . 107. ABSCHNITT 14 UI-Kits: UI-Kits können in Ihrem Designprozess unglaublich wichtig und unglaublich nützlich sein, da Sie einige dieser Elemente immer wieder verwenden können . In diesem Abschnitt des Kurses werden wir darüber sprechen, was ein UI-Kit ist, wie Sie Ihr eigenes mit Adobe XD erstellen und wie Sie einige dieser Elemente in Ihren Designs wiederverwenden können. Also lass uns anfangen. 108. Was sind UI-Kits und warum sind sie nützlich: UI-Kits sind im Grunde nur eine Sammlung verschiedener Elemente , die Sie für Ihre UI-Designprojekte verwenden können . Diese Projekte können von mobilen Designprojekten über Website-Designprojekte bis hin zu Produktdesignprojekten wie Dashboards und Web-Apps und Projekten dieser Art reichen. Sie können in verschiedenen Dateitypen erhältlich sein, z. B. Photoshop, Sketch, Illustrator, Figma, Adobe XD. Und in diesem Kurs konzentrieren wir uns auf Adobe XD. Sie können auch Bilder mit Breite und ohne Bilder sein. Und wir werden einige Unterschiede zwischen diesen beiden Typen untersuchen . Warum ist das eine besser als das andere und umgekehrt? Und in erster Linie werden Sie diese UI-Kits verwenden, um Ihren Arbeitsablauf zu beschleunigen , da Sie diese sich wiederholenden Aufgaben erledigen werden , insbesondere beim UI-Design, z. B. Sie werden Navigationen erstellen für all Ihre Projekte. Anstatt also diese Navigation per se für jedes einzelne Projekt neu zu erstellen, erstellen Sie einfach einen Navigationstyp und erweitern dann einfach Ihre Idee von Anfang an um einen Navigationstyp was ich dir später in diesem Kurs auch zeigen werde. Im Grunde genommen werden Sie Ihren Arbeitsablauf beim nächsten Start eines Designprojekts beschleunigen beim nächsten Start eines Designprojekts weil Sie all diese verschiedenen Dateitypen auf Ihrem Computer speichern werden. Und dann werden wir im Grunde in der Lage sein, all diese verschiedenen Elemente für all Ihre verschiedenen Projekte zu verwenden und wiederzuverwenden . Da wir nun in Adobe XD arbeiten werden , werden wir mit Komponenten arbeiten , und Sie werden diese Komponenten wiederverwenden können, um die Farben zu ändern, um die Dateitypen zu ändern ändere die Struktur, um den Hintergrundschatten zu ändern, z. B. um die Farben zu ändern und vieles mehr mit deinen Kindern, du wirst in der Lage sein, dich an verschiedene Projekte anzupassen. Also noch einmal, wenn Sie z. B. in Adobe XD an sich erstellen, können Sie Komponenten erstellen, z. B. Webseitendesign im Vollbildmodus, sagen wir 1920 x 1080, dann können Sie nach unten gehen und Responsive Größenanpassungen für Ihre Responsive-Design-Projekte. Das Gleiche gilt für mobile Designs, z. B. erstellen Sie Ihr UI-Kit für iOS-Web-Apps. Dann möchten Sie dasselbe UI-Kit erstellen , um auf Android zu funktionieren. Es wird viel einfacher sein, wenn Sie die Dateitypen und Dateien bereits vorbereitet haben. Sie das dann von Grund auf neu tun, können Sie mehr für Ihre Projekte verlangen , da Sie schneller liefern können. Weil Sie mit diesen UI-Kits vorbereitet und all diese Elemente für Ihre zukünftigen Projekte vorbereiten . Im nächsten Video werden wir diese Unterschiede zwischen UI-Kits mit und ohne Bilder untersuchen . Was sind einige Vor- und Nachteile von jedem von ihnen? Und wir sehen uns im nächsten Video. 109. Arten von UI-Kits: In diesem Video werden wir einige Hauptunterschiede von UI-Kits mit und ohne Bilder untersuchen einige Hauptunterschiede von . Was sind die Hauptnachteile und Verkaufsargumente für jeden von ihnen? Also lass uns anfangen. Also hier habe ich eine UI Acht geöffnet , eine Website , auf der Sie diese UI-Kits tatsächlich kaufen können . Und wir werden etwas später in diesem speziellen Video über diese Websites sprechen etwas später in diesem speziellen Video über diese Websites später in diesem speziellen Video Ich möchte mich nur auf die Unterschiede zwischen UI-Kits mit Bildern und ohne Bilder konzentrieren . Wofür kann jeder von ihnen verwendet werden? Und was Sie über die Erstellung dieser UI-Kits für Ihre verschiedenen Arten von Projekten lernen können . Was wir hier haben, ist dieses Quanten-UI-Kit, das, wie man so schön sagt, eine riesige Bibliothek Ihrer Karten für Webdienste ist . Und was sie hier tatsächlich erstellt haben, sind, wie Sie sehen können, all diese verschiedenen Komponenten, bei denen es sich im Grunde um Vorlagen handelt, die wie Websites aussehen , die Sie für Ihre zukünftigen Projekte verwenden und wiederverwenden können. Also warum ist das nützlich, wenn ich mit der rechten Maustaste klicke und den neuen Tab öffne und hineinzoome, damit du ein paar dieser Details sehen kannst. Sie können sehen, dass wir hier z. B. diesen Sony Dual Shock for Black Controller haben , oder wir haben den Preis, wir haben dieses Symbol. Was Sie mit diesem Design im Grunde tun können, ist dass Sie ganz einfach mit genau diesem Design arbeiten können. Erstellen Sie einfach eine Komponente, z. B. für diesen Dual-Show-Controller. Und nehmen wir an, Sie möchten dieses innerhalb der Komponente austauschen , z. B. um ein anderes Produkt hinzuzufügen, sagen wir, vielleicht möchten Sie das iPhone verkaufen, dann können Sie eine Schuldenkomponente von erstellen diese besondere Karte. Sie können Ihr iPhone-Bild einfach per Drag & Drop ziehen. Sie können die Informationen des iPhone, das Sie zum Verkauf anbieten , per Drag & Drop verschieben. Und Dario, du musst die Karte nicht noch einmal erstellen, du musst den Schlagschatten nicht hinzufügen. Sie müssen die spezifische Schriftart nicht auswählen. Sie müssen das Typografie-Layout nicht wählen, Sie müssen nicht die Hierarchie wählen. All das haben Sie im vorherigen Projekt selbst für Sie erledigt . Und jetzt können Sie einfach genau dieselbe Komponente in Ihren zukünftigen Projekten verwenden und wiederverwenden . Ich werde das etwas später in der Lektion speziell über Adobe XD erklären , wie Sie diese Komponenten skalieren können, wie wir sie ändern, verwenden und wiederverwenden können und so weiter. Aber in diesem Beispiel wollen wir uns, wie gesagt, auf UI-Kits mit und ohne Bilder konzentrieren und darauf, was Sie jedes dieser vier verwenden können. Sie zu diesem Beispiel zurückkehren, können Sie sehen, wie viele davon sie haben. Sie haben dieses Verkaufsauto, z.B. haben sie diese Ladung mehr Komponenten. Im Grunde genommen sind all diese Komponenten äußerst wichtig, um sie in einem UI-Kit zu erstellen , da Sie sie für jedes einzelne Projekt verwenden und wiederverwenden werden . In Navigationen, Fußzeilen, Blogkarten sind das also Shop-Artikel und so weiter. All dies wird also wirklich nützlich sein, um sie für Ihre zukünftigen Projekte zu haben. Wenn wir uns dieses ansehen, das Plattform heißt, unser Wireframe-Kit. Also, was ist hier der Unterschied zwischen diesem und diesem? Wire-Frame-Kits sind im Grunde diese UI-Kits ohne Bilder. Und Sie können sie online oder wo auch immer Sie suchen, finden. Und ich empfehle wirklich, dass Sie diese Wireframe-Typen über UI-Kits erstellen. Warum? Weil Sie Bilder jederzeit per Drag & Drop an die Stellen dieser Wireframing-Kits ziehen können. Und Sie müssen sich nicht mit diesen riesigen Dateitypen anmelden , denn natürlich, welche Software Sie verwenden, wenn Sie keine Bilder in Ihren Designs enthalten haben, werden Ihre Dateitypen viel sein kleiner. Es wird viel einfacher sein, mit diesen Dateien zu arbeiten. Wenn Sie sie dann mit Bildern haben, wird es auch viel einfacher sein, diese Wireframe-Kids Ihren Kunden zu zeigen und ihnen einfach zu sagen, stellen Sie sich vor, Bilder in das Bild aufzunehmen Platzhalter, z.B. können Sie die Farbe ändern. Nehmen wir an, Sie können mit Ihrem Kunden sprechen und diese Idee kommunizieren, z. B. das Bild wird blau sein, wie in diesem Fall genau hier, damit er es weiß, okay, also dieser Hintergrund wird einfach ein Bild sein. Es wird für sie also viel einfacher sein , zu verstehen und in ihrem Kopf zu visualisieren , dass das Bild dorthin gehen wird. Was für Sie drin ist, ist, dass es viel einfacher sein wird, diese Wireframe-Kits zu ändern und Änderungen vorzunehmen als an den UI-Kits. Weil UI-Kits mit Bildern viel schwieriger zu ändern sein werden , da Sie immer einer Art von Bildstruktur folgen werden. Du wirst immer einem Bildton folgen . Vielleicht versuchst du deine Farben anhand deiner Bilder. Deshalb ist es gut, viel einfacher zu sein, Farben zu verwenden und all diese Elemente von Wireframe Kids zu verwenden , da Sie keine Bilder an Ort und Stelle haben. Später, wenn Sie mit Ihrem Kunden während der Arbeit an diesem Projekt die Struktur festlegen , können Sie Bilder einfach per Drag & Drop hineinziehen und das Design dann einfach ein wenig anpassen. Fügen Sie z. B. hier und da den Schlagschatten hinzu, nur um den Button z.B. hervorstechen zu lassen oder Navigations- oder Heldenbild oder die Texte. Vielleicht sollten Sie die Textfarbe je nach Bild Ihrer Wahl von dunkel auf hell und umgekehrt ändern auf hell und . Daher sind Wireframe-Kids meiner Meinung nach viel nützlicher. Und dann UI-Kits, weil UI-Kits, wie gesagt, der Struktur von Bildern folgen und sich daher an diese Struktur und diese Bilder anpassen, während Wireframe-Kids einfach die Struktur selbst verwenden und sich nicht anpassen zu allem. Sie können Bilder später einfach per Drag & Drop hineinziehen. Nun endlich gibt es noch eine Sache , die ich erwähnen möchte, und das sind Flussdiagramme. Flussdiagramme gibt es in verschiedenen Dateigrößen und verschiedenen Arten von Elementen. Und das ist etwas, das als Schema Mobile Flowchart bezeichnet wird. Und ich kann Ihnen etwas später eines meiner Flowchart-Produkte zeigen etwas später eines meiner Flowchart-Produkte , weil ich muss, und ich werde Ihnen zeigen, wie ich sie erstellt habe und wie Sie sie verwenden können, um Ideen mit Ihren Kunden zu kommunizieren. Ich gehe zurück zu diesem, weil du es nicht sehen kannst. Hier. Ich öffne es in einem neuen Tab, und hier kannst du sehen, dass sie keine echten Texte verwenden. Sie verwenden keine echten Bilder. Sie verwenden nur diese Platzhalter, z. B. wird dies ein Absatz sein, dies wird ein Titeluntertitel sein. Das ist das Bild, das ist die Schaltfläche, das ist die Seitennummerierung. Sie können sehen, dass sie Symbole für die Navigation und für die Suche verwenden . Verwendung dieser sozialen Symbole für Facebook und Twitter. Und auf diese Weise können Sie Ihre Ideen viel schneller mit Ihrem Kunden kommunizieren . Denn wie bei Wireframing-Kits und UI-Kits verschwenden Sie Ihre Zeit nicht damit, diese Bilder auszuwählen, indem Sie diese Farben auswählen. Sie erstellen einfach Layouts , die Sie kommunizieren und mit Ihrem Kunden teilen können. Sobald diese Ebenen genehmigt sind, können Sie an den Details arbeiten. Aus diesem Grund sind diese Wireframe-Kits, UI-Kits und diese Flussdiagramme für Sie so wichtig, um sie zu erstellen. Sie können sich also einfach vorstellen, dass Sie mit der Arbeit an einem Flussdiagramm beginnen können , z. B. für Ihren Kunden. Nachdem das Projekt abgeschlossen ist, können Sie dieses Flussdiagramm einfach als UI-Kit-Erstellung für Ihr nächstes Projekt wiederverwenden als UI-Kit-Erstellung für Ihr nächstes Projekt Sie können einfach Komponenten für Formen, für Farben, für Schriften erstellen , für Bilder, für Schaltflächen und so weiter. Und Sie können diese Komponenten einfach in Ihren zukünftigen Projekten verwenden und wiederverwenden , was Ihnen wiederum viel Zeit spart und Ihnen hilft , mit Ihren Projekten fortzufahren schneller ermöglicht es Ihnen, viel mehr zu verlangen, da Sie für jedes Projekt viel weniger Zeit aufwenden werden , da Sie alle diese Komponenten bereits erstellt haben . 110. Welche Komponenten sind wichtig: Wenn es um die Struktur geht, sind diese Komponenten wirklich wichtig und weniger wichtig. Es liegt also ganz bei Ihnen , welche Arten von Komponenten Sie verwenden möchten. Nehmen wir an, du arbeitest die ganze Zeit an Blog-Projekten. Schauen Sie sich einfach Ihre früheren Arbeiten an und verstehen Sie, welche Arten von Komponenten Sie in der Vergangenheit verwendet haben. Offensichtlich sind eine Art Suchleiste oder eine Art Navigations-Fußzeile, vielleicht sogar Schieberegler hier oder Suchleiste oder eine Art Navigations-Fußzeile, vielleicht sogar Schieberegler hier oder Bildtüren, wirklich Pflicht, da Arten von Elementen sind , die nutzen Sie die ganze Zeit in Ihren Projekten. Aber je nach Branche sind Sie unabhängig von den Projekten, für die Sie zuvor gearbeitet haben, und an denen Sie zuvor gearbeitet haben. Sie sind derjenige, der bestimmt, welche Arten dieser Elemente Sie wählen zur Verwendung in Ihren UI-Kits. Also werde ich es Ihnen anhand der vorherigen Beispiele zeigen , die ich Ihnen gezeigt habe. Und Sie können anhand der Dosis bestimmen, welche Arten von Elementen Sie wählen können. Und in den nächsten Videos dieses Kurses werde ich Ihnen zeigen, welche Arten von Elementen in der Vergangenheit verwendet wurden und was Sie daraus lernen können. Zurück zu diesen Beispielen , die ich Ihnen zuvor gezeigt habe, können Sie hier sehen, dass sie E-Commerce anbieten. Und wenn ich hier ganz hin und her scrolle, können wir E-Commerce sehen. Und wenn ich ganz nach unten scrolle, siehst du das Dashboard. Wenn Sie also an Projekten arbeiten , die all diese Elemente benötigen, können Sie sich vorstellen, wie zeitaufwändig all diese Elemente sind. Sie können sie also einmal erstellen und sie dann einfach wiederverwenden, indem Sie die Farben ändern, z. B. die Position dieser verschiedenen Texte ändern und so weiter. Wenn wir ganz nach unten scrollen, haben wir Firmenkarten. Das können also z.B. Teamportfolio Über uns Testimonials, Funktionen, Preise und ähnliches sein. Wenn wir ganz nach unten scrollen, können wir Musik - und Grafikkarten sehen. Diese sind also vielleicht nicht wichtig wie die vorherigen, und sie können von Projekt zu Projekt variieren. Nachrichten- und Zeitschriftenkarten. Noch einmal, wenn Sie ständig an Blog-Projekten arbeiten , sind diese wirklich wichtig. Sobald Sie sie erstellt haben, wird es für ihn viel einfacher sein, sie wiederzuverwenden und für zukünftige Projekte wiederzuverwenden. Und Sie können es gleich hier sehen, also haben wir verschiedene Arten der Navigation. Wir haben diese Sozialkarten, die wiederum, je nachdem, an welchem Projekt Sie arbeiten, wichtig oder weniger wichtig sein können. Wir haben Basiselemente und Stilkarten. Wir haben also Basiselemente wie diese Navigation, Fußzeilen, Krümel. Wir haben diese verschiedenen Symbole, Lader, Schieberegler, Schaltflächen und Farben. Und schließlich haben Sie die Beispielseiten in diesem speziellen Quanten-UI-Kit. Und Sie können sich auf diesen Seiten inspirieren lassen und sehen, wo sie all diese verschiedenen Elemente verwendet haben. Wenn wir uns die Plattform ansehen und wir Header haben , haben wir Inhalte. Also noch einmal Inhaltsblöcke, Schieberegler, einfache Raster. Also im Grunde Bilder in einem Raster links und rechts. Wir haben diesen Mann fürs Netz. Wir haben die Merkmale von Futures Left, oder? ZB mit Handy-Mockup, mit Website-Mockup, sorry, Laptop-Mockup mit Tablet-Mockup. Wir haben wieder verschiedene Portfolios, je nachdem, wo Sie in welcher Art arbeiten, wann Sie das eine oder das andere verwenden sollten. Wir haben E-Commerce, besonders wichtig, wenn Sie mit E-Commerce-Websites arbeiten. Wir haben Karten gebloggt. Und natürlich können Sie diese verschiedenen Komponenten verwenden und wiederverwenden, z. B. diese Blockkarten, Sie müssen sie nicht für Blog-Websites verwenden. Sie können sie z. B. für E-Commerce-Websites verwenden, das ist das Schöne an diesen UI-Kits. Sie können diese Karten einfach in Ihren zukünftigen Projekten wiederverwenden und sie einfach an das jeweilige Projekt anpassen . So können wir Teamreferenzen, Preisstabilisationen und Handlungsaufforderungen haben. Diese Preistabellen sind besonders langweilig zu erstellen, weil Sie im Grunde genommen, sagen wir, Sie haben z. B. 20 verschiedene Beispiele dieser Preistabellen online und all diese anderen Beispiele sind nur Variationen dieser Beispiele. Warum würdest du also Zeit damit verschwenden, die ganze Zeit neu zu erstellen? All diese Elemente erstellen Sie einfach, z. B. fünf oder sechs Preistabellen gleichzeitig, und verwenden Sie sie dann einfach für Ihre zukünftigen Projekte wieder , das spart Ihnen eine Menge Zeit, insbesondere mit diesen langweiligen Details, bei denen Sie die meisten dieser verschiedenen Optionen haben, insbesondere mit der Preistabelle. Sie haben also Optionen, Sie haben Preise, Sie haben einen Monatsplan, einen Jahresplan. wird also viel Zeit in Anspruch nehmen , all diese Details für jedes einzelne Projekt zu erstellen. sie in einem UI-Kit haben, sparen Sie also viel Zeit. Wenn wir hier einen Blick darauf werfen, Call to Action, besonders wichtig bei all diesen Promokarten, wir haben Foren und Kontexte. Nochmals, wie viele dieser Varianten können Sie mit diesen Formen tatsächlich haben? Nehmen wir an, Sie können z. B. 15, 20 Kontaktformulare erstellen . Da hast du es. Sie können sie für all Ihre zukünftigen Projekte wiederverwenden. Und vor allem Kopf- und Fußzeilen sind für mich aufgrund der Wiederholungsrate langweilig zu erstellen. Und sie verwenden all diese verschiedenen Elemente. Kundenlogo wird z. B. links, rechts und unten mittig angezeigt. Und das ist im Grunde alles. Sie können also sehen, wenn Sie mit der Erstellung dieser UI-Kits beginnen, dass Sie sich ein Bild davon machen können , welche Arten von Elementen Sie benötigen, um mehr zu erstellen. Welche Arten von Elementen Sie erstellen müssen für jede Art von Natur weniger offensichtlich, ist für jede Art von Natur weniger offensichtlich, in eine Art von Kontaktformular zu integrieren. Aber sobald Sie mit der Erstellung beginnen, können Sie dafür das Kontaktformular aus diesem Projekt verwenden. Sie können das Kontaktformular aus diesem Projekt verwenden und sich einfach anpassen und an Ihren zukünftigen Projekten arbeiten. Das ist der ganze Standpunkt, den ich scherze. Und deshalb finde ich es äußerst nützlich, sie zu haben und zu kreieren. Und offensichtlich wird die Erstellung dieses UI-Kits nicht einfach sein. Es wird nicht zuerst kommen. Dies ist der Prozess , den Sie während Ihrer gesamten Karriere anwenden und wiederverwenden werden. Sie können also grundsätzlich einige Elemente streichen , die stilistisch, funktionell nicht mehr relevant sind. Vielleicht werden einige Elemente in der Branche oder in mehr nicht mehr verwendet, sodass Sie sie einfach verschrotten und Elemente verwenden können, die einfach an das von Ihnen verwendete UI-Kit angepasst und angepasst werden. Das ist also das Schöne an UI-Kits und deshalb liebe ich sie so sehr. Und ich denke, du solltest auch anfangen, sie zu erkunden. 111. UI in Adobe Xd: In diesem Video zeige ich Ihnen einige Strukturideen für Ihre UI-Kits in Adobe XD. Ich werde Ihnen meine Beispiele zeigen, weil ich diese Benutzeroberflächen und UX jetzt seit vier Jahren erstellt habe. Und ich habe über 500 Designprodukte in meiner Shop-Website auf der.net erstellt. Ich werde die Links zu allem hinterlassen und darüber im PDF sprechen Sie können einfach auf diese Links klicken und sie besuchen und erkunden. Und wenn Sie interessiert sind, kaufen Sie sogar all diese verschiedenen Produkte, die ich erwähnt die ich in Zukunft erwähnen werde. Sobald wir auf diesen Websites tatsächlich zu diesen Verkaufsarten und Profilen gekommen sind, können Sie Ihre Designs verkaufen. Aber lassen die Struktur dieser UI-Kits untersuchen, wie sie in Adobe XD funktionieren können und wie Sie daraus lernen und Ihre eigenen erstellen können. Was ich hier habe, ist der konvertierte Landing Page Builder, das Produkt, das wir vor einiger Zeit erstellt haben. Und das ist natürlich das Wireframe-Kit, wie Sie sehen können. Und wenn ich etwas näher hineinzoome, aber du kannst gleich hier sehen, dass wir die Navigation haben, wir haben die Überschriften, Geschichte, Funktionen, Vorteile, Werbung, Testimonials, Team, Preise und vieles mehr. Und für all diese haben wir mehrere Optionen, natürlich, weil dies der Landing Page Builder ist. Dies sind die Elemente , die für die meisten Landingpages verwendet werden. Und das ist für jemanden gedacht , der diese Landingpages ständig erstellt, weil die meisten dieser Unternehmen diese Landingpages ständig erstellen, z. B. für ihren Kick- Startkampagnen, für ihre Produkteinführungen, für ihre Produktwerbung, für all diese Kampagnen, für Facebook-Anzeigen, für Instagram-Anzeigen, YouTube-Anzeigen usw. Landingpages sind dafür also extrem wichtig. Dieses spezielle Produkt ist für die Verwendung mit Landingpages konzipiert. Also kehren wir wieder zur Nische zurück. Was ist deine Nische und was ist deine Art von Projekt , an dem du arbeitest? Sie werden Komponenten entwickeln , die in dieser Nische funktionieren werden. Wenn wir genau hier zurückspringen, z. B. ich kann sehen, dass das 1.400 sind. Und ich kann gleich hier einsteigen , um eine neue Zeichenfläche zu erstellen. Und ich kann direkt hier springen, dieses erstellen hier klicken und es einfach auf 1.400 einstellen, damit all unsere Elemente funktionieren. Und ich werde es weiter ausbauen. Was ich also tun kann, ist, dass ich z. B. auf diese Navigation klicken kann . Klicken Sie hier, steuern Sie V. Und ich kann z. B. hier klicken, C steuern, V steuern und das anpassen, damit es passt. Ich kann sie sogar in den Stapel legen und dann einfach per Drag & Drop in den Stapel ziehen. können wir aber auch später tun. Z.B. Ich möchte diese verschiedenen Funktionen zeigen. Schauen wir uns also an, wo die Funktionen sind. Hier sind sie. Also z. B. ich kann dieses eine Control C verwenden, Control V. Und Sie können sehen, wie einfach das Erstellen dieser Websites ist, sagen wir diese eine Position genau hier. Vielleicht möchte ich diesen jetzt benutzen. Position genau hier. Vielleicht möchte ich das hier benutzen. So wie es ist. Und nehmen wir an, jetzt ist die Zeit für die Preisgestaltung gekommen, stellen Sie sie gleich hier ein. Und vielleicht so etwas. Ich möchte die Leute noch mehr überzeugen. Leg es gleich hier hin. Und die Position spielt keine Rolle, äh, im Moment und du wirst in nur einer Sekunde sehen, warum. Also stell sie hier hin. Und nehmen wir an, jetzt , wo deine Landingpage fertig ist, kannst du sie alle auswählen, Strg-G drücken, um sie einer Gruppe zuzuordnen , und sie dann in einen Stapel legen. Dies ist der vertikale Stapel und ich kann den Abstand von 150 einstellen, z. B. zwischen ihnen und Enter oder Return drücken. Und jetzt haben wir einen gleichmäßig verteilten Abstand zwischen all unseren Elementen. Ich kann sie alle so an den Anfang der Seite stellen. Und ich möchte z. B. nicht, dass es ein Fünftel davon ist. Also kann ich einfach nur diesen auf Null einstellen. Und all diese anderen werden 150 für den Abstand haben. Sie können also sehen, wie einfach es ist, eine Landingpage zu erstellen. Sie können hier doppelklicken, um es hier zu schließen. Und nehmen wir zum Beispiel an , dass die Kopie fertig ist und Sie einige Änderungen an den Bildern vornehmen möchten. Sie können Ihre Bilder einfach hierher ziehen und dort ablegen, platzieren und dann einfach Änderungen vornehmen. ZB haben wir dieses Bildsymbol genau hier. Ich kann einfach auf Löschen klicken, um es zu entfernen. Und ich kann z. B. die Opazität meines Bildes verringern , um es etwas besser zur Geltung zu bringen. Und zB möchte ich hier ein zusätzliches Bild hinzufügen. Vielleicht dieses Bild, ich möchte etwas für das Video hinzufügen. Vielleicht. Vielleicht funktioniert dieses Bild, damit Sie sehen können , wie einfach es ist, mit diesen verschiedenen Bildern zu arbeiten. Also kann ich es auswählen, vielleicht auf 40% Opazität klicken . Vielleicht kann ich hier ein anderes, anderes Symbol verwenden . Und vielleicht möchte ich das, ich weiß nicht, etwas runderes ausdrücken. Also kann ich gleich hier springen, gib 20 für den Eckradius ein. Wenn ich das machen möchte, kannst du das anpassen, damit du dir ein Bild davon wie einfach es ist, diese Elemente zu erstellen. Das ist also im Grunde meine Struktur und wie mein Team und ich jahrelang an diesen Strukturen arbeiten. Und ich werde Ihnen verschiedene Strukturen für mobile Kinder zeigen . Und das ist Chetty UI Kit. Und Sie können sehen, dass wir Bilder haben, genau hier. Natürlich wird es ziemlich einfach sein all diese Bilder zu ersetzen. Sie werden einfach genau dieselbe Struktur verwenden. Wenn ich also genau hier nachschaue, möchte ich diese Bilder vielleicht anpassen , damit ich es und dieses auswählen kann, und vielleicht kann ich zwei verschiedene Bilder auswählen und sie per Drag & Drop hineinziehen. Und ich möchte dieses benutzen, z.B. damit du eine Vorstellung davon bekommst, wie schnell es ist. Sie können aber auch direkt hier klicken, und hier haben wir all diese verschiedenen Elemente. Nun, Elemente sind wirklich nützlich. Wir haben dieses Hauptblau und ich möchte mit der rechten Maustaste klicken, auf Bearbeiten klicken und vielleicht möchte ich es in Rot ändern. Beachten Sie also einfach, wie es bei all unseren verschiedenen Änderungen gilt und einfach zum Lesen angepasst wird. Ich kann auch Control Z verwenden , um das rückgängig zu machen. Wir können auch die Schriftgrößen und die Schriftauswahl ändern. Wir können die Schriftstärken ändern. Wir können all diese verschiedenen Elemente ändern. Was ich also tun kann, ist auf Bearbeiten zu klicken und z. B. möchte ich ein anderes Telefon wie Open Sans auswählen , z. B. die Eingabetaste drücken. Und es wird diese Änderung in unserem gesamten Design anwenden . Sie können also sehen, wie einfach und unkompliziert das ist. Außerdem können wir all diese verschiedenen Komponenten haben , die wir unabhängig voneinander ändern können. Sie können also z. B. sehen , dass wir diese schwarzen Punkte haben, genau hier, genau hier, genau hier. Also in unserem gesamten Design und allem anderen, was schwarz ist, wollen wir es in etwas Wildes ändern, wie zum Beispiel noch einmal lesen, damit du sehen kannst, was wir hatten. Diese Farbe wird für das gesamte Kunstdesign gelten. Und es wird überall gelten , wo wir es überhaupt hatten. Deshalb sind all diese Komponenten äußerst nützlich. Und im nächsten Beispiel und im nächsten Video zeige ich Ihnen, wie Sie Ihr bestehendes Design in UIKit umwandeln können Ihr bestehendes Design in UIKit umwandeln , da Sie diese UI-Kits nicht für jedes einzelne Projekt kaufen werden . Und ich denke, es ist ein viel besserer Ansatz, obwohl ich diese UI-Kits verkaufe, es ist viel, viel besserer Ansatz, entweder mit einem Premium-UI-Kit nur für deine Struktur zu beginnen , nur für dieses Element, nur für ein paar langweilige Elemente, die du dann für deine eigenen Projekte wiederverwenden kannst und dann dein eigenes UI-Kit mit diesen Elementen erstellen kannst, indem du diese Taktiken und Techniken verwendest, was für dein besonderer Anwendungsfall. Weil ich noch einmal in die Nische zurückkehre. Da Sie sich z. B. in einer Reisenische befinden , funktionieren Elemente, die in Ihrem Projekt für Sie funktioniert haben , möglicherweise nicht für jemanden, der in einer Blog-Nische tätig ist, z. B. weil sie möglicherweise andere Elemente benötigen. Im nächsten Video zeige ich Ihnen also, wie Sie Ihr bestehendes Projekt in UI-Kits umwandeln können . 112. UI in Adobe Xd: In diesem Video zeige ich Ihnen, wie Sie Ihr bestehendes Projekt in UIKit umwandeln und es dann für Ihre zukünftigen Projekte wiederverwenden können. Dieser Ansatz kann für verschiedene große und kleine Projekte verwendet werden . Und du kannst bestimmte Elemente verwenden oder du kannst alle Elemente verwenden und dann einfach von dort aus weitermachen. Sie können einen Elementtyp verwenden, z. B. Navigation, wenn sich das in Ihrem Projekt ständig wiederholt, oder Sie können verschiedene Arten von Elementen verwenden, z. B. beide Navigationen, Heldenbilder, Fußzeilen, Blog, Herzen und all diese Arten von Artikeln. Also werde ich in diesem Beispiel für die bestehenden Projekte zeigen , wie Sie daraus ein UI-Kit machen können. Dies ist das Projekt, das ich für einen meiner vorherigen Kurse erstellt habe. Ich werde es belassen, den Link dazu im PDF hinterlassen, damit Sie es sich ansehen können , wenn Sie interessiert sind. All diese Elemente werden also in dieser Klasse erstellt. Es ist also über 20 h lang. Und noch einmal, ich werde den Link im PDF belassen , damit Sie schnell darauf zugreifen können. Und was wir hier haben, sind verschiedene Komponenten für die Farben, Charakterstile, all diese Komponenten für all diese verschiedenen Karten, wir haben verschiedene Symbole, wir haben unterschiedliche Strukturen, richtig? hier. Wir haben das Logo, wir haben die Pfeilkarten und vieles, vieles mehr. Was Sie dafür tun können , ist, wenn ich hier noch einmal klicke, wir sind auf 120 statt 1.400 wie beim letzten Mal. Was ich also tun kann, ist auf meine Zeichenfläche zu klicken , um eine neue Zeichenfläche zu erstellen. Oder ich kann einfach den vorhandenen duplizieren. Was noch besser ist, was ich tun kann ist direkt hier zur Datei zu gehen. Und dann Neu, tut mir leid, wenn es ein bisschen verzögert , weil ich all diese Elemente auf meinem Computer ausführe. Und diese Datei ist ziemlich riesig. Also werde ich eine neue Datei erstellen und einige dieser verschiedenen Elemente einfach in meinem Projekt wiederverwenden . Ordnung, jetzt, da wir das Projekt erstellt haben, werde ich gleich zu diesem Website-Design springen . Und ich springe bis hierher, drücke Control C. Und dann wechsle ich zu dem Projekt, das wir gerade erstellt haben, drücke Control V, damit ich einfach in dieses Design einfügen kann. Und was ich auch tun kann, ist hierher zurückzukehren. Und vielleicht kann ich einen anderen gebrauchen. Verwenden wir dieses Steuerelement C. Und ich werde in dieses Projekt springen, Steuerung V drücken. Und wenn wir dann da sind, nur um uns ein bisschen Zeit zu sparen , werde ich schalte das tatsächlich aus, also töte es. Und wie Sie sehen können, wurden einige Elemente aus unserem vorherigen Projekt bereits eingefügt, wie all diese verschiedenen Symbole. Aber wir haben keine Farben und Charakterstile und können sie separat bearbeiten. Was ich dir zeigen wollte, ist das. Also werde ich das vergrößern. Und nehmen wir an, ich möchte diese Navigation verwenden, aber lassen Sie uns zunächst dasselbe Raster verwenden. Wenn ich es also einschalte, haben wir, mal sehen, 12 Spalten. Also 60, 82, und ich werde dasselbe dafür tun. Wir haben also 60, 82. Da haben wir's. Es ist also dasselbe wie dieser. Und ich werde die Opazität dieser Gitterlinien so verringern . Nehmen wir an, ich möchte diese Navigation verwenden , damit ich Strg C drücken und sie hier einfügen kann . Und was ich tun kann, ist es genau hier zu positionieren. Und nehmen wir an, dies ist unsere erste Navigation. Gehen wir zu unseren Ebenen. So können wir z.B. Nav One verwenden. Und was ich auch tun kann, ist es zu trennen. Also lasst uns mit der rechten Maustaste klicken. Lass mich einfach sehen, wo es ist. Unverknüpfte Komponente. Da haben wir's. Das ist also das eine Ende. Wir können es als lokale Komponenten erstellen. Wir können Control K drücken, wenn wir wollen, und wir können daraus verschiedene Zustände erstellen. Also kann ich hier klicken und z. B. sagen wir big button, big btn eingeben . Und was ich hier tun möchte, ist, dass ich einfach hineindoppelklicken und diese Schaltfläche erweitern möchte , um unsere Navigationselemente zu hören und vielleicht mehr zu verschieben. Nehmen wir an, ich möchte sie genau hier oder vielleicht noch besser in der Mitte so ausrichten . Wenn wir uns also diesen Standardstatus und diesen Zustand ansehen , haben wir diese beiden getrennten Zustände. Was Sie also mit diesem machen können, ist einfach Alt in Ihrem Standardzustand zu halten, es auch genau hier zu positionieren, ich weiß nicht, sagen wir 60, dann verwenden Sie diesen Zustand. Und Sie haben bereits zwei Arten verschiedener Navigationen. Nehmen wir an, ich möchte ein anderes erstellen. Wir können also zum Standardzustand zurückkehren , der dieser ist, und einen neuen Status erstellen. Und z. B. ich kann so etwas ohne Text einfügen, so etwas. In diesem Zustand gehen wir also im Grunde rein und entfernen unseren Text, öffnen, unseren Text auswählen und auf Löschen klicken. Jetzt haben wir nur noch unseren Button übrig. Und wir können diesen Button entweder erweitern, ihn so belassen. Es liegt ganz bei dir. Also, was ich tun werde, ist diesen auszuwählen, ihn auf 60 zu verschieben und ohne Text zu klicken. Also los geht's. Wir haben unsere drei verschiedenen Elemente und drei verschiedene Navigationselemente bereits erstellt. Sie können diese auch organisieren, und das mache ich sehr gerne. Also das ist jetzt eins, das sind jetzt die beiden. Und das wird Navy Three sein. Lassen Sie mich Ihnen nur noch ein Beispiel geben, damit wir zu diesem Standardbeispiel zurückkehren und eines ohne Schaltfläche oder kurz ohne BTN erstellen können. Was wir also tun werden, ist im Grunde einen Auswahlpunkt zu treffen. Von hier aus sind wir 40 und ich wähle unsere Schaltfläche gelöscht und wähle alle unsere Navigationselemente aus. So wie es ist. Positionierte sie an der Kante Shift 1234. Wir sind also 40 von dieser Kante entfernt, genauso wie wir es mit dieser Kante sind. Und im Grunde werde ich das noch einmal machen. Also halte ich meine Alt - oder Option gedrückt, wähle know btn. Und los geht's. Ich kann in den Standardzustand zurückkehren und Sie können sehen, wie schnell das ist, wie schnell es ist. Und es wird dir eine Menge Zeit sparen. Ich werde das auf einen großen Knopf wie diesen umstellen. Das wird Ihnen später eine Menge Zeit für Ihre zukünftigen Projekte sparen . Und Sie haben bereits im vorherigen Video gesehen , wie einfach das Kopieren und Einfügen ist . Aber du kannst auch für diese Heldenbilder machen, also lass uns z.B. Control C drücken. Ich gehe zu Control V. Und was ich dir empfehle ist, dies in Navigation umzubenennen und separate zu erstellen rpart für diese Heldenbilder, also nehmen wir in diesem Fall an, wir haben diese Leute auf dieser Seite und lassen Sie uns sie duplizieren. Strg J, tut mir leid, Control D, so und positioniere es auf 60. Also noch einmal, das wird in einer separaten Zeichenfläche sein, also lassen Sie uns das tatsächlich erstellen. Also werde ich diese beiden entfernen. Und Sie können Fußzeilen in Ihrer Navigation positionieren , wenn Sie möchten. Es liegt schon an dir, wie du sie erstellen möchtest. Und ich nenne das zum Beispiel Held weil du mit diesen Heldenbildern den Großteil deiner Zeit verbringen wirst. Nehmen wir das für dieses zweite Beispiel an, das für diesen Helden ein Held sein wird. Beachten Sie, dass ich aus diesen Komponenten keine Komponenten erstelle. Ich möchte Ihnen diesen zweiten Ansatz zeigen. Wie ich Ihnen bei diesen bereits gezeigt habe, sind Komponenten natürlich extrem einfach zu erstellen, aber Sie können auch auf Komponenten verzichten und die einzelnen Elemente einfach für sich selbst erstellen. Nehmen wir an, ich möchte diesen Text rechts positionieren. Was wir mit diesen machen können, ist, dass wir diese beiden in einer Gruppe positionieren, sie in einen Stapel legen und die Reihenfolge einfach umkehren können sie in einen Stapel legen . Und jetzt ist der Text auf dieser Seite, die Leute sind auf dieser Seite. Und was wir auch tun können, ist diese Hintergrundelemente zu verwenden. Also diese Heldenform, vielleicht möchte ich sie so umdrehen und ich möchte sie so positionieren. Und all diese verschiedenen Elemente. Also Hero Elements, ich werde sie gleich hier positionieren. Du verstehst also, wie einfach das ist, n. Ich habe auch eine Maske mit meinem Heldenkreis darin. Also werde ich es genau hier positionieren. Also los geht's. Wir sind nur ein paar Klicks. Wir haben zwei verschiedene Optionen , die wir unseren Kunden zeigen können. Was das wiederum für Sie tun wird, wird es Ihnen ermöglichen, viel schneller an diesen Projekten zu arbeiten, insbesondere bei diesen sich wiederholenden Aufgaben, wie ich bereits erwähnt habe. Also Navigation, Fußzeilenbilder und all diese verschiedenen Elemente, und all diese verschiedenen Elemente die sich ständig wiederholen werden, wie z. B. Preistabellen, damit es für Sie als Designer viel einfacher ist erstellen Sie all diese Variationen in Ihrem Stil, verwenden Sie Ihre Komponenten, verwenden Sie Ihre Designsprache, verwenden Sie Ihre bevorzugte Schriftart, verwenden Sie Ihre bevorzugten Farben und verwenden Sie diese dann einfach wieder Komponenten für Ihre zukünftigen Projekte. Ist das Betrug für Ihre Kunden? Wissen Sie, denn Ihre Kunden wollen nur das Endergebnis. ihnen egal, wie Sie zu diesem Endergebnis kommen. Ist das etwas , das du wiederverwendet hast? Natürlich ist es das, aber achte nur darauf, keine Logos zu verwenden , die du zuvor in deinen Projekten verwendet und kein Branding zu verwenden, z. B. bestimmte Farben in deinen Markenbüchern , die du mit deinem Kunden, z. B. einige Farben sind markenrechtlich geschützt, einige Schriften sind markenrechtlich geschützt. Stellen Sie also sicher, dass Sie z. B. kostenlose Google-Schriften verwenden , wenn Sie mit der Erstellung beginnen, und passen Sie diese dann einfach an Ihre Kundenspezifikationen an, z. B. für Farben und Schriften. Lass mich dir nur noch eine Sache zeigen. Mit der Potenz von x D haben wir all diese verschiedenen Elemente. Stellen Sie sich also vor, dass wir dieses Bild verwenden möchten. Also Control C, Control V genau hier. Und nehmen wir an, das ist unsere erste Karte. Also nennen wir es Karte eins, wie Ente. Und hier haben wir den Stapel, wie Sie sehen können. Also drücke ich Alt. Was kann noch besser sein? Ich kann es als Komponente erstellen. Also Control K, wir haben diesen Standardstatus mit dem Bild auf der linken Seite. Also neuer Staat, richtiges Bild. Und dann passen Sie es einfach hier an. So wie es ist. Und was ich für diesen tun werde, ist , dass ich sie im Grunde einfach umdrehen werde. Also los geht's. Und ich werde diese Karte anpassen. Erstens werde ich sicherstellen, dass mein Bild hier stimmt, und los geht's. Das ist also unser Standardstatus. Das ist ein richtiges Bild. Und noch einmal werde ich eine weitere erstellen. Also zentriere ein Bild wie dieses. Und ich werde eine solche Änderung vornehmen. Also 123, also sind wir bei 60, so. Und für dieses Bild werde ich mich natürlich für das mittlere Bild entscheiden. Also, was ich tun werde, ist genau hier zu springen. Und ich werde die Position meines Stacks ändern. Also, was ich tun werde, ist sie in eine Gruppe einzufügen. Ich werde den SEC Vertical Stack wie folgt verwenden. Und erweitern Sie das Bild einfach so bis zu den Rändern. Doppelklicken Sie auf die Innenseite, z. B. genau hier. Da haben wir's. Der Text wird in nur einem Moment in der Mitte sein. Gehen wir also zum Standardstatus und lassen Sie uns hier am mittleren Bild arbeiten. Weil das unsere Komponente ist. Was ich tun möchte, ist diesen Text im Grunde anzupassen. Also lass uns weitermachen, lass uns die automatische Breite sehen. Ich werde also darauf doppelklicken und diesen Text anpassen. Bingo ein bisschen draußen. Sie können aber auch eine automatische Höhe erstellen und sie so anpassen. Und bring einfach so mit, was du nicht brauchst. Also wir sind nur ein paar Klicks. Wir werden es anpassen können. Und Sie können automatisches Gewicht vornehmen, Sie können automatische Höhe vornehmen, was auch immer Sie wollen. Und ich werde dafür sorgen, dass es so mittig ausgerichtet ist . Und ich werde das vielleicht in der Mitte positionieren und meinen Knopf auch in der Mitte positionieren. Und stellen Sie sicher, dass wir von all diesen 40 sind. Und stellen Sie einfach sicher, dass wir es sind, weil wir in einem Stapel sind, z. B. 64, dieser. Und du kannst es auch gleich hier eingeben. Wenn ich also meine Gruppe hier auswähle, wähle 60 und sie ist ausgewählt. Los geht's mit nur ein paar Klicks. Sie haben drei verschiedene Karten, die Sie verwenden können. Im Grunde haben wir also ein Standardbild, rechtes Bild, zentrales Bild. Also kannst du damit machen , was du willst. Wir können also sehen, wie einfach es ist, diese Elemente in Adobe XD zu erstellen. Und noch einmal fordere ich Sie auf, über Ihr Projekt nachzudenken, über Ihre Nische nachzudenken. Dies sind einige Elemente, die ständig wiederholen und nach denen gesucht wird. Meine Elemente, die extrem langweilig sind. Können Sie etwas kaufen oder kostenlos herunterladen , was Ihren Arbeitsablauf verbessern Ihren Arbeitsablauf beschleunigen wird? Oder müssen Sie je nach dem neuen Chorion, je nach Ihrem Designstil, alles von Grund auf neu erstellen dem neuen Chorion, je nach Ihrem Designstil, alles von Grund . Wenn das der Fall ist, beginnen Sie einfach damit , all diese regulären Elemente zu erstellen , wie ich es Ihnen in diesem Beispiel gezeigt habe, z. B. Navigation, Fußzeile, all diese verschiedenen Autos, die Ich werde es ständig wiederholen und dann einfach von dort aus im Laufe der Zeit erweitern. Abschließend möchte ich Ihnen zeigen, dass, wenn wir zu Adobe XD zurückkehren, Sie sehen können, dass diese Datei in der Cloud gespeichert wurde. Dies ist äußerst wichtig, besonders wenn Sie dies mit Ihren Designkollegen, mit Ihren Kunden oder wenn Sie von zu Hause aus arbeiten, z. B. Sie das Büro haben und Sie funktioniert auch auf dem Laptop. Was ich aber auch empfehle, ist, dies auf Ihrem Desktop zu speichern. Dazu können Sie einfach hier auf Datei schreiben, Speichern unter, und Sie können ein so sicheres wie lokales Dokument auf Ihrem Desktop wählen . Auf diese Weise können Sie diese Datei einfach haben, z. B. wenn der Strom weg ist, können Sie sie zu Ihrem Laptop nehmen und Ihren Laptop überall hin mitnehmen. Wenn Sie sich anpassen und einige schnelle Änderungen vornehmen müssen, wenn das Internet weg ist, was wirklich der Hauptvorteil lokaler Dokumente ist, können Sie sie einfach lokal speichern und einfach arbeiten oder nicht. Wenn Sie keine Internetverbindung haben. 113. UI-Kit VS: Es gibt auch eine weitere Art von Vorlage, die online verfügbar ist als Designsystem bezeichnet wird. Und das Designsystem ist im Grunde tot. Es beinhaltet verschiedene Arten von Schriften, verschiedene Arten von Regeln verschiedene Arten von Rastern in vielen anderen Projekten, insbesondere wenn Sie mit Code arbeiten. Sie werden also einen anderen Codeausschnitt zuweisen. Du wirst verschiedene Token für Farben, für Schriften und vieles mehr zuweisen . Das Designsystem ist also viel komplexer, übersichtlicher und ein UI-Kit. Abhängig von den Projekten, an denen Sie arbeiten, können Sie ein kleineres Designsystem erstellen, wenn Sie an kleinen Projekten arbeiten oder wenn Sie mit größeren Projekten arbeiten. Ich empfehle es denen Sie arbeiten, können Sie ein kleineres Designsystem erstellen, wenn Sie an kleinen Projekten arbeiten oder wenn Sie mit größeren Projekten arbeiten auf jeden Fall arbeitet mit dem Designsystem. Der Hauptunterschied zwischen UI-Kit und Designsystem besteht jedoch darin, dass UIKit diese vorgefertigten Komponenten bereits erstellt hat . Wie Sie im vorherigen Video gesehen haben, haben wir diese Navigation bereits erstellt. Also ist es fertig. Darin befindet sich das Logo , das Sie mit Ihrem nächsten Kundenprojekt austauschen können . ist der Typ drin, also ist schon alles positioniert. Sie können einige dieser Typen einfach umbenennen. Sie können die Schriftart ändern, Sie können die Stile ändern, Sie können die Größe ändern und alles andere. Und der Knopf war schon da. Sie können also einfach die Breite, die Höhe, die Farbe der Schaltfläche, den Hintergrundschatten und all diese Elemente anpassen die Farbe der Schaltfläche, . Und das ist das UI-Kit auf den Punkt gebracht, während Sie mit dem Designsystem diese Navigation von Grund auf neu erstellen müssten. Und weil Sie innerhalb des Designsystems eine sehr kohärente Struktur haben. Also kehre ich noch einmal zu dem größeren Projekt zurück, insbesondere zu dem riesigen Projekt, bei dem die Mehrheit der Designer an demselben Projekt arbeitet. Dann ist das Designsystem wirklich wichtig, da Sie ein zentrales Repository mit Elementen benötigen , die für all diese verschiedenen Designer in Ihrem Team verwendet werden für all diese verschiedenen Designer in Ihrem Team verwendet können. Wenn Sie alleine arbeiten oder nur mit einem anderen Designer zusammenarbeiten oder wenn Sie direkt mit dem Kunden zusammenarbeiten, ist das UI-Kit meiner Meinung nach eine viel bessere Lösung, denn noch einmal es wird Ihren Arbeitsablauf erheblich beschleunigen, da Sie all diese Elemente bereits erstellt haben. Sie müssen sie nicht ständig von Grund auf neu erstellen . Während das Entwerfen von Systemen meiner Meinung nach für diese kleineren Projekte äußerst wichtig , äußerst wertvoll und äußerst nützlich ist, müssen Sie diese Designsysteme nicht wirklich erstellen , weil Sie habe die Komponenten. So können wir die Komponenten einfach anpassen. Sie können die Schriftgröße einfach anpassen. Sie können die Schriftfamilie einfach anpassen. Sie können die Farbe anpassen. Sie können all diese verschiedenen Elemente anpassen , z. B. Icons. Nehmen wir an, Sie verwenden diese Bildsymbole in Ihrem gesamten Design. Und Sie möchten es nur sehr schnell austauschen , während Sie eine Komponente erstellen können. Und wenn Sie das nächste Mal beim nächsten Projekt das ändern möchten, können Sie einfach ein anderes Symbol hineinziehen und dort ablegen. Es wird diese Komponenten austauschen. Und los geht's. benötigen Sie kein Designsystem Für all diese kleinen Projekte benötigen Sie kein Designsystem. Also noch einmal, es hängt von Ihnen ab, an welcher Art von Projekten Sie arbeiten, in welcher Nische Sie sich befinden, besonders für diese kleinen Nischen Diese Designsysteme sind nicht wirklich nützlich. Noch einmal, es liegt an Ihnen und ich werde die Links zu einigen der bekanntesten Designsysteme in einem PDF hinterlassen einigen der bekanntesten Designsysteme in einem PDF Sie können die XD-Version herunterladen. Sie können sie in Adobe XD öffnen und einfach herausfinden , was diese Designsysteme sind und was Sie von ihnen lernen können. Weil all diese von großen Unternehmen gegründet wurden. Und wieder einmal haben diese großen Unternehmen diese Designsysteme entwickelt , weil sie mehrere Designer haben , die gleichzeitig in einem Team arbeiten. Sie benötigen also diese zentrale Sammlung von Elementen, die von all diesen verschiedenen Designern verwendet werden können. Andernfalls, wenn Sie nur eine Mannband sind an kleinen Projekten arbeiten, können Sie einfach UI-Kits verwenden und es wird alles in Ordnung sein. 114. Premium VS kostenlose UI-Kits: Es ist schön und gut, diese UI-Kits selbst für sich selbst zu erstellen . Aber manchmal ist es vielleicht einfacher, einfach weiterzumachen und diese verschiedenen UI-Kits herunterzuladen oder zu kaufen, die für Ihre zukünftigen Projekte verwendet werden, vielleicht für diese langweiligen Elemente wie wir zuvor erwähnt haben, mochte die Navigation, wie die Fußzeile, wie die Preistabellen und so weiter. Wo Sie also diese UI-Kits finden, werde ich Ihnen in der nächsten Lektion zeigen wo wir auf diesen Websites tatsächlich über den Verkauf über den Verkauf Ihrer eigenen persönlichen UI-Kits sprechen werden. Aber im Grunde wollte ich in dieser Lektion mit Ihnen teilen, dass diese Premium-UI-Kits nur für dumme Marken entwickelt wurden diese Premium-UI-Kits nur für dumme Marken entwickelt wurden. Damit meine ich, dass es keinen bestimmten Zusammenhang zwischen diesem UI-Kit und einer bestimmten Marke gibt. Sie können sich einfach vorstellen , dass, wenn iOS sein UI-Kit veröffentlichen würde spezifisch für diese Branding-Richtlinien, diese Grid-Richtlinien, diese Topografie-Richtlinien und all diese verschiedene Elemente, die in diesem Fall aus diesem speziellen UI-Kit und in diesem Fall aus diesem bestimmten Betriebssystem bestehen. Es ist also dasselbe. Wenn Facebook beispielsweise eigenes UI-Kit auf den Markt bringt, wird es an dieser blauen Farbe, an der Fremdschrift und all diesen Elementen erkannt . Bei diesen Premium - und kostenlosen UI-Kits, die Sie online finden, ist jedoch keine bestimmte Marke im Sinn. Warum ist das so? Weil es dafür gedacht ist, von anderen Designern verwendet zu werden. Es wird ziemlich einfach für Sie sein , die Farben zu ändern, die Schriften und all diese Elemente zu ändern , über die wir zuvor gesprochen haben. Das ist also der springende Punkt des Premium- oder kostenlosen UI-Kits. Was ist nun der Unterschied zwischen einem kostenlosen und einem Premium-UI-Kit? Natürlich ist Nummer eins der Preis. Kostenlose UI-Kits können natürlich kostenlos heruntergeladen und die Premium gekauft werden. Und der Hauptunterschied ist meiner Meinung nach die Anzahl der Elemente. Normalerweise enthalten diese kostenlosen UI-Kits nur zehn oder 20 verschiedene Elemente. Während Premium-UI-Kits, wie das Quantum UI Kit, insbesondere das ich dir zuvor gezeigt habe, z. B. 1.000 verschiedene Elemente enthalten. Außerdem gibt es Unterschiede bei den Dateitypen, z. B. bei kostenlosen UI-Kits, es gibt normalerweise nur einen Dateityp, z. B. Adobe XD oder Adobe Photoshop oder Sketch oder Figma oder was auch immer. Während es sich um Premium-Dateien handelt, sind Designer in der Regel bestrebt, all diese verschiedenen Dateitypen einzubeziehen. Egal, was Sie verwenden, Sie werden abgesichert sein. Außerdem gibt es einen Unterschied in der Differenzierung der Elemente. In kostenlosen UI-Kits erhalten Sie also einfach z. B. 23 Kategorien. Bei Premium-UI-Kits erhalten Sie normalerweise 102050 verschiedene Kategorien. Und zum Schluss möchte ich die Unterstützung erwähnen. Wenn etwas kaputt geht, wenn etwas mit drei UI-Kits nicht funktioniert , wen interessiert's, es ist kostenlos und Sie erhalten keine Unterstützung vom Designer. Bei Premium-Märkten, insbesondere wenn Sie sie direkt auf ihrer Website kaufen , haben Sie grundsätzlich Anspruch auf den Support. Und Sie werden als Erster in der Schlange stehen, um Hilfe von diesen Designern zu erhalten , die diese UI-Kits erstellt haben. Im nächsten Video werde ich also über den Verkauf eigener UI-Kits sprechen . Und wir werden im Grunde diese verschiedenen Websites durchsuchen. Und ich werde dir zeigen, wo du die Premium-UI-Kits für dich selbst bekommen kannst . Und Sie können auf diesen speziellen Websites auch Ihre eigenen UI-Kits verkaufen . 115. Erstellen und Verkaufen deines UI-Kits: Wenn es darum geht, Premium-UI-Kits online zu kaufen oder wenn es darum geht, Ihre eigenen UI-Kits online zu verkaufen. Es gibt nur eine Handvoll Websites, auf denen Sie dies erfolgreich tun können. Es gibt viele verschiedene Websites da draußen. Und mein Rat als jemand, der sechs Jahre dabei ist ist, nicht zu versuchen, überall zu verkaufen , weil Sie sich einfach zehn lassen, Sie werden zu viel Zeit damit verschwenden , ist, nicht zu versuchen, überall zu verkaufen, weil Sie sich einfach zehn lassen, Sie werden zu viel Zeit damit verschwenden Websites, die Ihre Verkäufe nicht generieren werden. Ich habe diesen Rat befolgt. Folgen Sie diesem Video von jemandem der es, wie gesagt, seit sechs Jahren macht und ich 100.000 Verkäufe mit all meinen verschiedenen Produkten erzielt habe . Also sollte ich wissen, ich überlege mir, wo man verkaufen sollte und wo ist es rentabel oder nicht. In diesem Video zeige ich Ihnen, wie ich im vorherigen Video sagte, diese Websites, auf denen Sie Premium-UI-Kits kaufen und auf denen Sie Ihre eigenen UI-Kits verkaufen können. Nun zunächst, warum Sie Ihre eigenen UI-Kits überhaupt verkaufen sollten . Eigentlich ist es einfach vernünftig, dies zu tun, und es ist einfach eine gute zusätzliche Einnahmequelle für Sie. Wenn Sie z. B. ein gut aussehendes UI-Kit für eines Ihrer vorherigen Projekte erstellt haben . Sie können es einfach mit den Tipps und Techniken erweitern , über die wir zuvor gesprochen haben. Bereiten Sie es einfach vor und verkaufen Sie es auf einer dieser verschiedenen Websites. Sie können es zu dem Preis zum Verkauf anbieten, der auf all diesen verschiedenen Websites angegeben ist . Sie können sich einfach an den Marktpreis anpassen. Sie können herausfinden, was andere tun. Passen Sie es einfach selbst an. Also, wenn Sie z.B. 100 Elemente in Ihren UI-Kits haben und nur einen Dateityp anbieten, nämlich Adobe XD. Stellen Sie sicher, dass Sie nicht zu viel verlangen , da Sie mit jemand anderem konkurrieren , der es in Adobe XD Sketch Figma Photoshop erstellt. Vielleicht verkauft sich Ihr Kind viel besser als Ihr UI-Kit weil es all diese verschiedenen Dateitypen anbietet. Lass uns reinspringen und ich werde dir all diese verschiedenen Websites zeigen und wo du deine Produkte verkaufen kannst. Und zuallererst Self-Hosting. Im Grunde ist Self-Hosting also der Ort, an dem Sie die Produkte hosten und dafür verantwortlich sind , Ihre Kunden zu gewinnen. Sie sind also für die Werbung verantwortlich, Sie sind für den Verkauf verantwortlich, Sie sind für die Lieferung von allem anderen verantwortlich. Und sie sind auch Marktplätze denen Sie auf all diesen verschiedenen Marktplätzen verkaufen können , und sie erledigen die ganze Arbeit für Sie. Fangen wir also mit Self Hosted an. Im Grunde ist die Website, die ich seit Jahren verwende, Kaugummi Road. Sie können anpassen, Sie können all diese verschiedenen Produkte hochladen. Sie können benutzerdefinierte Links, benutzerdefinierte Rabatte und benutzerdefinierte Farben erstellen. Sie können diese verschiedenen Call-to-Action-Buttons erstellen, wie es hier steht, mit dem Verkauf beginnen oder jetzt kaufen oder jetzt kaufen, was auch immer Sie wollen. Und Sie können dies im Grunde mit der Präsentation von Beacons verbinden , mit der Dribble-Präsentation können Sie Ihre Zuschauer einfach hierher mitnehmen und sie können sie in Ihrem Kamera-Shop kaufen. Oder Sie können tun, was ich mit meinem Team gemacht habe , ist eine Website zu erstellen. Und auf dieser Website können Sie z. B. UI-Kits erstellen. Und nehmen wir an, du kannst UIKit genau hier sehen, UX Kids genau hier. Wir haben also ein paar von ihnen. Und nehmen wir an, dass Benutzer dieses kaufen möchten, z. B. können sie einfach klicken. Sie werden auf die spezifische Seite für dieses Produkt weitergeleitet, der die Beschreibung genau hier steht . Was ist enthalten? Es funktioniert in welcher Software und wenn Sie auf Jetzt kaufen klicken, werden sie zur Gum Road-Seite weitergeleitet. Sie können einfach klicken, ich will uns und sie können dieses Produkt kaufen. Und wie Sie sehen, ist es viel einfacher, von einer Website zur nächsten zu gehen. Was Sie auch tun können, ist integrierter Verkauf. Das heißt, wenn sie auf Jetzt kaufen klicken, öffnet sich genau hier ein Fenster, in dem sie direkt von dort aus einkaufen können. Aber stellen Sie sicher Sie verstehen, ob Sie Gum Road verwenden, insbesondere wenn Sie etwas wie Google Analytics verwenden, z. B. werden diese beiden abstürzen. Stellen Sie also einfach sicher, und deshalb sage ich, dass Sie auf eine sichere Kaufseite weitergeleitet werden. Wenn sie also direkt hierher gehen, wie Sie sehen können, ist Gum Road wirklich sicher, da es meine Website ist, aber ich möchte nur diese zusätzliche Sicherheitsebene haben , weil die Leute ihre Kreditkarte hinterlassen Nummern, ihre PayPal-E-Mail-Adressen. Ich möchte also nicht, dass dem etwas passiert. Also im Grunde ist es das. Das ist meine Meinung. Du hast auch eine Website namens Sulfide, die Come Road im Grunde ziemlich ähnlich ist , aber meiner Meinung nach gibt es Gum Road von Anfang an in gibt es Gum Road von Anfang an diesem Online-Spiel und du kannst, wie gesagt, angepasst an alles, was Sie tun, auch immer Ihr Produkt aussieht, in diesem Fall UIKit, aber Sie können alle möglichen Dinge verkaufen. Gehen wir nun zu den Marktplätzen über. Und ich werde Ihnen zeigen, welche der wichtigsten Marktplätze es gibt. Und wie gesagt, Sie können all diese anderen Marktplätze erkunden, besonders wenn Sie mit dem Verkauf beginnen, wenn Sie anfangen, Fuß zu fassen. All diese verschiedenen Marktteilnehmer werden sich an Sie wenden und sagen, dass sie diese revolutionäre neue Website haben, die Ihnen so viel Geld einbringen wird. Du wirst nicht wissen, was du damit anfangen sollst, aber hör ihnen einfach nicht zu. Stellen Sie sicher, dass Sie mit dem Verkauf auf diesen großen Websites beginnen und dann auf diese kleineren Websites expandieren. Aber nur mit einem Produkt nach dem anderen. Wenn Sie wie ich 500 Produkte haben, ist es buchstäblich unmöglich, all diese Produkte auf all diese verschiedenen Websites hochzuladen . Und warum solltest du das überhaupt tun wollen? Wenn sie z. B. nicht 1 Million verschiedene Verkäufer haben oder wenn sie dir nicht genug Umsatz bringen. Um loszulegen, haben wir Envato Market und diese Website ist Graphic River. Darin haben Sie Web Elements und Benutzeroberflächen. Du kannst da reinspringen. Sie können sehen, wie einige dieser verschiedenen Produkte aussehen. Wie ich bereits sagte, müssen Sie keine UI-Kits verkaufen. Du kannst verkaufen, was du willst. Aber in diesem Kurs dreht sich alles um UI-Kits. Als nächstes haben wir ein Modell entworfen und diese Leute wählen furchtlos aus, was auf ihrer Website stehen kann. Und du kannst sehen, dass all diese Elemente wirklich von hoher Qualität sind, wirklich erstklassig, besonders für diese UI-Kits und wenn ich z. B. hier klicke, nur um dir diese verschiedenen Präsentationen zu zeigen weil Sie mit ihnen zusammenarbeiten , um diese Präsentationen zu erstellen. Sie können sehen, dass sie wirklich im Vollbildmodus sind und wirklich poliert aussehen. Sie sehen wirklich professionell aus. Sie sehen wirklich hochwertig aus, und das ist das Wichtigste an ihnen. Und ich denke, dass du auch verschiedene Animationen hinzufügen kannst , wenn du mit ihnen kreierst. Als nächstes haben wir Creative Market und im Grunde Graphic River und Creative Market, oder seit Anbeginn der Zeit dort. Und Sie können all diese verschiedenen Vorlagen durchsuchen . Lassen Sie uns also mit Webvorlagen beginnen, z. B. können Sie sehen, wie viele davon es gibt. Aber wenn ich mich für Vorlagen entscheide und ich mit, lass mich mich daran erinnern, wo all diese sind. Also grafische Webelemente. Und wenn ich dort klicke, können wir durchfiltern. Also lass uns mit Adobe XD weitermachen. Und Sie können all diese verschiedenen Elemente für Adobe XD sehen . Und wir können dies sogar weiter filtern, indem wir zu Vorlagen für Social-Media-Websites gehen . Und wir haben Wireframing-Kits, z. B. kann ich das auswählen. Und du kannst Wireframe-Kids sehen, wie sie aussehen, wie viele gibt es? Hier sind meine. Und Sie können sie durchstöbern, wenn Sie interessiert sind. Und das ist im Grunde alles. Du gehst einfach hierher und siehst, was diese anderen Designer machen C, welche ihrer Kategorien sie verwenden, C, in welcher Software sie diese Wireframe-Kids erstellen, UI Kits und so weiter. Und beginnen Sie im Grunde von dort aus und finden Sie heraus, was für Sie funktioniert. Schließlich haben wir auch, dass Sie acht Jahre alt sind, was in der Branche bekannt ist. Sie sind auch von hohem Standard und von hoher Qualität. Und sie sind es wirklich, wenn es darum geht, auszuwählen, wer auf ihrer Website verkaufen kann, damit Sie sie sich ansehen können. Ich kann sie wirklich empfehlen. Schließlich haben wir Envato Elements und wir haben Bündel entworfen. Envato Elements ist nur der Teil des Envato-Marktes. Sie müssen sich also separat bewerben , um auf Envato Elements zu verkaufen. Aber sobald Sie dies getan haben, werden Sie im Grunde mit dem Betrag bezahlt , den jemand Ihre Produkte herunterlädt. Wenn ich also z. B. nach dem UI-Kit suche können Sie all diese verschiedenen Elemente sehen. Und im Grunde besteht der Unterschied zwischen diesem Marktplatz und all diesen anderen Marktplätzen mit Ausnahme von , äh, weil sie alle Zugangspässe haben, aber sie haben Einschränkungen wie viele Artikel, die Sie pro Woche, pro Monat, pro Tag usw. herunterladen können. Envato Elements hat zwar keine Einschränkungen, aber Sie können herunterladen, was Sie wollen, wo immer Sie wollen, und Sie zahlen ein Jahresabonnement anstelle von drei Monaten, sechs Monaten, einem Monat, was auch immer. All diese anderen sind im Grunde genommen nur nutzungsabhängig. Wenn Sie sich also für den Kauf dieses Produkts entscheiden, kaufen Sie es z. B. einfach. Oder wenn Sie meine Produkte kaufen möchten, können Sie sie einfach kaufen. Und dieselbe Geschichte mit all diesen anderen und dieselbe Geschichte mit Gum Road, aber mit Kameras können Sie wählen, ob Sie separate Pakete erstellen möchten. Wenn wir also wieder hierher zurückkehren, wenn ich z. B. nach unten scrolle, kann ich aus all meinen Produkten ein UI-Kit-Bundle erstellen. Und ich kann wählen, wie ich es getan habe, ein riesiges Wireframe-Bundle zu erstellen . Und das können Sie ganz einfach innerhalb von Kameras tun, während Sie das nicht auf all diesen verschiedenen Websites tun können. Nun zurück zu Envato Elements: Wie gesagt, Sie verdienen kein Geld für ein separates Produkt, das jemand anderes gekauft hat, sondern Sie verdienen Geld. Aber wie viele Ihrer Produkte hat jemand heruntergeladen und wie viele Downloads haben Sie in dieser Kategorie für Ihren Beitragsbonus? Also z. B. wie viele dieser verschiedenen Produkte haben Sie in den meisten dieser anderen Dinge. Und noch einmal, wenn Sie interessiert sind, können Sie einfach auf ihrer Website stöbern. Und noch einmal, hier ist mein Produkt Austria UI Kit. Und zum Schluss möchte ich Design-Pakete mit Ihnen teilen , einer der neueren Websites der Branche, aber es lohnt sich, aber es lohnt sich verfolgen, denn hier können Sie auch all diese UI-Kits verkaufen wie wir bereits erwähnt haben, aber sie haben auch verschiedene Pakete, die sie von Zeit zu Zeit ausführen. Und im Grunde ist ein Bundle so etwas ein Paket und du kannst ein Paket kaufen, z. B. haben zehn verschiedene Designer zehn verschiedene UI-Kits. Sie verwenden all diese UI-Kits, packen sie in ein Paket namens Bundle senken den Preis wirklich stark und werden dann einfach wie verrückt vermarktet. Und im Grunde wird dieses Paket ein paar Tausend Verkäufe bringen , und dann teilen sie das Geld einfach von diesem bestimmten Paket auf diese Designer . Normalerweise gibt es zwei verschiedene Modelle. Entweder 50, 50, 50 gehen in diesem Fall an die Designpakete und 50 gehen an alle anderen Designer. Und es gibt auch ein Modell 50 und der Rest, 50% gehen an Design-Pakete, und der Rest geht an diejenigen die das größte UI-Kit haben, erhalten das meiste Geld. Wer die geringste Freude hat, Kinder bekommen den geringsten Geldbetrag. Also im Grunde genommen, abhängig von der Website, je nach Angebot , je nach Paket, erhalten Sie einen bestimmten Prozentsatz des Geldes. Ich werde in Zukunft einen separaten Kurs erstellen. Erläutern Sie all dies, erklären Sie, wie Sie Präsentations-Tags vorbereiten, wie Sie Beschreibungen erstellen, wie Sie Ihr Targeting auswählen, wie Sie Ihr Produkt am besten beschreiben, wie Sie diese erstellen kurze Listen, wie du diese Titelbilder erstellen kannst und all diese Elemente. Insbesondere werde ich über Support sprechen. Warum Support wichtig ist, wie Sie Support umgehen können, indem eine gute Beschreibung geben und ein gutes Produkt überhaupt bereitstellen, was ein großartiges Produkt ausmacht und vieles mehr. Wenn du an diesem Kurs für die Zukunft interessiert bist, folge mir einfach in den sozialen Medien oder du kannst mir eine Nachricht hinterlassen. Du kannst mir hier folgen, wo auch immer du dir diesen Kurs ansiehst , und bleib einfach auf dem Laufenden für die Zukunft. Und du kannst auch meinem YouTube-Kanal folgen. Ich werde den Link dazu auch im PDF hinterlassen, ich stelle alle Arten von Adobe XD-Inhalten zur Verfügung. Wenn Sie also interessiert sind, folgen Sie mir dort und ich werde diesen Kurs in Zukunft ankündigen. 116. ABSCHNITT 14 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, Adobe XD zu verwenden und Ihr eigenes UI-Kit zu erstellen. Es muss nichts Großes sein. Sie können einfach zwei oder drei Elemente erstellen , z. B. die Navigation kann ein Slider sein oder zwei oder drei verschiedene Abschnitte wie ein Kontaktformular, z. B. nur einige Elemente, die Sie in Ihrem gesamten Website-Designprozess oder Ihr App-Designprozess. Versuche einfach, auf diese Weise zu üben , denn es wird viel einfacher sein je später du zu echten Projekten übergehst . Oder wenn Sie bereits einige echte Projekte haben, an denen Sie arbeiten wird es viel einfacher sein, diese Komponenten später in diesem Projekt wiederzuverwenden . 117. ABSCHNITT 15 Designsysteme: Designsysteme sind eines der leistungsfähigsten Tools , die Designern heute zur Verfügung stehen. Sie sind unglaublich wichtig, unglaublich mächtig, wenn man mit ihnen anfängt, weil man keine Zeit mehr mit den Elementen verschwendet , die man bereits erstellt hat. Sie beginnen, einige dieser Elemente, Farben, Typografie, Stile und vieles mehr wiederzuverwenden . Sie sind besonders wichtig, wenn Sie sie mit dem Live-Code verbinden. Wenn Sie tatsächlich ein Designsystem in einem Design-Tool erstellen , ist es großartig, es zu haben, aber wenn Sie es tatsächlich mit Live-Elementen in etwas wie Webflow kombinieren in etwas wie Webflow , das wir in diese Klasse. Es wird unglaublich einfach sein, damit zu arbeiten, unglaublich schnell. Und es wird dir viel Zeit sparen. Und Ihre Kunden verdienen eine Menge Geld weil Sie nicht zu viel experimentieren werden , wenn Sie erst einmal über die grundlegenden Kernfunktionen eines Designsystems verfügen . Also lass uns anfangen. 118. Was ist ein Designsystem: Das Designsystem ist, wie der Name schon sagt, ein systematischer Ansatz zur Erstellung von UI- und UX-Designs. Der Hauptzweck jedes Designsystems besteht darin, den Überblick darüber zu behalten, was jeder im Team geschaffen hat. Der Hauptzweck des Designsystems ist die Skalierbarkeit. Sei es die unmittelbare Skalierbarkeit oder die Skalierbarkeit, die in Zukunft kommen wird. Die Hauptaufgabe des Designsystems besteht jedoch darin diese Skala konsistent zu halten. Das bedeutet, dass jede Änderung , die Sie vornehmen, sich im Rest Ihres Designs widerspiegelt , kohärent ist und im Erscheinungsbild dessen bleibt , was entscheidend ist der Anfang eines Designsystems. Jedes gute Designsystem besteht aus zwei Tanks, Regeln und Standards und Musterbibliotheken. Regeln und Standards sind für alle Teammitglieder da , um sie bis ins kleinste Detail zu befolgen, denn nur so kann das Designsystem gleichmäßig skaliert werden. Es wird wachsen und es wird während seiner gesamten Lebensdauer konsistent sein . Denn die Lebensdauer des Designsystems ist die Lebensdauer des Unternehmens. Es ist nie fertig, es ist nie fertig. Solange das Unternehmen oder das Produkt existiert, kann das Designsystem also kann das Designsystem mit diesem Produkt oder dieser Firma koexistieren, während die Musterbibliothek auf der anderen Seite vorhanden ist und skaliert werden wird. ständig abhängig von den Bedürfnissen, oft Bedürfnissen, Kuratieren Sie die Bedürfnisse und zukünftigen Bedürfnisse jedes einzelnen Projekts und jedes einzelnen Unternehmens. Das größte Missverständnis ist, dass Designsysteme nur für große Unternehmen sind , was sie nicht sind. Sie können ein Designsystem für kleinere Unternehmen verwenden, Sie können das Designsystem mit weniger Komponenten, mit weniger Nummernrichtlinien und Standards verwenden. Und diese Richtlinien können am Anfang etwas grob sein. Aber im Laufe des Projekts, das Unternehmen wächst, werden die Regeln und Standards verschärft und das Designsystem wird endlich seine Form und Form annehmen, beabsichtigte Form von der Anfang. Und es wird einfach mit dem Unternehmen wachsen. Designsysteme können sowohl für Designer als auch für Entwickler verwendet werden. Und das kann erreicht werden etwas verwendet, das Token genannt wird. Wir werden etwas später in diesem Kurs über sie sprechen. Aber im Grunde ist die Zusammenarbeit zwischen Designern von Entwicklern der Schlüssel zu jedem guten Designsystem da draußen. Sobald die Änderung vorgenommen oder verbreitet wurde, müssen Designer und Entwickler auf derselben Seite sein , damit ihr Designsystem funktioniert und die Änderung sofort umgesetzt werden kann. Und es ist so einfach wie möglich. Das ist extrem wichtig für Startups, aber auch für etablierte Unternehmen da draußen, da Sie das Design und die Funktionalität des Produkts nicht dadurch beeinträchtigen möchten , dass Sie einfach das Design ändern. System zu viel mit etwas, das nicht auf jeden im Team abgestimmt ist. Es gibt ein paar Dinge , die jedes gute Designsystem da draußen haben sollte. Im nächsten Video werden wir genau darüber sprechen. Was ist die gute Struktur für jedes gute Designsystem da draußen? 119. Aufbau eines Designsystems: Wie ich in der vorherigen Lektion erwähnt habe, Struktur eines guten Designsystems besteht die Struktur eines guten Designsystems wirklich aus zwei Dingen, Regeln und Standards und Musterbibliotheken. Regeln und Standards können in vielen verschiedenen Formen existieren. Zum Beispiel muss jede Regel mit etwas übereinstimmen, das Sie innerhalb dieses Designsystems tun. Nehmen wir an, die Regel kann sich überhaupt auf das Raster beziehen, es kann sich um Typografie handeln. Bei der Regel kann es um Farbe, um Abstände, um horizontalen oder vertikalen Rhythmus gehen. Es kann um alles gehen. Und Rollen können natürlich gebrochen werden, aber sie können ganz am Anfang eines Designsystems gebrochen werden , denn später, wenn das Projekt entwickelt wird, wenn das Projekt gewachsen ist, ist es viel Es ist schwierig, eine Regel zu brechen, als wenn Sie gerade erst mit einem Designsystem beginnen. Standards können so etwas wie Unternehmenswerte sein. Sie können so etwas wie eine Sprache sein, wie eine Stimmung des Projekts und nicht von der Website des Kunden oder der Marke des Kunden. Und das sollte bis ins Innere eines Designsystems befolgt werden , da Sie nicht zu sehr abweichen möchten, insbesondere im Designsystem , das wirklich Corporate ist. Sie möchten nicht, dass sie sich zu sehr ändern, weil die Unternehmenskollegen wirklich an diesen Ton, diese Art von Design, diese farbigen Typen, diese Topografien, Hierarchien und vieles mehr gewöhnt diese Art von Design, diese farbigen Typen, sind. Der zweite Teil eines guten Designsystems sind Musterbibliotheken. Und Sie können diese Musterbibliotheken im Laufe der Zeit ändern . Der Haupttipp hier ist, sobald Sie mit dem Erstellen von Musterbibliotheken für Entwurfssysteme beginnen, müssen Sie keine Elemente erstellen, die im Moment nicht erforderlich sind. Wenn Ihr Projekt beispielsweise kein Dashboard hat, werden Sie keine Elemente wie Grafiken und Diagramme erstellen , weil sie im Moment einfach nicht relevant sind. Sie werden Ihr Designsystem nicht mit all diesen nutzlosen Komponenten füllen , denn denken Sie daran , dass Sie als Designer da sind. Ihr Designteam ist da, um diese Designs zu erstellen, aber diese Designs sollten für Entwickler zugänglich und leicht verständlich sein, die all diese Elemente für dieses spezielle Projekt entwickeln müssen . Erstellen Sie also einfach Elemente, die in diesem Moment benötigt werden , und lassen Sie das Designsystem im Laufe der Zeit skalieren, je nach Bedarf des Projekts. Wie können Sie nun all diese Komponenten in der Komponentenbibliothek unterteilen ? Grundsätzlich gibt es drei Hauptkategorien. Es gibt Atome, Moleküle und Organismen. Und Sie können natürlich Vorlagen hinzufügen. Sie können natürlich auf beliebig viele andere Varianten erweitern , z. B. Flussdiagramme oder Wireframes, High-Fidelity-Wireframes. Aber im Grunde sind Atome, Moleküle und Organismen in jedem guten Designsystem enthalten und sie skalieren , welches Projekt. Und du kannst immer mehr dieser Elemente hinzufügen, wie ich später im Projekt gesagt habe, ausrichten. Nun, wie der Name schon sagt, sind Atome die kleinsten Atome der Gruppe, und sie können etwas ganz Einfaches sein, z. B. Farbe oder Textgröße oder eine Tastenbreite oder etwas Ähnliches. Dann entstehen Moleküle aus Atomen. Wenn sich zwei Atome verbinden, entsteht im Grunde ein Molekül, z. B. ein Drop-down-Menü oder etwas Ähnliches. Und dann sind Organismen, sagen wir, ein Forum, das aus verschiedenen Elementen, z.B. Eingabefeldern und Schaltflächen, besteht. Und dann erhalten Sie eine Form , die ein Organismus ist, der für verschiedene geschaffen wurde, aus verschiedenen Atomen und Molekülen, die zu einem einzigen Organismus kombiniert werden. Dies wird als atomare Struktur bezeichnet und ist seit Jahrzehnten wirklich unser Industriestandard. Sie können Ihr Designsystem jedoch so erstellen, wie Sie möchten. Aber wenn Sie diesen atomaren Ansatz verwenden, wird es für Sie viel einfacher sein, Ihre Elemente zu erstellen und sie in Zukunft zu verkleinern. Der Hauptpunkt jedes Designsystems da draußen ist Konsistenz. Sie müssen also die ganze Zeit über Konsistenz nachdenken. Wo auch immer Sie nur eine einfache Schaltfläche erstellen, müssen Sie darüber nachdenken , wie diese Schaltfläche über verschiedene Bildschirmgrößen skaliert wird, sich ändern wird, die Breite wird die Höhe ändern. Wird sich die Farbe ändern, wird es mit abgerundeten Ecken sein, ohne abgerundete Ecken, um über all diese Elemente nachdenken zu müssen , während Sie Ihr Designsystem erstellen, müssen Sie nachdenken über Regeln und Standards, die wir zu Beginn dieser Lektion erwähnt haben. Und du musst auch über andere Elemente in deiner Musterbibliothek nachdenken . Wie werden sie miteinander übereinstimmen, oder sie werden auf der Seite gut aussehen. Was auch immer Sie also ein neues Element in der Musterbibliothek erstellen , Sie müssen es auf eine Seite legen, Sie müssen es sofort testen, um zu sehen, ob es mit dem Rest Ihrer Musterbibliothek funktioniert. Und wenn ja, kannst du es behalten und wenn nicht, kannst du es jederzeit verschrotten. Das ist der springende Punkt unseres Designsystems. Es wird sich ständig weiterentwickeln, es wird sich immer ändern und es wird niemals so aussehen wie gestern. In der nächsten Lektion werde ich einige großartige Beispiele für Designsysteme von Branchenführern und Industriestandards zeigen . Ich zeige dir, worauf du achten musst. Und später in diesem Kurs werde ich zeigen, wie Sie Ihr eigenes Designsystem in Adobe XD erstellen Ihr eigenes Designsystem in Adobe XD und was Sie mit der Erstellung von Designsystemen in Adobe XD erreichen können . Also werde ich dich dort sehen. 120. Beispiele für Designsysteme: Der beste Weg, Ihr eigenes Designsystem zu erstellen, besteht darin, von Industriestandards und Branchenriesen zu lernen. Und um das zu tun, zeige ich Ihnen nur ein paar Beispiele und Sie finden diese Beispiele im angehängten PDF. Sie können einfach auf diese Links klicken, um auf all diese Beispiele zuzugreifen , die ich Ihnen zeigen werde. Es lernt einfach von ihnen , was sie erschaffen. Aber das Wichtigste, bevor wir beginnen, ist, sich nicht verpflichtet fühlen, jede einzelne Komponente zu übernehmen , die diese Unternehmen entwickeln. Denn wie ich bereits in den vorherigen Lektionen erwähnt habe , gibt es diese Komponenten aus einem bestimmten Grund. Sie sie also nicht, sofern Sie keine dieser Komponenten verwenden Erstellen Sie sie also nicht, sofern Sie keine dieser Komponenten verwenden. Wenn Sie mit der Erstellung eines Designsystems beginnen, ist es wirklich wichtig, klein anzufangen. sich Ihr Projekt weiterentwickelt, werden Sie dann all diese verschiedenen Komponenten hinzufügen . Denn was bringt es, Komponenten zu erstellen? Wenn sie im Moment nicht erforderlich sind, werden sie Sie nur verlangsamen und Sie werden Ihre Zeit für dieses spezielle Projekt nicht optimieren , wenn Sie Komponenten erstellen , die nicht erforderlich sind. für dein Projekt. Lassen Sie mich Ihnen all diese Beispiele zeigen. erste Beispiel, das wir haben, ist Googles Materialdesign. Natürlich wird dieses Materialdesign in ihrem Android-Betriebssystem verwendet. Apple hat seine eigenen , sogenannten Human Interface Guidelines, und Sie können sie auch finden. Ich werde all diese Designsysteme , die erwähnt werden, mit einigen weiteren Designsystemen verknüpfen diese Designsysteme , die erwähnt werden, mit , die in diesem Video im PDF nicht erwähnt werden . Öffnen Sie erneut das PDF, klicken Sie auf diese Links, um darauf zuzugreifen und selbst zu stöbern. Was wir hier haben, ist, Ihnen Material vorzustellen , das Sie zum Zeitpunkt der Erstellung dieses Videos haben. Das ist brandneu und der Industriestandard in der Android-Welt. Verwenden Sie also im Grunde weiterhin Materialdesign. Sie können Richtlinien, Komponenten, Symbole, Komponenten für das Web, Komponenten für das Web, Richtlinien zur Barrierefreiheit und Entwickler-Tutorials sehen. Sie können mehr in ihrem Blog erfahren. Und lassen Sie uns diese Elemente schnell durchgehen. Und ich werde nicht auf zu viele Details eingehen da die meisten dieser Designsysteme im Grunde dieselben sind. Sie verwenden dieselben Standards, sie verwenden dieselben Richtlinien, aber sie sehen einfach anders aus, weil z. B. dieses Materialdesign-System für Android ist, also für mobile Geräte. Während andere Designsysteme dies tun, gibt es vier, z. B. Websites oder Webprojekte oder für Dashboards oder Elemente wie diese. Natürlich werden all diese Elemente zwischen Mobil - und Desktop-Designsystemen unterschiedlich sein . Aber der Schlüssel ist derselbe, die Standards sind dieselben. Nehmen wir an, Sie haben diese Richtlinien, Prinzipien, Stile und Best Practices. Das bedeutet für jedes einzelne Element, wann ist der beste Zeitpunkt, dieses Element zu verwenden? In diesem Fall werden Sie z. B. bestimmte, sagen wir, Datumswähler nicht verwenden . In bestimmten Beispielen werden Sie in diesen Beispielen verschiedene Arten von Datumswählern verwenden . Deshalb gibt es diese Prinzipien und Best Practices. Wenn Sie sich jemals ein Branding-Projekt oder die Branding-Präsentation einer Marke angesehen haben, können Sie sich diese am Wochenende ansehen, z. B. können Sie YouTube-Videos danach durchsuchen. Grundsätzlich gibt es Best Practices. Und das ist der Hauptgrund, warum Sie z. B. ein Logo in dieser Ausrichtung verwenden und nicht in Desorientierung. Warum du hier weiße Bilder verwendest und nicht hier. Aus diesem Grund gibt es diese Best Practices. Um diese Best Practices und diese Prinzipien und Stile zu erreichen, müssen Sie klein anfangen. Du musst von vorne beginnen. Sie müssen diese verschiedenen Schaltflächen erstellen und experimentieren. Sehen Sie, was funktioniert, was nicht, was funktioniert? Stellen Sie sicher, dass Sie von dort aus ein Upgrade durchführen, stellen Sie sicher, dass Sie neue Elemente hinzufügen, stellen Sie sicher, dass Sie neue Stile hinzufügen, neue Komponenten aus diesen Elementen und sehen Sie, was funktioniert und was nicht, werfen Sie es weg und einfach weitermachen. Das bringt mich nett zu Komponenten. Also Designanleitung und Entwicklerdokumentation für interaktive UI-Bausteine. Und du kannst sie dir hier ansehen. Dies sind Schaltflächen, Bilder, Foren , Eingabefelder, Symbole und vieles mehr. Diese Komponenten sind dazu da, es Ihnen einfach zu machen. Und das werde ich Ihnen in einer späteren Lektion in diesem Kurs zeigen , sobald wir tatsächlich zu Adobe XD gekommen sind. Komponenten sind also dazu da, die Dinge erheblich zu beschleunigen da Komponenten in Ihrem gesamten Designsystem und während Ihres gesamten Projekts verwendet werden können . Und sie können von verschiedenen Designern in Ihrem Team verwendet werden verschiedenen Designern in , da die Bearbeitungsfunktion von Adobe XD natürlich Bearbeitungsfunktion von Adobe XD verschiedene Teammitglieder auf verschiedenen Seiten des Planeten. Und sie können alle dasselbe Designsystem verwenden und dieselben Komponenten aus diesem speziellen Designsystem verwenden. Natürlich können Sie jederzeit Komponenten ändern. Sie können sie jederzeit aktualisieren. Sie können verschiedene Komponenten, Stile und vieles mehr hinzufügen . Das ist der Schlüssel, um Komponenten zu erstellen , die in Ihrem gesamten Designsystem wiederverwendet werden können. Wir werden das etwas später erklären, aber lassen Sie uns vorerst weitermachen. Icons sind eine wichtige Ressource für jedes gute Designsystem da draußen. Da dies Google ist, haben sie natürlich ihre eigenen Materialsymbole. Wenn Sie mit Ihrem Designsystem beginnen, Sie wahrscheinlich einige andere Symbole in Ihrem Designsystem verwenden . Aber wenn sich dieses Designsystem weiterentwickelt, wenn Sie eine Stimme für eine Marke finden, wenn Sie die Richtung und die Richtlinien für die Marke finden, werden Sie auch diese Symbole weiterentwickeln. Wenn Sie also kein Experte für die Erstellung von Icons sind, kann Ihr Kunde das vielleicht. Stellen Sie jemanden ein, der es ist, und dann können Sie diese Symbole in diesem Designsystem verwenden. Dann haben wir Komponenten für das Web. Implementiert also Materialweb-Apps mit unserem Code und unserer Dokumentation und passt sie an. Dies ist natürlich eine Skalierung von Mobilgeräten bis hin zum Internet. Schließlich haben wir Richtlinien zur Barrierefreiheit , die äußerst wichtig sind. Erfahren Sie, wie Sie Benutzern mit unterschiedlichen Fähigkeiten helfen können, sich in Ihrer Benutzeroberfläche zurechtzufinden , sie zu verstehen und zu verwenden, denn nicht jeder hat dieselbe Vision. Manche Menschen haben eine Sehbehinderung, z. B. haben manche Menschen Schwierigkeiten beim Lesen. Sie müssen also an all diese Leute denken , weil es viele Ihrer Benutzer gibt. Leider werden wir einige dieser Probleme haben , über die wir die ganze Zeit nachdenken müssen , wenn Sie Ihr Designsystem erstellen. Schließlich haben wir Entwickler-Tutorials. Also wurde Material mit Java, Kotlin, Objective-C, Swift und Web of Water implementiert . Je nach Designsystem, je nach Entwickler, werden Sie also je nach Entwickler, diese oder jene Technologie verwenden. Im Grunde gibt es hier keine richtige oder falsche Antwort, Sie müssen mit Ihren Entwicklern sprechen. Sie müssen erneut mit Ihrem Kunden sprechen, je nachdem, was Ihr Kunde verwenden wird. In diesem Fall ist es bei Material hauptsächlich für mobile Geräte, für Android. Also werden sie natürlich andere Technologien verwenden , als wenn du z. B. , ich weiß nicht, PHP oder ähnliches für WordPress oder was auch immer verwendest . Diese Technologien werden also anders sein. Und je nachdem , welche Technologie Ihre Entwickler verwenden werden, werden Sie Ihr Designsystem für diese Entwicklungszwecke erstellen. Also im Grunde kannst du direkt hier springen, du kannst auf das Design klicken. Du kannst sehen. Also Grundlage, Überblick, Umgebungslayout, Navigation, Farbe, Typografie, Sound, Ikonographie, Form, Bewegung. Also wie gesagt, und das werde ich während des gesamten Unterrichts weiter sagen. Lassen Sie sich von all diesen verschiedenen Elementen nicht einschüchtern , denn auch hier ist Google. Sie haben buchstäblich Milliarden von Benutzern ihren Geräten und in ihrem gesamten Unternehmen. Also werden sie natürlich all diese verschiedenen Elemente verwenden, von denen man all diese verschiedenen Elemente verwenden, von wahrscheinlich nie gehört hat, geschweige denn sie verwenden. Lassen Sie sich davon also nicht zu sehr einschüchtern. Dann haben wir also Komponenten. Und das sind Schaltflächen, Karten, Checkboxen, Chips, Datentabellen und so weiter. Dann haben wir für Android, für Web Flutter, iOS entwickelt . Wir haben Ressourcen und Sie können alles über diese Ressourcen lesen. Also Hype, Schriftgröße, Tools zur Anpassung von Creator-Formen und so weiter. Sie haben den Blog. Schauen Sie es sich also unbedingt an. Ich werde noch einmal die Links zu allem, was ich in diesem Video erwähnt habe, und mehr in der PDF-Datei hinterlassen . Klicken Sie auf diese Links, um darauf zuzugreifen. Dann haben wir das Atlassian-Designsystem. Also eine durchgängige Designsprache, um einfache, intuitive und schöne Erlebnisse zu schaffen . Sie werden also wieder einmal feststellen, dass wir Komponenten haben, wir haben Muster. Also Marke, sie haben eine Mission, sie haben Persönlichkeit und sie haben es versprochen, was ich im vorherigen Video erwähnt habe. Sie werden nicht mit denselben zwei Personen sprechen, die dies in ihrer Unterhose auf ihrem Mobilgerät verwenden. Und zwei CEOs großer Unternehmen, die z. B. in einem teuren Büro sind . Der Ton ist also einfach nicht derselbe. Sie müssen also mit Ihrem Benutzer in der Sprache sprechen , die er verstehen wird. Dann haben wir Stiftungen. Also Farbe, Ikonographie, Typografie. Noch einmal, je nachdem, wer Ihr Benutzer ist, werden Sie unterschiedliche Farben, verschiedene Symbole und unterschiedliche Typen, Inhalte, Sprache und Grammatik, Wortschatz und Schreibstil verwenden Symbole und unterschiedliche Typen, Inhalte, . Also sprechen wir erneut mit dem Benutzer. Wer ist dein Nutzer? Sie müssen mit Ihrem Benutzer in der Sprache sprechen , die er verstehen wird. Sie können das also erkunden. Und hier haben wir Inhalte zu Markenstiftungen. Lass uns auf den Inhalt klicken, damit du Sprache, Grammatik und Wortschatz sehen kannst . Sie können direkt hier klicken, Komponenten. Wir haben also unseren Begriff, äußere Gruppe, Abzeichen und sofort werden Sie feststellen, dass das ganz anders aussieht , weil es zwei völlig verschiedene Dinge gibt . Wenn ich also auf das Banner klicke, z.B. genau hier, kannst du sehen, wie dieses Banner aussieht. Und sofort können wir den Code sehen, wir können den Fehler sehen, wir können die Ankündigung sehen. Wie sieht es aus? Wie skaliert es? Wie schrumpft oder wächst es? Und Sie können die Verwendung sehen. Also, wie funktioniert es? Also Anatomie, wir haben das Symbol, wir haben die Nachricht und wir haben die Aktionen, die in diesem Fall optional sind. Stöbern Sie also ruhig durch all diese Kategorien, um mehr darüber zu erfahren , wie sie verwendet und wie sie integriert werden. Genau hier. Als nächstes haben wir Shopify, Polaris Design System, Salt. Lassen Sie uns zuerst mit den Fundamenten beginnen. Erfahrene Werte, was ich erwähnt habe. Also ihr Ansatz, was ist zu beachten. Sie sind ermächtigend, geschickt, mangelhaft, vertrauenswürdig und vertraut. sind also all die Werte, die sie mit ihrer Marke, also ihrem Designsystem, anstreben . Dann haben wir den Inhalt. Also Stimme und Ton, Shopify ist ein Spiegelbild dessen, wer sie sind. Also, wer sind sie? Sie haben einfach das Unternehmen, das von echten Menschen aufgebaut wurde, die dieses Geschäft verstehen und sich darum kümmern , anderen zum Erfolg zu verhelfen. Das sind also Werte. Wir haben das Design. Also wieder einmal sind Designfarben, Prinzipien und Kommunikation von entscheidender Bedeutung. Farben haben eine Bedeutung. Carlos, befolge die Richtlinien zur Barrierefreiheit damit du die Farbrollen sehen kannst. Also Oberfläche, im Grunde Elemente, die hinter anderen Elementen auf der Oberfläche liegen . Das sind also die Elemente wie Text, z. B. primär, z. B. für die Elemente, sagen wir Schaltflächen sekundär für die Elemente, die, sagen wir, Häkchen oder Icons oder ähnliches , interaktiv sind . . Vielleicht findet eine Animation statt. All diese Farben gibt es also aus einem bestimmten Grund. Ich komme jedes Mal wieder darauf zurück, dass der Punkt, den ich zuvor angesprochen habe, keine Elemente erzeugt , die nicht unbedingt in Ihrem Designsystem enthalten sind. Sie können also Farbvarianten sehen und diese Farben sehen , die genau hier implementiert sind. Ich ermutige Sie noch einmal, sich all diese Elemente anzusehen und mehr über sie zu erfahren. Sie können sich also Illustrationen ansehen. Sie verwenden diese Illustrationen. Aber warum, warum verwenden sie diese spezielle Illustration in diesem speziellen Stil, mit diesen speziellen Farben. Sie können also hier auf dieser Seite mehr über all das erfahren . Als nächstes haben wir das Carbon Design System, das von IBM , einem riesigen Unternehmen, entwickelt wurde . Und ich liebe dieses Designsystem weil du hier klicken kannst und du kannst auf die Design-Kits klicken und du kannst die Sketch-Version bekommen, aber du kannst auch die Adobe XD-Version bekommen, die ist irgendwo hier in der Nähe. Und du kannst es in XD öffnen, hier ist es. Aber es wurde von der Carbon Community gebaut. Es ist also nicht genau richtig, da es zunächst nicht für Adobe XD und nicht für Sketch erstellt wurde . Dann wechselten sie zu Figma, unterstützen aber auch Adobe XD und Azure. Sie können die Kinder also direkt da haben, sie öffnen und dasselbe können Sie auch für Shopify als Designsystem Polaris tun . Und ich bin mir ziemlich sicher, dass du auch Atlassian bekommen kannst. Sie können es also öffnen und mehr darüber erfahren, wie es aussieht. Aber zurück zu Carbon, im Grunde genommen, Open-Source-Designsystem für Produkte und digitale Erlebnisse. Designsprache ist das Grundsystem, das aus funktionierendem Code, Designtools und -ressourcen, Richtlinien für die Benutzeroberfläche und einer lebendigen Gemeinschaft von Mitwirkenden besteht. Da haben wir's. Viele verschiedene Designer tragen zu diesem Designsystem bei. Aus diesem Grund können Sie diese Dateien herunterladen und kostenlos erkunden. Fangen Sie also an zu entwerfen. Sie können all diese verschiedenen Elemente sehen, was sie verwenden, aber ich mache mir mehr Sorgen um Richtlinien. Das. Sie beginnen also mit dem Netz. Grid ist das Herzstück jedes guten Designsystems da draußen. Also, wenn ich dieses Video einfach so abspiele , siehst du zwei X-Raster und wie sieht es aus? Im Grunde besteht es aus einer Box und dann kann die Box auf andere Boxen erweitert werden, die größer oder kleiner sein können. Aber im Grunde genommen ist es in Schritten von zwei. diesen Boxen passt alles gut. Im Grunde können Sie den Abstand hier sehen. Zwei Felder trennen den Text, die Bilder, das Layout und solche Dinge. Stellen Sie also sicher, dass Sie alles erkunden und Sie können sehen, wie der vertikale Rhythmus genau hier funktioniert und wie die Skala genau hier in diesem speziellen Video funktioniert . Deshalb ermutige ich Sie wirklich, es genauer zu erkunden. Sie können Symbole, Piktogramme und Bewegungen sehen , was wirklich wichtig ist. Also, wie haben sie Animationen verwendet? Wenn ich also hier klicke, um dieses Video abzuspielen, kannst du sehen, wie sie Bewegung in ihrem Designsystem verwenden , wie die Animation funktioniert, wie der Übergang funktioniert, wie die Dinge funktionieren, z. B. ist der Einstieg in die Animation aus der Animation heraus und vieles mehr. Erkunden Sie es also, laden Sie es herunter und überzeugen Sie sich selbst davon. Endlich haben wir Salesforce. So kannst du loslegen. Sie können sehen, welche Plattformen Karotten- oder Lightning Visual für uns sind , Heroku-, Android- und iOS-Designrichtlinien. Also Überblick, Builder, Diagramm, Dateneingabe, Datenanzeige und vieles mehr Barrierefreiheit, worüber wir gesprochen haben, Komponentenpläne oder Übersicht, sagen wir Akkordeon, ich möchte schau dir das entsprechend an, wie sieht es aus? Das ist also eine großartige Sache. Ich kann hier klicken und verstehen, was die Absicht hinter diesem Akkordeon war. In diesem speziellen Fall können Sie also sehen, dass dieses Akkordeon geschlossen ist, aber wenn ich klicke, wird der gesamte Abschnitt nach unten erweitert. Also, wie viel wird nach unten expandieren? Zum Beispiel, wenn Sie das für Pixelraster verwenden, was Sie im Carbon Design System von IBM erwähnt haben. Dann wird es sich in Schritten von zwei erweitern. Und Sie können diese Regeln, Standards und Richtlinien in Ihrem gesamten Designsystem verwenden , unabhängig davon, was Sie erstellen. Sie können also erneut auf den Alarm klicken, z. B. können Sie auf den Avatar von Badges klicken. Lass uns auf den Warenkorb klicken und sehen, wie ihre Karten aussehen. Also das ist das Auto, das sind die neuen, kleineren Autos, kürzere Autos, warum ihre Karten. Sie können also sehen, wie all diese Elemente implementiert sind, wie sie auf der Seite festgelegt sind. Und wenn ich hier klicke, also haben wir Aktion 12.3, wir haben den Tooltip, all diese verschiedenen Elemente. Schließlich haben wir das, was Utilities sind, also Randtext, Größe, Funktion, vertikale Liste. Und zu guter Letzt haben wir Design-Token. Design-Token sind also eine erstaunliche Sache über Designsysteme, und wir werden in einer der späteren Lektionen darüber sprechen , weil sie wirklich das Herzstück jedes guten Designsystems sind. Und sie sind wirklich die Brücke zwischen Designern und Entwicklern , um das Designsystem kennenzulernen und es in vollem Umfang zu nutzen und es auch in Zukunft weiter zu verwenden. Und aus diesem Grund verwenden wir Design-Tokens in unseren Designsystemen. Und das werde ich Ihnen in der späteren Lektion auch in Adobe XD zeigen . Aber schauen Sie sich vorerst diese Links an. Wie ich bereits erwähnt habe, werden sie in einem PDF sein. Achte darauf, so viel wie möglich zu erforschen und so viel wie möglich zu lernen. Weil Sie sehen, dass Designsystem nicht etwas ist , das Sie in ein oder zwei Tagen lernen werden . Es dauert wirklich Monate und Jahre , bis sich ein gutes Designsystem entwickelt hat. Aber lassen Sie sich nicht davon abbringen, Ihr eigenes Designsystem zu erstellen , denn die Vorteile sind enorm , wenn Sie entwerfen, wenn Sie bauen und entwickeln, werden Sie Ihr eigenes Design erweitern. system. In der nächsten Lektion werden wir über Adobe XD sprechen. Was können Sie in Adobe XD in Bezug auf Designsysteme erstellen und wie können Sie Ihr Designsystem in Adobe XD skalieren? Also werde ich dich dort sehen. 121. Ein Designsystem in Adobe Xd erstellen: Adobe XD ist ein großartiges Tool, da Sie in einem einzigen Tool Prototypen entwerfen und diese mit Ihren Kunden, Entwicklern und Stakeholdern teilen können Prototypen entwerfen und diese mit Ihren Kunden, Entwicklern und Stakeholdern teilen . Dies eignet sich hervorragend für die Erstellung von Designsystemen Darüber werden wir in dieser Lektion des Kurses sprechen , wie Sie Ihre eigenen Designsysteme in Adobe XD erstellen. Und später werden wir über die Skalierung dieser Designsysteme in Adobe XD sprechen . Also lass uns anfangen. Hier bin ich in Adobe XD und öffne bis zu 12 80 mal 800 Grafikkarten. Dies ist nur die grundlegende Zeichenfläche, die Sie auf dem Startbildschirm hier auf einem D Adobe XD finden . Also, wie erstellen Sie Ihr Designsystem? Nun, du musst klein anfangen, also lass uns mit dem Grid beginnen. Wenn ich mich also verstecke, damit Sie es sehen können, statt dieses Layout zu starten, werde ich es auf Quadrat n umstellen . Darüber haben wir zuvor für das Designsystem von IBM gesprochen . Sie verwenden diese Iteration von zwei. Es werden also wirklich kleine Quadrate hier sein, aber ich werde die Zahl acht verwenden , z. B. so etwas. Und dann werde ich meinen Taschenrechner starten und ihn gleich hierher bringen. Wir haben also den 12. AT, für die Breite. Also 1280/8, es ist ein Sechstel. Das bedeutet also, wenn Sie hier ganz zoomen, können Sie sehen, dass diese Quadrate acht mal acht Pixel groß sind acht Pixel , weil das die Quadratgröße ist. Wenn ich sie auf zwei verringere, können Sie sehen, dass sie kleiner geworden sind, aber ich werde sie wieder auf acht erhöhen weil acht Pixel eine Art Industriestandard oder ein Acht-Punkt-Raster sind. wenn du willst. Und genau das werden wir für unser imaginäres Designsystem hier in Adobe XD verwenden . Um zu beginnen, können wir also etwas Kleines erstellen , wie eine Schaltfläche, also lassen Sie uns zuerst mit der Topographie beginnen. Also kann ich etwas sagen wie vielleicht hier klicken. Und lassen Sie uns vielleicht etwas wie Open Sans verwenden, denn das ist eine kostenlose Google-Schrift Sie online finden können. Und ich werde es ungefähr hier positionieren. Lass uns mit 24 weitermachen, denn 24 ist natürlich durch acht teilbar. Und dann werde ich meine Buttons erstellen. Also werde ich einen gewissen Abstand darum herum schaffen. Und ich werde es mit der rechten Maustaste an den Rücken senden , damit wir unsere Texte sehen können. Und jetzt kann ich anfangen, herumzuspielen und mich in meinem Raster zu positionieren. Wenn ich also meine Alt-Taste gedrückt halte, kannst du sehen, dass ich von dieser Seite 16 bin, 16 von dieser Seite und 7,8 auf dieser Seite, acht ist gut, aber sieben ist nicht so viel. Was Sie hier tun können ist wirklich nicht viel, denn Adobe XD, diese Textwerkzeuge sind nicht wirklich alles, was entwickelt wurde wie Adobe Illustrator, z. B. oder Adobe Photoshop. Aber in diesem Fall wird es ganz gut funktionieren weil wir gerade hier unser Startup-Projekt erstellen . Also als erstes, was Sie bedenken sollten, ist es Ihr Typ zu groß? Wenn ja, dann kannst du den Abstand auf jeder Seite auf 16 erhöhen , aber du kannst hier immer noch 15,15 sehen. Wenn wir so anfangen, werden es immer noch 15 sein, weil Adobe XD den Text so behandelt. Also noch einmal, was können Sie tun, wenn Sie mit einer Marke arbeiten, die diese Sprache erfordert, worüber wir zuvor gesprochen haben, dann werden Sie diesen Eckradius auf etwas anpassen wie acht, z. B. und jetzt haben wir die abgerundeten Ecken. 64 ist also die Größe unseres Buttons, teilbar durch acht, natürlich 144 durch acht teilbar. Also können wir jetzt weitermachen. Als nächstes folgt die Namenskonvention. Dieser Knopf ist also ziemlich groß. Also zB wirst du es btn nennen. Btn Dash BG, Taste, Hintergrund, Strich groß. Und Sie müssen dies in Ihrem gesamten Designsystem für all Ihre Elemente tun Ihrem gesamten Designsystem für all , denn auf diese Weise werden Sie wissen und die Designer aus Ihrem Team wissen, Entwickler werden wissen, ist dies für unsere Website, Tablet, unsere Handyuhr oder welche Größe auch immer. Als nächstes müssen Sie sie gruppieren. Es gilt also zu prüfen , woher dieser Text stammt. In diesem Fall geht es von links. Wenn ich also den Mauszeiger hier rechts bewege, kannst du sehen, dass es linksbündig ist und es nicht mehr da ist. wird also automatisch ohne Erweiterung auf die rechte Seite skaliert Die Schaltfläche wird also automatisch ohne Erweiterung auf die rechte Seite skaliert. Sie können es auch reparieren, wenn Sie möchten Sie können auf feste Websites klicken und die Schaltfläche wird nicht erweitert. Also je nach Verwendungszweck der Tasten, sagen wir BTN, Large und Variablen. Also können wir VAR z.B. so verwenden oder es einfach btn large nennen. Und wenn wir dann wollen, dass es repariert wird, dann können wir es btn large fixed nennen. Behalten Sie also noch einmal den BTN-Hintergrund im Auge. Groß, aber sehr groß. Wenn du fixed verwendest, ist es z. B. für den Button-Hintergrund, btn, BG, large fixed oder BT und BG. Eine feste Größe, wie auch immer Sie es nennen möchten. Namenskonvention ist also wirklich wichtig, denn sobald Sie anfangen, immer mehr dieser Elemente hinzuzufügen , wird es für Sie viel komplizierter sein , den Überblick darüber zu behalten, was Sie als Nächstes erstellt haben. weil wir möchten, dass dieser Button erweitert wird, schalte ich das Padding ein. Wenn also das nächste Mal jemand so etwas wie inzwischen sagt, kannst du sehen, dass sich der Button erweitern wird. Aber noch einmal, aufgrund dieses schrittweisen Elements, das wir erstellt haben, wenn ich hier klicke, können Sie 16161516 sehen, es wird erweitert, aber Sie können es jederzeit überschreiben. Wenn ich also hier klicke und das hier noch weiter ausdehne , also wenn ich hier klicke und es auf 20 erweitere , wird es vielleicht schnell gehen, um zu migrieren, um viel besser zu migrieren. Sie können diese Änderungen also jederzeit vornehmen , um sicherzustellen, dass wir 136.64 sind. Also alles ist durch acht teilbar. In unserem Fall, wenn Sie über Raster nachdenken und darüber , wie Sie Raster erstellen, können Sie natürlich dieses Acht-Pixel-Raster für Ihren Rasterkörper verwenden, sagen wir 12 Spalten für diese große Größe, acht Spalten für Tablet-Größe, vier Spalten für die Handygröße. Und abhängig von der Größe, die Sie wählen, wählen Sie die Anzahl der Spalten und die Breite dieser Spalten. Natürlich haben wir gerade erst angefangen. Sie können sehen, wie das aussieht. Und bevor wir weitermachen, klicke ich gleich hier, springe direkt hier zu meinen Bibliotheken und füge Farbe hinzu, denn das ist in diesem Fall die Farbe meines Textes. Und ich werde Charakterstil hinzufügen. Also, wie kannst du das nennen? Und das ist wirklich wichtig , denn jetzt kommen wir in das Gebiet der Design-Token. Und ich werde Design-Tokens in der nächsten Lektion dieses Kurses etwas näher erläutern . Aber im Grunde nenne ich das h four, zB weil das die Größe dieses Textes ist. Und was die Farbe angeht, werde ich sie umbenennen in etwas wie, ich weiß nicht, normales Grau oder was auch immer, normales Strich und Grau, so etwas. Also jeder aus meinem Team weiß, okay, das ist H für es seit 24 geöffnet, und wenn sie den Mauszeiger bewegen, sieht man Gegensätze, 24 Zeichen Abstand, die Größe 24 Punkte. Sie werden es also sofort erkennen können. Als nächstes kommt der Button mit dem Rand oder ohne Rand. Wie du das behandeln wirst, wie sich all diese Elemente stapeln werden. Hat es, hat es den Strich oder nicht? Sie müssen also über all diese Dinge nachdenken, aber stellen Sie sicher, dass Sie mehrere Kopien dieser Schaltfläche erstellen. Sehen Sie, was funktioniert, sehen Sie, was nicht endet, wenn Sie anfangen, Elemente zu dieser Schaltfläche hinzuzufügen. Stellen Sie sicher, dass Sie mit den Komponenten beginnen. Also Strg oder Command K auf deiner Tastatur, um eine Komponente zu erstellen. Dies ist der Standardstatus. Die erste Komponente, die erstellt werden muss , ist vielleicht der Hover-Status. Also nenne ich es Hover. Und wenn das nächste Mal jemand auf diesem Button schwebt, ändert sich vielleicht die Farbe. Also statt Weiß kannst du es vielleicht in etwas Helles wie dieses ändern. Klicken Sie hier, drücken Sie Control, Enter, um eine Vorschau dessen zu sehen, was wir gerade erstellen. Und jetzt, wenn ich mit der Maus auf diese Schaltfläche gehe, kannst du sehen, dass sie im Schwebezustand ist. So einfach ist es also, den Anfang eines Designsystems zu erstellen. Und jetzt zeige ich Ihnen , was ich den letzten zwei Jahren geschaffen habe. Und ich habe sechs Monate gebraucht , um in Adobe XD zu erstellen. Es heißt Inception Design System. Und hier ist es. Dies ist die Masterdatei des Inception Design Systems. Ich habe sechs Monate ununterbrochener Arbeit gebraucht, um es zu kreieren. Und Sie können dieses Designsystem bekommen, wenn Sie möchten. Ich werde den Link in einem PDF hinterlassen. Dies ist die Seite für Inception Design system.co. Und noch einmal werde ich den Link im PDF hinterlassen. Du kannst direkt hier klicken und zu meinem YouTube-Kanal gehen , um den kostenlosen Kurs anzusehen. Darin. Ich gehe jedes einzelne Element durch. Ich glaube, es ist ungefähr eine Stunde lang oder so. Es ist auf meinem YouTube-Kanal und du kannst es dir dort ansehen, um mehr zu erfahren, wie es funktioniert und was enthalten ist. Sie sehen, Sie können schneller entwerfen. Sie können einige Bewertungen lesen. Es wurde maßstabsgetreu mit einem Acht-Pixel-Raster entworfen. Es hat eine molekulare Struktur, wie wir sie erwähnt haben. Lokal und Clouds können sowohl lokal als auch in der Cloud mit Ihren Teamkollegen zusammenarbeiten . Und es hat Flussdiagramme, Vorlagen und Lottie-Icons, bei denen es sich um animierte Symbole handelt. Es wurde mit den neuesten Funktionen wie Stacks, Komponenten, Zuständen und Dokumentensäuren erstellt. Lassen Sie mich also zurück zu Adobe XD gehen und es Ihnen zeigen. Also zuerst, was ist in diesem Designsystem enthalten? Hier finden Sie einige grundlegende Informationen und Richtlinien zum Designsystem selbst, zu seiner Verwendung und wo es verwendet werden kann. Dann haben wir hier die Gitter. Wir haben drei verschiedene, im Grunde genommen Bildschirmgrößen. Wir haben große, mittlere und kleine oder Desktop-, Tablet- und Mobilgeräte Unabhängig von der Größe haben wir verschiedene Farbspaltennummern. Für die Großen haben wir also 12 Spalten. Für das Medium haben wir acht Spalten und für die kleinen haben wir vier Spalten. Hier haben wir die Anleitungen und Sie können diese Anleitungen einfach kopieren und in Ihre Zeichenflächen einfügen. Dann haben wir die Topographie und Sie können sehen, dass ich die Topographie in zwei Überschriften und einen Hauptteil unterteilt habe . Überschriften gibt es in diesen verschiedenen Größen und den Hauptteil in diesen verschiedenen Größen. Dann haben wir die Farben, Hauptfarben und Hilfsfarben. Sie werden feststellen, dass ich hier keine Schatten habe und das hat einen bestimmten Zweck denn wenn Sie dieses Designsystem erhalten, können Sie Ihre eigenen Schatten hinzufügen. Und sie werden mit dem Designsystem selbst skalieren. Dann haben wir das Logo, das Sie Logo Ihres Kunden ersetzen können. Wir haben diese verschiedenen Logos, die Sie in Ihren Projekten verwenden können. Wir haben Symbole und sofort werden Sie diese acht Pixelraster bemerken, also quadratische Größe. Und wenn ich es hier verstecke, nur damit du das Designsystem selbst ein bisschen besser sehen kannst . Dann haben wir hier Symbole, und das sind statische Symbole. Und natürlich verfügt das Designsystem auch über animierte Symbole, die nativ in Adobe XD funktionieren, was sich hervorragend für das Prototyping eignet. Wenn ich dann ein bisschen zoome, haben wir hier Atome und Moleküle, und Sie können sie genau hier finden. Wenn Sie dies öffnen, können Sie sehen, dass wir Raster, Icons, Avatare, Drop-Downs, die Bildmodelle, Seitennummerierung, Anwendungsbereiche, Akkordeonsuche und vieles mehr haben. All diese Elemente hier sind also Atome und Moleküle. Und wenn ich etwas näher hineinzoome, kannst du sehen. Wir haben also Schaltflächen, wir haben Texteingaben, Selektoren, Textbereiche, Kontrollkästchen, Radio-Datumswähler, Selektoren, Inhaltswechsler , Tabs, Fortschrittsanzeigen, Zahleneingaben, Akkordeons, Bilder die extrem wichtig sind. Wir haben Blobs, Dropdowns, wir haben verschiedene Geräte, Benachrichtigungen, Paginierung, Zapatero ist ein Modell, und noch viel mehr als auf der linken Seite, wir haben Flussdiagramme, die befinden sich genau hier. Wenn ich also hineinzoome, haben wir Desktop-Flussdiagramme, wir haben mobile Flussdiagramme, dann haben wir Aufgabenablaufelemente. Natürlich haben wir für Aufgabenabläufe Flussdiagrammelemente, die verwendet werden, um diese verschiedenen Flussdiagramme zu verbinden. Und dann, was wir hier haben, wir haben diese Papierformate. Hier haben wir also Hochformat, Querformat, US-Letterportrait und Querformat. Und jedes einzelne davon, wenn ich hier zum Ebenenbedienfeld wechsle und hineinklicke, enthält es verschiedene Elemente, mit denen Sie mit diesem Designsystem schneller erstellen können. Wenn ich es also auswähle, können Sie sehen, was wir hier haben, ist ein Punktraster. Wenn ich also dieses Punktraster einschalte, kannst du sehen, wie es aussieht. Also ich habe hier sogar einen Vapor , den ich euch jetzt zeigen werde , der vor Kurzem für einen meiner Livestreams verwendet meiner Livestreams verwendet wurde und ihr findet ihn auf meiner YouTube-Seite. Wenn ich das näher bringe, wurde dieses Papier tatsächlich innerhalb dieses Designsystems erstellt. Und es wurde tatsächlich ausgedruckt und dann mit dem normalen Stift aufgezeichnet. Sie können also sehen, wie vielseitig und nützlich dies ist wenn Sie solche Elemente in Ihrem Designsystem erstellen. Also zurück zu dem, was wir auch haben, unsere Telefone. also gezeigt, dass Sie diese Telefone benutzen können. Drucken Sie sie natürlich aus, wie ich es Ihnen mit diesem speziellen Papier gezeigt habe . Und Sie werden feststellen, dass sie genau hier positioniert werden. Und wenn das Papier so im Querformat ist, werden sie natürlich anders positioniert und sie werden für das Wireframing auf Papier verwendet, wenn Sie möchten. Dann haben wir einen Browser für Responsive, wir haben einen Desktop-Browser und einen mobilen Browser, und das gilt für all diese Größen. Dann haben wir Flussdiagramm-Informationen. Wir haben den Namen des Kundenprojekts, die Frist, Anzahl der Seiten der Website, die Anzahl der App-Bildschirme, und Sie können natürlich ein Punktraster und das Flussdiagramm kombinieren ein Punktraster und , damit Sie die Orte wechseln können Sie können sie positionieren, ausdrucken und im Wesentlichen Komponenten und Flussdiagramme darauf erstellen. Und schließlich, was wir haben, wenn ich hier wechsle, haben wir die Vorlagen. Hier haben wir Vorlagen in drei verschiedenen Größen, wie ich gerade erwähnt habe. Wir haben also groß, mittel und klein, und diese sind genau hier. Das sind also große Vorlagen in 15 verschiedenen Kategorien. Dies sind kleine Vorlagen in denselben Kategorien, jedoch nur an die Tablet-Größe angepasst wurden. Und das sind Vorlagen, klein oder mittel, und diese sind klein für Telefongrößen. Also, wie funktioniert das alles? Wenn ich das öffne, haben wir im Grunde Farben, also haben wir, wie gesagt, Hauptfarben und unterstützende Farben. Und das sind Hauptkomponenten. Summe, wenn ich die Farbe ändere, dieses Ozeanblau genau hier, z.B. ich kann einfach hier bearbeiten gehen und die Farbe ändern. Es wird diese Farbe in Echtzeit überall dort aktualisieren , wo sich diese Farbe in diesem Designsystem befindet . Von hier und dem Farbfeld bis hin zu hier und hier und hier wird es in Echtzeit aktualisiert die Farbe wird geändert und aktualisiert. Wenn Sie sich für dieses Designsystem entscheiden und beginnen, an einem Projekt für Ihren Kunden zu arbeiten. Sie können diese Farben einfach an die Farben Ihrer Kunden anpassen wird sich in diesem Designsystem ändern. Das Gleiche gilt für die Charakterstile. Also für Überschriften, z. B. wenn ich mich entscheide, das zu ändern, ist es im Moment Proxima Nova. Aber wenn Sie sich z. B. dafür entscheiden, es auf Open Science umzustellen, wie ich schon sagte, können Sie es in Echtzeit aktualisieren. Es wird sich im Laufe Ihres Designs ändern. Als nächstes haben wir, was ich gesagt habe, Atome und Moleküle, Flussdiagramme und Vorlagen, und wie kann man sie verwenden? Es ist wirklich ganz einfach. Also lassen Sie mich diesen großen Drop it hier verwenden. Und ich werde dich zeigen. Also, wenn ich hier klicke und sagen wir, ich möchte diese Spalten ausblenden , damit du sehen kannst, was ich mache. Und nehmen wir an, ich möchte einige Elemente per Drag & Drop hineinziehen, damit es gut für Atome und Moleküle ist. Und lassen Sie uns dieses Layout tatsächlich einschalten. Aber lass uns mit dem Quadrat hier anfangen, nur damit du sehen kannst, was ich eigentlich mache. Lassen Sie uns also mit etwas wie Dropdown, Dropdown Large beginnen. Lass es uns per Drag & Drop hineinziehen. Sie können sehen, wie es aussieht, damit ich es positionieren kann, wo ich will. Und dann bringen wir unsere Kolumnen zurück. Klicken Sie auf unser Dropdown, positionieren Sie es genau hier und Sie können sehen, dass es sofort funktioniert. Und da es sich um eine Komponente mit mehreren Zuständen handelt, schauen wir uns den Fokusstatus an, z. B. lassen Sie uns auschecken geöffnet. Und ich kann natürlich reinspringen und jeden dieser Zustände anpassen und verändern. Anstatt also Dropdown Large zu sagen, kann es vielleicht Ihre Schuhgröße oder Ihre Schuhfarbe oder was auch immer Ihr Projekt erfordert , dass die Schönheit dieses Designsystems von der Schönheit dieses Designsystems abhängt. Das sind also Atome und Moleküle. Kurz gesagt. Grundsätzlich kannst du sie anpassen und verwenden, wie du willst. Und lassen Sie mich Ihnen schnell die Vorlagen zeigen. Also hier haben wir die Vorlagen und lassen Sie uns große verwenden. Was wir also brauchen, ist Navigation. Also ziehen Sie mein Navi per Drag & Drop, z. B. werde ich es an der Position ausrichten. Schließ das. Lass uns den Heldenbereich benutzen. Lassen Sie uns hier mit Nummer vier fortfahren, z. B. positionieren wir es genau hier und genau hier. Vielleicht mach so etwas. Dann können wir vielleicht Call to Action verwenden , also verwenden wir Call-to-Action fünf. Schnappt es, vergewissere dich, dass es genau hier in der Mitte ist, bis es auf unsere Heldenabteilung trifft und du die Idee hast. Sie werden diese Elemente einfach per Drag & Drop hineinziehen. Du wirst sie bauen. Das Tolle an all den Vorlagen und allen Flussdiagrammen ist, dass sie in zwei verschiedenen Modi verfügbar sind. Standardstatus, das ist der Hellmodus und der Dunkelmodus. Wenn ich also auf meine Navigation klicke, zurück in den Dunkelmodus wechsle, hier rechts klicke, zu dunkel, klicke hier, wechsle mit nur wenigen Klicks in den Dunkelmodus. Und wenn ich mein Raster verstecke, nur damit du sehen kannst, dass wir das haben. Wenn ich es also sehr schnell in der Vorschau sehe, kannst du in Echtzeit sehen, wie es aussieht. Es hat sogar diese Schwebeeffekte. Und natürlich, wenn Sie all diese Komponenten ändern und anpassen, z. B. dieses Logo und Sie es in das Logo eines Kunden ändern. Sie können verschiedene Symbole hinzufügen, Sie können verschiedene Bilder hinzufügen. Es wird sich in Echtzeit anpassen. Und das ist der Sinn eines Designsystems, Ihnen Tausende und Abertausende von Stunden für die Erstellung dieser langweiligen Aufgaben zu ersparen Erstellung dieser langweiligen Aufgaben denn es gibt nichts auf der Welt, das ich am meisten hasse. Und um Fußzeilen zu erstellen, und ich habe meine Fußzeile genau hier. Also hier klicken, Fußzeilenposition ziehen und dort ablegen, z. B. Snap, es ist ein zu dunkler Modus wie dieser. Platziere es hier. Klicken Sie noch einmal auf Vorschau. Und hier habe ich meine Fußzeile an Ort und Stelle. Das Schöne an diesen Designsystemen ist, schnell zu erstellen, eine Breitenskala zu erstellen. Und genau das können Sie an diesem speziellen Inception-Designsystem sehen , das ich in den letzten sechs Monaten entwickelt habe, ich all diese Elemente geschaffen habe. Also lass mich das löschen. Ich habe all diese Elemente erstellt, aber ich kann sie leicht skalieren. Ich kann hier weitere Elemente mit vorhandenen Elementen hinzufügen, ich kann sie neu positionieren, neu organisieren, sie, ihre Farben ändern, ihren Eckenradius ändern. Denn wenn ich eine dieser Schaltflächen ganz genau hineinzoome , kannst du sehen, dass der Eckradius vier ist, wenn ich es dir hier zeige, aber vielleicht möchte ich den Eckenradius ändern dieser Hauptknopf zu etwas Größerem. Lassen Sie mich zoomen, damit Sie alle Bundesstaaten etwas größer sehen können , auf etwa 20. Drücken Sie die Eingabetaste. Und Sie können in Echtzeit sehen, dass es sich überall ändern wird wo auch immer sich diese Schaltfläche befindet, wo auch immer diese Schaltfläche verwendet wird, nicht nur hier, sondern auch in meinen Vorlagen. Es wird also in Echtzeit aktualisiert. Das ist das Wichtigste an Designsystemen. In Adobe XD. Sie müssen sie in den Standardkomponenten und all diesen Komponenten ändern den Standardkomponenten und all diesen Komponenten , die Sie per Drag & Drop Ich zeige Ihnen unsere untergeordneten Komponenten. Du kannst es also ändern und anpassen und diese lokalen Änderungen verwenden, z. B. in dem Heldenbereich, den ich dir gerade gezeigt habe, wirst du den Text aktualisieren. Sie möchten Ihren eigenen Text hinzufügen, Ihre Kunden besteuern was auch immer, dann ändert sich die Schuldenkomponente. Aber wenn wir mehr globale Änderungen wie die Hintergrundfarbe, wie die Schriftart und was auch immer vornehmen wollen mehr globale Änderungen wie die Hintergrundfarbe, , werden Sie diese Änderungen direkt hier in den Hauptkomponenten Das Inception Design System enthält zwei Dateien, Master-Datei und die Light-Datei. Im Grunde besteht der einzige Unterschied in der Masterdatei, die ich Ihnen gerade zeige Sie können alle Elemente hier an einer Stelle sehen, in der Light-Datei. Das ist nicht möglich, weil ich sie absichtlich alle von der Leinwand gelöscht um so viel von der Leinwand wie möglich frei zu halten, sodass wir ohne Ablenkungen entwerfen können ohne Ablenkungen entwerfen indem wir sie uns direkt hier ansehen. Vielleicht sind es also Divisoren, mit der Masterdatei zu beginnen , um all diese Komponenten zu lernen. Ich habe natürlich Bilder von all diesen Komponenten bereitgestellt , die auf einen Blick sehen können , wie die Komponente aussieht wie die Vorlage aussieht bevor Sie mit ihnen arbeiten. Das Letzte, was ich Ihnen dazu zeigen wollte , sind diese Flussdiagramme. Also lass mich sie gleich hier öffnen. Lassen Sie uns also Vorlagen schließen und die Flussdiagramme öffnen. Lassen Sie uns mit Desktop-Flussdiagrammen beginnen. Verwenden wir z. B. den Header und ziehen ihn hier per Drag & Drop ab. Lass uns Inhalte verwenden. Vielleicht möchte ich es genau hier positionieren. Lass uns etwas anderes wie eine Slider-Position hier verwenden . Das Tolle an diesen Komponenten ist, dass Sie sie einfach hier duplizieren und positionieren können. Und weil dies, wie gesagt, die Komponenten sind, können Sie einfach auf Ziehen klicken und die Komponente wird in Echtzeit ersetzt. Also Portfolio, ziehen Sie es hierher und legen Sie es dort ab. Vielleicht möchte ich das Formular Nummer fünf verwenden. Mein Kunde sagt, mir gefällt nicht , wie die Formel Phi aussieht. Vielleicht kannst du etwas anderes versuchen, okay, für Nummer drei, los geht's. Sie können sehen, wie einfach es ist, sie zu erstellen. Wenn Sie all diese Elemente verbinden möchten , schließen wir das. Lassen Sie uns also die Elemente des Flussdiagramms verwenden. Verwenden wir z. B. Zahlen. Also lass uns mit Nummer eins weitermachen. Vielleicht ist das die erste Seite, also lass uns die schließen. Lass uns Pfeile benutzen. Also benutze ich diesen Pfeil, ziehe ihn per Drag & Drop an die richtige Stelle. Wenn Benutzer hier auf diese Schaltfläche klicken, gelangen sie vielleicht zu dieser Seite. Also werde ich das einfach erweitern und meine Linie und Molkerei auswählen, aber so super einfach ist das zu verwenden und zu erstellen n z. B. wenn du das weggelassen hast, sagen wir aus Versehen Arabisch, Ich möchte es ersetzen. Ich möchte es mit diesem machen. Da hast du es. Dies ist der Fehler , den ich wollte, z. B. von diesem Paar, von diesem Slider hier, ich möchte, dass sie zu diesem Portfoliostück gehen. Sie können sehen, wie einfach das zu erstellen ist. Das ist also das Schöne an diesen Designsystemen. Offensichtlich ist das ein Extrem, wie ich schon sagte. Ich habe über sechs Monate gebraucht , um alles zu schaffen. Ich habe zwei oder mehr als zwei Jahre Recherche gebraucht. Und wenn ich Ihnen einige dieser Vorlagen zeige, können Sie sehen, wie sie aussehen. Wir haben hier also einen Aufruf zum Handeln der Zukunft. Also habe ich nachgeforscht , was in der Branche am häufigsten verwendet wird. Was sind einige Industriestandards und was wird am häufigsten verwendet? Also Inhaltsraster, Preise, wir haben den Blog, wir haben ein Login und wir haben Foren, kontaktieren Sie uns. Und noch viel mehr. Und alles ist responsiv, wie ich hier zeige. Und all das verwendet x, diese neuesten Funktionen. Wenn ich also hier rechts klicke und in diese Bilder springe, kannst du sehen, dass wir den Stapel haben, wir haben das Pairing. Also, wenn ich mich entscheide, dieses Tag zu ändern, z. B. kann ich hier klicken und es wird die Richtung dieses Stapels in diese Richtung ändern . Und Sie werden feststellen, dass dieser Inhalt nach unten gedrückt wird und er sich gleichmäßig an das anpassen wird , was auch immer ich meinem Designsystem erstelle. Noch einmal, wenn Sie interessiert sind, Design System ist inception design system.co. Dafür gibt es einen YouTube-Kurs. Alles wird viel ausführlicher erklärt. Sie können sich diese Seite ansehen , um die Zukunft zu sehen. Wie ich bereits erwähnt habe, Atome oder Moleküle, Organismen, Flussdiagramme, Vorlagen, Dunkelmodus, animierte Symbole, Kurs enthalten. Alles befindet sich also im Inception Design System. Wenn Sie Ihr eigenes Designsystem erstellen möchten, achten Sie einfach auf zwei Dinge. Vergewissern Sie sich, wenn Sie mit der Skalierung beginnen , um einen bestimmten Zweck zu erfüllen. Skalieren Sie nicht nur aus Gründen der Skalierung und achten Sie darauf, nur Elemente zu verwenden , die in Ihrem Designsystem erforderlich sind. Für mein Designsystem habe ich Elemente aus meiner Recherche verwendet , die die Mehrheit der Designer verwendet. Aber für Ihr Designsystem werden Sie diese Elemente vielleicht nicht verwenden. Vielleicht wirst du etwas anderes benutzen, etwas anderes. Aber grundsätzlich fange mit kleinen Elementen wie Buttons an, wie ich es dir gezeigt habe, und erweitere dann von dort aus, füge Komponenten hinzu, achte aber darauf nur die Komponenten hinzufügst, die wirklich notwendig sind Ihr Designsystem. Im nächsten Video werden wir über Design-Token sprechen, was sie ausgearbeitet haben, ein bisschen mehr über sie und wie Sie sie in Ihrem Designsystem verwenden können . Also werde ich dich dort sehen. 122. Token entwerfen: Design-Token sind das Herzstück jedes guten Designsystems, da sie ein hervorragendes Tool für die Zusammenarbeit zwischen Designern, Entwicklern und Stakeholdern sind für die Zusammenarbeit zwischen Designern, . In diesem Video zeige ich Ihnen, wie ich das mache und wie einige große Unternehmen es tun, und was sind einige bewährte Verfahren in Bezug auf Design-Token? Also lass uns anfangen. Also hier sind wir wieder in Adobe XD und noch einmal in meiner Inception Design System-Masterdatei, die ich Ihnen im vorherigen Video gezeigt habe. Und Design-Tokens befinden sich genau hier auf der linken Seite. Im Grunde genommen haben sie den Namen, was ich zuvor in der vorherigen Lektion erwähnt den Namen, was ich zuvor in der vorherigen Lektion habe. Dieser Name ist also wirklich nützlich denn wenn Sie mit anderen Designern zusammenarbeiten, wir an, ich möchte diese Ozeanfarbe beispielsweise für die Hintergrundfarbe unseres Modells oder etwas Ähnliches verwenden beispielsweise für die Hintergrundfarbe unseres . Und dann muss ich das meinem Designmitarbeiter meinen Designteamkollegen sagen. Nehmen wir an, verwenden Sie diese blaue Farbe innerhalb des Modellhintergrunds. Aber wir haben mehrere blaue Farben, welche Arbeiter? Benutzen. Ein B8, F9. Wieder einmal wird es für die Leute sehr schwierig sein, besonders wenn Sie mit ihnen weit voneinander entfernt arbeiten. Wenn Sie mit Ihren Teamkollegen von zu Hause aus arbeiten, wird es für sie schwierig sein , diese Änderung umzusetzen. Und es wird für alle im Team schwierig sein , sich diesen Hex-Code zu merken, also verwenden wir zum Beispiel Namen. In diesem Fall kann ich ihnen einfach sagen, verwenden Sie das Ozeanblau für den Hintergrund des Modells und alle sind auf derselben Seite. Ocean ist viel leichter zu merken als z. B. Hashtag eins, B8, f e, f neun oder was auch immer. Entwickler können also dieselbe Funktion verwenden und ich werde das in nur einer Sekunde in einem großen Designsystem zeigen . Aber im Grunde ist das der springende Punkt des Designs. Tokens verwenden sie mit Bedacht und verwenden sie, wenn Ihr Designsystem skaliert. Natürlich können Sie sie für Text verwenden. In diesem Fall habe ich nur Überschrift und Text, aber Sie können z. B. die spezifische Zeichengröße für bestimmte Elemente verwenden , z. B. wenn der Charakter knapp unter, sagen wir, Animationen oder Illustrationen steht besser, dann kannst du sie in Verbindung mit diesen Abbildungen verwenden , z. B. Überschriftenillustration, groß, Überschriftenillustration ist klein oder was auch immer. Und als Sie dann zu Ihren Entwicklern sagten, stellen Sie sicher, dass Sie die Überschrift ändern, großes Illustrationstool, sagen wir 64 Punkte. Jeder im Team wird das viel besser verstehen können als, wenn nicht, was ich zuvor über die Komponenten und die verschiedenen Komponentennamen erwähnt habe . Wenn wir also genau hier auf meine Schaltflächen zoomen, z. B. das Ebenen-Panel wechseln, klicken Sie hier. Sie können sehen, dass wir die Schaltfläche standardmäßig groß haben, da dies große Schaltflächen sind. Dann haben wir Button default, medium, button default small. Das sind also Standardtasten, aber wenn ich zu etwas anderem wechsle, z. B. genau hier, haben wir Selektoren. Selektoren im Zeilenwert, große Selektoren im Zeilenwert, mittlere Selektoren im Zeilenwert, sagen wir ein kleines oder was auch immer. Sie müssen also auf all diese Details achten. Und wir haben Bilder. Wir haben also ein großes Bild aufgenommen und wie viele Spalten nimmt Ihr Bild ein? In diesem Fall also Bild groß bis Spaltenbild groß, neunspaltiges Bild größer als 12, volle Breite, Vollbild Medium, dieselbe Geschichte, klein, dieselbe Geschichte. Dann haben wir Geräte, z. B. Gerät, Dash, Browser oder was auch immer. Sie müssen diese Design-Tokens also verwenden , um zu erklären, was Sie in Ihrem Designsystem erstellen und wofür jedes Design-Token überhaupt entworfen wurde . Also werde ich Ihnen jetzt das zeigen, das ist ein Salesforce Lightning Design System. Design-Tokens zeigen Ihnen das bereits in der vorherigen Lektion, in der wir über all diese großartigen Designsysteme gesprochen haben. Wie sie es verwenden, ist im Grunde genau dasselbe. Wir haben also eine markenzugängliche, dunkle Variante der Marke, die mit Weiß zugänglich ist. Sie verwenden also Kombinationen und sie verwenden diese Unterstützung. So können Sie den globalen Zugriff sehen , der auf der Plattform verfügbar ist. Wenn nicht, kann ich den Mauszeiger hier bewegen, intern, also nur für interne Salesforce-Entwickler verfügbar , Änderungen vorbehalten. Sie haben also all diese Regeln eingeführt, wenn sie veröffentlicht werden. Also Versionsnummer 1234 und so weiter, T-Mobile. Also benutzen sie es mit einem Team? Benutzt du es mit einer App? Verwenden Sie es für Frontend oder Backend? Sie verwenden es für das, was Besucher sehen, oder für das interne Dashboard oder für das Besucher-Dashboard, Sie müssen all diese Elemente kennzeichnen. Und hier kannst du noch etwas sehen. Sie verwenden also zuerst RGB- und Hex-Werte. Zweitens verwenden die meisten Marken das Gegenteil, also verwenden sie zuerst den Hex-Wert und dann den RGB-Wert. Sie müssen also all diese Elemente in Bezug auf Ihr eigenes Designsystem berücksichtigen . Deshalb habe ich diese einfache Struktur im Inception-Designsystem erstellt , weil die Mehrheit der Menschen verstehen kann , dass wir uns konzentrieren. Es ist also nur zur Defokussierung, aber wenn ich eine Variation des Fokus erstelle, z. B. verschiedene Fokusstufen. Vielleicht sage ich etwas wie Fokus 80 Prozent oder Fokustaste oder Fokus. Ich weiß nicht, Heldenabteilung oder was auch immer. Das wirst du im Design-Token selbst erkennen . Also wird es jeder im Team verstehen können. Und wenn ich es dir hier noch einmal zeige, wenn wir etwas weiter nach unten scrollen, kannst du sehen, wie viele verschiedene Farben sie haben. Wählen wir also nach dem Zufallsprinzip eine aus, z. B. diese, palette cloud blue, 15. Sie haben also 15 verschiedene Variationen dieser Palette. Wolkenblaue Farbe. Nein, es ist kein T-Mobile und hier verwenden sie es intern. Dies ist Version 2.14, 0.0. Und Sie können höfliches Wolkenblau sehen, also wie sie es verwenden und wie sie arbeiten. Also im Grunde, wie ich immer wieder erwähne, alles von Ihrem Projekt ab, Ihren Bedürfnissen Sie werden nicht all diese verschiedenen Farben haben , wenn Ihre Kunden, ein Projekt sie nicht benötigt. Warum sollten Sie sich also die Mühe machen, all diese Farben, Schattierungen, Variationen und vieles mehr zu kreieren und so viel Zeit damit zu verbringen all diese Farben, Schattierungen, Variationen und vieles mehr zu kreieren und so viel Zeit , wenn Sie mit so etwas durchkommen können, z. B. nur ein paar Farben hier und da und dann, und das ist das Entscheidende und Keating, wenn das Projekt kostet, kann man immer mehr Farben hinzufügen. Also lass mich dir das z.B. auch zeigen. Klicken wir auf Wählen Sie das aus. Lass es uns ändern in, ich weiß nichts, was auch immer, genau hier. Und wenn wir diese Farbe hinzufügen möchten, kann ich einfach hier klicken. Und ich kann so etwas wie Umbenennen sagen, vielleicht Blob Purple nennen, so etwas. Ist das meine Hauptfarbe auf meiner Sekundärkarte? Nennen Sie es Hauptfarben. Also stell es hier hin, Blob Purple. Und wenn ich dann das nächste Mal, wenn ich auf meinen Blog klicken kann wird Blutlila zur gleichen Zeit angewendet. Wenn wir diese Blobs z. B. im Hero-Bereich deiner Website haben , oder wenn es deine App ist, kannst du dein Design erkennen. Teammitglieder, ändere den Blob Nummer fünf in Blob, lila Farbe. Klick, klick, Fertig. Deshalb sind Design-Token großartig. Deshalb sind sie nützlich, weil Sie sie verwenden können, um all diese Elemente in Ihrem Designsystem zu erstellen . Es ist viel schneller und jeder Ihrem Team kann auf derselben Seite sein und viel schneller verstehen , was Sie erstellen, als wenn Sie diese Design-Token gar nicht erst verwenden würden. In der nächsten Lektion werden wir über die Skalierung Ihres Designsystems sprechen . Wann solltest du es tun und wie solltest du es machen? Wir sehen uns dort. 123. Skalierung deines Designsystems: Wenn Sie Ihr Designsystem skalieren, sollten Sie dies immer nur mit einem bestimmten Zweck tun und Sie sollten es immer Schritt für Schritt tun. Warum skalierst du es? Wo skalierst du es? Für welche Seiten, für welche Größen, für welche Geräte müssen Sie bei der Skalierung über all diese Dinge nachdenken . Lassen Sie uns also zu Adobe XD wechseln und ich werde es Ihnen zeigen und Ihnen einige Tipps geben , wann und wie Sie Ihre Designsysteme skalieren können. Also hier sind wir wieder in Adobe XD in meiner Masterdatei für das Inception Design System. Wenn Sie sich dieses Designsystem ansehen möchten, klicken Sie unbedingt auf den Link im PDF und da ist er. Sie können es sich ansehen, wenn Sie interessiert sind. Nehmen wir für diesen Fall an, dass Sie diese Schaltflächen gerade erstellt haben und diese drei Größen ausgewählt haben. So groß, mittel und klein. Und von hier aus möchten Sie vielleicht eine extra große Größe hinzufügen . Was solltest du tun? Sie müssen sich zuerst mit Ihren Entwicklern beraten, sollte ich verschiedene Schaltflächen für diese extra große Größe erstellen oder können Sie sie skalieren und neu positionieren? Kodieren ist z. B. vielleicht die extra große Größe für den Button extra große Größe für den Button selbst nicht wirklich notwendig. Vielleicht sollte der Abstand angepasst werden und es passt auf eine größere Größe. Deshalb ist die Kommunikation zwischen Designern und Entwicklern der Schlüssel. Sie investieren also Ihre Zeit nicht in diese Änderungen, die nicht wirklich notwendig und verpflichtend sind . Wenn sie also nicht verpflichtend und notwendig sind, wirst du am Ende ein sauberes Aussehen wie dieses erhalten. Aber wenn ja, dann hast du vielleicht 20 verschiedene Tastengrößen. Und später werden Sie entscheiden, dass z. B. Größe Nummer sieben nicht wirklich erforderlich ist. Welche Größen sollen verwendet werden. Das ist ganz einfach. Sie müssen mit Ihrem Kunden sprechen und Sie müssen mit dem Unternehmen sprechen, für das Sie arbeiten. Welche Größen verwenden Ihre Benutzer? Wenn sie z. B. nur eine Größe verwenden , die Mehrheit von ihnen. Stellen Sie sicher, dass Sie Ihre ganze Aufmerksamkeit auf diese Einzelgröße richten. Und wenn Sie später mehr Benutzer gewinnen, z. B. diese Benutzer kommen, werden die diese Benutzer kommen, werden meisten von ihnen zur Desktop-Größe kommen, sagen wir, die Mehrheit von ihnen verwendet Laptops und dann Plötzlich nutzt ein großer Zustrom neuer Benutzer das iPhone. Wie passt man diese Desktop-Größe an die iPhone-Größe an? Sie müssen also mit Ihren Kunden, Ihren Entwicklern sprechen , Sie müssen ständig recherchieren. Und wenn Sie dann skalieren, ist es nicht wirklich sinnvoll, auf ein Tablet zu skalieren , wenn Ihre Benutzer keine Tablet-Größen verwenden. Denken Sie also über all diese Dinge nach, aber denken Sie über diese Dinge nach , während Sie Ihr Designsystem erstellen, denn es gibt keinen Skalenpunkt. Aus Gründen der Skalierung steckt ein wichtiger Punkt dahinter, nämlich die Skalierung mit einem bestimmten Ziel, nämlich entweder neue Benutzer anzuziehen, neue Benutzer aufzunehmen, den Bedürfnissen und Wünschen neuer Benutzer gerecht zu aufzunehmen Bedürfnissen und Wünschen neuer Benutzer gerecht und deshalb muss man vor diesem Hintergrund skalieren. Außerdem, wie ich in diesem Kurs immer wieder erwähne, erstelle keine Elemente, die nicht erforderlich sind. Zum Beispiel, wenn du keine Avatare unterstützt, weil du vielleicht Profile in deinem Projekt, in deinem Produkt, in deinem Dashboard oder was auch immer hast. Vielleicht hast du nicht die Möglichkeit sich anzumelden und ihr Konto zu erstellen Warum würdest du dann Avatare erstellen? Es macht nicht wirklich viel Sinn. Erstelle sie nicht einfach, um hier zu sein, sondern nur, weil sie für dein Projekt unnötig sind. Und hab keine Angst. Wenn Sie z. B. nur einen Tooltip erstellt haben und nicht 50 verschiedene Tooltips erstellt haben. Vielleicht sind sie es nicht unbedingt. Und Tooltip ist, wie der Name schon sagt, wirklich so einfach, weil es nur ein paar Informationen sind. Achten Sie also nicht zu sehr auf all diese kleinen Dinge. Achten Sie darauf, dass die großen Dinge richtig sind, wie das Layout, wie Raster, Abstandsraster und horizontal und vertikal. Lass all diese Dinge los bevor du dir Gedanken über Tooltips machst. Und eine letzte Sache, die ich Ihnen über die Skalierung Ihres Designsystems sagen möchte , sind diese Vorlagen. Wenn wir also hier reinzoomen und es Ihnen zeigen, haben wir hier die Call to Action-Teams von Futures. Vielleicht haben wir Inhaltsstufen, vielleicht haben wir ein Portfolio, wir haben Preise und Sie erstellen z. B. ein Dashboard. In diesem Dashboard haben Sie eine einzige Seite, haben Sie eine einzige Seite die nur eine Übersicht ist, z. B. innerhalb dieser Übersicht geben Sie ihnen die Möglichkeit, zu sehen, ich weiß nicht, sagen wir monatliche Ausgaben oder so etwas. Gehen Sie nicht auf zu viele Details ein. neue Komponenten anpassen, um damit zu arbeiten, können Sie vielleicht vorhandene Komponenten verwenden und dann die Entwickler einfach die Lösung integrieren lassen die Entwickler einfach die Lösung integrieren , die nicht nativ ist. Wenn es nativ ist, wie z. B. Charts, dann müssen Sie ein Design für ein einzelnes Diagramm erstellen und sich nicht die Mühe machen, mehrere Diagramme zu erstellen, sondern mehrere Dinge tun, nur um Bei all diesen Diagrammen sollten Sie sicherstellen, dass Sie sich auf das konzentrieren, was für dieses Projekt erforderlich ist. Und wenn später neue Funktionen hinzugefügt werden, stellen Sie sicher, dass sie zusammen mit diesen neuen Funktionen und Ihrem Designsystem skaliert werden. Machen Sie sich nicht die Mühe, Elemente zu erstellen , die nicht benötigt werden oder nicht unbedingt erforderlich sind, , die nicht benötigt werden oder nicht unbedingt erforderlich sind, da dies nur Ihr Designsystem durcheinander bringt und Ihren Fortschritt sogar verlangsamt Ihren Fortschritt sogar verlangsamt dieses spezielle Projekt und Ihre Entwickler machen Fortschritte. Denn denken Sie daran, was auch immer Sie entwerfen, innerhalb Ihres Designsystems entwerfen, Entwickler müssen Entwickler für Entwickler haben. Verwenden Sie also nicht ihre wertvolle Zeit, wenn diese Elemente nicht unbedingt im Moment. Und Sie können einen Backlog erstellen. Also zum Beispiel diese Elemente, sagen wir, werden im Moment benötigt. Diese Elemente werden in drei Monaten benötigt, diese Elemente werden in sechs Monaten benötigt. So können Sie Backlogs von Elementen erstellen. Und wenn das Projekt voranschreitet, wenn können Sie diese Elemente etwas später in Angriff nehmen da sie im Moment nicht erforderlich sind. Also noch einmal und schließlich: Skalieren Sie, so wie sie skaliert werden muss, skalieren Sie nicht nur um der Skalierung willen. 124. ABSCHNITT 15 AUFGABE: Ihre Aufgabe für diesen Abschnitt besteht einfach darin , zwei oder drei verschiedene Elemente in Adobe XD zu verwenden und einfach zu üben, Ihr eigenes Designsystem zu erstellen. Denn von diesen Grundelementen aus können Sie, wie Sie in diesem Abschnitt des Kurses gesehen haben, wirklich verzweigen und einige umfangreiche Designsysteme erstellen , die Sie in Ihren Projekten verwenden können. Versuche nicht, jetzt zu viel Zeit in diesen Ansatz zu investieren , achte aber darauf, diesen Ansatz im Hinterkopf zu haben, vor allem, wenn du gerade erst anfängst und es für dich etwas verwirrend aussieht es sieht ein bisschen schwierig aus, du. Versuche nicht, dich damit zu sehr zu belasten. Sie können Elemente verwenden, wie ich sie im vorherigen Abschnitt erwähnt habe. Mit den UI-Kits kannst du z.B. eines dieser Elemente verwenden und sie einfach hier und da austauschen, und sie einfach hier und da austauschen nur um deinen Prozess ein wenig zu beschleunigen. Aber das ist der springende Punkt , um Ihren Prozess zu beschleunigen. Denn wo auch immer du arbeitest, du versuchst immer schneller zu sein. Du versuchst immer, genauer zu sein. Sie versuchen immer, Ihre Kunden etwas schneller und möglichst ohne Änderungen zu beliefern . Designsysteme werden es Ihnen also ermöglichen, einfach zu sterben. Also wie gesagt, sie sind unglaublich wichtig, aber wenn du gerade erst anfängst und alles ein bisschen zu viel aussieht, mach dir darüber keine Sorgen. Sie können zu einem späteren Zeitpunkt Ihrer Karriere jederzeit darauf zurückgreifen. 125. ABSCHNITT 16 Website-Design in Adobe Xd: In Ordnung, also hier sind wir. Nach all dieser Zeit wir endlich mit dem Design beginnen. Und in diesem Abschnitt des Kurses werden wir tatsächlich mit Arbeit an unserem Design beginnen, das für exklusive Autohäuser bestimmt sein wird. Sie werden Gebrauchtwagen verkaufen. Und wir werden es mit einigen dieser Methoden angehen , die wir im bisherigen Kurs erwähnt haben . Und nachdem wir das Design entworfen haben, nachdem wir verschiedene Interaktionen mit unserem Design erstellt haben, nachdem wir Farben ausgewählt haben, wählen wir Typografie, wir wählen die richtigen Bilder, nachdem wir Farben ausgewählt haben, wählen wir Typografie, wir wählen die richtigen Bilder, wir wählen das richtige Layout und testen es aus. wir haben damit geübt und wir verstehen es, und wir bekommen tatsächlich den letzten Schritt von unserem Kunden. Dann werden wir es in den Workflow verschieben. Fangen wir also mit diesem Abschnitt an. 126. Briefentwurf: In Ordnung, lassen Sie uns gleich loslegen und mit unserem Design-Briefing beginnen. Und was ich genau hier geöffnet habe die Adobe XD-Vorlagen des Design-Briefings, die ich Ihnen bereits in einer der vorherigen Lektionen zum Design-Briefing selbst gezeigt habe. Und du kannst diese Vorlage bekommen und du kannst sie verwenden. Ich werde das Original teilen, und ich werde auch dieses teilen, das mit den Projektinformationen gefüllt ist , über die wir sprechen werden. Und wie Sie sehen, ist es völlig dasselbe wie das, das ich Ihnen bereits zuvor gezeigt habe. ohne weiteres Lassen Sie uns ohne weiteres unseren Kunden für dieses Projekt treffen. Das wird also ein imaginärer Kunde sein, und er basiert tatsächlich auf einem echten Kunden, den ich vor ein paar Jahren hatte. Also habe ich die Erkenntnisse, Schritte und Ansätze aus diesem speziellen Projekt übernommen. Und ich habe es direkt in dieses Projekt gesteckt. Ich benutze das immer gerne und mache es für meine Kurse. Ich verwende immer gerne echte Projekte, die ich vorher gemacht habe, und setze sie in Wissen um und was ich an ihnen gelernt habe, um sie in echte Kurse umzuwandeln und dir einige zu zeigen meiner Herangehensweisen und einiger meiner Methoden. Es ist also dieselbe Geschichte mit diesem, aber weil es extrem schwierig ist, weil wir es mit Autos zu tun haben, Bilder von Autos zu finden, die man tatsächlich aus mehreren verschiedenen Blickwinkeln verwenden kann zu denen wir in nur einer Sekunde kommen werden, wo wir über ein anderes Bild sprechen werden, das wir in diesem Kurs verwenden werden. Es ist wirklich schwierig, das zu tun. Deshalb habe ich es als imaginären Kunden ausgewählt , denn wie gesagt, echte Autos mit all diesen verschiedenen Winkeln, es ist wirklich schwierig, sie zu finden. Also lass uns direkt zu XD springen. Und lassen Sie mich Ihnen nur diesen Designbrief zeigen und was darin enthalten ist. Natürlich kannst du das selbst lesen, denn wie gesagt, ich werde es dir geben. Aber ich werde das nur kurz durchgehen und irgendwie erklären wie ich zu diesen Informationen gekommen bin und warum ich mich für diese Informationen entschieden habe. Wie gesagt, aufgrund der bisherigen Erfahrungen mit früheren Methodikern haben wir eine Spider-Exclusive-Cars-Website abgelaufen, das ist das Projekt, das ich erwähnt habe. Wir haben die Projektfrist genau hier , also drei Monate, um alles zu erledigen. Um also zu recherchieren, zu entwerfen und Webflow aufzubauen, dann haben wir das Unternehmensprofil. Es ist also ein Gebrauchtwagenhändler mit Sitz in Belgrad, Serbien. Sie sind das Luxusauto und die Nische. Das ist also wirklich wichtig weil ein Gebrauchtwagenhändler im Grunde alles sein kann , was Sie Gebrauchtwagen verkaufen können, die z. B. 1.000$ oder 2.000$ oder 100.000$ oder 500.000$ kosten weil Gebrauchtwagen Gebrauchtwagen sind egal wo sie sich im Preisspektrum befinden. Es werden immer noch Gebrauchtwagen sein, aber in diesem Fall werden sie 50000-500.000 verkaufen. Warum ist das wichtig? Weil Sie wissen wollen, wie man Informationen strukturiert. wem sprichst du. Offensichtlich werden diese Leute als Kunden anders sein , als wenn Sie eine Website für 1.000-Dollar-Autos erstellen würden, z. B. werden einige Bilder offensichtlich verschiedene Arten von Autos sein , die Sie verwenden werden weiter, da die Bilder anders sein werden. Vielleicht. Ikonographie wird anders sein, weil Sie ein breiteres Publikum ansprechen möchten. Sie verkaufen hauptsächlich Limousinen, SUVs und Superklassen. Sie können also sehen, dass sie manchmal ein heißes Schrägheck auf Lager haben. Das sind Heckenzieher, die extrem stark oder leistungsstark in Pferdestärken sind, also haben wir z. B. so etwas wie einen Mercedes, einen 45, ANG oder Audi RS Three, oder etwas Ähnliches. Also haben sie das manchmal als Teilaustausch. Was Teiletausch bedeutet, ist, wenn ich zu dir gehe, um ein Auto von dir zu kaufen habe ich bereits meine eigenen Kohlenhydrate, also werde ich sie dir geben. Sie werden einen Preis darauf festlegen und mir eine Gebühr auf der Grundlage dieses Preises in Rechnung stellen . Wenn Sie also den Preis für mein Auto angeben, sagen wir 20.000$, z. B. werden Sie diese 20.000$ vom ursprünglichen Preis des Autos, das Sie verkaufen, abziehen . Das nennt man Teiletausch. Also, wie gesagt, manchmal werden sie diese Parteien dazu bringen, das Auto zu wechseln , als Gegenleistung dafür, dass sie ihre eigenen Aktien tatsächlich verkaufen. Wie gesagt, dies basiert auf echten Erfahrungen, die ich vor einigen Jahren mit dem Kunden gemacht habe, und so machen sie ihr Geschäft. Und die Mehrheit dieser Autoverkäufer tut das. Das Gleiche. Und sobald ich das verstanden habe, ist es wichtig, weil wir wissen wollen , was wir auf der Website selbst veröffentlichen werden. Es unterscheidet sich also von der Konkurrenz, weil alle ihre Autos oder Dealer-Vorführwagen und die meisten Autos aus Deutschland stammen. Warum das wichtig ist, ist, dass diese Autos nicht von, nennen wir sie, normalen Menschen benutzt werden . Sie werden hauptsächlich von Journalisten benutzt, die zu den Händlern kommen und diese Autos testen werden. Und das ist wirklich wichtig , weil sie diese Gebrauchtwagen bei den offiziellen Händlern aus Deutschland kaufen . Ihre Mission ist es, transparent und ehrlich zu sein und je nach Fahrzeug eine Garantie für die gesamte Fahrzeughistorie sowie eine hervorragende Kundenbetreuung zu bieten . Marco ist die Schlüsselperson in einem Unternehmen mit fünf weiteren Mitarbeitern, was wichtig ist nur sechs Personen in diesem Unternehmen arbeiten können. Sie sind also eine wirklich kleine Firma. Sie nutzen externe Anbieter für Autoüberweisungen aus Deutschland und haben Partner für Kredite und Zoll. Also machen sie all diese Dinge nicht selbst. Deshalb können sie mit nur sechs Personen im Team so schlank sein. Sie nutzen all diese externen Partner, um ihnen weiterzuhelfen. Ihr direkter Konkurrent ist DSD, und ich werde Ihnen ihre Website etwas später zeigen. Und indirekte Konkurrenten sind entsetzt, Automobile, was im Grunde genommen Gebrauchtwagen bedeutet, aber in viel größerem Umfang, weil sie Autos aus allen Preisklassen verkaufen. Stellen Sie sich Amazon vor, aber für Autos, und ich werde Ihnen diese Website etwas später zeigen . Dann haben wir Project oder waren Sie. Derzeit haben sie also eine Instagram-Seite , auf der sie ihre Aktien anzeigen , sodass sie im Moment keine Website haben, was mit dem Kunden I Ich habe bereits erwähnt, dass sie einige Arbeiten für sie gemacht haben. Aber sie wollen eine Website haben, weil sie schneller und mehr Bilder zeigen können , was Instagram sie auf ihre eigenen Größen, ihr eigenes Layout beschränkt . Sie wollen riesige Bilder zeigen. Sie wollen detaillierte Bilder von den Innenräumen zeigen, z.B. solche Sachen. Und sie können nicht mehr als zehn Bilder in die Instagram-Rasterzeile passen . Aus diesem Grund haben sie sich dafür entschieden, eine Website zu erstellen und einen direkten Ansprechpartner über das Kontaktformular um einige ihrer Funktionen an einem Ort zu präsentieren. All das kannst du auf der Website haben, auf Instagram, tut mir leid, du kannst Bilder haben. Wenn Sie außerhalb der Bilder klicken, z. B. oder Geschichten oder was auch immer, dann können Sie die Beschreibung lesen, aber dann können Sie nur klicken und die Person kontaktieren, an der Sie interessiert sind verwerfen Sie, dass Sie sich die Button-Website ansehen, Sie können das alles auf einer einzigen Seite tun. Deshalb wollen sie in erster Linie eine Website. Sie möchten, dass es responsiv ist und schnell neue Artikel zur Website hinzufügen kann , ohne mich als Designer für jedes noch so kleine Detail zu kontaktieren, sondern würden gerne meine Unterstützung benötigen, falls sie nicht kontaktieren, weiterkommen. Dort werden wir später Webflow CMS verwenden , da wir in der Lage sein werden , einfach neue Autos in ihren Bestand aufzunehmen. Oder wenn die Autos verkauft wurden, können wir diese Autos problemlos aus dem Bestand nehmen. Und ich werde das etwas später in Webflow Build zeigen etwas später in Webflow Build und wie super einfach das ist, wenn Sie es einmal eingerichtet haben, der eigentliche Einrichtungsprozess, der etwas Zeit in Anspruch nimmt ein bisschen knifflig. Aber sobald Sie es eingerichtet haben, wird es sehr einfach und unkompliziert sein, damit für Ihre Kunden zu arbeiten . Sie haben die Bilder ihres Bestands, aber keine anderen Bilder von Icons. Hier kommen wir als Designer ins Spiel, um Bilder zu finden , die ihren Bedürfnissen und diesem speziellen Projekt entsprechen, sowie die Symbole, die ich Ihnen in nur einer Sekunde zeigen werde , wenn wir Design in XD, sie wollen als Luxushändler anerkannt werden, mögen aber keine dunklen Websites und riesigen Bilder. Das habe ich tatsächlich mit meinem vorherigen Kunden gemacht , den ich erwähnt habe. Ich fuhr fort und sprach mit ihnen, mag diese Farben, diese Bilder, welche Art von Websites mögen, um sich inspirieren zu lassen, und habe dann auf all diese Websites hingewiesen , die keine dunklen Farben haben. Also habe ich weitergemacht und sie gefragt , hättest du gerne dunkle Farben? Weil dunkle Farben normalerweise mit etwas Luxuriösem und Teurem in Verbindung gebracht werden. Sie sagten, das gefällt uns nicht, weil ich einfach kein Fan davon bin. Wie Minimalismus. Wir möchten, dass die Dinge einfach, organisiert, benutzerfreundlich sind und Ihre Augen nicht belasten, weil meisten dieser Websites online, die Sie aus Luxus sehen, ich normalerweise schwarze Farbe für Hintergrund, wirklich dunkle Bilder und dann entweder weißer Text oder goldene Texte. Also das hat mir nicht wirklich gefallen. Sie denken, es ist zu, es ist zu altmodisch. Aber sie mögen blaue Farbe und Schlichtheit. Und ihre ideale Website ist car wow, die auch in nur einer Sekunde zeigen wird, was es ist und warum sie ihnen so gut gefällt weil ich ihnen all diese Fragen gestellt habe. Das Hauptproblem, das sie zu lösen versuchen, besteht darin, ihre Aktien zu präsentieren und einen Ansprechpartner an einem Ort zu haben , anstatt über Instagram-DMs zu kommunizieren, was Sie gerade erwähnt haben, und warum sie überhaupt eine Website. Ziele und Zielsetzungen. Ihr Hauptziel ist es also, die Luxusmarke als Luxusautohändler zu präsentieren und sich von anderen Händlern abzuheben , die günstige Familienautos verkaufen. Also stell dir das vor. Wenn Sie drei Websites auswählen und sie zusammenstellen, möchten Sie feststellen, dass diese Leute teure Dinge verkaufen und nicht nur normale Farben. Das ist also die ganze Idee hier. Hauptziel dieses Projekts ist es, Leute von ihrer Instagram-Seite auf diese neue Website zu schicken und die Anzahl der Buchungen für ihrer Instagram-Seite auf diese neue Website zu Testfahrten zu erhöhen . Dann rufen Sie den Showroom an und buchen eine Probefahrt für ein bestimmtes Auto um zehn Prozent in den ersten zwei Monaten nach der Markteinführung. Sie wollen also, dass wir die Website starten, z. B. die Suchmaschinenoptimierung einrichten und dann in den nächsten zwei Monaten nach dem Start erhöhen können die Buchungen für die Testfahrten um zehn erhöhen können Prozent in den ersten zwei Monaten nach dem Start. Dann gehen wir zur Zielgruppe über. Es ist ganz einfach , weil sie in den letzten drei Jahren für den Betrieb geöffnet wurden. Und ein Typ von Person kommt immer wieder zurück, mit einer kleinen Ausnahme von Zeit zu Zeit, aber im Allgemeinen nur ein Kliententyp, der immer wieder zu ihnen zurückkommt. Es ist ein Mann 45-65 aus Serbien, lebt normalerweise in Belgrad, ist Geschäftsinhaber, hat eigentlich ein eigenes Geschäft , weil diese Autos ziemlich teuer sind. Das sind also die Arten von Menschen, die sich solche Autos tatsächlich leisten können . Medienkonsumgewohnheiten, Instagram und LinkedIn den ganzen Tag, YouTube für Pflegekräfte und Erkundungen, tägliche Gewohnheit. Also Jim, Healthy Lifestyle mag es, Inhalte auf Instagram zu posten. Woher wissen wir all diese Dinge? Weil wir unsere Kunden fragen und sie uns tatsächlich gesagt haben, daran, sie arbeiten auf Instagram. Alle ihre Kunden kommen von Instagram, sodass sie sehen können, wer diese Leute sind. Denn wenn du tatsächlich eine Nachricht sendest, kannst du auf das Profil klicken. Sie können das Profil erkunden und sehen, wer diese Person ist. Woher weißt du über das Alter Bescheid? Wann kaufst du tatsächlich ein Auto? Sie müssen ihnen Ihren Führerschein geben, Sie müssen ihnen Ihren amtlichen Ausweis geben, z. B. oder einen Reisepass oder etwas Ähnliches, um Ihre Identität anhand dieser Informationen zu überprüfen. Wir können wissen, dass sie 45-65 Jahre alt sind. Sie sind normalerweise männlich , weil solche Leute kommen. Sie können ihren Wohnsitz und die Stadt der Einwohner auch anhand dieser offiziell ausgestellten Regierungsdokumente ermitteln, da sie dort Papiere unterschreiben müssen. Sie fragen diese Art von Informationen also nicht nur Ihrer selbst willen oder um besser informiert zu sein, sondern um eine Benutzerpersönlichkeit zu erstellen , zu der Sie in nur einer Sekunde gelangen . Anhand dieser Informationen können Sie also wissen, wer diese Personen sind. Sie können auch auf Instagram nach diesen Personen suchen, weil Ihre Kunden Ihnen gesagt haben, dass sie sie auf Instagram gefunden haben und sie sie über Instagram kontaktiert haben sie sie über Instagram kontaktiert um loszulegen und alles zu testen diese Fahrzeuge und schließlich diese Fahrzeuge zu kaufen. So wissen wir also, wer sie sind und wie sie sind. Weil wir ihre Instagram-Feeds durchblättern, haben wir sie auf LinkedIn gefunden. So wissen wir, dass es Geschäftsinhaber gibt, weil wir sehen, dass sie ihr Unternehmen gegründet haben. Wir sehen, wie lange sie daran gearbeitet haben. Unternehmen, das die wichtigsten Ansprechpartner in diesem Geschäft darstellt, ist wo sich die Unternehmen befinden. Seit wann ist es geöffnet? Wie viele Leute arbeiten dort? Sie können all diese Informationen direkt dort auf LinkedIn und YouTube sehen auf LinkedIn und YouTube weil sie unserem Kunden mitgeteilt haben , dass sie sich viele YouTube-Videos und Bewertungen angesehen haben YouTube-Videos und Bewertungen weil es sich um teure Autos handelt. Serbien ist ein ziemlich kleiner Ort und ein ziemlich kleines Land. Und deshalb sind es nicht viele dieser Autos, die herumfahren wie in England, z. B. oder in LA oder was auch immer. Sie müssen sich also über andere Medien informieren. Und dieses Medium ist in diesem Fall YouTube für Autorezensionen. Und nur um diese Autos zu erkunden und sie ein bisschen besser zu verstehen. Alltägliche Gewohnheiten. Nochmals, um mich nicht zu oft von Instagram zu wiederholen , weil man sehen kann, was sie tun, wohin sie reisen, was sie tun. So kann man irgendwie herausfinden, wo sie sich täglich befinden. Und du kannst auch sehen, wann sie diese Bilder gepostet haben. Du kannst also ganz einfach verstehen, wie oft sie auf Instagram für Likes posieren? Und noch einmal, all das ist wirklich wichtig, weil Sie Ihre Anzeigen etwas später ganz einfach ausrichten können Ihre Anzeigen etwas später ganz einfach ausrichten sobald Sie tatsächlich eine Website direkt über Instagram gestartet haben, weil wieder einmal, ihr gesamtes Publikum ist so oder so auf seinem Gramm. So können wir Instagram ins Visier nehmen, wir können jetzt LinkedIn bekommen weil wir wissen, wer diese Leute sind , was sie mögen, wie alt sie sind, wo sie leben, und so weiter und so weiter. Schließlich kommen wir zu diesen beiden Dingen. Wir haben also Designanforderungen. Da wir Webflow verwenden, ist vor dem Build nur eine Dimension erforderlich. Und ich werde Ihnen tatsächlich zeigen, wie Sie in nur einer Sekunde responsives Design in Adobe XD erstellen . Aber wir werden nicht über Responsive Design sprechen , weil es nur Zeitverschwendung ist, wenn Sie alleine arbeiten, direkt von XD zu Webflow, uns, den Dimensionen als Lösungen, wir werden um eine Zeichenfläche von 40,40 Pixeln zu haben. Dann ist das Dateiformat XD unser Hauptdateiformat. Wir werden JPEG, PNG und SVG für Bild- und Symbolinhalte haben . müssen Farbpaletten erstellt werden, sodass sie keine haben. Wir müssen einen erstellen. Bilder müssen beigefügt werden. Ihr Vorrat ist enthalten, sozusagen gespeichert. Also werde ich das etwas später erklären. Andere Bilder stammen von Envato Elements. In unserem Fall stammen alle Bilder von meinen Mottoelementen, aber ich werde in nur einer Sekunde dazu kommen. Wie gesagt, zugehörige Kopierdokumente müssen erstellt werden. Was das bedeutet, ist z.B. ein Styleguide. werden wir schaffen. Und wir werden all diese anderen Optionen wie die Preisgestaltung und diese Designbeschreibung, in diesem Fall Budget und Zeitplan, exportieren diese anderen Optionen wie die Preisgestaltung und diese Designbeschreibung, . Die Zeitleiste ist also in zwei Teile unterteilt. Einer für Forschung und Design, die anderen vier für die Webflow-Entwicklung. Und behalte das immer im Hinterkopf. Plane immer etwas mehr Zeit für die Rockfall-Entwicklung ein , da es manchmal einige Bugs geben kann. Wenn Sie also die Zeit haben, all diese Fehler herauszufinden und zu lösen, ist es viel besser, etwas mehr Zeit für Ihren Workflow-Builder zu haben . Also für diese Art von Projekt fünf K für die Recherche und das Design, fünf K für den erstellten Webflow. Und wie gesagt, in diesem Fall drei Monate, um es abzuschließen. Es scheint also nicht viel zu sein, aber ich möchte einfach etwas kreieren, das anfängerfreundlich ist. Normalerweise dauern solche Projekte ungefähr einen Monat und ich berechne etwas mehr als das, was Sie hier sehen für diese Art von Projekten etwas mehr als das, was Sie hier sehen. Also zwei Wochen für die Recherche, ein Monat für das Design, anderthalb Monate für den Bau. Sie können also sehen, was ich gesagt habe. Ich lasse einfach etwas mehr Zeit für den eigentlichen Gürtel. Dann haben wir die Präsentation für Planung, Recherche, Zielgruppendesign und Bereitstellung eingebaut. Sie können all diese Daten durchblättern , um sie etwas besser strukturiert zu verstehen. Schließlich habe ich meinen Namen genau hier eingegeben, meine E-Mail genau hier. Nur um Ihnen eine Idee zu geben, denn später möchte ich es vielleicht an meine Kunden senden, damit ich es auswählen kann, drücken Sie Strg oder Befehl E, um es zu exportieren. Und von hier aus wähle ich das PDF aus, klicke dann auf Exportieren, exportiere dieses PDF, damit ich es einfach mit ihnen teilen kann , damit sie es sehen und ein wenig verstehen können mehr und sie können all meine Absichten mit diesem Design sehen und sehen, was ich tun wollte. Das war's für die Design-Briefing, zögern Sie nicht, es ein bisschen genauer zu erkunden. Ich werde es wie gesagt beifügen, die Originalvorlage und diese, Sie können sie hinzufügen, wie Sie möchten. Sie sind im Grunde dasselbe. Dieser ist gerade ausgefüllt, der andere ist einfach leer. Und jetzt gehen wir zu den Projektvorschlägen über. Und ich werde Ihnen erklären, wie Sie diese Projektvorschläge senden und wie Sie mit ihnen effektiver umgehen können. Also werde ich dich dort sehen. 127. Projektantrag: wir nun wissen , wer unser Kunde ist, lassen Sie uns direkt zu den Projektvorschlägen übergehen da wir ihnen den tatsächlichen Preis zusenden möchten. Wir möchten, dass sie den Preis überprüfen. Und wir wollen einige Bedingungen festlegen. Lass dich also später nicht ein bisschen verwirren. Lassen Sie uns direkt zu z springen. Und hier ist die Vorlage für den Projektvorschlag. Sie können diese Vorlage bekommen. Ich werde den Link verlassen, weil es die Premium-Vorlage ist, die ich tatsächlich verkaufe und sie nicht zu teuer ist. Ich denke, es sind ungefähr fünf bis 6 Dollar, so etwas. Und es gibt auch zusätzliche Seiten hier, die absichtlich für dieses Projekt entfernt wurden. Dies ist die Seite über mich, und ich glaube daran, dass Sie weitermachen und Ihnen einen Rabatt gewähren. Stellen Sie also sicher, dass Sie auf den Link im PDF klicken , damit Sie ihn erhalten. Also, was wir hier haben, ist das Cover. Dann haben wir Projektdetails, Projektpreise und Allgemeine Geschäftsbedingungen. Und du erinnerst dich daran aus der vorherigen Lektion. Sie können es also entweder dort bekommen oder Sie können es über diesen Link abrufen. Es ist jedoch einfacher für Sie, wenn Sie es tatsächlich verwenden möchten. Wenn nicht, habe ich gesagt, was ich bereits in diesem Teil des Kurses gesagt Sie können diese Dinge selbst erstellen. Aber wenn die Zeit Geld ist, dann kannst du weitermachen und dir diese holen. Wir haben also die Farbe als exklusive Autos von Pilar. Das ist ihre Adresse. Das ist meine Website hier und meine Informationen. Dann haben wir Projektdetails. Also Projektübersicht, worauf wir uns während unseres E-Mail - und Telefongesprächs geeinigt haben . Manchmal treffen Sie Ihre Kunden direkt persönlich. Sie werden das hier eintragen, aber meistens werden Sie sich mit E-Mails befassen, Sie werden sich mit Telefonanrufen befassen, z. B. Videoanrufen und so etwas. Stellen Sie also sicher, dass Sie es dort ablegen. Beschreibung des Projekts. Also haben wir schon darüber gesprochen. Wir haben eine Website, die entworfen und entwickelt werden muss, Vorverkauf bietet exklusive Autos an. Es soll in XD entworfen und in Webflow entwickelt und gehostet werden, damit wartungsfreundliche Seiten gestaltet werden können. Wir haben also ungefähr die Hauptseite, unsere Heldenseite, auf der die Markenwerte, Mission und ein Teil der Aktie vorgestellt werden. Dann haben wir die Autos , in denen alle Autos präsentiert werden. Wir haben Kredite zur Erläuterung von Krediten sowie die Kontaktseite, auf der die Leute sie tatsächlich kontaktieren können. Und wir haben gerade mit unserem Kunden über all diese Dinge gesprochen und ihn gefragt, was sind einige Hauptbereiche Ihres Unternehmens? Also haben sie uns erzählt, dass sie Autos verkaufen, normalerweise über Kredite, also über ihre Partner. Also müssen wir diese beiden Seiten bereits erstellen. Normalerweise müssen wir eine Homepage erstellen , weil wir diese Informationen strukturieren und Personen zeigen müssen , die neu auf der Website sind. Sie wissen nicht wirklich, was dieses Geschäft macht. Deshalb wollen wir sie ganz einfach konvertieren und sie sofort in den Autobereich der Seite schicken . Dann haben wir die Kontaktseite, weil wir möchten die Leute dieses Unternehmen einfach kontaktieren können, aber wir werden auch Kontaktschriftart auf unserer Website angeben. Und ich mache das immer gerne, weil Leute zwinge, nach oben zu scrollen, z. B. um auf den Kontakt zu klicken wenn Sie auf jeder Seite ein Kontaktformular haben können , wenn Ihr Kunde das wünscht. Schließlich werden wir, wie ich bereits erwähnt habe, all diese Seiten haben, auf denen wir einzelne Fahrzeuge aus dem Bestand vorstellen werden. Sie möchten vielleicht sehen, wie viele Meilen das Auto den Ausweis hat, welche Farbe es hat, von wem es gebaut wurde? Ich kenne nicht all diese anderen zusätzlichen Bilder, daher werden wir später ausführlich über all das sprechen . Alle Seiten müssen responsiv gestaltet werden, was wir bereits erwähnt haben. Projektzeitplan muss innerhalb von 90 Tagen abgeschlossen sein, was wir bereits in unserer Entwurfsbeschreibung erwähnt haben. Also endlich ist das wirklich wichtig. Wir haben also Projektrecherchen, Wettbewerbsforschung, Design-Briefing und Inspiration, Papier, Wireframe, Konzeptforschung, Sitemap und Flussdiagramme. All dies wird in diesem Fall 14 Tage dauern. Dann haben wir Moodboards, Farbauswahl, Icon-Stil, Vergleich und Erkundung. Von Adobe XD wurde ein gemeinsam nutzbarer Link für Feedback sowie zwei Überarbeitungs- und Feedbackrunden entworfen zwei Überarbeitungs- und Feedbackrunden , die innerhalb von 15 Tagen erledigt werden sollen. Dann haben wir ein UI-Design mit Bildern, Farben, Schatten und Symbolen in einem bestimmten Stil sowie zwei Feedbackrunden. Wir haben auch 15 Tage, aber denk daran, dass wir diese beiden gleichzeitig machen . Das ist in gewisser Weise irreführend, aber Sie möchten Ihren Kunden trotzdem präsentieren, wie lange Sie tatsächlich brauchen, um das zu erstellen? Schließlich haben wir Asset Export, Website-Entwicklung in Webflow, Verbindung einer Domain mit einem Webflow-Hosting. Natürlich werden sie all diese Dinge sowie eine einstündige Beratung anbieten , wie man Webflow verwendet, um der Website neue Autos hinzuzufügen, was wirklich wichtig ist. Sie möchten in der Lage sein, mit Ihren Kunden zu kommunizieren, sie zu erklären, was auch immer Sie können. Sie werden dich also in Zukunft weniger nerven. Du willst das immer machen. Sie möchten Ihre Projekte immer richtig einrichten. Sie möchten Ihr Gespräch mit Ihren Kunden immer richtig beginnen . Sie rufen dich also nicht jeden Tag an. Sie schicken dir nicht alle 2 Stunden eine E-Mail . Du möchtest sie vollständig erklären. Wie benutzt man Webflow, wie benutzt man Design, wie benutzt man Design Briefing, was auch immer Sie für sie erstellen. Stellen Sie einfach sicher, dass Sie es erklären und nehmen Sie sich etwas Zeit für dieses Projekt. Natürlich können Sie diese Zeit bauen, sie in Ihr Projekt einbauen. Aber sag ihnen einfach nicht, dass du es tatsächlich baust , denn baue immer deine Arbeit auf. Stellen Sie sicher, dass Sie Ihre E-Mails und Telefonanrufe in Rechnung stellen. Dieses habe ich gerade erwähnt, wenn du Videos erstellst. Was auch immer Sie für Ihren Kunden tun , ist Teil der Arbeit. Nicht nur Design, nicht nur Workflow Build. Sie also immer sicher, dass Sie alles, was Sie tun, in Ihren Projektvorschlag aufnehmen. Dann haben wir den spaßigen Teil, wir haben die Preisgestaltung. Also hier haben wir Projektgebühren. Also Recherche, Wettbewerb, Forschungsdesign, Brief und Inspiration. All das wird uns so viel kosten. Ich habe die Zahlen hier nicht ganz genau zusammengezählt, aber mach dir nichts aus. Wir haben also Projektrecherchen, wir haben Papier-Wireframe-Konzeptforschung, wir haben Moodboards, Kostenauswahl. Das hat so viel gekostet, das kostet so viel, das hat so viel gekostet. Und hier geht es darum, auf insgesamt 10.000$ zu kommen . Ich habe Webflow hier nicht hinzugefügt, also lassen Sie uns es hier erstellen. Also Webflow. Webflow-Build-Website oder Webflow-responsive Website, die mit einem integrierten CMS erstellt wurde. Dies ist ein Content-Management-System, mit dem sie all diese neuen Autos zu ihrem Bestand hinzufügen können . Dann haben wir Zahlungsmöglichkeiten. Wir haben also zwei gleiche Zahlungen. Also fünf k Jetzt fünf k am Ende, drei gleiche Zahlungen sind jeweils 3333. Also die erste jetzt, die zweite, nachdem wir das Design und den Turbo fertiggestellt haben und nachdem der Webflow-Build abgeschlossen ist, dann haben wir zwei Zahlungen, fünf K, jetzt fünf k am Ende. Was auch immer Sie wollen, Sie können eine Zahlung hinzufügen, Sie können all diese Informationen ändern. Dann haben wir die Allgemeinen Geschäftsbedingungen. Wie gesagt, es gibt auch eine Seite über mich, die ich bewusst entfernt habe, weil Kunden mich kontaktiert haben, sodass sie nichts über mich wissen müssen. Sie wissen bereits von meinen Seiten auf meiner Website über mich Bescheid, sodass wir Projektressourcen haben, sofern nicht anders vereinbart, die durch Projektrevisionen des Kunden bereitgestellt werden müssen. Wie viele Überarbeitungen können sie haben, bevor wir die Ausgabe vorantreiben, sodass Sie Ihr Grafikdesign nicht hinzufügen können. Dies ist nur für das UX-Design der Benutzeroberfläche, eine Recherche und Webflow, der auf Ihrer Website basiert. Fügen Sie mir keine zusätzlichen Dinge wie Banner-Design oder Mandarin- oder Visitenkartendesign, Broschüren-Design, was auch immer hinzu, die nicht in diesem Preis enthalten sind. Wenn Sie als Designer wissen, wie man all diese Dinge macht, mehr Macht für Sie, ermutige ich Sie wirklich, noch mehr für Ihre Kunden zu schaffen , sie aufzunehmen, noch mehr Geld von ihnen zu nehmen, zu bauen noch bessere Beziehung zu ihnen. Aber für mich mache ich solche Dinge nicht wirklich gerne . Ich weiß, wie man sie macht. Ich mache sie einfach nicht gerne. Für mich. Recherchieren Sie UI, UX und Built. Das mache ich und das ist es, was ich an Arbeitstagen mag. Wenn Sie also von Montag bis Freitag arbeiten, arbeiten sie am Wochenende. Sie könnten dir eine E-Mail schicken, aber sei einfach ehrlich zu ihnen. Ich arbeite am Wochenende nicht. So können Sie Ihre E-Mail senden. Ich erhalte Ihre E-Mail, werde sie aber am Montag beantworten . Stellen Sie also sicher, dass Sie direkt mit Ihren Kunden umgehen oder von wo bis wann. Wenn ich von 9 bis 5 Uhr arbeite, achte darauf, die Zeitzone anzugeben. Dies ist für dieses spezielle Projekt einfach, da sowohl ich als auch meine Kunden in derselben Zeitzone befinden. Das ist ganz einfach, aber wenn Sie in einer anderen Zeitzone arbeiten, ist das wirklich wichtig. Und was sind Ihre gesetzlichen Feiertage? Wenn du am Wochenende arbeitest? Rechnen Sie noch mehr pro Stunde oder was ist Ihr Tarif am Wochenende? Dateiformate. Wenn Sie also in ASD arbeiten, wollen sie normalerweise Figma-Dateien und stellen dann sicher, dass Sie angeben , dass Sie nur XD-Dateien liefern werden. Wenn Sie wie ich in Photoshop arbeiten, z. B. zur Bildbearbeitung, gebe ich immer gerne diese Nutzungsrechte an. Also, wer erhält die Rechte an diesem Design und wenn das Projekt storniert wird, wenn sie beschließen, mitten im Projekt abzusagen, was tun Sie? Wirst du ihnen das Geld zurückerstatten? Wie viel werden Sie ihnen zurückerstatten, wann Sie sie verfeinern oder ob Sie sie überhaupt nicht zurückerstatten werden. Denken Sie also zu Beginn über all diese Dinge nach und stellen Sie sicher, dass Sie sie logisch angehen Was würden Sie in dieser Situation tun, wenn Sie mit jemandem in einigen zusammenarbeiten würden, Sie entscheiden sich einfach für eine Stornierung Möchten Sie Ihr Geld zurück haben? Würdest du dich deswegen schlecht fühlen? Stellen Sie also sicher, dass Sie all diese Dinge herausfinden. Wie ich im vorherigen Teil des Kurses sagte , in dem wir über Projektvorschläge gesprochen haben. Und jetzt können Sie in dieser Vorlage diese Vorlage mit dem Rabatt erhalten. Ich gebe dir einen Gutscheincode. Und im Grunde ist es das. Sie werden dies als PDF exportieren, dieses auswählen und tatsächlich alle auswählen. Also lass uns das machen. Halten Sie zum Beispiel die Umschalttaste oder Befehlstaste E gedrückt, exportieren Sie als PDF und es wird als einzelnes PDF exportiert, aber es werden all diese verschiedenen PDFs zusammengefügt. Sie werden das also tatsächlich als erste Seite haben. Dies ist die zweite Seite und so weiter, was wir am Ende wollen. Sie können es also exportieren, Sie können es ausdrucken, wenn Sie es direkt an Ihren Kunden weitergeben möchten . Wenn Ihr Kunde vor Ort ist, wenn nicht, wie gesagt, können Sie ihn als PDF exportieren und einfach per E-Mail senden. Das war's für dieses Video. Wir gehen zum nächsten, wo wir über unsere Person sprechen werden. Und ich werde Ihnen die Vorlage zeigen die wir zuvor behandelt haben, wie Sie sie für dieses spezielle Projekt ausfüllen können. Also werde ich dich dort sehen. 128. Persona für Nutzer: In dieser Lektion werden wir über Benutzerpersönlichkeiten sprechen und darüber, was wir bisher aus dem Design-Briefing und aus unserem Gespräch mit unserem Kunden, den Recherchen, die wir auf Instagram durchgeführt haben, über LinkedIn, auf YouTube. Aber wir haben anhand dessen, was uns unsere Kunden erzählt haben und was wir direkt online gesehen haben, verstanden . Und Sie können sogar noch weiter gehen und einfach diese Personen anrufen, die bereits Autos von Ihrem Kunden gekauft haben , und dann einfach ein Treffen mit ihnen buchen und ihnen einige einfache Fragen stellen. Machen Sie einen Fragebogen zu einigen UX-Grundlagen wie, was hat Ihnen gefallen, zu erleben? Was könnte Ihrer Meinung nach am Kauferlebnis verbessert werden ? Hast du einen Kredit aufgenommen? Hast du Tschüss Bargeld? Haben Sie andere Methoden gewählt, um dieses Auto von der Firma zu kaufen? Wie hat das Unternehmen Sie behandelt? Haben Sie eine Garantieurkunde erhalten, können Sie sicher sein, eine Garantie zu erhalten. Und wie lange hast du das Auto benutzt? Hast du das Auto weiterverkauft, damit du ihnen all diese Fragen stellen und ihnen einfach sagen kannst diese Fragen stellen und ihnen einfach sagen , dass es anonym sein wird. Sie werden nur nach zukünftigen Käufern suchen , damit Sie diese Website richtig erstellen können, wenn diese Person zurückkommen und noch mehr Kerne kaufen möchte oder für zukünftige Käufer in der Zukunft , die werden kommen. Sie können dies beispielsweise mit fünf ihrer Kunden tun , wenn sie interessiert sind Sie können sagen, dass dies völlig anonym sein wird. Niemand wird von Ihnen erfahren wollen. Sie werden nur wissen wollen warum Sie sich für den Kauf bei diesem Unternehmen entschieden haben? Was hat Sie zu dieser Firma hingezogen? Und wie hast du deine Erfahrung gefunden? Das möchten Sie über Ihre Kunden erfahren. Und wenn Sie dann weitermachen, erhalten Sie eine neue Benutzerpersönlichkeit. Wie ich bereits erwähnt habe, wissen wir, dass diese Leute 45 Jahre alt sind, wir wissen, dass sie männlich sind , wir wissen, dass ihr Geschäftsinhaber , was wir bisher erwähnt haben, dass Wir haben auf Instagram herausgefunden, dass sie mehr als 100 K verdienen. Sie können das leicht erkennen, indem Sie nehmen, was zu tun ist, und die Taschenrechner der Regierung eingeben, damit Sie verstehen können , wie viel Geld sie möglicherweise verdienen. Oder noch besser. Dieses Land, das ist Serbien. Aber das kann man in so ziemlich jedem anderen Land bekommen. Sie können sich an die Regierungsbehörde wenden , die Unternehmen tatsächlich Lizenzen ausstellt, um betriebsbereit zu sein. Wenn Sie also ein Unternehmen eröffnen möchten, müssen Sie zunächst eine Lizenz von der Regierung und von ihnen erhalten , um Ihnen grünes Licht zu geben , damit Sie ein Unternehmen eröffnen können , und somit können Sie verfolgen Sie unsere Unternehmen real, sind sie noch in Betrieb oder die nicht mehr existierenden RT schließen damit Sie all diese Informationen auf Regierungswebsites und Einnahmen verfolgen können . Sie können das Einkommen sehen, das sind öffentlich verfügbare Daten weil Sie sehen können wie viel Geld sie in den letzten 12 Monaten verdient haben, z. B. haben sie Dauerkredite? Sie können also ein wenig verstehen , mit wie viel Geld Sie in dieser Firma zu tun haben. Und deshalb können Sie abziehen, wie viel Geld ein CEO möglicherweise verdienen kann oder kann ein Unternehmer verdienen? Und wie gesagt, auf LinkedIn findet ihr mögliche Gehälter für diese Stellen. Sie können also wirklich zu dieser Zahl kommen. Oder noch besser, wenn Ihr Kunde weiß, wie viel Geld seine Kunden verdienen und wie viel Geld sie bereit sind, noch besser auszugeben, mehr Macht für Sie. können Sie ganz einfach abziehen, und Sie können es eintragen. Auch dies ist wirklich wichtig, da der allgemeine Ton und die Sprache der Website eher auf diese Personen als auf alle anderen ausgerichtet sein sollen . Deshalb wollen wir das so formatieren. Status, verheiratet. Warum wissen wir das? Dank Instagram haben uns unsere Kunden erneut den Standort Belgrad, Serbien, mitgeteilt. Stefan ist der Geschäftsinhaber aus Belgrad, Serbien. Er isst gerne mit seinen Freunden zu Abend und schaut sich YouTube-Sendungen über Selbsthilfe und Verbesserung an. All dies ist in ihrem Instagram-Feed und ihren Geschichten zu sehen . Er ist Vater von zwei Kindern und hat eine Leidenschaft für Architektur am Wochenende Er erkundet gerne das Leben im Meer und verlässt es. Was er an unseren Autos am meisten begeistert und er mag Luxussportwagen, vor allem wegen ihres Aussehens und Klangs. Und dann brauchen wir eine bessere Möglichkeit, online nach einem Gebrauchtwagen zu suchen. Einfacher Weg, das Auto zu verstehen. Er sucht nach einem einfacheren Ansatz , um nach einem Fahrzeug zu fragen. All diese Dinge haben wir erwähnt und all diese Dinge haben uns unsere Kunden erzählt, dass ihre Kunden ihnen erzählt haben. Und deshalb verstehen wir genau hier, was wir bauen wollen. Frustrationen, Websites sind zu überfüllt und verwirrend, was ich Ihnen in der Wettbewerbsanalyse zeigen werde, die etwas später kommen wird. Websites sind nicht mobilfreundlich, was in der heutigen Zeit erneut ein großes No-Go ist. Hallo, Einzelpost ohne Preis, nehme an, was auch immer ich kaufe ein Licht, um den Preis sofort zu sehen. Denn was ist der Sinn, es zu verkaufen? Wenn Sie mir den Preis nicht zeigen möchten, wie kann ich ihn kaufen? Wir möchten, dass Sie sie kontaktieren und sie Sie bei einem anderen Kauf betrügen. Das willst du nicht, du willst volle Transparenz. Dann haben wir genau hier die Nutzung sozialer Medien. Die Mehrheit sind also Instagram und LinkedIn. Vielleicht könnte ich YouTube genau hier platzieren, aber Facebook und Twitter liegen irgendwo dazwischen. Dann haben wir das Angebot und wir haben die Lieblingsmarken, was ich gegenüber der Vorlage, die ich dir bereits gezeigt habe, eigentlich nicht geändert habe. Aber entscheidend ist, dass wir das haben weil unser Kunde uns erzählt hat, dass ihm die Cardboard-Website gefällt. Ich habe die Farbe tatsächlich von der Cowell-Website genommen, die ich Ihnen in nur einer Sekunde zeigen werde , und sie dort platziert. mich einfach so inspiriert. Ich verstehe also, dass sie Blau mögen und ich möchte diese blaue Farbe noch weiter vorantreiben. Und ich werde dir in einem der zukünftigen Videos zeigen wie das geht und warum ist das wichtig? Als nächstes fahren wir mit der Wettbewerbsanalyse fort. Und ich werde Ihnen eine Wettbewerbsanalyse für dieses Geschäft zeigen . Wir werden diese Wettbewerber vergleichen, sowohl direkte als auch indirekte Wettbewerber. Und um es ein bisschen besser zu verstehen, was ist das Datum? Toll, was sie so großartig gemacht haben, damit wir weitermachen und diese Fehler in unserem zukünftigen Design beheben können. Also werde ich dich dort sehen. 129. Wettbewerbsanalyse: Lassen Sie uns nun zur Wettbewerbsanalyse übergehen und ich werde Ihnen einige direkte und indirekte Konkurrenten für unsere Marke zeigen . Und ich werde auf einige gute und einige schlechte Dinge hinweisen , um die beide , die uns mitgenommen haben, trauern. Und hier haben wir zwei Websites und ich werde Ihnen zuerst diese zeigen und dann werden wir sie ein wenig vergrößern weil das Wichtigste zuerst ist, dass dieser direkte Konkurrent nicht reagiert. kannst du dir hier ansehen. Wenn ich diese Website also noch weiter einschränke, können Sie das ganze Problem hier sehen. Sie können sich also vorstellen, wenn Sie auf Ihr Mobilgerät gehen und nach links und rechts scrollen, Sie müssen tatsächlich drücken und zoomen und sich bewegen, ungefähr wie Mitte der 2000er Jahre. Also dieser Text ist dann nicht zentriert. Wir haben also ein wirklich großes Problem. Schauen wir uns das zuerst an, denn dies ist die eigentliche Plattform, die ich Ihnen gesagt habe, es sich um einen indirekten Konkurrenten handelt. Und sie verkaufen auf der Plattform. Sie verkaufen nicht auf ihrer eigenen Website, aber diese Firma hat ihre eigene Website. Zuallererst haben sie eine Verpflichtung, wir werden sie loswerden weil die Mehrheit dieser Menschen, insbesondere weil sie Geschäftsinhaber sind, Erfahrung mit Online-Geschäften haben. Sie werden nicht auf das Logo klicken , um zur Startseite zurückzukehren. Dann haben wir Angebote. Lassen Sie mich versuchen, das ins Englische zu übersetzen. Es wird also ein bisschen einfacher für dich sein , es zu verstehen. Da haben wir's. Wir haben also ein Zuhause, wie ich bereits erwähnt habe, wir haben ein Fahrzeugangebot. Es gibt also aktuelle Fahrzeuge, Fahrzeug bei Ankunft. Also das sind echte Cusco gerade gekauft und sind im Transport, z.B. Finanzierung, die wir brauchen Galerie, die wir nicht benötigen, weil das Fahrzeugangebot uns das anbieten wird und wir gehen um dort alle Bilder sehen zu können. Dann haben wir eine Kontaktseite, die wir benötigen. Dann haben sie diese nette Helden-Sektion es nicht um Marke geht, es geht um Leistung. Aber wir wissen nicht, ob Sie sich z. B. mit Autos auskennen, Sie werden sofort wissen, dass es sich um ein Porsche 911 Turbo Gauge Cluster handelt . Und verkaufst du nur Pushes oder verkaufst du andere Marken? Du sagst, es geht nicht um die Marke, aber warum verkaufst du mir im Hintergrund eine bestimmte Marke? Und du wirst es in nur einer Sekunde sehen. Sie haben viel von dieser Marke auf ihrer Instagram-Seite und auf dieser Website. Also ich verstehe das nicht wirklich. Dann haben wir Anreisefahrzeuge und wir haben ein Fahrzeugangebot. Und Sie können sehen, dass diese beiden Felder nicht ausgerichtet sind und wir keine Bilder dahinter sehen. Wir sehen keine verfügbaren Deckungsoptionen. Dann haben wir die besten Angebote. Wir haben also Porsche, Porsche, Porsche, was gerade erwähnt wurde. Es geht also nicht um Marke, aber lassen Sie uns ihnen alle Portionen zeigen, die wir haben. Also wir werden Autos warum dieser Showroom Also haben wir zertifizierte Fahrzeuge, Testfahrten und kostenlose Lieferung. Benötigen Sie also eine Finanzierung? Wir sind für Sie da, unsere Partner. Okay. Dann haben wir dieses Bild, aus welchem Grund auch immer, besuchen Sie uns und fahren Sie Ihr neues Auto. Sie haben also E-Mail-Adresse und Telefonnummer. Dann haben sie die Karte, was großartig ist. Und sie haben diese einfache Fußzeile am Ende. Also ganz einfach, und ich mag es wirklich, aber ich verstehe all diese verschiedenen Abschnitte einfach nicht wirklich . Aber es spielt keine Rolle. Sehen wir uns alle Autos an. Wir haben also eine Menge Porsches und wir haben BMWs. Also lass uns etwas nehmen, lass uns einen Porsche nehmen. Wir haben also Ansichten. Wenn ich also dort klicke , werde ich weitergeleitet und lass uns tatsächlich zu dieser vorherigen Seite gehen. Wir haben also Besucher und sie haben hier keinen Kontakt. Mir gefiel es nicht auf der Homepage. Es ist also egal. Lass uns weitermachen. Also, was wir hier haben, ist, dass wir ein Auto reserviert haben , wir haben dasselbe. Aber was bringt es, wenn ich kein Profil habe, auf dem ich all diese Seen sehen kann, ist das in Ordnung, wo ich Sie tatsächlich über diese Netzwerke kontaktieren kann , denke ich. Also, wenn ich das auf Twitter teile, wird es öffnen, teilen. Ja, es wird also ein Share-Widget geöffnet. Okay, statt Kontakt-Widget. Also ich mag dieses Auto, ich werde dich über Twitter kontaktieren und dort klicken. Und es wird es tatsächlich als Tweet teilen. Okay, wahrscheinlich das Gleiche für WhatsApp und Pinterest. Dann haben wir diese Galerie. Wenn ich also auf die Galerie klicke, öffnet sie sich ganz nett. Dann haben wir all diese Punkte unten, was in Ordnung ist. Aber wieder einmal ist dieses Layout irgendwie gequetscht. Wir haben hier also 2467 Bilder. Vielleicht ist es nicht das beste Layout, aber wir werden es etwas später untersuchen. Dann haben wir nur ein paar Texte. Wir haben eine allgemeine Informationsbeschreibung. Es ist also ziemlich gut aufgeteilt, ziemlich leicht zu verstehen, aber es ist nicht zu visuell. Vielleicht. In unserem Fall können wir es in verschiedene Abschnitte unterteilen. Und das werden Sie auf der zweiten Website sehen. Und in welchem TRB-Vorteil, was ich zeigen werde, was überhaupt nicht da ist, sondern die Inspirationswebsite für unseren Kunden. Und dann haben wir all diese Informationen. Und schließlich haben wir die gleichen zwei Abschnitte hier unten. Das ist also unsere aktuelle. Und wenn Sie zur Finanzierung gehen, was wir sehen, einfache, schnelle Bestpreise, mehr Informationen kommen von, sodass sie nicht einmal diese Seite haben. Ordnung, das ist also der direkte Konkurrent. Schauen wir uns nun den indirekten Konkurrenten an. Wenn ich noch ein bisschen scrolle , um das noch weiter zu verstecken, los geht's. Wir haben also die Plattform, wie ich bereits erwähnt habe. Das ist also nicht ihre Website. Also geben sie uns all diese Informationen. Lassen Sie mich versuchen, dies auch ins Englische zu übersetzen. Da haben wir's. Also zwei Jahre Geschäft, Sara-Fahrzeugmarken, Fahrzeuge aus Serbien. Sie sind also keine Importeure, sie kommen direkt aus Serbien. Möglichkeit, auf Kredit oder Kredit zu kaufen , was sie Ihnen bieten können. Also noch einmal, verstehe einfach , dass dies eine Plattform ist , und ich werde das zeigen. Also heißt es Gebrauchtwagen oder Paulownia Toby Lia, wenn ich ins Englische übersetze, los geht's. Sie können also sehen, dass all dies von verschiedenen Geschäftsverkäufern stammt. Also all diese Verkäufer, und dann haben wir mehr Verkäufer und Marcellus, stell dir Amazon für Autos vor. Dieser Konkurrent ist einfach auf dieser Plattform da, das ist also nicht ihre Website, sie verkaufen nur hier. Sie können in verschiedenen Kategorien stöbern , was großartig ist, aber unser Kunde hat nicht allzu viele Autos. Sie haben z. B. nur sechs oder acht Autos, sodass wir keine Suchoptionen benötigen. Wir brauchen nur eine Seite, auf der wir all ihre Autos präsentieren können , weil sie sich normalerweise ziemlich schnell verkaufen. Und Sie können auf dieser Konkurrenz-Website sehen, wenn wir hier scrollen, also Fahrzeuge bieten 2467 Autos an. Sie benötigen also keine Suchoption für sieben Autos, aber Sie benötigen eine Suchoption, z. B. wenn Sie 20 verschiedene Marken haben, wenn Sie 100 Karten haben, wenn Sie all diese Dinge haben, sodass ist da, wo du es brauchst. Noch einmal, das ist von einer Plattform, also werde ich einfach ein Auto öffnen. Sie haben hier viele verschiedene Fotos, was großartig ist. Und als Erstes können Sie auf einen Blick das Jahr sehen, in dem das Auto produziert wurde. Um welche Art von Auto handelt es sich? Wie viele Kilometer sind zurückgelegt? Die Übertragung? Wir haben also den Motortyp. Wir haben, wie viele Kubikzoll hat es? Dann haben wir Pferdestärken und wir haben, was für ein Fahrzeug ist das? Hat es zwei Türen für diese Fasern? All diese Informationen sind hier also wirklich nützlich. Wir haben keins davon. Und tatsächlich sieht dieser Abschnitt aus, ich habe eine Sekunde lang nachgedacht, vielleicht reagiert er, aber eigentlich geht er nicht einfach von links nach rechts. Lassen Sie uns also hier weitermachen. Und hier können wir die Versicherung sehen. Lassen Sie mich auch diesen übersetzen damit Sie ihn leichter herausfinden können. Wir haben also den Registrierungspreis, dann haben wir den Versicherungsrechner, wir haben einen Kaufvertrag, all diese Dinge, die von der Plattform bereitgestellt werden. Ich kann das noch einmal nicht genug betonen. Und dieses Layout hat mir sehr gut gefallen. Ich finde es ziemlich gut. Und wenn ich klicke, wird mir das Bild im Vollbildmodus angezeigt, was völlig in Ordnung ist. Wir haben das X, also nur das typische Layout, und dann haben wir allgemeine Informationen. Wenn man das im Vergleich dazu betrachtet, denke ich, dass es viel besser aussieht weil es das in bestimmte Abschnitte unterteilen wird, weil diese Plattform seit 20 Jahren im Geschäft ist. z. B. wissen sie, was zu tun ist, weil sie seit über 20 Jahren Daten sammeln. Sie verstehen ihre Kunden und wissen, welche Informationen wirklich wichtig sind, um sie wissen, welche Informationen wirklich wichtig sind auf der Verkaufsseite zu platzieren. Sie haben also mehr Informationen über das Modell. Vielleicht kann es ein YouTube-Video geben, vielleicht. Dann haben wir Sicherheit, wir haben Ausrüstung. Beachten Sie, wie es bleibt, oben angeheftet, was mir sehr gut gefällt, wenn ich auf dieser Website bin. Wenn ich es vergrößere, wenn wir nach unten scrollen, haben wir keine Schaltflächen, sie bewegen sich einfach heraus der Seite. Wenn du gleich hierher zurückkehrst und ich das jetzt skalieren kann, ohne meinen Computer zu beschädigen, lass uns versuchen, das so zu zeichnen. Weil ich diese ganze Aufnahmesoftware verwende , siehst du diesen schwarzen schwarzen Fehler. Wir haben Ausrüstung, wir haben den Staat. Ist das aktuelle Neufahrzeug also gebraucht? Wo befindet sich eine Servicehistorie, die für teure Autos äußerst wichtig ist. Dann haben wir eine Beschreibung. Also vielleicht was, welche Ausrüstung hat das Auto? Und vielleicht etwas zusätzliche Ausrüstung. Sie können sehen, dass es hier viel gibt und das ist bei Mercedes-Fahrzeugen immer der Fall. Und dann haben sie all diese Beschreibung unten. Einige brauchen meiner Meinung nach so etwas, aber in einem minimalistischeren Stil, weil wir auch hier nicht all diese Informationen benötigen, weil wir eine separate Seite für die Autokredite und sie werden diese Informationen sehen können . Und wir möchten nur, dass sie uns ganz einfach kontaktieren können , um sich nach diesem speziellen Auto zu erkundigen , mehr darüber zu erfahren und mehr Informationen darüber zu erhalten und eine Probefahrt zu buchen. Denn denken Sie daran: Das ist unser Ziel, die Buchungen von Testfahrten in den nächsten zwei Monaten um 10% zu erhöhen . Das wollen wir und deshalb wollen wir ein schönes, schönes Layout erstellen, vielleicht mit einer Karte wie dieser, aber vielleicht kann es bleiben , wenn wir nach unten gehen. Du kannst hier sehen, dass es einfach da ist. Und wenn ich anfange, nach unten haben wir diese Informationen hier, aber wir haben diese Informationen nicht. Klicken Sie also, um die Nummer zu sehen und eine Nachricht an den Verkäufer zu senden. Wir haben nur diese Informationen, die in sozialen Medien geteilt werden, die Anzeige melden und sie dann zu den Likes hinzufügen, und wir haben den Preis. Aber meiner Meinung nach ist dies, selbst für diese riesige Website, selbst für diese riesige Website, meiner Meinung nach viel wichtiger. Dann diese Information. Also behalte das einfach im Hinterkopf. Ich möchte den Preis sehen, aber warum kann ich den Preis hier nicht sehen? Warum kann ich Sie von hier aus nicht kontaktieren, keine Nachricht senden oder Sie nicht direkt anrufen, insbesondere nicht auf einem Mobilgerät. Du kannst dir das einfach vorstellen, lass uns das schnell ein bisschen skalieren. Da haben wir's. Und dann lassen Sie mich es von dieser Seite aus skalieren und denken, ja, Sie können sehen, wie überfüllt diese Abschnitte werden können. Und dann haben wir diese Tabs, die sich aus irgendeinem Grund nicht öffnen lassen, was auch immer. Aber Sie können sich einfach vorstellen , dass, wenn sie funktionieren, wenn sie all diese Informationen öffnen, sehen Sie sich das einfach an. Und die ganze Zeit, wenn Sie auf Ihrem Mobilgerät scrollen, haben Sie nur diese Informationen. Okay, mir geht es gut. Ich möchte dieses Fahrzeug kaufen. Ich liebe es. Es ist in Ordnung. Lass mich sie anrufen. Du musst ganz nach oben scrollen, um es sehen zu können. Mir hat gefallen, wie sie das Responsive gemacht haben, weil ihre Navigation einfach riesig ist, weil diese Website, wie sie sagten, ziemlich riesig ist. Also lass es uns hier ablegen und lass uns gleich hier weitermachen. Sie können also sehen, wie viele davon haben sie? Sie haben also viel drin. Jetzt brauchen wir einfach so etwas. Also ganz einfach, weil unsere Marke ganz einfach ist. Schließlich, nach all diesen Informationen und wir verstehen, was wir wollen, verstehen wir jetzt etwas besser, was wir brauchen. Dann sehen wir uns das Auto gut an, die Website, die unseren Kunden inspiriert hat. Und hier habe ich diese blaue Farbe genommen und wie ich sie gemacht habe. Klicken Sie mit der rechten Maustaste und rufen Sie einen Peak von Page Styles auf. Klick und los geht's. Wer möchte, kann sich diese Farbspitze also ansehen. Es ist ein sogenannter Farbwähler oder Color Pick was auch immer. Und dann wirst du hier alle Farben sehen , die auf der Website verwendet werden, aber ich werde es hier nicht tun. Ich gehe zum Beispiel zu den Gebrauchtwagen, aber eigentlich nein, lass uns zu den Neuwagen gehen. Und schauen wir uns etwas an , das beliebt ist. Was auch immer. Nehmen wir diese Angebote für Hyundai Tucson. Da haben wir's. Und hier hast du dieses Kartenlayout, das ich erwähnt habe. Da hast du es. Aber was ich eigentlich zeigen möchte, ist das, ich denke, es ist genau hier, da haben wir es. So beliebte ausführliche Bewertungen. Als ich mit dem Scrollen begann, können Sie sehen, dass mir dieser Abschnitt der Seite mit äußerst wichtigen Informationen folgt , was ich auch gesagt habe. Sie können also einfach hier links auf der Seite sehen wie viele Informationen ich habe , wie viele Informationen ich habe. Aber an dieser rechten Seitenleiste bleibt immer oben, egal wo ich mich auf der Seite befinde, all diese Informationen sind für mich leicht zugänglich. Ich kann es leicht verstehen, wenn ich hier anfange, nach unten zu scrollen, ist es weg. Vor allem auf mobilen Geräten. Hier ist es dieselbe Geschichte. Wenn wir also ganz nach unten scrollen, hört es einfach hier auf, wo die Informationen und so, wie hört es einfach hier Sie sie sehen können klicken und verschwinden, weil wir jetzt zu den anderen Teilen der Website wechseln. Also das hat mir sehr gut gefallen. Und was die Farbe angeht, können Sie erneut mit der rechten Maustaste eine Farbe aus den Seitenstilen auswählen. Und das ist übrigens völlig kostenlos, Sie können es als Chrome-Erweiterung installieren. Und dann können Sie hier sehen, dass es uns RGB-Stile zeigt, aber wir wollen Textilien weil sie viel einfacher zu bearbeiten sind. Sie können diese blaue Farbe einfach auswählen, kopieren und direkt in Adobe XD einfügen. Und los geht's. Jetzt hast du es und jetzt kannst du es super einfach sehen, das heißt, es zu bearbeiten. Jetzt, wo wir all diese Informationen kennen, wissen wir jetzt, was wir wollen, was wir nicht wollen, was wir mögen, was wir nicht mögen. Wir wissen, was sie als Kunde mögen, wir wissen, welche Art von Farbe wir anstreben können. Jetzt, wo wir anfangen können, Benutzerströme anzustreben? Und jetzt können wir vielleicht damit fortfahren, die Wege zu strukturieren, die unsere Benutzer einschlagen werden, wenn sie auf unserer Website landen , und was sie als Nächstes tun werden. Gehen wir also zu Adobe XD über und lassen Sie uns mit einigen Benutzerabläufen arbeiten. 130. Benutzerströme: In dieser Lektion werden wir mit Benutzerströmen arbeiten, da diese Website in Bezug auf die Navigation und die Seiten recht einfach sein wird in Bezug auf die Navigation und die Seiten recht einfach . Sie werden nicht viele von ihnen sein. Dann werden wir das etwas schneller durchstehen , als wenn wir das auf einer etwas komplexeren Seite tun würden. Lass uns zu XD springen und du kennst diese Vorlage, wenn du dir die vorherigen Teile des Kurses angesehen hast . Weil ich dir diese Vorlage schon gezeigt und dir diese Vorlage gegeben habe. Körperverletzung. Wir haben den Einstiegspunkt, wir haben das Weiß, wir haben die Stufen, wir haben all diese verschiedenen Elemente. Und wenn ich weitermache und das auswähle, haben wir Open Sans als Schriftart. Aber ich werde tatsächlich weitermachen und Poppins für die Schrift verwenden, also schauen wir mal, vielleicht können wir das. Lass uns hierher gehen. Lassen Sie mich weitermachen und diese Elemente auswählen, drücken Sie Control C oder Command C auf einem Mac. Lassen Sie mich zu einem leeren XD-Dokument wechseln, das ist dieses Control- oder Command-V, in das Sie es einfügen möchten. Und ich werde weitermachen und sie genau hier auswählen und tatsächlich auf Nein klicken Schauen wir mal, gehen wir zu der Hauptkomponente über. Wechseln wir nun zurück zu dieser Datei und schließen sie. Und jetzt speichern wir es auf meinem Desktop, also lass uns weitermachen und es unseren Benutzerfluss nennen. Da haben wir's. Dann zuerst, lassen Sie uns hier die Hauptkomponente hinzufügen. Und hier möchte ich die blaue Farbe nehmen, die wir gewählt haben. Wählen wir es also für die Füllung aus und klicken Sie auf diese Farbe. Und ich nenne diese Farbe z.B. Main, Blau. Und das gefällt mir auch. Lass uns weitermachen und das loswerden. Mir haben auch die anderen Farben gefallen. Also für das Auto während Websites, also wenn ich dich dorthin mitnehme, los geht's. Wenn ich also mit der Maus schwebe, haben wir diese hellere Farbe. Was ich also tun kann, ist vielleicht Mauszeiger zu bewegen und dann mit der rechten Maustaste hier zu klicken und den farbigen Schnabel zu färben und ihn, wenn möglich, von dort zu nehmen. Oder wenn nicht, können wir vielleicht woanders hingehen , weil sie es wahrscheinlich woanders benutzen. Sie können hier die Linkfarbe sehen, sie sieht ziemlich ähnlich aus. Also vielleicht können wir es finden. Hier ist es in ihrem Logo. Du kannst also entweder das Logo nehmen, irgendwo hier mit der rechten Maustaste klicken und mal sehen. Klicken Sie auf die Außenseite der Farbspitze. Jetzt gibt mir einfach diese Farbe. Also habe ich diese Farbe schon genommen, aber du kannst sie durchstöbern. Sie können es in einem neuen Dokument öffnen. Sie können sogar in CSS gehen, wenn Sie möchten. Nimm diese Farbe. Und ich mache einfach weiter und ich werde genau hier klicken, hier klicken und dann hier klicken, um diese Farbe einzufügen. Jetzt kannst du sehen, dass es ein kleiner Unterschied ist, aber wir werden es trotzdem Hover-Farbe nennen , weil ich diese Farbe z. B. für unsere Links verwenden möchte, und für unsere Button-Hover-Farbe etwas später. Wir haben also den Einstiegspunkt, wir haben die Aktion, wir haben den Prozess. Vielleicht können wir das belassen, aber ich werde tatsächlich eine Entscheidung treffen, Hauptfarbe auf den Hintergrund auftragen. Da haben wir's. Und all diese, ich nehme tatsächlich die Schwebefarbe. Da haben wir's. Und für all diese, lassen Sie uns sehen, das ist die Grenze, Grenze und Grenze. Wenden wir dies als Randfarbe an. Wählen wir das aus und wenden wie folgt auf unsere Hauptfarbe an, und dies soll die Hoverfarbe sein. Da haben wir's. Wählen Sie dies als unsere Randfarbe, dann dies und dies als unsere Farbe. Zusätzlich zu diesem Rechtsklick können Sie Aquarell anwenden. Das wird auch Hover sein. Und wir werden den Kessel loswerden , indem wir hier die Randfarbe auftragen. Sie können also sehen, wie einfach das zu ändern ist. Dann werden wir den Eintrag haben oder gleich hier und müssen uns keine Gedanken über die Größe der Zeichenfläche machen Eintrag haben oder gleich . Ich werde es in nur einer Sekunde loswerden und ein wenig reduzieren . Also, wenn ich dich hierher zurückbringe und sicherstelle, dass wir zentriert sind und 20 z. B. wir den Einstiegspunkt haben , den der Benutzer auf unserer Website landet. Und lassen Sie uns das ein wenig ausrichten. Also lass uns die Umschalttaste und die Pfeiltasten drücken. Also vielleicht 40,40, nur um ein bisschen genauer zu sein. Also noch einmal, wir haben den Eintrag und dann haben wir, mal sehen, mal sehen, mal sehen. Vielleicht verarbeiten. Nennen wir das also, sagen wir Autos durchstöbern. Und lassen Sie mich es stattdessen auf diese Seite beschränken. Also wenn ich hier tippe, Autos durchstöbere, los geht's. Auf der Homepage, dann haben wir die Action. Also so, los geht's. Ich war noch 40 Jahre alt, wir sind uns bewusst 20. Da haben wir's. Hübsch. Also lass uns sehen. Vielleicht klicken Sie, um alle Autos anzusehen, Autos zu durchsuchen, oder vielleicht ein Vieux Carre. Vieux Carre, welches ist das fragliche Auto. Vielleicht wollen sie einfach nur die Gesamtinformationen über das Auto selbst sehen . Wir haben also das Vieux Carre. Dann werde ich das noch einmal duplizieren , genau hier positioniert, Vieux Carre. Und vielleicht treffen sie eine Entscheidung. Von hier aus werden wir zwei verschiedene Wege gehen. Also einer wird genau hier sein, also genau hier, also Shift 12 und dann Shift Control D, Befehl D, richtig, die beiden, also haben wir eine Entscheidung, dann haben wir die Aktion. Und mal sehen, was wir tun können. Suchen Sie nach Autos. Vielleicht können wir hier Control D drücken. Da hast du es. Kontakte, Händler. Da hast du es. Von Schuldenkontakten aus können wir z. B. hier Control D drücken und das umdrehen. Da haben wir's. Stellen Sie sicher, dass es in der Mitte ist. Schicht. Einer der Aktionen stammt von diesen Kontakten. Genau hier. Mal sehen, buchen Sie eine Probefahrt. Ich glaube. Also. Das wollen wir. Wir möchten, dass sie eine Probefahrt buchen können oder wir können etwas anderes tun. Das ist also eine Option, wenn sie den Händler kontaktiert haben. Oder sie können eine Entscheidung sehen. Vielleicht können wir das alles tatsächlich reduzieren und ich werde Ihnen in nur einer Sekunde zeigen, warum. Also Vieux Carre, weil wir hier zusätzliche Informationen haben werden . Also lasst uns das duplizieren. Sonst dreh es um, vergewissere dich, dass wir in der Mitte sind. Stell sicher, dass wir 20 sind. Da haben wir's. Von hier. Lassen Sie uns das alles jetzt noch weiter verschieben, damit wir Sie besser hören können. Weltall. Control D stellt sicher, dass wir uns in einem Zentrum befinden. Da haben wir's. Von hier aus werden wir Kredite versiegeln, z. B. siehe Kredite. Da haben wir's. Dann können sie von Krediten aus weitermachen und Control D. Vielleicht können wir das so drehen, dass es ungefähr hier, hier, in der Mitte ist. Da haben wir's. Also werden wir es so positionieren, dass es hier ist. 20. Ich werde den Boden ausdehnen, damit er sich genau hier trifft. Da haben wir's. Und dann drücke Strg D oder reduziere oder drehe es. So stellt man sicher, dass ich hier in der Nähe bin. Hübsch. Ich nehme diesen seitlich gedreht , um ihn ungefähr in der Mitte zu positionieren. Es muss nicht alles perfekt sein, vielleicht ungefähr hier. Oder noch besser. Wir können das nehmen und eine Rasterlinie wenn wir nur perfekt präzise sein wollen. Nun, ich nehme wirklich diesen Pfeil, er ist in der Mitte. Da hast du es. Positionieren Sie dies, Position, dies, bis es sich trifft, und positionieren Sie es dann genau hier. Mal sehen, wir sind nicht hier. Da haben wir's. Und wenn ich den Zoom ein bisschen abziehe, hier zoome, wir sind da. Also, was wir hier getan haben ist, diesen Leitfaden zu entfernen , damit er uns nicht zu sehr stört. Also Wendy stöbert nach Autos, sie können klicken, um einzelne Autos zu sehen. Das ist Vieux Carre, genau hier. Von Vieux Carre aus können sie auf Kredite ansehen klicken, was eine Schaltfläche sein kann, die sie z. B. zur Darlehensrede führt und sie eine Entscheidung treffen müssen. Also vielleicht können wir das tatsächlich hierher verschieben. Sie haben also eine Entscheidung. Mal sehen, 21 bis zwei vor vier, vielleicht 20. Da haben wir's. Und das wird tatsächlich hier sein. Da haben wir's. Und das kann hier leicht bis ungefähr reduziert werden. Lass uns das hierher verschieben. Also 14, geh und wenn es drin ist, das war's. Also wieder einmal, sobald sie das Auto tatsächlich gesehen haben, müssen sie eine Entscheidung treffen. Sie werden sich entweder mit dem Händler bezüglich dieses bestimmten Autos in Verbindung setzen oder sie werden sich die Kredite ansehen. Wenn der Mengenhändler also eine Probefahrt buchen oder sie können sehen die Lunge den Händler kontaktiert und dann eine Probefahrt buchen kann. Und ich stimme den Kreditbedingungen genau dort zu und dann oder sie können eine Entscheidung treffen. Sie können z. B. Andere Autos ansehen sagen . Und dann kann das ihre Entscheidung von dieser speziellen Seite aus sein. Und sie können entweder hierher gehen, um nach anderen Autos zu suchen, oder sie können auf die spezielle Seite über Ansicht oder Autos gehen . Wir können das also auf viele verschiedene Arten strukturieren. Diese Vieux Carre-Seite wird also tatsächlich in CMS, in Webflow, erstellt. Wir erstellen also eine einzelne Seite und duplizieren sie dann immer wieder und füllen sie mit dem Inhalt dieses speziellen Autos. Aber in diesem Fall können wir sie vielleicht zu anderen Autos mitnehmen , damit sie nach Autos suchen können. Vielleicht können wir die beiden sogar kombinieren und am Ende der Seite eine Art Widget erstellen , in dem sie nicht jedes Mal auf die bestimmte Seite gehen und eine bestimmte Seite laden müssen die bestimmte Seite gehen und eine bestimmte Seite laden . Vielleicht können sie unten auf der Seite verwandte Autos sehen . Also können wir es gleich hier sehen. Also C, verwandte Autos unten auf dieser Seite. Da haben wir's. Und von da an können wir klicken, um ein Auto anzusehen. Also noch einmal, werde sie nicht auf diese Seite bringen und die Ladegeschwindigkeit und jede Menge Zeit verschwenden. Wir werden sie einfach genau auf dieselbe Seite weiterleiten, aber für eine andere Karte. So wie das hier. Lass uns das sexuell duplizieren vielleicht stellen wir sicher, dass wir hier in einem Zentrum sind. Da haben wir's. Und 20 gleichermaßen. Also, okay, also werde ich weitermachen und diesen Pfeil auswählen, die Elemente daraus öffnen, dann diesen Pfeil auswählen die Elemente als Site einfügen. Und dann mache ich einfach weiter und lösche diesen. Löschen Sie diesen und stellen Sie sicher , dass sich diese beiden genau hier treffen. Dieser trifft sich genau hier. Ich glaube. Schubs einfach mehr an. Da haben wir's. Und jetzt, wo ich das getan habe, lass mich das verstecken. Klicken Sie auf diesen und zeigen Sie ihn, damit Sie sehen können, was ich getan habe. Ich habe es einfach dupliziert und genau hier positioniert. Und in diesem Fall haben wir eigentlich kein Nein. Aber wenn wir das getan haben, werden wir sie einfach auf eine dieser verschiedenen Seiten weiterleiten. Also tatsächlich eine Probefahrt zu buchen ist unser letztes Ziel. Aber Ansprechpartner Händler können sein, das kann sein. Lassen Sie uns also ein Buch, eine Probefahrt, als Endziel verwenden . Also Control D genau hier. Nennen wir es Exit. So wie. Ich werde diese Pfeile loswerden weil ich sie in diesem Fall nicht benötige, Control D, und sicherstellt, dass wir uns hier in einer Mitte befinden. Da haben wir's. Aus irgendeinem Grund sind wir nicht dabei. Okay. Lassen Sie uns diese beiden auswählen. Da haben wir's. Zwei, los geht's. Hübsch. Stellen Sie sicher, dass diese gut positioniert sind und wir 20 sind. Und schließlich ist das unser Benutzerfluss. So werden unsere Benutzer also durch unsere Seite fließen. Lassen Sie uns das auf 40 verschieben. Und ich werde die Abstände loswerden, z. B. 40, 05:00 Uhr um es ganz nach unten zu verschieben, damit Sie sehen können, Sie keine bestimmten Größen für Ihre Kunsttafeln verwenden müssen. Sie können sehen, wie Sie sie einfach anpassen und auf verschiedene Größen anwenden können . Aber wir haben überall 40, wie Sie hier sehen können, das ist unser Benutzerfluss. Lassen Sie uns weitermachen und es noch einmal kurz überprüfen. Lass uns das loswerden. Noch einmal. Wir hätten mich einfach sehen lassen, was ich getan habe. Mache sie alle duplizieren. Sehen wir uns das noch einmal an. Wir haben also den Einstiegspunkt, nämlich die Homepage, über die unsere Benutzer ihre Schulden abbauen werden . Sie können Autos durchsuchen. Dies kann entweder auf einer Homepage oder einer separaten Seite sein. Von dort aus können sie auf das Auto klicken und sich dieses Auto ansehen, um weitere Informationen zu erhalten. Und von dort aus können sie eine Entscheidung treffen. Sie können entweder einen Kredit sehen und einige Optionen für die Lunge sehen, die sie haben , z. B. welches Unternehmen Kredite verschenkt und andere Suchbegriffe und Konditionen können sein und all diese Informationen eingeben. Von dort. Sie können sich an den Händler wenden oder sie können sich direkt an Sie wenden, wollen sich das Auto ansehen und es gefällt ihnen. Vielleicht möchten sie mehr Informationen erhalten, ob sie noch zum Verkauf angeboten werden. Ist es für eine Probefahrt verfügbar? Wenn ja, wann ist es für eine Probefahrt verfügbar und alles ist anders. Oder sie könnten verwandte Autos sehen. Wenn sie kein schuldenspezifisches Auto von ihnen mögen, können sie auf diese Karte oder mehrere Karten klicken. Wir werden uns gleich mit dem Layout befassen. Und dann Vieux Carre für weitere Informationen zu Karte , die ihnen tatsächlich gefallen, wenn sie sich an den Händler wenden. Auch hier ist es unser Hauptziel, sie dazu zu bringen, eine Probefahrt zu buchen. Und das wird unsere Ausstiegsstrategie sein denn die Testfahrt wird tatsächlich die letzte Phase dieses Prozesses sein, in der sie tatsächlich eine Probefahrt buchen. Und wir wissen tatsächlich , dass sie eine Testfahrt gebucht haben und genau das wollten wir eigentlich machen. Also hier haben wir all diese Komponenten, während wir Seite während dieses Kurses erstellen Ich werde tatsächlich eine Datei speichern, eine Datei. Und wenn du es tatsächlich bekommst, wird es natürlich abgeschlossen sein, weil ich diesen Kurs gerade aufnehme. Sie werden jedoch Schritt für Schritt vorgehen können. Ich gebe Ihnen eine vollständige Information. Sie können das also als Referenz verwenden. Aber ich ermutige Sie wirklich, während dieses Kurses zusammen mit mir Ihre eigenen zu entwickeln . Also wie gesagt, das ist nur der erste Teil. Sie können sehen, dass wir diesen Benutzerfluss haben. Jetzt werden wir in der nächsten Lektion zu Papier-Wireframes übergehen . Und ich werde sie scannen und zur leichteren Bezugnahme hier ablegen . Also, wie ich bereits erwähnt habe, ist Paper Wireframes das, was als Nächstes ansteht. Ich werde das schwarze Punktpapier verwenden, das ich bereits im Kurs erwähnt habe. Aber mach dir darüber keine Sorgen. Wenn Sie es nicht haben, können Sie jedes alte Blatt Papier verwenden. Also werde ich dich dort sehen. 131. Sitemap Content Architektur: Im letzten Video habe ich gesagt, dass wir zu Papier-Wireframes übergehen werden, und im nächsten Video werden wir tatsächlich zu Papier-Wireframes übergehen . Aber in diesem Video möchte ich Ihnen einen anderen Ansatz zeigen , der als Inhaltsarchitektur bezeichnet wird Dabei planen Sie tatsächlich, welche Art von Inhalt auf jeder Seite angezeigt wird, wie wichtig er ist und wie Wir positionieren es auf der Seite , um es nach oben und nach unten zu platzieren. Wir werden uns in diesem Video damit befassen. Und Sie müssen dies nicht speziell in dieser bestimmten Reihenfolge tun. Sie können direkt zu Papier-Wireframes wechseln, wenn Sie bereits einen Plan für die Inhaltsarchitektur im Kopf haben. Wenn Sie dies nicht tun, wollte ich Ihnen diese Methode trotzdem zeigen , da ich denke, dass sie je nach Projekt von Zeit zu Zeit von Vorteil sein kann von Zeit zu Zeit von Vorteil sein . Vor allem bei größeren Projekten, bei denen Sie mehrere Inhaltsteile und Inhaltsblöcke haben. Es ist also viel einfacher und wichtiger, es auf diese Weise anzugehen , wenn Sie tatsächlich für die Inhaltsarchitektur planen , anstatt dies nicht zu tun. Wenn Ihr Kunde keinen Kontakt zur Vorlesung hat, können Sie ihm dies ebenfalls in Rechnung stellen. Aber die meisten von ihnen werden zumindest eine Vorstellung davon haben , welche Art von Inhalten auf Seiten platziert werden soll und wo, was sie präsentieren möchten? Was ist ihr Hauptangebot, was ist ihr sekundäres Angebot, tertiäres Angebot usw. Was ist wichtiger, was ist weniger wichtig. All das können Sie also mithilfe der Inhaltsarchitektur strukturieren . Also hier sind wir in Adobe XD und das wird ziemlich einfach sein. Also werde ich tatsächlich eine auf meiner Tastatur drücken, z. B. für einen dieser Flughäfen. Und nehmen wir 13, 66, was auch immer. Und nennen wir das Content Architecture. Nennen wir es eigentlich Sitemap Slash Content Architecture, weil es beides enthalten wird und, ups, das wollte ich nicht tun. Lass uns diesen loswerden. Und für diesen möchte ich ihn eigentlich als Poppins ersetzen. Also lass uns Poppins wählen. Da. Los geht's, denn ich mag Poppins in letzter Zeit sehr. Und es ist häufig Schrift. Es funktioniert in Webflow, im Works Seen Magazine, es sind Google-Schriften, also funktioniert es gut im Internet. Mir gefällt, wie es aussieht, also lass es uns hier ersetzen. Da haben wir's. Und das wäre viel einfacher, wenn ich für diese Komponenten separate Komponenten erstellen würde, anstatt nur vorhandene Komponenten zu nehmen, aber egal, wir werden uns damit befassen. Also Poppins, wo wir sind. Also hier Poppins, los geht's. Poppins buchen eine Probefahrt. Poppins und Ausgangsnadeln. Okay, also was ich tun werde, ist eine davon zu nehmen. Wählen Sie diese Karte aus, drücken Sie z. B. Strg C, um sie zu kopieren, und springen Sie dann genau hier, kontrollieren Sie V, um sie einzufügen. Ich ging zur Komponente, um die Gruppierung aufzuheben und drückte Control G oder Command G, um sie erneut zu gruppieren Nennen Sie sie Stack, nenne sie Pairing, um dieselben, genau dieselben Details zu haben . Es wird also so etwas wie eine Startseite haben , damit Sie sehen können, wie gut es skaliert. Also hier werden wir etwas dunkle Farbe auftragen. Ich weiß es nicht. Vielleicht können wir etwas nehmen , das fast schwarz ist. Vielleicht. Los geht's, ich mag es. Und wenn wir Q genau hier nehmen und mich tatsächlich vor der Seite verstecken, können Sie sehen, dass es 2122 vor vier ist, was fast schwarz ist. Und ich denke, diese Farbe eignet sich gut für, sagen wir, Überschriften. Geben wir ihm also eine dunkle, schattierte Farbe, weil es ziemlich dunkel ist und wir vielleicht später eine hellere Farbe verwenden. Und mal sehen, das ist reinweiß, also lass uns das geben. Nennen wir es also reines Weiß. Und ich verwende Bindestriche in meiner Namenskonventionsstrategie. Sie können Unterstreichungen verwenden, Sie können zwei Striche verwenden, Sie können tun, was Sie wollen. Und schließlich haben wir hier Poppins als Schriftart. Ich werde es hier nicht sofort hinzufügen. Ich werde es später hinzufügen, wenn wir anfangen, mit unserem Design zu arbeiten. Nennen wir das also z.B. Home, unser Nav-Objekt, Navigationselement. Da haben wir's. Und dann können wir das von der Homepage aus duplizieren, können wir das von der Homepage aus duplizieren denn denken Sie daran, wir haben Kredite oder noch besser, wir haben zuerst Autos. Da haben wir's. Und in den Autos gruppieren wir sie. Also kontrolliere G und nenne sie Nav-Elemente und lege sie wie folgt in einen Stapel. Und jetzt kann ich reinspringen und das verschieben und höher positionieren , wenn ich will, oder ich kann das auswählen und geben wir ihm 150, zB so. Also wieder einmal haben wir eine Homepage, auf der all unsere Informationen strukturiert werden, dann haben wir Autos, auf denen alle Autos präsentiert werden. Wenn es sich dann um eine doppelte Schuld handelt, können wir einen Kredit einzahlen, in den wir all die verschiedenen verfügbaren Kredite anzeigen. Und schließlich, wenn wir das duplizieren, geben wir ihm z. B. Kontakt. Wie das wird unsere Kontaktseite sein. Und weil mir der Abstand nicht wirklich gefällt , ist er ziemlich riesig. Reduzieren wir es auf Hunderte, und vielleicht funktioniert das vorerst. Nehmen wir also den Text von hier, steuern C, Strg V, um ihn nach draußen einzufügen. Und weil Sie es nicht sehen, lassen Sie mich es hier eintragen, damit Sie direkt von hier aus sehen können , wie gut diese Farbe ist. Also, was wir hier tun werden, ist offensichtlich, dass alle unsere Seiten ein Navi benötigen. Also Navi Standort. Da haben wir's. Und ich drücke Control G, um das zu gruppieren. Und ich nenne es Text oder Abschnitte. Noch bessere Abschnitte, da jede Website unterschiedliche Abschnitte hat. Ich werde es 40 setzen und dann genau hier in diese Richtung auf Stapel klicken, weil ich diesen Text ein paar Mal duplizieren möchte , um mehr Optionen zu haben. Also Control-D, und ich gebe , mal sehen, 20 an. Ja, ich denke, es funktioniert ganz gut. Was wir sofort brauchen, ist, wer ist diese Firma? Denn wenn Sie als neuer Besucher zu uns kommen, möchten Sie wissen , wer dieses Unternehmen ist? Was machst du in einem Bruchteil einer Sekunde, bevor du die Website verlässt? Wir wollen also clever mit unserer Kopie umgehen. Sag ihnen, dass dies exklusive Autos sind. Sie verkaufen Autos, aber exklusive Karten. Wenn Sie also nicht zu dieser Art von Käufer gehören, sagen wir, vielleicht ist dies nicht die richtige Website für Sie. Oder wenn Sie diese Art von Käufer sind , wissen Sie, dass Sie am richtigen Ort sind. Also vielleicht können wir so schreiben, wer wir sind, wer wir sind, wie einen Titel. Darunter wollen wir ihnen vielleicht sagen, was wir tun. Also was wir tun, wir verkaufen exklusive Autos und Dislocation. Wir haben es mit diesen Marken zu tun, vielleicht so etwas. Was wir dann anbieten, kann in dem Abschnitt mit verschiedenen Karten auf der Seite sein, z. B. wo wir verschiedene Autos von ihrem Angebot und dem ursprünglichen Angebot zeigen können ihrem Angebot und dem ursprünglichen Angebot , das sie bei Moment. Vielleicht können wir ein paar Vorteile einbringen. Vielleicht unsere Vorteile. Vielleicht können wir kostenlose Details bekommen oder eine Autowaschanlage oder vielleicht ein Ganzkörperschutz oder ein zusätzlicher Radsatz oder Winterreifen sind all diese Dinge, die von Vorteil sein können , wenn Sie dort ein Auto kaufen. Vielleicht können wir ihnen, wie wir auf der Website der Konkurrenz gesehen haben, einen kostenlosen Transport vom Autohaus zu ihrem tatsächlichen Wohnort anbieten . Also vielleicht kann das ein Vorteil sein. Und schließlich vielleicht wo wir sind, wo wir sind, wo wir sind. Nehmt das als Landkarte auf, so. Und dann, unten, kontaktieren Sie uns vielleicht. Denn auch hier ist es wirklich wichtig, ein Kontaktformular zu haben. Und schließlich haben wir unten auf der Seite eine Fußzeile. Lassen Sie uns das alles noch einmal kurz durchgehen. Wir haben also Navigation, weil wir natürlich auf jeder einzelnen Seite eine Navigation brauchen , wer wir sind, wir wollen uns vorstellen und ihnen sagen wollen, was wir tun. Weil wir unsere Dienstleistungen präsentieren wollen und nicht nur sagen wollen, dass wir exklusive Autos verkaufen, sondern vielleicht auf welche Weise tun wir das? Vielleicht ein bisschen Vertrauen aufbauen. Dies ist das perfekte Beispiel dafür, was Sie verwenden werden, oder Testimonials könnten solche Dinge sein, was wir anbieten. Also ja, wir bieten diese exklusiven Autos an, aber vielleicht zeigen wir ihnen einige zusätzliche Funktionen wie vielleicht haben wir Garantie, vielleicht haben wir, wie ich schon erwähnt habe, diesen Polierservice und so, unsere Vorteile . Warum sollten sie sich also für Sie oder Ihre Konkurrenten entscheiden? Vielleicht bietet ihr zusätzliche, mal sehen, Garantie für ein zusätzliches Jahr an. Das ist gut. Sie können beruhigt sein , weil ich vielleicht den Service und die Kosten bezahlen muss. Also wo sind wir? Was wieder einmal sehr wichtig ist. Und wir können eine Karte, Kontaktiere uns und eine Fußzeile zeigen. Und vielleicht können wir diese Abschnitte auf unseren Seiten und in der Navigation duplizieren , natürlich wird es zu jeder einzelnen Seite gehen. Mal sehen, das werden die Home-Bereiche sein und dann Control D, um es zu duplizieren. Ich werde es ungefähr hierher verschieben. Oder noch besser, ich kann die Gruppierung aufheben. Also kann ich sie einfach hier ausrichten und dann können wir das in ein bisschen beheben. Mba kann das genau hierher verschieben. Vielleicht kann ich das hier verschieben , um uns ein bisschen Platz zu geben. Mal sehen, 100 Pixel. Da haben wir's. In diesem Zusammenhang wollen wir all diese Informationen loswerden. Wir werden also Informationen haben, die wir auf unseren Seiten wiederverwenden werden. Wir werden Komponenten in XD und in Webflow erstellen. Wir werden diese Symbole erstellen, sodass wir genau dieselbe Methode und Struktur wie in XD, Figma, wie in jedem anderen Tool, das Sie wiederverwenden können, wiederverwenden können ohne sie grundsätzlich neu erstellen zu müssen die ganze Zeit. Also, was wir hier haben werden, ist, dass wir vielleicht auch Promo-Informationen haben können. Lass uns so etwas wie falsch für den Abschlussball sehen , wenn für so etwas. Lass uns sehen. Top-Werbung in Form, bei der wir vielleicht einen Slogan oder ähnliches hinzufügen können. Was wir dann tun können, ist Aktien anzulegen. Und vielleicht können wir acht Autos hinstellen. Vielleicht nur um zu zeigen, dass sie im Moment acht Autos haben, sagen wir, dann können wir einen klaren Aufruf zum Handeln haben. Oder wir haben es eigentlich nicht , weil wir die Aktie haben. Vielleicht können wir diese Karte für jedes einzelne Auto verwenden. Sie können auf die Karte klicken, um zur vollständigen Seite zu gelangen , auf der Ihnen alle Autos angezeigt werden. Dies ist die Entscheidung, wann Sie, wann Sie das Auto tatsächlich betrachten. Also wir sind hier, um Autos zu durchsuchen, das sind die Autos in unserer Navigation, das ist dieses hier. Wenn Sie also auf Autos durchsuchen klicken, sehen Sie Autos anzeigen. also auf jede dieser acht klicken, Wenn Sie also auf jede dieser acht klicken, wird diese Seite mit dem Warenkorb angezeigt, und von da an der Entscheidungsprozess statt. Also mal sehen, das sind Autoabschnitte. Dann haben wir Kredite. Also lassen Sie uns weitermachen und auf Control D klicken. Duplizieren Sie das. Position, von hier nach hier. Oh, tut mir leid. Mal sehen, wo wir sind. Wir sehen uns wie verkaufen, egal. Also werde ich diesen noch einmal loswerden. Ich werde diesen loswerden, weil dies die Abschnitte sind , die wir beibehalten und wiederholen. Also hier werden wir z. B. die besten Promo-Informationen haben . Aber anders, weil der vorherige für Autos war, dieser für Kredite. Es wird also offensichtlich ein bisschen anders sein als das, was wir tun können, ihnen unser Angebot zu zeigen. Weil all diese anderen Wettbewerber ihr eigenes Angebot haben. Das ist unser Angebot und warum wir ein bisschen anders sind und ihnen vielleicht unsere Partner zeigen. Denn wie bereits erwähnt, kurz unerforscht, macht dieses Unternehmen dies nicht alleine. Und dann haben sie diese externen Partner, die ihnen beim Transport aus Deutschland helfen. Wenn Sie sich erinnern, Autos kommen von Deutschland nach Serbien, dann haben wir diese Partner für Kredite, weil dies sein kann, dass die Banken Kreditunternehmen sind Mobilfunk und Papa, was passiert mit dem Lungen. Sie haben Versicherungsunternehmen und all diese sind externe Partner. Wir haben also Kredite und wir haben Partner speziell für Kredite. Dann können wir uns dort kontaktieren, wo wir sind, und Fußzeile, ich denke, das ist in Ordnung. Und nennen wir das Abschnitte Kredite. Warum wir hier zwei Leerzeichen haben und da gehen wir hin. Und zum Schluss drücken wir noch einmal Control D. Duplizieren Sie dies und navigieren Sie vielleicht hierher und kontaktieren Sie uns. Also hier werden wir, mal sehen, ich werde dies und das los. Und statt Top Premium für ich habe vielleicht Top-Bild, Top-Helden-Bild , zB weil denk daran, dass sich Heldenbereiche deinen Seiten befinden, nicht nur auf der Homepage, es ist nur erste Seite, erster Abschnitt auf der obigen Seite, Standard. Nennen wir es also einen Abschnitt „Kontaktieren Sie uns“. Da haben wir's. Lassen Sie uns nun all diese gruppieren. Also drücke ich Shift Control G. Ich rufe diese Homepage auf. Da haben wir's. Dies wird unsere Seite für Autos und Autos sein. Dies wird unsere Kreditseite sein. Lebendig. Und schließlich, Kontaktseite, Kontaktseite. Da haben wir's. Ich werde alle Hit Stack hier gruppieren. Und ich nenne das unsere Sitemap. Inhaltsarchitektur. Ein schönes Tablet. Also, wenn ich es so positioniere, wie wir es zuvor mit 40 gemacht haben, und hier sind wir bei 40. Ich kann doppelklicken, kann das hier hinzufügen. Vielleicht muss es nicht perfekt sein. Ich bin nur ein bisschen ein Fan dieser Details. Also manchmal musst du es einfach mit mir aushalten. Lassen wir es also tatsächlich so belassen. Wir haben also einen Benutzerfluss, auf dessen Grundlage wir unsere Inhaltsarchitektur erstellt haben . Und jetzt , auf deren Grundlage wir endlich zu den Papier-Wireframes übergehen werden. Nun, das ist viel einfacher, weil wir all diese Ideen aus unserem Kopf in die Sitemap gesteckt haben diese Ideen aus unserem Kopf in die Sitemap gesteckt und die Inhaltsarchitektur viel einfacher sein wird, diese Elemente zu entwerfen, als wenn wir haben gerade mit Paper Wireframes angefangen. Auch diese Methode ist nicht wirklich notwendig, aber es ist gut, sie zu haben. Und es ist gut, wenn Sie all diese Ideen im Kopf haben um sie einfach auf die Seite mit der Inhaltsarchitektur zu übertragen, insbesondere, wenn Sie mehrere verschiedene Abschnitte für eine große Website wie einen Blog haben mehrere verschiedene Abschnitte für , z. es ist also viel einfacher, es auf diese Weise zu tun als einfach direkt mit Papier-Wireframes zu beginnen. Im nächsten Abschnitt werden wir also endlich zu Papier-Wireframes übergehen. Also werde ich dich dort sehen. 132. Paper: Jetzt, da wir unsere Inhaltsarchitektur kennen, lassen Sie uns einfach schnell darauf eingehen und uns ein wenig daran erinnern. Also hier haben wir Homepage Autos, Kredite kontaktieren uns, und wir werden all diese Seiten aufgrund dessen, worüber wir bisher in der Quadrantenarchitektur gesprochen haben, recht leicht unterscheiden können aufgrund dessen, worüber wir bisher in der Quadrantenarchitektur gesprochen haben . Was wir als Nächstes tun werden, ist zu Papier-Wireframes überzugehen. Und was ich hier habe, ist nur dieses schwarze Punktblatt Papier. Wie ich bereits erwähnt habe, müssen Sie diese Art von Papier nicht verwenden. Sie können einfach ein einfaches altes weißes Blatt Papier verwenden, oder Sie können einen Notizblock verwenden, Sie können alles verwenden, was Sie wollen, in allem, was Sie haben. Ich verwende sie gerne, besonders für diese Kurse, weil sich um ein schwarzes Papier mit weißen Punkten handelt. Und als ich anfing, mit diesen weißen Gelstiften zu schreiben, wird es sich für euch ganz gut übersetzen lassen und ihr werdet es ganz gut sehen können. Also lass uns gleich hier weitermachen. Was ich zuerst tun werde, ist eine kurze Gliederung direkt in der Mitte meiner Seite oder in einer Flüssigkeit zu erstellen direkt in der Mitte meiner Seite oder . Denken Sie daran, dass ich später tatsächlich weitermachen werde, das Ganze zu scannen und in Adobe XD einzufügen. Also geh ungefähr bis hier runter. Das muss also nicht perfekt sein, wie ich schon ein paar Mal erwähnt habe. Und ich lasse es einfach so. Also, was ich zuerst machen werde , ist, dass ich schon ein paar Flecken habe, aber auch hier ist es nicht wirklich wichtig. Was ich tun werde. Erstens, wenn ich Sie hierher zurückbringe, haben wir die Navigation und wir wissen , wer wir sind, direkt von hier aus. Darauf werden wir uns hier konzentrieren. Also lasst uns hier einen kurzen Abschnitt blockieren. Geben wir ihm einen Namen für ein Logo und verwenden wir einen kleineren. Nennen wir das also Autokredite und kontaktieren Sie uns. Da haben wir's. Und wenn ich weitermache und nur ein bisschen hineinzoome, wirst du es ein bisschen besser sehen können. Da haben wir's. Also Autos, Kredite kontaktieren Sie uns. Und jetzt lass mich nur eine Berührung hineinzoomen , damit du es ein bisschen besser sehen kannst. Also, was wir hier haben werden, ist eine Art Heldenabteilung. Lassen Sie uns also kleinere Teile blockieren, damit wir sie alle auf unserer Seite haben können , sozusagen. Also hier werden wir vielleicht einen Titel haben, vielleicht einen Untertitel. Und dann haben wir vielleicht einen Button. Also lass es uns n. Und dann werden wir hier eine Art Auto haben. Denn wieder einmal, es ist eine Auto-Website und sieh dir einfach meine zeichnerischen Fähigkeiten an. Verrückt. Aber das ist nicht wirklich wichtig, wie ich schon ein paar Mal erwähnt habe , weil das nur für uns ist. Wir möchten unseren Kunden etwas bieten können , das ansprechend ist , und wir möchten es leicht verstehen können . Deshalb verwenden wir diese Papier-Wireframes, um einige Ideen schnell auf einer Seite zu bündeln. Also vielleicht kann ich hier ein paar Icons haben. Also ich verstehe, los geht's. Darunter. Vielleicht können wir unsere Sektion haben. Mal sehen, was wir hier haben. Wir haben also wer wir sind. Vielleicht können wir also weitermachen und ein Bild erstellen. Vielleicht ungefähr hier auf dieser Seite. Da haben wir's. Und ich kann eingeben, wer wir sind und vielleicht ein paar Textabsätze. Wenn wir dann hierher kommen, haben wir, was wir tun. Was wir tun. Vielleicht kann es direkt eine Sektion mit den Autos sein. Also vielleicht können wir die Karten haben, die wir erwähnt haben, und dann alle Autos sehen , denn das machen wir doch. Also, was wir hier haben können, sind vielleicht drei Karten. Lass uns mit einem Layout wie diesem weitermachen. Wie gesagt, es ist egal, ob ich nicht so präzise bin , weil ich versuche, diesen Abschnitt zu überstürzen weil wir mehrere Seiten haben. Aber ich möchte Sie nur durch meinen Denkprozesskern führen. Also haben wir hier den Namen, vielleicht den Preis und vielleicht ein paar Informationen hier. Also Name des Autos, Preis des Autos und einige grundlegende Informationen. Und wir werden diese grundlegenden Informationen in nur einer Sekunde besprechen und wir werden natürlich hier Bilder von Autos haben . Und dann schließen wir diese Karten gleich hier ab. Verbinde diese Leitungen sehr schnell. Und dann darunter können wir vielleicht alle Autos haben. Vielleicht. Alle Autos ansehen. Da haben wir's. Knopf in der Mitte. Ich denke, das wird ganz gut funktionieren. Dann. Vielleicht können wir einen Abschnitt hier auf dieser Seite haben, vielleicht genau hier. So kann ich unten etwas mehr Platz haben. Das kann also abgebildet werden und wir können es nennen, was wir anbieten. Also vielleicht können wir drei verschiedene Nikon's haben , so etwas. Also ICH KANN, vielleicht können wir unten Text, Text und Text haben , so etwas, damit wir diesen Abschnitt füllen können. Dann können wir es vielleicht blockieren. Denn wenn ich dich hierher nehme, haben wir unsere Vorteile. Was wir anbieten und vielleicht unsere Vorteile, finden Sie im Abschnitt darunter. Also vielleicht so etwas. Vielleicht können wir, ich verstehe, ich verstehe, und für das Symbol sehe ich N, dann vielleicht einen Titel für jeden dieser Vorteile haben. Und vielleicht gibt es einen Textabsatz oder etwas Ähnliches. Sie sehen also, ich gehe diese ziemlich schnell durch , denn das ist der springende Punkt. Vielleicht habe ich zwei, fünf oder zehn verschiedene Ideen. Ich möchte so schnell wie möglich auf ein Blatt Papier kommen . Und weil wir diese nette, klare Inhaltsarchitektur haben , ist es viel einfacher, sie so zu platzieren. Dann möchten wir , dass Sie uns kontaktieren. Nehmen Sie also Kontakt mit uns auf. Da haben wir's. Und vielleicht können wir das nur als reguläre Form wie diese haben. Da haben wir's. Und dann vielleicht eine in der Mitte, um alles auszufüllen. Da haben wir's. Button gleich hier, btn. Und dann darunter möchte ich vielleicht eine Karte haben. In Ordnung, hier. Da haben wir's. Das kann eine Karte sein. Da hast du es. Und dann, wo wir sind, vielleicht wo wir sind. Und vielleicht können wir dasselbe Layout verwenden, es kann sich einfach um Symbole, Symbole, Ikonentexte, Texte, Texte handeln. Los geht's und vielleicht geben wir ein paar, ich weiß nicht, Adresse, Telefonnummer, E-Mail, was auch immer. Und dann schließen wir endlich diese Homepage. Sie können ein Logo in die Mitte setzen. Dann kann ich den kleineren benutzen. Vielleicht können wir FB für Facebook, TW für Twitter, IgE für Instagram und L und für LinkedIn oder was auch immer verwenden. Und dann können wir hier dieselbe Navigation haben. Also auf dieser Seite nennen wir es Autos. Kredite, kontaktiert uns. Da haben wir's. Also, wenn ich weitermache und nur zum Berühren hineinzoome , damit du es ein bisschen besser sehen kannst. Da haben wir's. Zuallererst haben wir Navigation hier oben. Dann haben wir diesen Heldenbereich mit dem Inhalt auf der Seite. Und wir haben das Bild auf der anderen Seite, wer wir sind. Dann haben wir all diese Karten an Ort und Stelle, die Sie hier sehen können. Darunter haben wir, was wir anbieten , und darunter haben wir unsere Vorteile. Also vielleicht können wir hier einen Pfeil setzen oder einfach nur Vorteile haben. Leistungen. Da haben wir's. Das sind also unsere Vorteile darunter. Wir haben Kontakt mit uns aufgenommen. Dann haben wir die Karte auf den Informationen auf jeder Seite, die mit diesem Abschnitt identisch ist. Und schließlich haben wir eine Fußzeile unten auf der Seite. Wir haben also einige Informationen , die wir haben, direkt hier in der Inhaltsarchitektur platziert einige Informationen , die wir haben, direkt , auf ein Blatt Papier, und es ist viel einfacher, sie zu visualisieren. Was wir jetzt brauchen, ist Autos zu bauen. Lassen Sie uns jetzt mit den Schulden umgehen. Als Erstes nehmen wir diesen, der Nummer zehn ist. Ich nenne es mein Zuhause. Lass uns jetzt weitermachen und Autos bauen. Also werde ich einfach ungefähr dasselbe Layout verwenden , das ich hier gemacht habe. Also lassen Sie uns von hier aus sehen, vielleicht müssen wir mal sehen, dass es nicht genau sein muss. Also mal sehen, ich verwende, welches diese Nummer zehn ist. Also vielleicht werde ich diesen nicht ideal verwenden, aber noch einmal, es spielt keine Rolle. Lege einfach die grobe Struktur an. Da haben wir es gut hingekriegt. Lass uns diesen schließen. Lass uns Nummer acht verwenden. Also noch einmal, wenn wir Sie zurück hierher bringen , in die Autos, haben wir die Navigation. Wir haben diese drei Wiederholungen plus Negation. Wir haben also vier Abschnitte, die sich wiederholen. Wir haben die besten Promo-Informationen und achtmal vorrätig. Also, wie können wir das machen? Ganz einfach, lassen Sie uns einfach unsere Navigation kopieren. Also lasst uns ein Logo schreiben, Autos schreiben. Da haben wir's. Und lass uns schreiben, Lass uns Gesetze sehen und uns kontaktieren. Da haben wir's. Und hier für die Promo-Informationen, was ich tun kann, ist vielleicht etwas anderes zu machen. Also lass uns diese Probleminformationen immer noch hier haben. Aber lass uns vielleicht ein Auto von Profile haben. Wieder einmal, meine epischen Zeichenfähigkeiten sind da. Da haben wir's. Also Auto im Profil, vielleicht können wir einen Hintergrundkreis haben und vielleicht können wir oben einen Titel haben. So etwas mit einem Kreis im Hintergrund rund um das Auto. Ich denke, das wird ganz gut funktionieren. Unterscheidete diesen Abschnitt, abgesehen von allen anderen. Vielleicht. Vielleicht kannst du so etwas wie unsere exklusive Kollektion schreiben . Da haben wir's. Und wir verwenden einfach diese Karten , die wir gerade erstellt haben, und plünken sie gleich hier. Denn denken Sie daran, wenn ich Sie hierher bringe, dies ist der Autobereich , dem alle Autos auf der Seite angezeigt werden. Und genau das werden wir schaffen. Jetzt. Lassen Sie uns einfach von hier aus eine erstellen. Also nehmen wir vielleicht diese Höhe. Beginne hier, positioniere es genau hier, dann genau hier. Da haben wir's. Und nehmen wir an, ich weiß nicht, ob das nicht ganz nett aussehen wird, aber egal wie ich erwähnt habe, das ist nur eine grobe Skizze. Und vertrau mir, wenn ich nicht rede, mache ich das etwa zehnmal schneller als hier. Also lass uns diese Karten wie diese, so, so schließen . Da haben wir's. Geben wir ihnen hier das gleiche obere Bild. Da haben wir's. Lass es uns so schließen, nur damit wir wissen, dass es ein Bild ist. Wir hatten auf jedem von ihnen einen Namen. Name, dann hatten wir einen Preis. Und dann hatten wir diese Informationen unten, genau hier. Also, was wir tun werden, anstatt dass ich das alles zeichne, gebe ich sie mal acht ein, also so. Und im Folgenden erstellen wir einfach, kontaktieren Sie uns. Nehmen Sie Kontakt mit uns auf. Denn wenn es Sie hierher bringt, können Sie sehen , dass wir auf der Autoabteilung den Bestand haben , der genau hier ist, den wir gerade gezeichnet haben. Und dann haben wir unser Kontaktformular und die Fußzeile. Also vielleicht kontaktieren Sie uns, können dort hingehen. Und dann, wo wir sind. Wir sind mit dem Bild einer Karte genau hier. Landkarte. Und dann können wir endlich unten eine Fußzeile haben. Also so etwas wie das. Das kann also ein Logo sein. Das können, mal sehen, Autos, Kredite, Kontakt sein. Da haben wir's. Das können diese Ikonen sein, wunderschön. Und jetzt, da der Abschnitt für das Auto fertig ist, lassen Sie uns schnell zu den Lungen übergehen. Und wenn wir uns daran erinnern, wir haben wieder einmal die wichtigsten Werbeinformationen der Navigation, wir haben unsere Angebotspartner und dann denselben Bereich. Wenn wir es also hier wieder einschalten, erstellen wir ein anderes. Also noch einmal, das muss nicht perfekt sein. Vielleicht werde ich sie nicht einmal scannen, weil sie wirklich, wirklich extrem grob sind. Also vielleicht so etwas , nur um uns ein bisschen Platz zu geben. Hübscher Fehler. Mal sehen. Lassen Sie mich Nummer zehn nehmen, weil sie ziemlich dick ist und ich in so etwas wie ein Logo schreiben kann. Und dann Autos, Kredite, Kontakt. Ich habe gelebt. Und allein für diese. Was wir also tun können, ist vielleicht einen Titel in der Mitte zu haben. Da haben wir's. Und dann können wir vielleicht zwei Autos haben. Ein Auto kann hier sein. Da haben wir's. Und ein Auto kann hier sein. Etwas wie das hier. Da haben wir's. Also vielleicht können wir über den Animationsbereich nachdenken weil diese beiden Autos von der Seite springen können. Der Titel kann von unten oder von oben hineingleiten. Sie können also sofort anfangen, über diese Dinge nachzudenken , ohne sie jemals zu erstellen. Also hier haben wir diese Option. Darunter können wir vielleicht etwas haben, lassen Sie uns daran erinnern. Wir haben unsere Top-Promo-Informationen, das ist dieses Ding hier. Dann haben wir unser Angebot und dann unsere Partner. Schauen wir uns also unser Angebot an. Unser Angebot. Vielleicht können wir das gleiche Layout erstellen , das wir auf der Homepage gemacht haben. Also vielleicht so etwas für die Vorteile und vielleicht können wir das Gleiche tun. Also vielleicht können wir tippen. Ich verstehe, ich verstehe, ich verstehe. Runden Sie sie in Kreisen ab. Dann haben wir den Titel und dann haben wir Absatztexte direkt darunter. Was wir dann haben, sind unsere Partner. Nennen wir sie also etwas wie Eigentlich nein, lass uns ihnen das Layout geben, das wir zuvor auf der Homepage gemacht haben, nur auf dieser Seite. Also, was ich tun werde, ist mein Bild hier zu haben. Da haben wir's. Und vielleicht mach dieses Mal etwas anderes. Also vielleicht ein Logo hier platzieren. Lassen Sie mich also Nummer zehn wählen. Also Logo. Und dann kann ich vielleicht auf dieser Seite eine Karte platzieren und sie Logo für die Partner nennen. Und vielleicht können wir sie unsere Partner nennen. Partner. Da haben wir's. Und dann können wir vielleicht das gleiche Layout wie auf der Homepage hier platzieren, um zu sehen, wer wir sind, aber nur für unsere Partner und dann, um nicht zu viel Zeit zu verschwenden , nur um uns daran zu erinnern, wo wir sind. Kontaktieren Sie uns in der Fußzeile, damit ich die Nummer zehn nehmen kann, also kontaktieren Sie uns mit dem Bild, wo wir sind. Und schließlich die Fußzeile , damit wir zügig vorankommen können. Was wir als Nächstes haben, ist uns einfach zu kontaktieren. Also lass uns das in 2 Sekunden machen , weil es super einfach sein wird. Ich muss hier keine zusätzlichen Zeilen erstellen. Vielleicht kann ich es hier hinstellen. Ich war ein Logo. Da haben wir's. Und anstatt zu schreiben, wissen wir bereits, was sie sind. Wenn wir uns also an die Kontaktseite erinnern, haben wir nur die Navigation und dann all diese Dinge. Also Top-Heldenbild und wo wir sind. Das alles bleibt also übrig. Also vielleicht können wir ein schönes großes Bild für einen Helden machen. Und dann können wir uns mit einem Bild von einer Karte in Verbindung setzen, wo wir sind. Und schließlich für die Amtszeit. Und jetzt müssen wir tatsächlich weitermachen und die Seite erstellen , auf der wir zusätzliche Informationen über das Auto bereitstellen werden . Wenn ich Sie also auf eine dieser Seiten weiterführe, die wir gerade gemacht haben, also diese, z. B. haben wir all diese verschiedenen Abschnitte. Wir haben das Auto, wir haben die Bilder. Wir werden all diese Informationen gleich durchfiltern . Aber im Moment müssen wir tatsächlich so etwas erstellen. Also, wie können wir das machen? Es ist eigentlich ganz einfach, wenn du weißt, was du hineinstecken musst, aber ich lege einfach ein paar Blöcke hinein. Und dann werde ich später in XD über die verschiedenen Abschnitte sprechen , die wir erstellen können. Warum kreieren wir und solche Sachen? Also hier haben wir die Autoseite. Lassen Sie mich es auf der Detailseite Auto nennen. Und lassen Sie mich, lassen Sie mich hier einen kurzen Überblick erstellen , ungefähr hier. Und denken Sie daran, dass diese Seite mit Webflow, CMS, erstellt wird . Es wird also nur einen erstellen. Und wenn wir dann alle Informationen eingeben, wird CMS tatsächlich die ganze harte Arbeit erledigen. So können unsere Kunden zusätzliche Bilder und separate Informationen für jedes Auto hinzufügen. Also die Farbe des Jahres, die Produktion, der Kilometerstand, all diese Informationen. Es wird in der Lage sein, es für jedes andere Auto einzubeziehen , das sie einsetzen. Aber die Gesamtstruktur und das Layout werden genau gleich sein. Also wenn ich dich hierher bringe, haben wir die Navigationsleiste hier, also Logo und wir haben keine Artikel. Dann werden wir es vielleicht in zwei Abschnitte unterteilen, so wie ich es Ihnen auf dieser speziellen Website gezeigt habe . Wir haben einen Abschnitt mit den Bildern und den Informationen und den zweiten Abschnitt mit der Karte , die vielleicht folgen wird , und dem Layout , das ich dir gezeigt habe. Was wir hier also tun können, ist vielleicht ein Layout zu erstellen, das ungefähr so aussieht. Und natürlich kannst du immer damit herumspielen und diese Abschnitte anpassen. Also werde ich ein riesiges Bild platzieren und dann vielleicht für kleinere Bilder. Und platzieren Sie dann ein Banner mit einem Symbol oder dem Text darin . Wenn Sie darauf klicken, wird das Bild vergrößert. Also habe ich das hier platziert, das hier. Und dann erstellen wir auf dieser Seite diese Karte, vielleicht in der gleichen Größe wie diese. Moment ist es nicht wirklich wichtig, aber wenn wir zum Design übergehen, wird es wichtig sein. Was wir hier also tun können, ist , die Informationen die Sie erwähnt haben, das Salz, wir können vielleicht das Auto nennen, Preis des Autos. Vielleicht eine kleine Beschreibung hier. Und dann können wir vielleicht zwei Knöpfe drücken. Eine ist vielleicht für ein Auto reservieren Wenn Sie darauf klicken, werden Sie zum Kontaktformular weitergeleitet. Und die andere können vielleicht Einzeloptionen oder C-Darlehensoptionen sein. Optionen. Da haben wir's. Und dafür kann es sein, dass Sie zu lange Reden, Kredite, Kontaktformular oder Seite oder was auch immer brauchen. Das wird also ein Layout für diesen Abschnitt sein. Und dann werden wir das im Grunde tun, dass ich das freie Hand mache und es genau hier drehe. Werde vielleicht so etwas hören. Also Überblick oder Rückblick. Ein Haufen verschiedener Informationen drinnen. Dann werden wir die Fahrzeugspezifikation haben. Und dieser Abschnitt kann lang sein. Wir sind coole Infos. Und dann können wir vielleicht die Leistung und dann alle Informationen in die Leistung einfügen. Sicherheit, wie wir sie auf dieser Website gesehen haben. Weil Sicherheit wirklich wichtig ist. Offensichtlich. Vielleicht Fahrerassistenzen oder so etwas aus Bequemlichkeit. Dann können wir vielleicht das Äußere platzieren und welche Art von Außendetails haben Außenseiten. Das können Räume in Farbe und so sein. Innenausstattung. Vielleicht haben Sie Ledersitze oder klimatisierbare Seite oder so etwas. Dann können wir vielleicht Dimensionen angeben. Abmessungen. Da haben wir's. Und das kann es sein. Dieser Abschnitt kann hier geschlossen werden. Und diese Karte kann diesem Abschnitt folgen. Da hast du es. Wenn Sie nach unten scrollen, bewegt es sich nach unten. Dann haben wir vielleicht eine Option, sagen wir, ähnliche Autos zu erkunden. Also vielleicht kann ich das schreiben. Erkunden Sie ähnliche Autos. Und hier werden wir nur die drei Karten haben , die wir auf allen anderen Seiten hatten. Also Karte eins, Karte zu Karte drei. In diesem Fall werden jedoch nur andere Autos aus dieser Sammlung geladen, die in CMS erstellt werden. Wenn Sie sich die Mercedes S-Klasse hier ansehen, wird sie hier nicht als Klasse angezeigt weil wir uns die S-Klasse hier auf dieser Seite ansehen. Stattdessen werden Informationen von der nächsten Karte abgerufen , sodass wir sie in Webflow einrichten. Also denke ich im Voraus über all diese Prozesse nach. Wenn wir also tatsächlich zu Webflow gewechselt wird es viel einfacher sein, dies zu erstellen. Wir schauen uns hier also nicht die S-Klasse an. Und hier, du schaust es dir nur hier an. Aber hier wird es verschiedene Autos geben. Also Name, Preis und Information, Name, Preis, Information, Name, Preis und Information. Und dann werden wir alle dieselben Informationen haben. Also werden wir uns dort kontaktieren müssen, wo wir sind. Und schließlich, volle Amtszeit. Und weil wir das in CMS tun, werden diese Informationen dieselben sein. Also endlich diese Seite, die wir gerade erstellt haben, sodass die Fahrzeugdetailseite für jede einzelne Karte, die wir erstellen, genau dieselbe sein wird . Und die Kunden werden in der Lage sein, diese Seite einfach zu aktualisieren und entweder zusätzliche Bilder zu bestehenden Autos hinzuzufügen oder neue Autos zu erstellen und diese dynamischen Seiten voller Inhalte zu erstellen. Hier wird sich Webflow, CMS als nützlich erweisen. Lassen Sie uns abschließend überprüfen, was wir bisher gemacht haben. Also haben wir mit der Homepage angefangen, die ich euch hier gezeigt habe. Wir haben also Autokredite für Eigenheime. Kontaktieren Sie uns. Dann endlich, Kartendetailseite. Also haben wir mit einer Homepage angefangen. Dann gingen wir zur Seite Autos über. Wir werden alle acht verschiedenen Fahrzeugkarten erstellen. Und diese Abschnitte unten werden sich wiederholen. Dann haben wir Kredite aufgenommen , bei denen wir zwei verschiedene Autobilder anzeigen werden. Wir werden ihnen unser Angebot für die Lunge zeigen. Wir werden ihnen unsere Partner für die Lunge zeigen , um Vertrauen aufzubauen. Und dann werden diese Abschnitte dieselben sein. Schließlich, für die Kontaktseite, die ich vielleicht hier markieren kann, kontaktieren Sie uns. Wir werden einfach ein Heldenbild hier oben haben. Sie haben das Kontaktformular, das wir auf der gesamten Website gesehen haben, wo wir uns für den Standort und die Fußzeile befinden. Und schließlich wird der wichtigste Punkt in Bezug auf Konvergenz die Kartendetailseite sein, bei der es sich um diese Seite handelt. Und es zeigt ihnen nur die Details über das Auto, auf das sie geklickt haben. Jede dieser vorherigen Seiten, entweder in den Karten, befindet sich im Autobereich der Seite. Und wie ich bereits erwähnt habe, wird es Bilder hier oben geben. Dann wird es Übersichten geben. Also vielleicht könnte ich nur eine Berührung hineinzoomen, damit ich das etwas detaillierter zeigen kann. Also wie gesagt, wir werden hier Bilder mit vier verschiedenen Bildern und dem Symbol zum Vergrößern von Bildern haben hier Bilder mit vier verschiedenen Bildern und dem Symbol zum Vergrößern von Bildern und in den Vollbildmodus gehen , vielleicht genau hier, um mehr Details zu sehen. Wir werden unser Testfahrzeug in vier Versionen mit Leistung, Sicherheit, Fahrerassistenz, Außen- und Innenabmessungen haben. Und schließlich werden wir ähnliche Autos aus derselben Autosammlung untersucht haben aus derselben Autosammlung , die später in Webflow erstellt werden. Und dann endlich dieselben Abschnitte wie Kontakt mit uns, wo wir sind und Fußzeile direkt darunter. Und schließlich, und das ist entscheidend, wird Discard ihnen folgen, wo immer sie in diesem speziellen Abschnitt auf und ab scrollen. Dann wissen wir also, dass wir das Ende unserer Papier-Wireframes erreicht haben . Ich hoffe wirklich, dass es Ihnen gefallen hat und ich hoffe wirklich , dass Sie verstanden haben, warum es wichtig ist , diese Inhaltsarchitektur und diese Sitemap zusammen mit diesen Papier-Wireframes zu erstellen . Und dass es viel einfacher ist, solche Inhalte zu erstellen, weil Sie vorausschauend planen, was Sie tun, wo Sie etwas erstellen und wie Sie etwas erstellen können, das Sie für Ihr Webseite. In der nächsten Lektion werden wir über Bilder sprechen, denen ich sie für dieses spezielle Projekt bekommen habe. Wo du sie bekommen kannst wie ich die Bilder für dieses Projekt strukturiere und welche Bedingungen es gibt , wo und wie du diese Bilder in deinem eigenen Projekt verwenden kannst diese Bilder in deinem eigenen Projekt wenn du Ich möchte sie für dein Portfolio verwenden, also sehe ich dich dort. 133. Projektbilder: In dieser Lektion werden wir über Bilder sprechen, bei denen ich meine Bilder für dieses spezielle Projekt gefunden habe. Wie Sie dieselben Bilder verwenden können und wie Sie sie später lizenzieren können , wenn Sie sie in Ihrem Portfolio verwenden möchten. Wenn nicht, können Sie einige andere Bilder verwenden, aber lassen Sie mich Ihnen nur zeigen, welchen Ansatz ich gewählt habe, weil es wirklich kompliziert ist. Also, wenn ich gleich hierher gehe, habe ich alle meine Bilder von Envato Elements verwendet, wie ich es für all meine YouTube-Tutorials, all meine Kurse tue. Und ich benutze diese Website seit Jahren und ich finde sie fantastisch. Das Hauptproblem hier ist also, dass Sie ein Auto finden und Bilder aus jedem möglichen Winkel aufnehmen müssen, wie Sie hier sehen können. Möglicherweise an derselben Stelle. Und dann machst du dasselbe mit dem Interieur. Ich habe mich also nicht mit Innenräumen befasst, weil es wirklich schwierig 3D-Innenräume online zu finden und qualitativ hochwertige Bilder aufzunehmen. Sie können dies online auf den Websites des Unternehmens tun. Aber um Ihren Kunden zu zeigen , wer diese Bilder tatsächlich haben wird , weil sie diese Autos in ihrem Ausstellungsraum vorrätig haben . So können sie Bilder aus all diesen verschiedenen Blickwinkeln aufnehmen , auch aus dem Innenraum. Der springende Punkt hier ist, ihnen zu zeigen , wie die Website funktioniert, damit sie die Bilder ersetzen können , die Sie in die Webflow-Vorlage eingefügt haben, die wir später bereitstellen und erstellen werden. Um so etwas zu erstellen, was ich mache, was er getan hat, ist zu Envato Elements gegangen. Und ich habe dieses Logo heruntergeladen und den Namen einfach durch eine Spinne ersetzt, was der Name unserer imaginären Firma ist. Ich habe diese 3D-Software genommen, diese 3D-Anlage genommen und diesen Boden - und Wandpaneel aus Kalkstein genommen, sie in Photoshop abgelegt und so etwas erstellt. Wenn ich also Strg H drücke, um diese Anleitungen auszublenden, habe ich hier die Hintergrundtextur, die genau hier ein Hintergrund ist. Ich habe das Wort. Ich habe die Pflanze mit etwas Unschärfe. Und ich habe das Sofa genau hier und ich habe das Logo genau hier oben. Und wenn wir dich hierher zurückbringen, was sind ihre Bedürfnisse? Sind die Autos. Also wenn ich diesen Klumpen Guinea nehme, der hat z.B. mein Auto. Dies ist das 3D-Rendering, bei dem Sie in Envato Elements sein werden. Ich habe also die 3D-Ansicht gestartet, damit Sie dieses Auto drehen können, wie Sie möchten. Nehmen wir an, ich möchte es aus diesem Blickwinkel nehmen, und dann diesem Winkel und dann vielleicht aus diesem Winkel als diesem, um nachzuahmen, was wir hier im wirklichen Leben sehen, was ich tun werde wähle diesen aus und lade dann diesen Winkel als PNG herunter, was ich getan habe. Wählen Sie diesen Winkel als PNG herunterladen und wählen Sie Als PNG herunterladen aus. Und ich habe das für all diese acht Autos gemacht, die Sie hier sehen können. Und ich habe sogar hinzugefügt, ich denke, einige zusätzliche wie diese , die wir im Heldenbereich verwenden werden. Und lass mich sehen. Ich denke, das ist es. Wahrscheinlich, ja, weil wir hier neun haben und dann sind diese Autos Modelle. Und ich habe einfach weitergemacht und sie in Photoshop geöffnet. Und ich habe einfach all diese verschiedenen Abschnitte mit dem Design entfernt und ich exportiere sie einfach als PNG. Und ich habe dasselbe für diesen getan. Wenn Sie sich erinnern, denke ich, auf Auto-Seite wird ein Auto von der Seite des Kreises im Hintergrund mit einem oberen Text schauen , was ungefähr so ist. Also habe ich einfach dieses Bild gemacht und alle Autos schwarz gestrichen , wegen dem Luxus-Team. Dann habe ich weitergemacht und all diese Premium-Bilder auf Envato Elements gefunden , von denen es sich um Millionen handelt. Und Sie können alle möglichen Bilder verwenden. Also hier ist einer für die Autoverkäufer. Hier ist einer von Autoverkäufern der den Leuten das Auto zeigt, und hier ist der wo sie , wo sie vielleicht einen Vertrag oder ähnliches abschließen. Also verwende ich all diese Bilder für das Design. Und das werden Sie sehen , wenn wir vorankommen. Und ich werde Ihnen all diese Bilder zur Verwendung zur Verfügung stellen. Je nachdem, wo Sie sich diese Website ansehen, wird sie möglicherweise als Dropbox-Link angezeigt, sodass Sie sie auf diese Weise herunterladen können. Oder ich stelle es in den Bereich dieses Designbereichs , den Sie haben werden , in einen Teil, in dem Sie Bilder herunterladen können Klicken Sie einfach darauf, laden Sie sie herunter. Wenn Sie diese Bilder verwenden möchten, ist das wirklich wichtig. Sie müssen sie selbst von Envato Elements lizenzieren , da alle unter einer Lizenz stehen und Sie für diese Lizenz bezahlen müssen , wenn Sie diese vorhandenen Bilder in Ihrem Projekt verwenden möchten diese vorhandenen Bilder in Ihrem Projekt was wir zeigen werden. Wenn Sie sie zu Lernzwecken verwenden , ist das völlig in Ordnung. Sie können sie einfach herunterladen, aber Sie können sie nirgends verwenden, nicht in Ihrem Portfolio, verrückt, um sie auf Instagram zu präsentieren, nicht um mit Kunden zu arbeiten, weil Sie dafür haften Bilder unter viel. Wenn Sie also keine Lizenz für diese Bilder haben, all diese Unternehmen, die diese Bilder auf Envato Elements veröffentlichen, einschließlich Envato Elements selbst, Sie problemlos verklagen, weil Sie habe eine richtige Lizenz. Aber wenn Sie sie zu Lernzwecken verwenden, nur für sich selbst, nur auf Ihrem Computer, nur um zu lernen, nur um die Dinge hier in Ordnung zu bringen. Dann ist es in Ordnung, sie so zu verwenden, denn auch hier ist es extrem schwierig, Bilder wie diese zu finden. Oder wenn Sie möchten, anstelle von exklusiven Autos können Sie diese Bilder anstelle von exklusiven Autos durch Ihre Bilder von Ihrem Auto oder dem Auto Ihres Nachbarn oder Ihres Autos oder was auch immer ersetzen von Ihrem Auto oder dem Auto Ihres Nachbarn . Und dann können Sie diese Bilder einfach duplizieren und Stelle platzieren, anstatt diese Bilder zu verwenden. Also, wie gesagt, das habe ich getan. Und wenn ich dann zu Photoshop gehe, nehme ich einfach die Bilder, die gerade heruntergeladen wurden, und ziehe sie per Drag & Drop in Photoshop. Und es wird sie als intelligente Objekte an Ort und Stelle für Zelle platzieren. Und dann lass mich sie ein bisschen unterschiedlich organisieren. Lass mich klicken. Okay, also Nummer eins, Nummer zwei, Nummer drei, Nummer vier. Das sind also alle Positionen. Und wenn ich Control H Back Control T mitbringe, so kann ich diese quasi verkleinern, also kein Gewicht. Also Control T noch einmal, einfach mit Lift and Shift, vielleicht so etwas. Da hast du es. Ich werde die verstecken. Ich werde jetzt einfach mit Nummer eins arbeiten , einfach so. Also vielleicht kann ich es einfach so positionieren, dass es in der Mitte ist, ungefähr hier, vielleicht dort, wo sich die Räder berühren, vielleicht genau dort. Dann mache ich dasselbe für Nummer zwei, also dort, wo sich die Räder berühren, und vielleicht positioniere ich es ungefähr hier. Dann hast du für Nummer drei die Idee. Sie positionieren es also einfach ungefähr hier und Sie möchten die Illusion haben dass es sich um ein echtes Auto in einem echten Showroom handelt, wie denen, die Ihnen gerade hier gezeigt werden. Aber jetzt haben wir es mit dem Photoshop-Bild und dem Rendern zu tun . Also, wie sieht das aus, wenn du es tatsächlich gerendert hast? Es sieht ungefähr so aus. Das ist also das eigentliche Rendering, das wir in diesem Kurs verwenden werden. Also hier ist der eine. Und dann lass mich klicken, damit ich sie ändern kann , oder lass mich sie noch einmal öffnen. Lass es uns jetzt versuchen. Ich weiß nicht, was hier vor sich geht. Also lasst uns das absagen. Lass es uns öffnen. Noch einmal. Hoffentlich funktioniert dieses Mal, weil ich all diese Software im Hintergrund verwende. Manchmal wird es zu Störungen auf meinem Computer kommen. Lassen Sie mich also wirklich weitermachen und Photoshop ganz schnell schließen , weil Sie das schon gesehen haben. Und lass es uns jetzt versuchen. Also hier ist das Bild. Wenn ich jetzt nach links und rechts wechsle, siehst du 12345678. Wir zeigen das Auto also aus allen Blickwinkeln, außer im Innenraum. Denn wie ich bereits erwähnt habe, ist es wirklich schwierig , gute Innenräume online zu finden. Aber das wird ein guter Ausgangspunkt sein, denn ich habe das, wenn ich mich erinnere, für acht verschiedene Autos gemacht. Wenn ich also zum Beispiel Cadillac Escalate auf den Markt bringe und Ihnen das zeige, können Sie sehen, dass es im selben Innenraum völlig dasselbe ist. Lassen Sie uns zum Beispiel diesen Maclaurin auf den Markt bringen damit Sie sehen können, wie er in diesem Interieur aussieht. Und lassen Sie mich es zum Schluss zeigen und Vogue zeichnen. Da hast du es. Sie können also sehen, dass sie in jedem Interieur genau gleich sind und alle von Envato-Elementen aus dieser Kollektion stammen . Und wie gesagt, mich nicht zu oft zu wiederholen. Sie können diese Bilder für Lernzwecke auf Ihrem Computer verwenden , aber Sie dürfen sie nicht an anderer Stelle veröffentlichen. Wenn du möchtest, kannst du welche beiden Elemente zusammenfügen und sie einfach herunterladen und dir zeigen, wie super einfach das ist. Nehmen wir an, ich öffne diesen. Und ich werde ein bisschen nach unten scrollen. Vielleicht möchte ich dieses Auto aus irgendeinem Grund benutzen oder das werden wir noch besser machen. Nehmen wir an, ich wähle dieses Rendern. Damit es gerendert wird. Vielleicht möchte ich es so drehen. Vielleicht möchte ich diesen Winkel verwenden, B und G. Laden Sie diesen Winkel herunter, und Sie können ihn hier sehen. Also exklusive Website für Autohäuser, das ist die Sammlung, die bereits für den Diskurs geschaffen wurde. Klick hier, füge es jetzt hinzu lade und somit habe ich eine Lizenz. Nun zu diesem Winkel dieses Bildes. Wenn ich es in eine Anode ändere, dieser Winkel-Download zu derselben Sammlung hinzugefügt , wenn nicht zulässig. Jetzt habe ich eine Lizenz für dieses und ich kann sie in einer unbegrenzten Anzahl von Projekten verwenden. Ich kann eine unbegrenzte Anzahl dieser Sammlungen erstellen. Ich kann diese hinzufügen, diese Sammlungen für bestimmte Arten von Websites oder mobilen Apps erstellt , sodass es tun kann, was ich will. Und eine letzte Sache , die ich Ihnen zeigen wollte , sind diese Bilder. Also, wenn ich das mache und vielleicht ein Autoverkäufer das, und das ist ein Bild, kannst du zusätzliche Bilder von dieser Person sehen , die dir kostenlose Bilder nicht geben können. Ganz einfach. Sie können mehr ähnliche Fotos sehen, auf denen Ihnen Fotos von diesem bestimmten Fotografen und anderen Fotografen gezeigt werden. Sie können also verschiedene Arten von Autoverkäufern, verschiedene Arten von Autohäusern usw. sehen. Aber wenn Sie von dieser Person möchten , in diesem Fall Ross Helen, klicken Sie hier, basierend auf Autoverkäufer, geben Sie Enter oder Return ein. Und da hast du es. Sie haben Hunderte verschiedener Bilder von demselben Autoverkäufer im selben Autohaus, Autos beobachten, Autos erkunden, Autos testen, Autos verkaufen, verschiedene Orte positionieren, alle möglichen verschiedene Dinge. Weil dieser Fotograf diese Bilder bei derselben Beleuchtung aufgenommen hat , dieselben Modelle, denselben Ausstellungsraum, denselben Zustand. Es wird also viel professioneller sein , wenn Sie es von hier aus verwenden. Wenn Sie dann ein Bild von hier verwenden, ein Bild von dort, 1 "von diesem Fotografen, ein neutrales in diesem Fotografen n, natürlich, Sie können all diese verschiedenen tolle Filter, um deine Bilder auf diese Weise noch besser zu finden. Das war's für Bilder. Denken Sie daran, wenn Sie sie erneut verwenden möchten, müssen Sie sie von Envato Elements an einer beliebigen Stelle in Ihrem Portfolio, in Ihrer Kundenarbeit oder beim Teilen auf Instagram am Wochenende lizenzieren Envato Elements an einer beliebigen Stelle in Ihrem Portfolio, in Ihrer Kundenarbeit oder beim Teilen auf Instagram am . Was auch immer Sie tun, Sie müssen diese Bilder lizenzieren. Andernfalls verstoßen Sie gegen ihre Gesetze, wenn Sie eine mögliche Klage riskieren. Wenn Sie diese Bilder jedoch für Lernzwecke verwenden möchten , worum es in diesem Kurs geht, dann können Sie diese Bilder kostenlos verwenden. Laden Sie Ihre Arbeit einfach nirgends online hoch. Im nächsten Abschnitt, oder sorry, in der nächsten Lektion werden wir zu Adobe XD wechseln und endlich mit der Gestaltung dieses Projekts beginnen. Also lass uns anfangen. 134. Moodboard erstellen: Jetzt, da wir Wireframes auf Papier erstellt haben, ist es an der Zeit, mit unserem Design fortzufahren und tatsächlich damit zu beginnen, verschiedene Bilder, verschiedene Stiloptionen und unterschiedliche Herangehensweisen zu erforschen . Und um uns dabei bestmöglich zu helfen, werden wir einige Moodboards verwenden. Sie werden nicht auf zu viele Details eingehen. Offensichtlich hat dieses Projekt bereits erstellt. Natürlich weiß unser imaginärer Kunde, was er mag, aber es ist nur dazu da, uns in Stimmung zu bringen. Also werde ich es dir trotzdem zeigen. Aber vorher möchte ich Sie zu unserer Adobe XD-Datei führen, in ich Ihnen zeigen werde, dass ich dieses Wireframe nur ein wenig bereinigen werde. Du kannst also sehen, dass ich einfach nochmal weitergemacht habe und sie immer noch einige Ecken und Kanten haben, aber das macht nichts, denn das ist ja das Drahtmodell. Und wir brauchen es nur, um darauf zurückzugreifen , wenn wir mit dem Entwerfen beginnen , nur um uns daran zu erinnern, wie die Dinge funktioniert haben und wie wir uns das vorgestellt haben. Also noch einmal, betrachten Sie dieses Wireframe nicht als endgültige Designentscheidung. In diesem Fall wird es so sein, weil ich das, wie gesagt, schon entworfen habe, weil wir, ich weiß nicht, wochenlang hier sitzen werden , um es zu entwerfen. Wenn Sie jedoch Ihr eigenes Projekt erstellen, können Sie dies jederzeit ändern. Dies ist nur für einige grundlegende Ideen. Und du wirst sehen, dass wir in diesem Wireframe immer noch einige Layouts hier und da ändern werden, obwohl ich dieses Design schon einmal entworfen habe. Aber es spielt keine Rolle. Wir werden immer noch weitermachen und das tun. Lassen Sie mich dieses Bild einfach verschieben , weil es genau hier ein Bild ist. Weil ich auf meiner Tastatur A drücken und so etwas wie 1920 mal 1080 erstellen werde . Lass es mich Stimmung nennen. Moodboard. Da hast du es. Ich habe bereits dieses Logo, das du noch einmal in dieser Datei bekommen wirst, denn als Kreativer bekommst du es, wenn du zum Kurs kommst und wenn du tatsächlich anfängst, mit mir zu arbeiten, positioniere es ungefähr in der Mitte, irgendwo hier. Ich denke, es wird gut funktionieren. Und wie gesagt, das ist nur dazu da uns zu helfen, ein bisschen besser zu navigieren. Sie werden also sehen, dass diese fehlenden Schriften schwarz geworden sind , weil dieses Logo diese Schriftart enthält, aber machen Sie sich darüber keine Sorgen. Wir werden es nicht installieren, nur damit wir eine Schrift haben können. Lassen Sie uns also ein Rechteck erstellen und lassen Sie mich hier tatsächlich ein Wiederholungsraster verwenden. Also so etwas wie das. Und lassen Sie uns es nur ein wenig erweitern. Und lassen Sie uns die Gruppierung des Rasters aufheben. Und was ich tun kann, ist das vielleicht ein bisschen erweitern, vielleicht erweitern, ein Touch-Layout hier spielt keine Rolle, weil ich nur in der Lage sein möchte, ein paar schnelle Bilder per Drag & Drop hinein zu ziehen. Lassen Sie mich hier auch eine schreiben. Lass uns das vergrößern. Analytics sollte diesen duplizieren und ungefähr hier positionieren . Da haben wir's. Jetzt, wo wir dieses Layout haben, kann ich es nur ein bisschen vergrößern. Wieder einmal können Sie mit den Farben erkunden. Schauen Sie einfach zurück zu diesem Abschnitt über Moodboards. Ich werde mich nicht allzu sehr darum kümmern , denn wie gesagt, ich habe bereits ein Design vorbereitet. Ich wollte dir nur zeigen, wie ich vorgehen würde , wenn ich es noch einmal von Grund auf neu erstellen müsste . Was Sie also tun können, ist diese Moodboards nach Belieben zu erstellen. Aber lassen Sie uns nicht, wie gesagt, nicht unnötig mit zu vielen Details umgehen. Etwas wie das hier. Ich denke es wird gut funktionieren. Lassen Sie uns die Grenzanalysten loswerden und ihnen eine hellgraue Farbe geben, damit wir sehen können, wo wir unsere Bilder platzieren können. Und für Bilder können wir uns bei Dribbble inspirieren lassen. Analysten machen das tatsächlich, bevor wir zum Auto übergehen, wow, vielleicht funktioniert so etwas gut. Denken Sie daran, dass unser Kunde dunkle Layouts nicht wirklich mag. Sie mögen also diese leichteren Layouts. Und vielleicht können wir so etwas gebrauchen. Vielleicht, ich weiß nicht, kannst du durchblättern und stöbern und sehen, was funktioniert. Ich weiß nicht, vielleicht so etwas. Diese Karten sehen nett aus. Was wir in diesem Fall also tun können , ist, dass mir diese Karten gefallen. Was ich tun kann ist, dass ich ein Tool für einen Screenshot habe und eine Region aufnehmen werde. Und vielleicht weiß ich es hier nicht ungefähr. ist eigentlich egal , weil ich dieses Bild nur als Inspiration verwenden wollte . Wir werden nicht unbedingt etwas von diesem Design kopieren , da Sie sehen werden, wenn wir mit dem Entwerfen beginnen. Aber lassen Sie uns hier tatsächlich noch einen erstellen. Und ich verwende etwas namens Green Shot. Du kannst verwenden, was du willst. Eigentlich nein, lass uns, lass uns das schließen. Und ich werde diese Region tatsächlich erobern. Weil ich denke, so etwas könnte für unser Design ein bisschen besser funktionieren. Lass uns das schließen. Und vielleicht gefällt mir dieser Bereich mit dem Text darin. Also lasst uns Schulden aufnehmen. Da hast du es, denn das ist ein nettes, elegantes Layout. Und vielleicht diese Karte mit der aktuellen Seite. Auch hier können Sie jedes Layout verwenden , das Sie für Ihr Projekt wünschen und was auch immer Sie für dieses Projekt inspiriert. Also vielleicht so etwas, direkt gespeichert. Und mal sehen, vielleicht können wir ab hier und nichts wirklich gebrauchen. Nennen wir es also einen Tag mit dem Dribbeln. Und lassen Sie uns Capture Discard aufnehmen, weil sie denken, dass wir unser Layout tatsächlich so verwenden werden. Also kann ich es direkt von hier ziehen und speichern. Da hast du es. Und was ich auch mag, ist hier wegwerfen. Sie können also sehen, wie einfach das ist. Ich gehe einfach herum und fange ein, was mir gefällt. Wir werden nicht unbedingt alles verwenden. Wir werden uns einfach selbst inspirieren. Wie gesagt, das gefällt mir nicht wirklich. Ich denke, es ist zu voll. Sie können also einfach nach den Details scrollen , die Ihnen gefallen. Vielleicht diese Karten, und sie funktionieren wirklich gut. Also lasst uns das festhalten. Erfassen Sie die Region. Da haben wir's. Also so etwas, weil wir immer noch wollen, dass die Knöpfe da unten sind. Und vielleicht sehen diese Layouts toll aus. Aber ich denke, ich denke , das reicht für den Moment. Lass uns die Website von Carla offen lassen l. Es hat tatsächlich angefangen, unsere Bilder hineinzuziehen. Sie können also hier sehen, was ich mache. Ich positioniere sie einfach links, rechts und mittig, wo immer ich kann. Also lass uns so etwas machen, vielleicht hier oben. Und dann positionieren Sie es genau hier. Da hast du es. Also vielleicht kann ich es genau hier verschieben, weil es ein bisschen breiter ist. Für diese Karte kann ich vielleicht dieses Layout verwenden und ich bin an diesem unteren Layout interessiert vielleicht mit dem Preis und den Buttons. Und dann schauen wir mal, vielleicht können wir das so positionieren, dass es ungefähr hier ist und vielleicht sogar ein bisschen hineinzoomen. Also können wir dieses Bild zuschneiden, vielleicht hier, weil mich wieder einmal die Karten interessieren, nicht unbedingt das Layout des Dashboards selbst. Und noch einmal, ich verwende das nur als Kurzreferenz. Hier können wir kill this verwenden, weil ich mich mit dieser schwarzen Farbe im Hintergrund beschäftigt habe. Skalieren Sie das mit nur einer Berührung. Los geht's, nur damit wir Knöpfe und ein Auto sehen können. Was ich hier tun kann, ist das reinzuziehen, was zu meinem Preis ist. Und vielleicht kann ich es hier grob verschieben , nur damit ich weiß , dass das dieser Abschnitt ist. Noch einmal, wir können diesen Zug hier zur Seite nachbilden , aber das ist mir an dieser Stelle nicht wirklich wichtig. Ich möchte mich einfach von diesen Designs inspirieren. Da haben wir's. Also ich mag die mit den Karten. Und ich weiß nicht, vielleicht können wir noch einmal zum Auto zurückkehren. Nun, lass uns sehen. Gehen wir zurück zur Homepage und sehen, was wir hier haben. Da hast du es. Ich mag diese Abschnitte, also lassen Sie uns sie hervorheben. Es ist Capture-Region. Derek, geh direkt speichern und lass mich zu x D zurückkehren und sie per Drag & Drop hineinziehen. Da haben wir's. Was ich also tun kann, ist, dass ich sie vielleicht sogar skalieren kann , weil es einen weißen Hintergrund hat. Also lass uns weitermachen und das tun. Etwas wie das hier. Da haben wir's. Da hast du es. Das ist unser Moodboard. Noch einmal, Sie können weitermachen und verwenden, was Sie wollen. Sie können auf verschiedene Weise vorgehen, aber ich denke, das wird vorerst so sein. Auch hier und da sind das nur Reste, nur um uns zu inspirieren. Ich denke, das reicht für dieses Projekt, weil wir bereits unseren Benutzerfluss haben. Wir haben eine Sitemap und eine Inhaltsarchitektur. Wir haben unsere Papier-Wireframes bereits erstellt. Jetzt haben wir unsere Moodboards. Wir wissen, welche Farben und Stile unser Kunde wirklich mag. Also gefiel mir wieder nicht wirklich, diese dunklen Websites. Sie mögen hellere Websites und sie mögen Websites mit blauer Farbe, wie Carve-Out-Websites, die genau hier sind. Sie sind wie diese Karten, Layout, minimalistisches Design und Design. Also ich denke, wir sind startklar. Im nächsten Video werden wir mit dem Design fortfahren. Und wir werden tatsächlich damit beginnen, einige Flughäfen zu erstellen und einige Elemente wie Raster anzulegen . Also werde ich dich dort sehen. 135. Raster, Typografie und Farben: Fangen wir nun mit dem Design und als Erstes kehren wir zu Adobe XD zurück und beginnen mit einigen Flughäfen. Also hier bin ich in unserer Datei und wir werden ein bisschen zoomen, ungefähr so, und auf meiner Tastatur A drücken. Und lassen Sie mich einen Flughafen erstellen. Es ist nicht wirklich wichtig, welcher. Also lass uns mit 1920 mal 1080 weitermachen, ich kann dieses Design schnell speichern. Was ich tun werde, ist es in Homepage umzubenennen. Also wird x D von Zeit zu Zeit bellen. Also habe Geduld mit mir. Also Homepage da. Was ich eigentlich tun werde, ist die Größe zu ändern. Also los geht's mit 14, 40. Und warum mache ich das? Denn in Webflow ist das ihre Selbstverständlichkeit und ein Ausgangspunkt, denn in Webflow beginnen Sie mit der Desktop-Größe und entwerfen nach unten. Sie wechseln also vom Desktop über das Tablet zum Handy. Oder wenn du noch größere Breakpoints erstellen möchtest, was diese Größen von Bildschirmen sind, dann fängst du mit dieser Größe an und bewegst dich dann nach oben, ich weiß nicht, 1619220003000 und so weiter und so weiter. Aber in diesem Fall nehmen wir einfach 14, 40, weil sie uns das geben werden. Dann haben wir ein 12-Spalten-Layout. Und lassen Sie uns gleich sehen, was wir tun können , ist vielleicht 39 für die Breite zu nehmen. Da haben wir's. Und lassen Sie uns mit 6044 Spaltenbreiten beginnen. Und was ich hier anstrebe , ist eins zu eins für meine Seitenränder links und rechts. Mal sehen. Also eins zu eins. Kann ich das machen? Nein, versuchen wir es noch einmal. Aus eins zu eins wurde eine Zelle damit du sehen kannst, was ich eigentlich mache. Also versuche ich nur, XD dazu zu bringen, genau hier mit mir zu arbeiten. Also lass uns hier mit 39 weitermachen. Lass uns hier mit 61 gehen, vielleicht mit 64. Also eins zu eins. Da hast du es. Also 386051 zu einem. Und was ich genau hier tun wollte, ist, genau das gleiche Layout hier auf der linken und rechten Seite zu erreichen genau das gleiche Layout . Wenn ich also ein Feld wie dieses in meine Spalten zeichne, kannst du sehen, dass es 11 98 ist, und mach dir darüber keine Sorgen, weil XD mit diesen Layouts ein bisschen fehlerhaft ist. Wir werden jedoch ein 12-Spalten-Layout mit einer maximalen Breite von 1.200 Pixeln innerhalb von Webflow haben. Also lass uns den loswerden. Lassen Sie mich also zu meinen Spalten zurückkehren und lassen Sie mich das Layout und den ec2 reduzieren, vielleicht etwa fünf. Lass uns so etwas sehen. Da hast du es. Damit ihr ein bisschen besser sehen könnt, was ich mache. Was ich auch tun werde, ist vielleicht mit einer Topographie zu beginnen. Also lass uns gehen und das machen. Drücken wir T auf unserer Tastatur, um zu tippen. Sehen wir uns die Überschrift an, Überschrift eins. Und ich werde gleich hier Poppins nehmen, was großartig ist. Mal sehen, vielleicht kann ich 64, 64 Bolt nehmen. Ich denke, das wird ganz gut funktionieren. Und lass uns mit, ich weiß nicht, vielleicht 86 für die Zeilenhöhe gehen. Da haben wir's. Also, was ich hier mache, ist, dass ich versuche, meine Typenskala zu bestimmen. In der Regel funktioniert es also am besten , mit Schritten von acht zu arbeiten. In diesem Fall haben wir also Überschrift eins, nämlich 64. Also lass uns weitermachen und das duplizieren. Was jetzt passieren wird, geht in die zweite Rubrik über, die 32 sein wird. Vielleicht. Da hast du es. Ich denke, das wird ganz gut funktionieren. Und mal sehen. Was wir als Nächstes tun können, ist vielleicht, dass wir es auf 53 anbringen können , so etwas. Ich denke, das wird ganz gut funktionieren. Okay. Und was können wir tun, ist Control D zu drücken . Noch einmal Überschrift drei eingeben. Und was die dritte Überschrift betrifft, können wir uns für 24 entscheiden. Sie können also sehen, was ich hier mache. 24, 30 bis 64, vielleicht kannst du irgendwo 40 verwenden, vielleicht 48, vielleicht 56. Aber gehen Sie im Grunde in Schritten von acht über. Das ist ein netter kleiner Trick. Also lass uns auch hier mit 40 weitermachen. Und wir sind 24, 30, 32, wir sind 64. Das ist also unsere dritte Überschrift. Und in Webflow gibt es etwas, das Textblock genannt wird. Und im Allgemeinen sind das im Webdesign nur einige grundlegende Texte, die Sie verwenden werden, wenn Sie mit dem Schreiben beginnen. Das werden wir also genau hier tun. Verwenden wir also einen Textblock. Da hast du es. Und für den Textblock können wir vielleicht etwas anderes wählen. Also lass uns mit, ich weiß nicht, vielleicht mit 20 weitermachen. Da hast du es. Anstatt fett zu sein, fahren wir mit regulär fort. Ich denke, das funktioniert ganz gut. Und lass uns noch einmal mit Kontrolle und D weitermachen. Geben wir einen Absatz ein. Für einen Absatz können wir vielleicht mit 16 weitermachen. Und für die 16, mal sehen, vielleicht funktionieren 26 hier. Also 26, los geht's. Das ist also unser Absatz. Und schließlich werden wir noch einen Text namens Label haben. Lass mich dir zeigen, wohin das führen wird. Wenn ich also direkt hier auf diese Seite zoome, so ist das die Seite mit den Fahrzeugdetails. Wenn Sie auf eine dieser Karten klicken, auf einer dieser Seiten. Also entweder hier oder hier, oder sogar hier, Sie werden auf diese Seite gehen und dann wird das Etikett genau hier über dem Namensschild angezeigt, auf dem der Fahrzeugtyp angezeigt wird. Wenn Sie sich also erinnern, sie verkaufen SUVs, sie verkaufen diese Limousinen, sie verkaufen Limousinen. Sie verkaufen Supersportwagen. Wir müssten diese Autos nicht grundsätzlich in drei Kategorien einteilen , nur um zu zeigen, um welchen Autotyp es sich handelt, und dafür werden wir den Labeltext verwenden. Wenn ich also hier zu meinem Label zurückkehre, was machen wir mit dem Label, ist , noch kleiner zu werden und wir müssen uns hier nicht unbedingt an die acht Regeln halten. Also vielleicht kann ich mit 12 gehen. Da hast du es. Wir können hier regulär und vielleicht 19 nehmen. Also lass uns sehen. Dies ist eigentlich der Zeilenabstand , der im Grunde der Abstand zwischen Ihren beiden Zeilen ist. Wenn ich also diesen Text kopiere und ihn nach unten und dann nach unten positioniere, beträgt der Abstand zwischen ihnen jeweils 12. Genau das versuchen wir hier zu erreichen, weil wir diese Werte später in Webflow eingeben müssen . Es weiß also, wann es mit der Skalierung beginnt , was zu tun ist und wohin es von hier aus gehen muss. Also los geht's. haben wir jetzt abgeschlossen. Was wir tun können, ist vielleicht mit einigen Farben herumzuspielen. Also lasst uns das Layout vorerst verstecken. Was ich tun kann, ist einfach ein Rechteck zu zeichnen und es vielleicht grau färben zu lassen, vielleicht so etwas. Was ich also tun würde, ist die Körperfarbe für den Hintergrund zu verwenden. Wenn Sie sich also erinnern, die Website des Autos, wow, hatte nicht den komplett weißen Hintergrund, sondern einen leichten, leicht grauen Hintergrund. Was ich tun kann, ist vielleicht eine solche Farbe zu verwenden. Lass mich mich verstecken, damit du es ein bisschen besser sehen kannst, nämlich F6, F5, F5. Und Sie können sehen, dass es nur leicht cremefarben ist. Und ich kann es gleich hier zu meinen Farbmustern hinzufügen. Lass es uns ein bisschen nach unten bewegen und nennen wir es Körperfarbe. Denn in HTML heißt das Hauptelement, mit dem Sie Ihre Elemente in eine Seite einfügen, body. Und in diesen Körper wird alles gehen und das werden wir färben. In Designsoftware wie XD oder Figma ist die Farbe Ihrer Zeichenfläche oder Ihres Rahmens also im Grunde die Farbe des Körpers, die Farbe des Körpers wenn Sie ihn tatsächlich in HTML verschieben, denn das ist das HTML-Tag, was das Hauptkennzeichen in der Entwicklung ist. Mach dir darüber keine Sorgen. Wir werden keinen Code schreiben. Ich versuche Ihnen nur zu erklären, wie Sie über diese Dinge nachdenken müssen wenn Sie mit dem Entwerfen beginnen und später mit der Entwicklung beginnen. Das wird also unsere Körperfarbe sein. Als nächstes benötigen wir eine hellgraue Farbe, solide, positionieren Sie diese genau hier, damit Sie D2, D2, D2 sehen können. Da haben wir's. Und lassen Sie mich es so als hellgrau hinzufügen. Und Sie können sehen, dass ich immer noch Bindestriche verwende, um zu unterscheiden, was ich hier zu erstellen versuche. Also positionieren wir es genau hier. Und was wir jetzt brauchen, ist etwas dunkleres Grau, um es etwas besser unterscheiden zu können. So etwas funktioniert normalerweise gut. Also lass es uns gleich hier hinzufügen. Nennen wir es dunkelgrau, so etwas. Und schließlich müssen wir zwischen H1 und H2 unterscheiden. H1 befindet sich normalerweise oben auf jeder Seite. Und wenn Sie dann die Seite durchgehen, werden Sie H2-, H3- und Textblöcke und Absätze haben. Und Sie müssen es in Ihrer Suchmaschinenoptimierung angeben, das müssen Sie in Ihrer Struktur erklären. Wenn Sie also später mit der Entwicklung in Webflow beginnen, müssen Sie anfangen, diese Namen zu verwenden. Denn später, wenn Google Ihre Website indexiert, muss es wissen, um welche Art von Texten es sich handelt, wo sie sich auf der Seite befinden und wie wichtig sie sind. Und es weiß, wie wichtig es ist, weil Sie es gesagt haben, weil Sie diese verwenden H1, H2, H3 P ist für den Absatztextblock und so weiter und so weiter. Das werden Sie in Webflow sehen. Aber ich versuche dir das hier nur zu erklären. Während wir bei XD sind, Sie jedoch ständig über diese Dinge nachdenken, wenn Sie mit dem Entwerfen beginnen müssen Sie jedoch ständig über diese Dinge nachdenken, wenn Sie mit dem Entwerfen beginnen. Lassen Sie uns nun, wie gesagt, zu dieser Farbe für den H2, vielleicht sogar H3, übergehen . Also lass uns diese Farbe kopieren und ich werde in nur einer Sekunde herausfinden, wie ich zu diesen Farben gekommen bin. Lassen Sie mich es also gleich hier hinzufügen. Also lass uns mit H3 und vielleicht Absatz weitermachen. Weil wir immer noch brauchen , dass diese Absätze lesbar sind, weil sie ziemlich klein sind. Sie können sie hier sehen. Also lass uns weitermachen und es hinzufügen. Dieser wird also eine dunkle Überschriftenfarbe haben , weil es ein H1 ist. Mal sehen. Zwei, vielleicht können wir es gebrauchen, mal sehen. Also 2122 vor vier. Was war das? Also vielleicht können wir dieselbe Farbe verwenden. Also dieser für dunkle Überschrift und für das Alter von drei, vielleicht können wir ihn so ändern , dass etwas wie vielleicht dunkelgrau entsteht. Mal sehen. Also H drei, lass mich es auf diese Farbe ändern, die, ich denke, dunkelgrau ist . Jetzt. Dieser. Ist es? Nein. Ja, verwenden wir es für so etwas. Das wird also unsere H3-Farbe für unseren Textblock sein. Mal sehen, was wir tun können. Den können wir gebrauchen. Also dunkelgrau für den Absatz. Wir haben bereits erklärt , dass wir diesen verwenden werden , um ihn ein wenig zu unterscheiden. Und für das Etikett können wir mich mit dieser hellgrauen oder sogar Körperfarbe verwenden . Lassen Sie mich in meinem ursprünglichen Design überprüfen, was ich für D bis E verwendet habe , drei Nullen. Lass mich sehen, welche Farbe tot ist. Also ist es dieser. Da der beschriftete Text zu klein ist, verwende ich immer noch diesen. Und jetzt, da wir getan haben können wir weitermachen und sie hinzufügen. Also wähle ich mein Label aus. Und mal sehen, klicken Sie auf Charakterstile. Ich nenne das Label. Dann gehe ich zum Absatz, tippe den Absatz ein. Gehen Sie dann zum Textblock. Da hast du es. Und das wird unser h3h3 sein. Das wird unser H2 sein. Und schließlich wird dies unser H1 sein. Da hast du es. Nun, da wir all das haben, lass mich dir kurz erklären wie ich zu diesen Farben gekommen bin. Wenn ich also entwerfe, was auch immer ich entwerfe, versuche ich normalerweise was auch immer ich entwerfe, versuche ich mehrere Graustufen zu haben. dunkelsten Graufarben stehen normalerweise für die größte Topographie auf der Seite. Also für H1 oder H2, dann kannst du in dieser Dunkelheit etwas heller werden. Nie verwendet, um die schwarze Farbe zu vervollständigen, da sie für manche Menschen wirklich schwer zu lesen ist. Sie können es also jederzeit wie einen Zweierton von komplett schwarzer Farbe in graue Farben einteilen. Und dann kreiere ich immer gerne ein komplettes Gegenteil. Farben gleichermaßen, sagen wir mal wirklich hellgrau. Also immer nur leicht cremefarben. Sie können immer Weiß verwenden, aber versuchen Sie einfach sicherzustellen, dass Sie eine cremefarbene Farbe haben. Wie in diesem Fall haben wir diese Körperfarbe , die wir später für unseren Körper verwenden werden. Aber das ist der springende Punkt hier in Bezug auf eine blaue Farbe. Aber Sie können hier sehen, dass wir nur die Farbe verwenden , die wir auf ihrer Website gefunden haben. Passen Sie es an, nur um es zu berühren, damit es nicht ganz dasselbe ist, weil Sie niemals genau dieselbe Farbe wie jemand anderes oder nur ein bisschen von dieser Farbe verwenden möchten , dann haben wir die Hover-Farbe, das ist dieselbe Farbe wie diese, also nur blau, aber in einer anderen Perspektive. Und was die Größen der Schriften angeht. Wie gesagt, ich verwende diese Acht-Pixel-Skala gerne für meine Typografie. Sie können also mit acht beginnen, was normalerweise recht klein ist, aber gut genug für, sagen wir, mobile Apps ist. Dann kannst du mit 16, 24, 30 bis 40, 48, 56 gehen , was auch immer. Sie können also bis runter zu Latino 90 gehen oder welche Art von Größe auch immer Sie möchten. Aber in unserem Fall werden wir bei 64 für H1 anhalten. Und das ist im Grunde unsere Typenskala. Also, was ich jetzt tun werde ist weiterzumachen und sie los zu werden. Denn das ist wieder einmal unsere Homepage und wir werden sie so behandeln. Kehren wir also zu unserem Netz zurück. in diesen Fällen Lassen Sie mich in diesen Fällen zu meinen Spalten zurückkehren und sie auf Null reduzieren. Für die Opazität. Lassen Sie uns das auf Null oder vielleicht auf 2% senken , nur damit wir sehen können, was wir hier tun. Gehen wir also zurück zu 2% und gehen wir auch hier zurück, um es zu präsentieren damit es uns nicht ablenkt, wenn wir mit dem Entwerfen beginnen. Und wir werden sie tatsächlich benutzen. Und zum Schluss, lassen Sie mich das für das Ende dieses Videos erweitern , denn das werden wir im nächsten Video verwenden. Wir werden uns endlich mit dieser Homepage befassen. Und ich werde tatsächlich anfangen , einige Elemente festzulegen und Ihnen zu zeigen, wie ich mein ursprüngliches Design erstellt habe. Also lass uns anfangen. 136. Homepage Design: Lassen Sie uns dort weitermachen, wo wir im vorherigen Video aufgehört haben , und beginnen wir mit der Arbeit an unserer Homepage. Also hier füge ich mein Logo hier ein. Und lassen Sie mich es einfach so positionieren, dass es genau hier ausgerichtet ist. Dann verwende ich mein Rechteck-Werkzeug, die Abkürzung ist r, und ich gebe ihm eine Höhe von 80, z. B. weil du deinen Elementen immer Höhen geben willst weil es viel einfacher zu definieren sein wird sie später in Webflow. Platziere es hier und lass mich die Grenze loswerden. Und das werden mein Navi und B G sein, und du musst deine Ebenen benennen. Es ist super wichtig. Drücken wir Control K, um dieses Logo in eine Komponente zu verwandeln. Und Sie können sehen, dass wir es direkt hier verwenden können. Und was die Benennungskonventionen angeht, müssen Sie Ihre Ebenen später benennen , da das später in Webflow sehr wichtig sein wird, weil wir all diese Klassen verwenden werden. Wenn Sie also Ihren Ebenen keinen Namen geben, werden Ihre Designs auseinanderfallen. Fangen Sie also so schnell wie möglich an, Ihre Ebenen zu benennen. Sie werden Ihr Leben einfacher machen , wenn Sie später zu Webflow kommen. Geben wir also Schulden und Navigation ein. Also lass uns Autos benutzen. Und dafür können wir vielleicht, mal sehen, vielleicht Textblock verwenden . Ja, das funktioniert ganz gut. Und wenn Sie sich erinnern, dass wir von hier aus nur Autos haben, kontaktieren Sie uns. Also nur drei von ihnen. Was wir also tun können, ist das in eine Gruppe zu packen und es sozusagen Nav-Elemente zu nennen. Und mal sehen, vielleicht kann der Abstand zwischen all diesen Elementen 24 betragen. Schalten wir also den Stapel und lassen Sie uns ihn noch zweimal duplizieren. Gehen wir zurück und drehen uns auf 24 um, einfach so. Und wir geben dem einen Kredit und geben diesen Namen Autos. Entschuldigung, Nein, Nein. Kontaktiere uns. Da hast du es. Und zum Schluss möchte ich sie genau hier bewegen und sie in der Mitte dieses Elements positionieren. Da hast du es. Und für die Homepage Lass uns weitermachen und diese Farbe auf Körperfarbe umstellen. Und Sie können sofort sehen, was passiert ist. Lassen Sie uns hier also auch mit der Körperfarbe fortfahren. Da hast du es. Es sieht also irgendwie transparent aus. Was wir also tun werden , ist, jedes davon in seine eigenen Komponenten umzuwandeln . Also drück Control K, Control K, Control K. Das wird Autos sein. Dieser wird Kredite sein, und dieser wird „Kontaktiere uns“ sein. Da hast du es. Und warum ich das einfach mache , weil ich Horrorzustände erschaffen will. zu tun, klicken Sie hier, um eine Blume zu erstellen. Harvard. Da hast du es. Für den Hover. Alles was ich tun möchte, ist, dies einfach in eine Schwebefarbe zu verwandeln. Da hast du es. Denn wenn du dich erinnerst, ist das unsere Schwebefarbe. Also sollte beim Schweben alles in der Schwebefarbe sein. Also dieser, lass uns das in einen Horrorzustand verwandeln . Lass uns die Farbe ändern. Geben wir auch diesem Horrorzustand. Lass uns die Farbe ändern. Bringen wir das zurück. Bringen wir das zurück und bringen wir es wieder auf die Standardeinstellung zurück, State Control, Enter to Preview, und Sie können sehen, wie das aussieht. Wir beginnen also, das Layout und die Idee zu bekommen , die wir erstellen wollen. Und ich denke, das wird ganz gut funktionieren. Lassen Sie uns nun weitermachen und diese gruppieren. Wir haben also die Logo-Navigationselemente und f, b, g. Also lassen Sie uns G drücken, um dies in einer Gruppe zu gruppieren, nennen wir es Nav. Da hast du es. Und weil wir diese Navigation in unserem gesamten Design wiederverwenden werden und jetzt, da wir diese Elemente bereits haben, wollen wir eigentlich meine Elemente noch einmal auswählen und einen neuen Status hinzufügen, welches ausgewählt werden wird. Bundesland. Kopiere diesen Text tatsächlich, damit ich nicht noch einmal schreiben muss. also den Bundesstaat auswählen und den Status abwählen , wird uns angezeigt , dass wir uns auf dieser Seite befinden. Verwenden wir also Hauptblau für das Hauptblau und die Hauptschleife. Was also passiert, ist, wenn ein Benutzer diese Seite klickt und sie besucht, und während er sich auf dieser Seite befindet, wird Ihnen die besuchte Farbe angezeigt. Drücken wir also, wie gesagt, Control K, um unsere Navigation in eine Komponente zu verwandeln , um unsere Navigation in eine Komponente , weil wir sie später verwenden werden . Dann verwenden wir T für unser Textwerkzeug. Und genau hier geben Sie Ihren Partner für Ihren Partner ein, für exklusive Autos. Und diese Texte werden H1 sein. Lassen Sie uns das in zwei Zeilen aufteilen, etwa so. Lass uns das hier runterschieben. Drücken Sie D, um dies zu duplizieren Lassen Sie mich den Text tatsächlich aus meinem ursprünglichen InDesign auswählen . Und lassen Sie uns das in einen Textblock umwandeln und meinen Text einfügen M. Also mit unseren Kunden über zertifizierte Gebrauchtwagen mit geringer Laufleistung und haben wir mit unseren Kunden über zertifizierte Gebrauchtwagen mit geringer Laufleistung und dokumentierter Geschichte gesprochen. Und sie geben Ihnen Autos mit geringer Kilometerleistung, weil sie sie von diesen offiziellen Händlern in Deutschland beziehen. Und die Geschichte ist dokumentiert, weil Autos offensichtlich direkt von Händlern gekauft werden, sodass es viel einfacher ist, sie auf diese Weise zu verfolgen. Was Sie also tun, ist diesen noch einmal zu duplizieren. Und ich werde etwas benutzen wie unsere Autos erkunden. Und das wird der Text für unseren Button sein. Und was die Schaltfläche angeht, lassen Sie uns weitermachen und so etwas verwenden. Vielleicht klicken Sie mit der rechten Maustaste auf Send to Back und bringen Sie diese Szene hierher. Ich werde es genau hier zentrieren. Du kannst es sehen. Lassen Sie uns das hier zentrieren. Und lass uns, lass uns ihm eine blaue Hauptfarbe geben und den Rand loswerden. Wählen Sie meinen Text aus und färben Sie ihn weiß. Und dafür können wir hier vielleicht acht für den Eckradius verwenden. So etwas, damit wir ein abgerundetes Erscheinungsbild erhalten. Mal sehen, vielleicht kann ich es nur leicht anstupsen, um es zu hören. Positionieren Sie dies in der Mitte. Und gib ihnen noch einmal Namen. Das wird also unser BTN BG, also Button-Hintergrund, und das wird unser Text sein. Also geben wir dem den Namen Main, btn. Also Haupttaste. Und ich werde das sofort in eine Komponente verwandeln, indem ich die Strg-Taste drücke. Klicken Sie auf Plus und bewegen Sie den Mauszeiger, nennen Sie es Hover. In unserem Bundesstaat Horace. Alles was ich tun möchte, ist, dies in eine Schwebefarbe zu ändern. Also schließe das, kehre zum Standardstatus zurück und klicke auf Vorschau. Und in der Vorschau können Sie sehen, wie das aussieht. Jetzt haben wir also den Mauszeiger auf unseren Navigationselementen und wir haben auch den Mauszeiger auf unserer Schaltfläche, was ganz gut funktioniert. Was ich tun möchte, ist, hier etwas Abstand zu haben. Drehen wir das also, bewegen wir sie nach links und gruppieren sie und nennen es z.B. hero. Inhalt. Bringen Sie dies auf diese Weise in einen Stapel und geben Sie ihm einen Abstand von 32. Stapel sind also nützlich, wie Sie hier sehen können. Auch für dich. Geben Sie einen schnellen Abstand ein, um Ihre Inhalte etwas besser zu organisieren und generell, um Ihre Geschwindigkeit zu verbessern , wenn Sie damit beginnen. Schauen wir uns also an, was wir hier tun können. Vielleicht kann ich das Bild benutzen. Also lass mich, lass mich sehen, was ich tun kann. Ich habe hier mein Hero-Image vorbereitet, das wiederum von Envato Elements stammt. Lassen Sie mich es hier grob verwenden. Vielleicht. So etwas wird ganz gut funktionieren. Ich glaube. Was ich in diesem Fall brauche, ist eine Art Kreis zu benutzen , damit es aus dem Kreis herauskommt. Denn wenn du dich von hier an erinnerst, werden wir diese beiden Kreise um uns herum haben. Und vielleicht sieht es gut aus, wenn das Auto irgendwie aus diesem Kreis kommt oder so, kennengelernt. Also lass mich das wirklich schnell machen. Was ich in diesem Fall also tun kann ist meinen Kreis zu benutzen, ungefähr so. Und geben wir ihm einige ungefähre Abmessungen wie 38 mal 388. Es wird also ein Kreis sein. Positioniere es hier, schiebe es dann in den Hintergrund, schicke es nach hinten und positioniere mein Auto oder ungefähr hier. Das wird sein, mal sehen, wie wir es nennen können. Vielleicht Hero Image Circle, so etwas. Und bring unser Heldenbild ein bisschen zurück. Control a D, das nennen wir Mosque Hero Image Mask. Positioniere es oben und drücke dann einfach Shift Control, Shift Command M. Wir nennen das Hero-IMG, also Heldenbild. Und lassen Sie mich diese Maske auf diese Seite ausdehnen, oder vielleicht sogar auf diese Seite, etwa so. Er wird ganz gut arbeiten. Ich möchte nur meinen Kreis im Blick haben. Vielleicht kann ich es auf diese Seite vergrößern. Mal sehen, was wir hier tun können. Also so etwas, denke ich, wird gut funktionieren. Und da hast du es. Also vielleicht kannst du so auch ein Rechteck verwenden. Du kannst machen, was du willst. Aber in diesem Fall werde ich einfach meinen Kreis benutzen. Nein, noch besser, verwenden wir ein Rechteck. Also gruppenfreie Maske. Lass uns diesen loswerden. Und lassen Sie uns ein Rechteck verwenden , weil wir ein Gitter haben. Und es wird für uns ein bisschen sinnvoller sein, das Rechteck in diesem Fall tatsächlich so zu verwenden . Und nennen wir es Maske und Shift Control. Shift Command M und nennen wir es Heldenbild. Und ich denke, wir sind gut dort. Alles was ich tun möchte, ist einfach meinen Hintergrundkreis auszuwählen meinen Rand zu entfernen. Es sieht also so aus. Und ich bin sehr zufrieden damit, wie das aussieht. Also lass uns einfach sehen. Wir sind da in der Mitte, vielleicht ungefähr hier an den Rändern. Und vielleicht bewegen Sie unseren Kreis nur ein bisschen, damit er nicht von der Maske abgeschnitten wird. Und los geht's. Jetzt, wo wir Schulden haben. Vielleicht können wir sogar unsere Maske zentrieren, nur ein winziges Gebot bis ungefähr hier. Und diese sind wichtig , weil Sie möchten, dass Ihre Messungen später genau und präzise sind, wenn Sie tatsächlich zu Webflow wechseln. Also positioniere das und schiebe meinen gesamten Inhalt ein wenig nach unten. Und was ich in diesem Fall tun werde, ist, mal sehen, ich möchte einen Kreis verwenden. Also lass uns hier einen Kreis nehmen, weil ich ihn so positionieren werde , wie wir ihn erstellt haben, genau hier. Sie können also sehen, dass wir zwei Symbole und zwei Kreise haben werden. Also für diesen Top , nennen wir ihn mal, lass uns den oberen Heldenkreis sehen. Top Hero Icon Circle oder so ähnlich. Und für die Farbe können wir unser Hauptblau verwenden. Und ich habe meine Ikone genau hier. Auch hier werden Sie all diese Icons bereits vorbereitet haben. Und ich werde sie am Ende des Design-Teils des Kurses zeigen . Du kannst sie einfach benutzen. Vielleicht kann ich hier einen Styleguide erstellen , sodass Sie einfach all diese Icons, die ich gerade verwende, kopieren und einfügen und sie einfach verwenden können , um ihnen zu folgen. Jetzt, wo wir das positioniert haben, lass uns an die Box gehen, nennen wir es Top Hero, Circle. So wie das. Und vielleicht können wir es hier grob bewegen. Lass es uns duplizieren. Verschieben Sie es vielleicht genau hier, vielleicht reduzieren Sie die Größe nur geringfügig auf ungefähr so. Das wird also unser Tiefpunkt sein. Unten hier ein Kreis und unten hier ein Kreis. Da hast du es. Lassen Sie mich dafür einfach ein anderes Symbol verwenden, das in diesem enthalten sein wird. Lass es uns jetzt genau hierher schieben. Und ich verwende nur ein Schlüsselsymbol , um sozusagen einen Autoschlüssel anzuzeigen. Du wirst dein Auto holen, so etwas. Und hier verwenden wir die Charge für die Garantie. Lassen Sie uns das in eine Komponente verwandeln, und lassen Sie uns daraus auch eine Komponente machen. wird es für mich also viel einfacher sein Später wird es für mich also viel einfacher sein, diese Styleguides zu erstellen und für euch, sie in dieser Datei zu verwenden. Also für diesen kann ich ihn sogar hierher verschieben oder vielleicht kann ich ihn auf vielleicht 20 verschieben, so etwas. Ja, lass es uns da belassen. Und lass uns eine dunkelgraue Farbe verwenden, vielleicht so etwas. Und ich finde, das funktioniert ganz gut. Also endlich kann ich all diese gruppieren und es Heldenbild nennen , so etwas. Und Position Diese beiden sind ungefähr hier. Was wir also tun werden, ist diesen Inhalt vielleicht von hier nach unten zu verschieben, sagen wir 100 Pixel, was meiner Meinung nach ganz gut funktionieren wird. Da haben wir's. Und jetzt gruppieren wir sie tatsächlich und nennen es Hero. Da hast du es. Lass uns noch eins machen. Bevor wir zu einer kleinen Pause übergehen, lassen Sie uns den nächsten Abschnitt erstellen , der sein wird, wer wir sind. Und wir werden ein Bild auf der Seite haben. Wir werden Textzeilen haben und wer wir sind, ganz oben. Da wir H1 hier verwendet haben, ist es für uns nur natürlich, H2 hier unten zu verwenden . Also zuerst, lassen Sie uns mit unserem Bild beginnen. Also, was ich tun werde, ist ein schnelles Rechteck zu erstellen , ungefähr so. Und mal sehen, vielleicht können wir 246 Spalten wie diese verwenden. Und was die Dimensionen angeht, lassen Sie uns mit, ich weiß nicht, vielleicht fünf, drei-drei in der Höhe beginnen. Und mal sehen, vielleicht kannst du es sogar ein bisschen aufpeppen , damit du dieses Panel hier öffnen kannst. Und das gibt Ihnen einen Eckenradius für jede einzelne Ecke. Was ich tun werde, ist nur diese Ecke hier auf vielleicht 24 Pixel aufzurunden , ungefähr so. Wirf die Grenze weg , weil ich sie nicht brauche. Und geben wir ihm einen Namen. Vielleicht wer wir sind, wer wir sind oder so ähnlich. Lassen Sie mich das Bild davon machen, wer wir sind. Da haben wir's. Also , es ist der Typ von Envato Elements, wenn du dich erinnerst. Und vielleicht können wir ihn mit nur einer Berührung vergrößern, sie in der Mitte positionieren, vielleicht ungefähr hier. Vielleicht ein bisschen mehr. Und mir gefällt, wie das aussieht. Ich denke, es ist in Ordnung. Und jetzt lassen Sie uns weitermachen und diesen Text an der Seite hinzufügen. Also, wie gesagt, wir werden das Alter von drei verwenden. Geben wir also exklusive Spider-Autos ein, etwas wie H2. Da hast du es. Und lassen Sie uns es für diesen Fall ausrichten. Jetzt positionieren wir es vielleicht hier, Control D. Und was ich dort tun kann, ist vielleicht eine Art Slogan oder etwas Ähnliches zu erstellen . Also lass uns Textblock dafür verwenden. Und lassen Sie uns einige Texte von Leidenschaft und Hingabe einfügen. Du kannst so etwas oder etwas anderes verwenden. Nur um deinen Absätzen ein bisschen mehr Leben zu geben, ein bisschen mehr Sinn, ein bisschen mehr Stil. Sie verwenden also nicht nur einige leere Texte, die Sie online finden. Wie Sie gesehen haben, habe ich diesen letzten Absatz in einen solchen Absatz umgewandelt und werde einen Absatz einfügen. Es geht also nur um sie, wann sie angefangen haben, als sie ihr Unternehmen gegründet haben, wie viele Kunden sie hatten. Vielleicht ein paar wichtige Fakten und Zahlen, zum Beispiel, mit wie vielen Standorten sie es zu tun haben und vielleicht, wo sich der Hauptsitz befindet, wie viele Mitarbeiter haben sie? Also solche Sachen. Abschnitt Über uns wird es ganz gut funktionieren. Lassen Sie uns das abschließend dort positionieren wo sie sein sollten, sie sollten an der Spitze sein. Das sollte genau hier sein. Lassen Sie uns sie gruppieren. Also Control oder Command G, Positionierung genau hier. Und nennen wir es so etwas wie mal sehen, TextContent sind nur Text. Und geben wir ihm einen Stapel von 24, so. Und lassen Sie uns diese beiden gruppieren. Aber vorher positionieren Sie es einfach in der Mitte. Ich denke, es wird ganz gut funktionieren. Also lass uns sehen. Ja. Und gruppieren Sie diese Control G und geben Sie so etwas wie wir ein. Da haben wir's. Bevor wir weitermachen, kann ich es einfach verschieben weil wir hier 100 hatten. Ich möchte die gleichbleibenden Abstände in meinem Design und Webflow-Build beibehalten . Also nehmen wir, sagen wir, 101, 50 oder 200, je nach Abschnitt. Was wir also tun können, ist, dass wir einundzwanzig haben, vielleicht können wir es auf 200 reduzieren, weil ich denke, dass wir genug Platz haben. Da hast du es. Wenn ich Strg oder Command Enter drücke, um in den Vorschaumodus zu gelangen, haben wir unsere Schaltfläche, die ganz gut funktioniert. Dann haben wir Autos, Kredite, kontaktieren Sie uns. Wir haben unsere nette Helden-Sektion mit diesem Bild, das irgendwie aus diesem Kreis stammt. Und wenn Sie zusätzliche Farben haben, wie vielleicht Akzentfarben, können Sie einen Kreis in diese Akzentfarbe verwandeln , um ihm ein bisschen mehr Leben zu verleihen. Dann haben wir diesen Abschnitt, vielleicht ist das Marco, unser Hauptvorsitzender innerhalb des Unternehmens. Vielleicht ist er derjenige, der uns beim Autokauf oder was auch immer helfen kann . Und dann haben wir einen Klappentext über das Unternehmen. Im nächsten Abschnitt werden wir also zu diesen Karten für unsere Autos übergehen . Und es wird ein ziemlich wichtiger Abschnitt sein denn wie Sie sehen können, werden sich diese Karren in unserem gesamten Design wiederholen. Ich sehe dich im nächsten Video , wenn wir genau das erstellen werden. 137. Homepage-Design Teil 2: Lassen Sie uns nun dort weitermachen, wo wir aufgehört haben, und diese Kartenabschnitte erstellen. Was ich also tun kann, ist vielleicht ein anderes Alter von drei zu verwenden und einige einzufügen ist eine exklusive Auswahl, vielleicht stellen Sie sicher, dass sie in der Mitte sind , so. Und vielleicht kann ich es auch um 200 von diesem Abschnitt wegbewegen , ungefähr so. Sie können also sehen, dass wir es dort positionieren. Dann kann ich vielleicht mein Grid verwenden, um meine drei Karten zu erstellen. Lassen Sie uns also zuerst einen erstellen, und dann werden wir weitermachen und weitere erstellen. Also das Wichtigste zuerst für unsere Karte Was wir verwenden werden, ist, mal sehen. Vielleicht können wir ihm sofort einen Namen geben und es vielleicht Stock nennen. Objekt B, G, oder Sie können ihm den Namen Autoartikel BG oder was auch immer geben. Aber weil dies ihr Bestand ist und was sie auf Lager haben, werden wir genau das verwenden. Was wir jetzt tun können, ist mal sehen, vielleicht kann ich hier sofort eine Randfarbe verwenden. Also 2D, vielleicht dieses hier, hat Randfarbe aufgetragen. Wir werden einfach einen benutzen. Also leichte Randfarbe , weil wir sie etwas später für den Hover-Effekt verwenden werden . Was ich hier also tun kann, ist das vielleicht zu erweitern. Mal sehen. Vielleicht kann ich sogar die Ecken auf acht runden , um ein einheitliches Erscheinungsbild zu erzielen. Und als Erstes werde ich den Rand hier loswerden, aber ich werde einfach die Opazität verringern, einfach so. Und dann kann ich Control D drücken und dies als mein Bild verwenden. Also lass uns sehen. Vielleicht kann ich sagen, dass es passiert ist, weil das der Name unseres Autos oder unseres Autobildes sein wird. Da hast du es. Mal sehen. Zuallererst für die Kartengröße können Sie für die Kartengröße vielleicht eine Höhe von 450 oder etwas Ähnliches wählen. Also lass uns in diesem Fall mit 50 weitermachen. Und für mein Autobild kann ich etwas verwenden wie, lass uns 250 sehen. Das ist also mein Kartenbild. Aber was die Höhe angeht, da hast du es. Ich werde einfach weitermachen und einige dieser abgerundeten Ecken an der Unterseite loswerden . Wenn Sie also den Mauszeiger bewegen, wird es oben links, oben rechts, unten rechts sein , wir wollen nicht, und unten links wollen wir auch nicht. Was ich also tun kann, ist sofort zu springen und mein Bild hinzuzufügen. Lass mich zu Lamborghini Hurricane gehen. Und wieder einmal können Sie sehen, wie diese aussehen. Und ich werde die Nummer drei für all diese hinzufügen , weil dort nur das Auto in drei Vierteln angezeigt wird. Es gibt also genügend Details, damit Sie wissen, was es ist. Also ziehen Sie es einfach per Drag & Drop in ihr Ego. Und was es hier tun kann, ist mit einigen Informationen zu beginnen. Also, was ich hier tun werde, ist Schmerzalarm oder Heaney, der wiederkehrt? Aber statt 32 nehmen wir etwas Kleineres, wie 24. Da haben Sie es, stellen Sie sicher, dass es linksbündig ist. Netter Arzt, ungefähr hier in der Nähe. Und schauen wir uns den Abstand an, was wir tun können, ist, vielleicht können wir mit 24 rundum gehen. Also 12, 123-412-1234. Und da hast du es. Das wird unser Abstand sein. Und dann kann ich das vielleicht noch einmal duplizieren Control D. Und mal sehen, wo ich diesmal vielleicht mit 16 hingehen kann. Also 20123416, das wird unser Preis sein. Lassen Sie mich also den Preis von unserem ursprünglichen Design nehmen unserem ursprünglichen Design und es blau färben. Und zum Schluss werden wir unten einige Informationen geben. Und wir werden diese Informationen verwenden, um unserem Publikum im Grunde zu sagen , in welchem Jahr das Auto ist, welchen Kilometerstand das Auto hat oder so etwas Ähnliches? Nur einige Informationen auf einen Blick, bevor sie zu den Hauptinformationen übergehen. Also lass uns das duplizieren und lass uns ihm den Textblock geben und lass uns ihm 2021 geben, vielleicht das Alter der Farbe. Und lassen Sie uns das in einer Gruppenkontrolle G positionieren, wie Sie hier sehen können. Und vielleicht können wir das so etwas wie Jahr, Kilometer nennen . Du kannst sehen. Und lass uns ihm einen Stapel geben und unsere Textebene duplizieren. Und lassen Sie uns das auf 24 positionieren. Und so kann es sein, wie viele Kilometer hat das Auto? Sie können den Kilometerstand verwenden. Ich verwende Kilometer, weil es für mich einfacher ist. Aber was auch immer für Sie funktioniert, Sie können es auch tun. Lassen Sie uns das also direkt unter unser Bild verschieben. Schauen wir uns hier an, was wir haben. Wir haben 16, hier haben wir 16, 24. Es ist also nur natürlich, dass wir 24 von unten gehen, denke ich. Also. Stellen wir uns das auf 2042 weitere Pixel vor. Lassen Sie uns mit nur einer Berührung hineinzoomen und Sie können sehen, warum das nützlich ist. Jetzt, da wir unser Layout haben, kann ich diese Elemente gruppieren und es Autokarte, Text nennen. Dann gruppiere alles und nenne es vielleicht Autokarte oder so. Und lass es uns duplizieren. Control D. Und Control D. Lassen Sie mich kurz einige dieser Elemente austauschen. Also hier werde ich meinen Cadillac eskalieren lassen. Und dann habe ich hier meinen Preis. Das Jahr wird 2020 sein. Und die Kilometer werden ungefähr so sein. There Go, funktioniert gut. Und dann lassen Sie uns mit etwas anderem beginnen. Dieses Mal wird das Auto Electric Solicitor sein. Und lass uns mit dem Kilometerstand weitermachen. Kilometer. Das Jahr wird 2020 sein. Bei 2 km wären das 6.000 und vielleicht bis 40. haben also alle eine geringe Laufleistung und lassen Sie uns sie nach unten stoßen. Das wird in der Mitte sein. Da haben wir's. Und mal sehen, vielleicht können wir sofort etwas Abstand gebrauchen. Also statt 113 können wir vielleicht etwas Nettes und Rundes wie 64 nehmen. Also bleiben wir wieder bei diesem Abstand von acht. Ich finde, das funktioniert ganz nett. Und was ich in diesem Fall tun werde, ist vielleicht eine dieser Karten zu treffen und zu sagen. Ich weiß es nicht. Lass es mich benutzen. Drücken Sie also Control C oder Control D und bewegen Sie es einfach genau hier. Lassen Sie mich dieses Bild auswählen und so Hellgrau verwenden. Und lassen Sie mich es hier auswählen. Autokarte funktioniert ganz gut. Lassen wir es einfach da , weil ich diesen Karten Namen geben werde. Das wird also ein Hurra-Auto. Das kann eskalieren. Schau, ob es das Jahr hat, und das kann klar sein, nur damit ich weiß, was alles ist. Und was die Bilder angeht, lassen Sie uns zurückgehen und einfach Cadillac Escalade Nummer drei finden. Und lass uns dort zu Lucy zurückkehren. Nummer drei, Drag & Drop. Und wieder einmal erhalten Sie diese Bilder, sodass Sie auch mit ihnen herumspielen können. Lassen Sie uns sie nun in Komponenten verwandeln. , dieser Hover-Effekt wird hier nicht ganz gut funktionieren Ich denke, dieser Hover-Effekt wird hier nicht ganz gut funktionieren, weil wir einen Pixelrand haben und er einfach vom Bild verdeckt wird. Was ich in diesem Fall tun kann, ist einfach eine Breite des Bildes auf vielleicht 372 zu reduzieren . Also nur zwei Pixel auf jeder Seite und positionieren Sie die Mitte. Mach das Gleiche hier. Also 372, weil ich gerade darüber nachdenke , wie ich das später in Webflow machen kann. Und ich denke, dass diese Art von Ansatz ganz gut funktionieren wird , weil Sie im Standardzustand einfach keine Grenzen haben. Und im Schwebezustand haben wir einen Rand mit einem Pixel, C37, um sicherzustellen, dass sich dieser in der Mitte befindet. Und noch einmal, dies ist unser Standardstatus. Wählen Sie also die Hurricane Control, K escalate Control K Lucid Air Control-Taste. Und jetzt bringen wir sie zum Schweben. Wählen Sie diesen Text aus und wählen Sie den Horrorstatus. Da hast du es. Wähle den Eisenzustand, mein Schatz. Und statt des Horror-Status wählen Sie den Hintergrund aus und erhöhen Sie die Randundurchlässigkeit auf 100. Mach dasselbe für diesen. Und mach dasselbe für diesen. Da hast du es. Schließen Sie alle Ihre Komponenten und kehren Sie zum Standardzustand zurück. Und ich denke, wir sollten bereit sein, hierher zu gehen. Jep. Schauen wir uns also eine kurze Vorschau an, um zu sehen, was wir haben. Wir haben also immer noch all diese Elemente, die wir im vorherigen Video entworfen haben, aber jetzt haben wir diese Karte. Wenn ich also den Mauszeiger bewege, kannst du sehen, wie es aussieht. Es hat einfach diesen netten kleinen Schwebeeffekt an unseren Grenzen. Und ich denke, es trägt nur ein wenig zu dieser Benutzerfreundlichkeit bei, weil Sie den Benutzern zeigen , dass sie tatsächlich Mauszeiger bewegt haben und sie tatsächlich etwas dagegen tun können. Was wir als nächstes tun werden, ist unsere Haupttaste zu benutzen. Ziehen Sie es einfach per Drag & Drop hinein. Ich werde die Art der Bearbeitung der Hauptkomponenten hinzufügen. Ich weiß nicht, warum es hier vertauscht wurde, also lass uns das loswerden. Alice hat diesen gerade zuerst hinzugefügt. Was ich also tun werde, ist vielleicht, mal sehen, ich kann einen Stack auf meiner Taste einschalten, wodurch das Pairing aktiviert wird. Und ich werde den Stack loswerden weil er immer noch unsere Polsterung behalten wird. Und jetzt kann ich weitermachen und meinen Hauptknopf ziehen und ihn hierher ziehen, ihn in der Mitte positionieren. Und Sie können sehen, dass wir jetzt diesen Stift und diesen Diamanten haben , was darauf hinweist , dass dies ein untergeordneter Bestandteil dieser Hauptkomponenten ist. Einfach ausgedrückt, was auch immer die Änderungen sind, die wir hier vornehmen, es wird sich auf hier übertragen. Aber welche Änderungen wir auch immer hier vornehmen, sie werden nicht hierher übertragen, da dies das Original ist. In diesem Fall möchte ich den Text ändern, um alle Autos zu sehen und Sie können sehen, wie die Taste reagiert. Wählen Sie den Text aus und wechseln Sie in den Hover-Status, um ihn auch hier zu ändern. Da hast du es. Weil wir zwei Staaten haben. Denken Sie daran, wenn Sie mehr haben, müssen Sie mehr ändern. Also hier, wenn ich mit der Maus schwebe, heißt es „Erkunden Sie unsere Autos“. Aber hier, wenn ich den Mauszeiger bewege, wird Alle Autos ansehen und die Größe wird sich ändern. Also. Was ich tun kann, ist, es vielleicht auch auf 64 zu bewegen , ungefähr so. Vergewissere dich, dass es in der Mitte ist. Da hast du es. Und wir werden diesen Abschnitt exklusive Auswahl oder unsere Auswahl nennen . Da haben wir's. Nett. Und das nächste wird das sein, was wir anbieten. Wenn ich dich hierher zurückbringe, schauen wir mal, wo wir mit der Zeit stehen. Also, was wir anbieten, das werden wir ab und zu entwerfen , um eine kleine Pause einzulegen. Also hier gebe ich ein , was wir anbieten. Und dafür, lassen Sie uns sehen, lassen Sie uns noch einmal H3 verwenden. Also h drei, wir sind im H2, tut mir leid, wir sind in einer Mittelposition, in der Mitte, und geben wir ihm noch einmal den Abstand von 200. Schauen wir uns 213 an. Also mein noch einmal. Schauen wir uns 200 an. Ihr Ego und eine Höhle. Was wir tun können, ist einfach ein anderes dieser Bilder zu verwenden. Lassen Sie mich das einfach sehr schnell erstellen. Und vielleicht können wir einfach die andere abgerundete Ecke verwenden , wie wir es zuvor getan haben. Schauen wir uns jetzt 246 an, vielleicht sieben Spalten, ungefähr so. Also 2467, in Bezug auf die Körpergröße, Lass uns mit fünf oder sieben beginnen. Und in Bezug auf den Koordinatenradius nehmen wir den Radius in der unteren linken Ecke von 24. Entfernen Sie den Rand und lassen Sie mich mein Bild per Drag & Drop hineinziehen, das für das, was wir anbieten, in diesem enthalten sein wird. Da hast du es. Ich kann weitermachen und es doppelklicken und vielleicht ein wenig vergrößern. Aber ich denke nicht, dass es notwendig ist , weil es den Schlüssel zeigt. Und ich werde diese beiden Abschnitte etwas nach unten verschieben . Wieder einmal sind wir 200 von hier entfernt. Und hier werden wir tatsächlich anfangen, einige Elemente zu verwenden. Also lass uns sehen. Vielleicht kann ich das Abzeichen noch einmal benutzen. Also so ein Garantiebadge. Und vielleicht kann ich es blau färben. Und vielleicht kann ich ihm verschiedene Dimensionen geben. Mal sehen, vielleicht wird das Recht tatsächlich gut sein. Was ich hier eingeben werde, ist eine erweiterte Garantie , denn genau das bieten sie an. Und wir werden vielleicht H3 dafür verwenden. Weil ich denke, dass es viel besser funktionieren wird als der A12. Schauen wir uns die Entfernung an, vielleicht können wir es positionieren. Wählen Sie diese zunächst aus, um sicherzustellen, dass sie sich in der Mitte befinden , und verschieben Sie sie auf vielleicht 16, etwa so, damit wir unseren Abstand beibehalten und sie ein bisschen besser organisieren können . Also werde ich es ganz nach unten schieben , nur bis hier Control G. Und ich hatte das Recht, daraus einen Stapel zu machen. Und vielleicht können wir unten vielleicht Text verwenden. Geben Sie also T und lassen Sie uns das auswählen und einfügen. Und was ich tun werde, ist, daraus einen Textblock zu machen. Stellen Sie sicher, dass es von der Seite ist, von der linken Seite. Für die Entfernung zwischen einem Damm nehmen wir s104. Sie können also sehen, dass wir diese Konsistenz immer noch beibehalten, also ungefähr so. Und lass uns das hier und nur ein bisschen runter bewegen. Also werden wir noch einmal eine Festplattengarantie ausrufen. Also können wir das geben, schauen, wie wir das strukturieren können. Wir können dieses Garantiesymbol oder so nennen. Sehen wir uns das Symbol oder den Titel an. Jetzt geben wir es einfach 1.2. Und dann gruppieren Sie diese beiden einfach und nennen Sie sie auch Garantie. Es wird für uns einfach sehr einfach sein, das zu tun. Und wir werden uns etwas später in Webflow um die Benennung kümmern . Also, was ich mit ihnen machen werde , ist sie vielleicht so zu strukturieren , dass wir vielleicht 40 Abstand zwischen ihnen haben , ungefähr so. Das wird also ganz unten sein. Das wird ganz oben sein. Im nächsten Fall werden wir Wartung nennen. Und als letzten nennen wir Kredite. Und lassen Sie mich für die Wartung das Wartungssymbol für mein ursprüngliches Design verwenden. Ich springe gleich hier rein und positioniere es hier. Stellen Sie sicher, dass ich in der Mitte meines Designs stehe, da es sich um einen Stapel handelt. Klicken Sie einfach auf Löschen und es wird wieder an seinem Platz positioniert. Und wie Sie sehen, befinden wir uns bei diesen beiden Elementen immer noch im Mittelpunkt. Wenn ich also weitermache und sie auswähle, klicke hier. Da hast du es. Lassen Sie mich also den Wartungstext tatsächlich kopieren. Da hast du es. Wir werden einfach mal sehen. Schieb das hier hin. Wunderbar, denn wir haben das nicht von der Mittellinie auf linksbündig gedreht. Lass uns das machen. Lass uns das hier machen. Lass uns das hier machen. Mal sehen, hier sind wir, hier sind wir und wer wir auch sind. Also unrechtmäßig, lasst uns die Wartungstexte kopieren und lasst uns kopieren. Mal sehen, das wird auch eine Wartung sein. Da hast du es. Und das werden auch Kredite sein. Lassen Sie uns also Alarme eingeben. Und was das Symbol angeht, werde ich auch das Symbol kopieren und dasselbe tun wie zuvor. also hier reinspringen, Control oder Command V sicherstellen, dass es in der Mitte ist. Mischung ist kurz bevor Kredite diesen Stapel treffen, entfernen Sie ihn und los geht's. Jetzt haben wir diese beiden in der Position, in der wir sie haben wollten. Lassen Sie mich also den Darlehenstext kopieren. Da hast du es. Und dieser Abschnitt zeigt den Benutzern im Grunde nur , was sie tatsächlich anbieten. Sie bieten eine erweiterte Garantie. Sie haben also diese zusätzliche Gewissheit. Sie bieten Wartung in Absprache mit ihren Partnern an , da sie die Wartung nicht selbst durchführen. Und schließlich gewähren sie erneut Kredite über ihre Partner sodass Sie allein mit ihnen zusammenarbeiten können. Endlich haben wir also wieder 40 Abstände zwischen all unseren Artikeln. Und mal sehen, vielleicht können wir diese Gruppenkontrolle G nennen und sie, sagen wir, Angebotsinformation nennen. Und stellen Sie sicher, dass diese beiden in der Mitte sind und wir von hier aus 64 sind. Etwas in der Art. Ich denke, es wird gut funktionieren. Und was wir tun können, ist diese zu gruppieren und sie nach dem zu nennen, was wir anbieten. Unser Angebot ist noch besser. Da hast du es. Wenn wir einen kurzen Vorgeschmack darauf werfen, was wir bisher gemacht haben, haben wir unsere Autos erkundet. Wir haben diese drei, wir haben diesen Helden, wir haben in diesem About-Abschnitt, wir haben diese Karten mit Schwebeeffekten. Wir haben auch unseren neuen Button mit unserem Effekt, was wir anbieten. Wir haben also all diese Elemente in uns. Und jetzt schauen wir mal, was als Nächstes kommt. Das nächste sind die Vorteile, dann kontaktieren Sie uns, wo wir sind. Und schließlich wird die Fußzeile dort unten sein. Wieder einmal wird ein Design viel schneller voranschreiten, weil wir Kontakt mit uns aufnehmen werden, wo wir sind, Fußzeile und Heldenbereich, eine Art Navigationsbereich, tut mir leid. Und wir werden sie einfach kopieren und in unsere Designs einfügen. Also nur dieser erste, wenn wir anfangen, sie aufzuschlüsseln und diese Elemente auf der Seite zu positionieren , wird später viel, viel einfacher sein , wenn wir tatsächlich weitermachen und das. Das war's für diesen. Und lass mich dich im nächsten Video sehen , wo wir weitermachen werden. 138. Homepage-Design Teil 3: Lassen Sie uns nun zum nächsten Abschnitt übergehen, in dem es um Vorteile geht. Was ich also tun werde, ist dieses Textsteuerelement C auszuwählen, es außerhalb von Control V zu positionieren und unsere Vorteile einzugeben. Stellen Sie also sicher, dass es in der Mitte ist, und schieben Sie es ganz nach unten. Dann verwende ich ein schnelles Rechteckwerkzeug um hier quasi einen Bruchabschnitt zu erstellen. Und lassen Sie mich eine Höhe von vielleicht angeben, schauen wir uns 469 an, glaube ich. Sehen wir uns 200 hier an. Also genauso wie all diese anderen. Und geben wir ihm einen Namen, Beispiel Leistungsbereich BGN. Was ich in diesem Fall tun werde, ist diese dunkle Farbe zu geben und diesen Text in reinweiße Texte umzuwandeln und ihn hier grob zu bewegen. Jetzt, wo wir das gemacht haben, werde ich ein Bild verwenden , das ich auch auf Envato Elements finde. Und ich werde es auch in einer Sammlung belassen. Platziere es ungefähr hier, sodass wir dieses Rücklicht sehen , ungefähr so. Und mal sehen, was Adipositas angeht, vielleicht kann ich auf meiner Tastatur einen drücken, aber nicht auf allem, nur auf diesem Bild. Ups, tut mir leid. Lass uns das nochmal machen. Also mach das, aber statt BG nennen wir es Vorteile IMG-Bild. Und dann in diesem wir das Bild per Drag & Drop ab. Doppelklicken Sie auf die Position, indem Sie die Umschalttaste gedrückt halten und mit der linken Maustaste klicken. Und wenn Sie fertig sind, drücken Sie eine Taste auf Ihrer Tastatur, um die Deckkraft auf ein bis zehn Prozent zu senken . Und wenn wir diesen Browser hierher verschieben, können Sie sehen, wie das aussieht. Wir haben also diesen schönen Ghosting-Effekt. Und das wird vielleicht einer der dunkelsten Teile unserer Website oder Rolle sein. Denn wenn Sie sich erinnern, haben uns unsere Kunden gesagt, dass sie diese dunklen Layouts nicht wirklich mögen. Also, was wir hier tun werden, ist vielleicht statt 32, vielleicht können wir H3 verwenden und wieder Weiß verwenden. Und lassen Sie uns kostenlose Lieferung eingeben. Da hast du es. Und damit drücken wir Strg D, um es zu duplizieren. Und hier können wir vielleicht den Absatztext verwenden. Also Absatz, und lass uns diesmal mit Körperfarbe statt reinem Weiß weitermachen. Da hast du es. Und gib diesen Text pin ein. Und was den Abstand angeht, können wir vielleicht mit 24 weitermachen. Also lass uns 123424 gehen und sicherstellen, dass wir in der Mitte sind. Und ich kopiere einfach das Symbol, das ich hier verwendet habe. Und positioniere es ungefähr herum. Hier. Da haben wir's. Und das können auch 24 sein. Für die schönen und gleichmäßigen Abstände. Dies wird ein Symbol für kostenlose Lieferung sein und ich drücke Control K, um es in Komponenten umzuwandeln, kostenlose Lieferung und landesweit, wo es ist. Da haben wir's. Also werden wir diese drei Schleifen haben. Also kostenlose Lieferung, kostenlose Lieferung, bundesweite Kontrolle, G, um es zu gruppieren. Und das nennen wir kostenlose Lieferung so. Und um sicherzustellen, dass wir gleichmäßig positioniert sind, ziehe ich für die Abstände ein Rechteck um diese vier Spalten. Wählen Sie dann meinen Inhalt aus und klicken Sie hier , um sicherzustellen , dass er zentriert ist. Jetzt, wo ich das getan habe, kann ich D steuern und dies einfach in Center Control D drücken und es einfach hier positionieren. Benutze noch einmal meinen Rechtecktrick. Aber vorher, weil wir den Text hier ändern werden. Also lass uns das zuerst machen. So wie. Und das wird ein Teilaustausch sein. Und nennen wir es Farm Exchange. Und jetzt, wo wir das getan haben, können wir es gleichmäßig positionieren, da die Absatztexte den breitesten Teil des Abschnitts ausmachen. für den Teiletausch Lassen Sie mich für den Teiletausch das Symbol aus dem ursprünglichen Design von Zoom mit nur einem Tastendruck verwenden . Platziere das hier. Und lassen Sie uns die beiden hier einbeziehen. Ganz nach unten. Da hast du es. Drücken Sie Control K , um daraus eine Komponente zu machen. Und jetzt in der Mitte heißt es dreistufiges Polieren. Sie werden also sicher sein, wenn Sie den Chor von Distiller bekommen , weil sie Ihr Auto polieren werden und es im Grunde nicht zulassen, dass es verschmutzt oder wegen seines Lackes kontaminiert zu sein oder so. Lassen Sie uns das in diesem Fall hier positionieren. Lass es uns hierher schieben. Da hast du es. Werde das los. Drücken Sie dazu Control K. Stellen Sie sicher, dass sie alle zentriert sind. So wie. Sie dann sicher, dass der Text zentriert ist. Diese beiden sind es schon , weil wir das schon gemacht haben. Und wie Sie sehen, haben wir diese in nur wenigen Schritten bekommen. Nun zu diesen Icons, woher ich sie bekommen habe, ist woher ich sie bekommen habe, ist, dass Sie sie natürlich in das Design integrieren werden, wie ich schon sagte, aber ich habe sie von Icon-Scouts bekommen. Und was ich hier gemacht habe, ist, dass ich meine Sammlung erstellt habe. Und Sie können all diese verschiedenen Symbole sehen , die wir in unserem gesamten Design verwenden werden. Und eines davon zu verwenden, ist ganz einfach. Klicken Sie, um es zu kopieren, und dann können Sie es praktisch überall in Ihrem Design einfügen. Du kannst es skalieren, du kannst es ändern, was auch immer er will. Es ist also super einfach zu machen. Was ich dir empfehlen werde, ist, zu deinen Plugins zu gehen, das ist dieser Bereich hier. Klicken Sie auf das Plus, suchen Sie den Icon Scout und gehen Sie dann einfach auf deren Website, wenn Sie diese Sammlung erstellen möchten. Oder wenn du etwas herunterlädst, kannst du zu meinen Downloads gehen und deine Downloads später auf der Website finden und dann dort auf das Herzsymbol klicken , um sie meinen Sammlungen zu geben. Und dann können Sie sie alle in Ihren Sammlungen positionieren. So einfach ist es also, diese Icons zu verwenden , und dort habe ich all diese tollen Icons gefunden. Ich hätte also die Envato-Elemente verwenden können, aber ich wollte nicht, für die Icons wollte ich bewusst das Icon Scott verwenden, nur um Ihnen zu zeigen, wie einfach es ist, n zu verwenden, dass Sie all diese finden können tolle Ikonen da. Also lasst uns hier mit dreistufigem Politur weitermachen. Mal sehen. Und mal sehen, was wir tun können. Unsere Vorteile positionieren sie an der Spitze. Schauen wir mal von hier nach, vielleicht können wir es 64 geben, so. Wählen Sie dann alle unsere Inhalte aus und bewegen Sie sie wie folgt in die Mitte. Da haben wir's. Und ich kann das alles gruppieren und es Vorteile sind solche Vorteile nennen . Und jetzt gehen wir direkt zu unserem Kontaktformular über. Wenn ich Sie hierher zurückbringe, falls Sie sich erinnern, haben wir Kontakt mit uns und dann werden wir vielleicht, mal sehen, wie viele Felder haben , wo wir insgesamt fünf Felder haben können. Also vielleicht kann man das hier verbringen und ihm einen Namen geben. Dann können wir zwei davon für E-Mail, Telefonnummer und dann eine für die Nachricht haben und dann eine für die Nachricht und schließlich eine Schaltfläche für Sandnachricht oder so etwas. Also lass uns genau das tun. Lassen Sie uns zunächst diesen auswählen und hier einfügen und ihn genau hier und ihn genau hier bewegen, ihn hier positionieren und sicherstellen, dass wir 200 sind. Ich finde es einfach toll, wie XD dir diese Positionierungsoptionen sofort bietet . Es ist also ziemlich einfach zu tun. Und für unsere Felder verwenden wir ganz einfach ein Rechteck wie dieses. Und nennen wir dieses Eingabefeld so. Und für die Eingabefelder selbst können wir vielleicht sehen, wie eine weiße Farbe verwendet wird, was meiner Meinung nach bereits verwendet wird. Ja. Also weiße Farbe. Und schauen wir uns bei Demenzerkrankungen an, wo wir mit 60 hingehen können. Ich denke, es wird ganz gut funktionieren. Weg mit der Grenze und ohne Radius. Gehen wir also einfach mit quadratischen Einsen und drücken wir T und geben z. B. den vollständigen Namen ein. Vollständiger Name. Und für diesen Text wird Textblock verwendet. Vergewissere dich, dass es genau hier ist. Und was den Abstand angeht, können wir vielleicht mit 16 weitermachen. Ich denke, es wird ganz gut funktionieren. Also so etwas wie dieses Control D , um es ungefähr hier zu positionieren. Und dann schauen wir mal , vielleicht können wir für diesen Text Absatztexte verwenden. Da hast du es. Und gib deinen vollen Namen ein. Und stellen Sie sicher, dass wir hier links liegen. Wir haben hier die Lunge zurückgelassen. Und von hier aus können wir in der Mitte positioniert werden. Und dann können wir für die Entfernung mit 16 gehen. Also lass uns mit Schicht 121234 weitermachen. Wenn ich also auf jeder Seite meine Alt- oder Wahltaste gedrückt halte, kannst du die Entfernungen sehen. Wenn ich also hier den Mauszeiger bewege, können Sie sehen, dass wir 17 von oben und unten sind , und hier sind wir 16 von dieser Seite. Also, was ich hier machen kann, ist dies und das ausgewählt, und mal sehen, vielleicht kann ich es Inputs nennen. Sehen wir uns die Steuerung G an, um sie zu gruppieren und sie Eingänge zu nennen. Und dann verschiebe den vollständigen Namen direkt darunter. Und das kann benannt werden, vielleicht ein Name. Da hast du es. Was ich tun kann ist Control D zu drücken, um es zu duplizieren. Und schauen wir uns für die Positionierung an, vielleicht kann ich hier 32 Abstand haben. Also so etwas wie das. Anstelle von FullName haben wir hier eine E-Mail. Und hier gebe ich deine E-Mail ein. Wir haben also bereits den Inhalt, wir haben eine Struktur, wir haben alles, aber wir werden diese Elemente einfach umbenennen. Das wird also eine E-Mail sein. Und in Bezug auf die Breite wird es nicht die volle Breite sein. Es wird sechs Spalten breit sein, denn denken Sie daran, dass wir 12 Spalten in voller Breite haben. Also 123456, los geht's. Das ist also unsere E-Mail. Und was ich in diesem Fall tun kann, ist diese beiden zu einer Gruppe zusammenzufassen. Vielleicht zeigst du dir einfach ein bisschen wie Responsive Design später funktionieren wird. Das können also E-Mail und Telefon sein. Und lassen Sie uns diesen duplizieren. Steuere D und positioniere es hier. Es berührt also den Rand. Da haben wir's. Und das kann Telefon sein. Wählen Sie Telefon, Bücher ein. Und anstatt deine E-Mail-Adresse einzugeben, gib vielleicht deine Telefonnummer so ein. Und was wir schließlich brauchen, ist, dass wir ein größeres brauchen. Also werde ich diese eine Position bei 30 verwenden, um sie nach unten zu bewegen. Das wird eine Botschaft sein. Und geben wir ihm so etwas wie eine Nachricht. Und tippe. Schreiben Sie hier Ihre Nachricht. So etwas. In Bezug auf die Höhe wird es etwas höher sein als diese beiden, nur weil wir unseren Benutzern genügend Platz bieten wollen, um eine Nachricht zu schreiben, die sie wollen. Also geben wir ihm etwa 171. Ich denke, es wird ziemlich gut werden. Lassen Sie uns abschließend unsere Komponente für die Hauptschaltfläche hinzufügen. Ziehen Sie es hinein und legen Sie es ab, stellen Sie sicher, dass wir 32 sind. Da haben wir's. Und hier haben wir wieder diesen ganzen schwarzen Diamanten, was bedeutet, dass wir eine untergeordnete Komponente verwenden. Und hier schreiben wir Senden, Nachricht. Da hast du es. Platziere es hier. Sie können sehen, dass wir keine feste Größe für den Button haben. Das wollte ich eigentlich. Gehen wir also zu unserem Horrorzustand. Drag-and-Drop im Standardzustand. Da hast du es. Also 32. Und jetzt denke ich, dass alles gut positioniert ist. Und lassen Sie uns alle gruppieren indem Sie Strg oder Command G Nennen wir es Kontakte oder einfach Formular, denn so heißt es auch in Webflow. die Distanzierung angeht, können wir uns für Was die Distanzierung angeht, können wir uns für 64 entscheiden, denn das ist es, was wir während unserer gesamten Begierde verwenden. So wie. Da hast du es. Jetzt, da wir unser Formular haben, geben wir statt unseres Angebots Kontakt ein. Dieser Abschnitt ist abgeschlossen. Lass es uns gruppieren, nenne es Forum. Und drücken Sie sofort Control K, um es in eine Komponente zu verwandeln. Denken Sie daran, dass wir es in unserem gesamten Design verwenden werden , auch in diesem nächsten Abschnitt mit dem Titel Wo wir sind und der Fußzeile. Und genau das werden wir als Nächstes angehen, denn wir haben dieses Video bereits 13 Minuten hinter uns. Also lass uns hier auf Pause klicken und lass mich dich im nächsten Video sehen , in dem wir diese beiden Abschnitte erstellen werden. 139. Homepage-Design Teil 4: Lass uns nun mit dem nächsten Abschnitt fortfahren , der für die Karte sein wird. Und als Erstes, lassen Sie mich hier ein schnelles Rechteck zeichnen , ungefähr so. Mal sehen, 246, vielleicht sieben. Also so etwas, 2467. Da hast du es. die Höhe angeht, können wir vielleicht fünf oder sieben nehmen. Lassen Sie mich die Randfarbe entfernen, um so zu mappen. Und lassen Sie mich eine schnelle Karte hineinzeichnen, die die Karte des Ortes ist, den ich ausgewählt habe. Und natürlich können Sie weitermachen und einen anderen Standort wählen. Du kannst hier machen, was du willst. Aber ich werde einfach diesen benutzen. nun den Text im Inneren angeht, Was nun den Text im Inneren angeht, werde ich diesen verwenden. Steuern Sie also C, Strg V und positionieren Sie es einfach hier, stellen Sie sicher, dass es so links ausgerichtet ist, und bewegen Sie es ganz nach unten. Und hier gebe ich ein , wo wir sind. Control D. Und dieser wird ausgefallen sein. Und es wird auch ein Textblock sein , weil wir ihnen hier etwas mehr Informationen darüber geben wollen hier etwas mehr Informationen darüber wo wir sind und was sie erwarten können. Also habe ich unseren Showroom besucht um Ihr Auto für ein kostenloses Bewertungsangebot mitzubringen. Wenn sie also diesen Teilaustausch zwischen den genannten Personen durchführen wollen , können sie das genau hier tun. Fügen wir das auf 24 ein. Platziere es ungefähr hier. Da hast du es. Und jetzt lassen Sie mich vielleicht diese Textposition hier unten duplizieren . Ich werde sehen, Absatz - und Stichwortadresse verwenden . Das wird unser erster Abschnitt sein. Und schieb es genau hier hin. Lassen Sie mich mein Symbol auswählen und es hier einfügen. Und bevor ich weitermache, lassen Sie mich es sofort auswählen und Strg K drücken, um es in eine Komponente zu verwandeln. Und lassen Sie uns das auf, sagen wir, 16 bringen. Ja, ich denke, das wird ganz gut funktionieren. Da hast du es. Stellen Sie sicher, dass Sie diese gruppieren, stellen Sie sicher, dass Sie einen Stapel platzieren und stellen Sie sicher, dass Sie ihm einen Namen oder eine Adresse geben. So etwas. Mal sehen, das ist in Ordnung. Bring das hier runter. Und von hier aus können wir statt 24 noch einen Schritt weiter gehen und mit 32 gehen. Und die Adresse werden wir diesen Text noch einmal verwenden. Also Control C, Control V, positionieren Sie es hier und stellen Sie sicher, dass es linksbündig ist. Es ist direkt unter unserer Adresse. Und lassen Sie mich doppelklicken und die Adresse kopieren und einfügen. Natürlich kannst du deine benutzen. Das ist natürlich die Vorstellung eines Vertrauens für die Zwecke dieses Kurses, aber Sie können verwenden, was Sie wollen. Also hier gehe ich mit 16 und lass uns mit der Adresse gehen. In diesem Fall schalte ich jetzt den Stapel ein , der vertikal sein wird und 16 sein wird. Es wird also viel einfacher für mich sein , all diese anzupassen. Dann lass uns mit Control D hier zu 24 gehen, kontrolliere die Breite 24. Und das wird ganz unten sein. Das wird in der Mitte sein. Das letzte Mal werden die Öffnungszeiten sein. Und dieser zweite wird gefunden werden. Lassen Sie mich dazu den Inhalt sehr schnell aus dem ursprünglichen Design kopieren . Wir können ein bisschen schneller weitermachen und los geht's. Telefonnummer, nur eine zufällige Telefonnummer, die Sie wählen können. Noch einmal, was auch immer es Ihnen passt, dann Öffnungszeiten. Okay, und lassen Sie uns das zum Schluss zeigen, denn Sie möchten, dass Ihre Benutzer wissen, wann Sie geöffnet haben, an Feiertagen wieder öffnen oder am Samstag oder Sonntag öffnen. Arbeitest du vielleicht in einer anderen Zeitzone oder was auch immer. Also musst du ihnen das immer sagen und ihnen diese wertvollen Informationen geben. Also werde diesen los, Control K, um daraus eine Komponente zu machen. Und ich gebe dem den Namen Öffnungszeiten. Da hast du es. Und schließlich bleibt uns die Telefonnummer. Also lass uns gleich mit Foreign loslegen. Also Control C, Control V und wähle das aus. Und lassen Sie mich mein Telefonsymbol auswählen. Da hast du es. Wo es ist. Da ist es. Achte darauf, dass es in der Mitte über meinem Text steht. Ich drücke Control K. Es wird es dort gut positionieren . Aber ich kann diesen Text auch in einen Stapel verwandeln. Wählen Sie also alle meine Texte aus, Control G. Und was ich tun kann, wird vielleicht Dislokationsinhalt genannt. Lokalisieren Sie den Inhalt, zentrieren Sie ihn so mit meiner Karte. Und Standortinhalte werden in einen solchen Stapel umgewandelt . Es wird unterschiedliche Werte haben, weil 24 hier, 32 hier, es spielt keine Rolle. Das Wichtigste ist, dass wir daraus einen Stapel machen. Und lassen Sie uns das gruppieren und nennen. Mal sehen, wo wir sind. Und schließlich klicken Sie auf Control K. Denn wir werden diesen Inhalt erneut in unserem gesamten Design wiederverwenden . Stellen Sie sicher, dass wir 200 von hier entfernt sind. Da gehst du von diesem Button aus. Und schließlich müssen wir im letzten Abschnitt , der noch übrig ist, diese Fußzeile erstellen. Also lass uns genau das tun. Ich nehme mein Navi, benutze mein Logo Control C und zoome hier ein bisschen hinein, drücke Control V. Los geht's. Vergewissere dich, dass es in der Mitte ist, schneide es ganz nach unten. Weil es in Erinnerung bleiben wird, befindet sich das Logo in der Mitte. Auf der linken Seite haben wir Social-Media-Symbole. Auf der rechten Seite haben wir unser Navi. In Bezug auf die Navigation klicken Sie auf die Navigationselemente Control C. Das ist also der springende Punkt von Adobe XD. All diese Tools, Sie möchten in der Lage sein , all Ihre Elemente wiederzuverwenden denn was ist der Standpunkt? Ich wähle sie immer und immer wieder aus. Lassen Sie mich diese sozialen Symbole verwenden, die bereits in meinem vorherigen InDesign erstellt wurden. Und es wird auch die Komponenten einfügen, was ich nicht unbedingt will, aber lass es uns einfach so belassen. Wir haben also soziale Symbole und wir haben den Standardstatus, nämlich diese dunkelgraue Farbe. Wir haben den Schwebezustand, der natürlich der Schwebeeffekt für unsere Schwebefarbe für unser Design ist . Was wir also für jeden Hover tun können, wir einfach sicher, dass wir hier dieselbe Farbe anwenden. Unser Schwebeflug. Verwenden wir also die Hover-Farbe. Stellen Sie sicher, dass wir es auswählen. Mal sehen. Warum ist es, ist es nicht darum, also dieses Rechteck auszuwählen, was auch immer es ist, und mal sehen, Mauszeiger, verwenden Sie diese Farbe, verwenden Sie diese Farbe, verwenden Sie diese Farbe. Und schließlich, für diesen Gebrauch, verfärbt. Da hast du es. Also funktioniert alles wie es sollte. Ich habe diese Icons erneut aus diesem Plug-In namens Icon Scout übernommen. Und wenn ich ein bisschen runter zu meinen Downloads scrolle, glaube ich. Und Papa schon. Also hier kannst du all diese Icons sehen. Lass mich also zurück zu meinem Ebenen-Panel wechseln und all diese auf diese Weise in ihren Standardzustand bringen . Und so. Lassen Sie uns das abschließend hier positionieren. Und was ich vielleicht tun möchte, ist, sie von unserem Logo auf 64 zu bringen. So etwas. 64, los geht's. Unter dem Logo. Und eine letzte Sache , die ich tun möchte, ist den Text unten umzudrehen. Geben wir also so etwas wie einen Textbereich ein. Und wir werden dafür Absatztext verwenden und lassen mich den Text kopieren und einfügen, was nur einige grundlegende Informationen über das Unternehmen sein wird . Und du kannst sehen, okay, reserviere als Teil exklusive Autos 2023 und wir werden den gleichen Abstand haben. Also von hier aus, schauen wir mal, ich halte Alt drei gedrückt. Mal sehen, was wir hier tun können. Mal sehen, vielleicht können wir es auf 64 erhöhen. Da hast du es. Jetzt, wo das erledigt ist, verschieben Sie es nach unten und gruppieren Sie alles , nennen Sie es Fußzeile. Fußzeile. Da haben wir's. Und lassen Sie uns die Fußzeile von hier auf 200 verschieben. Und zum Schluss noch eine letzte Sache, die ich tun möchte. Und eine nervige Sache in XD ist, dass ich meine Grafikkarten am Ende nicht schließen kann. Also muss ich genau hier doppelklicken, klicken und ziehen und einfach so messen. Es ist also ein bisschen Zeitverschwendung, aber was kann man tun? Es ist nur eine kleine Salbung aller Softwaregewohnheiten. Und das ist der in XD für mich. Also, wenn ich es 64 auswähle, los geht's. Bevor ich zur nächsten Seite übergehe, möchte ich eine Vorschau dieser Seite sehen und in diesem Teil des Kurses erläutern, was wir bisher gemacht haben . Wir haben also unsere Navigation oben, wir haben die Karten, Kredite kontaktieren uns. Wir haben unsere Hero-Sektion, Ihren Partner für exklusive Autos der ihnen sofort sagt, was Sie sind, was Sie tun und für wen dies dazu gedacht ist , Gebrauchtwagen mit niedrigen Kilometerstand und dokumentierte Geschichte. Also erzählen wir ihnen von unseren Autos, was sie sind, erkunden unsere Autos, damit sie dort klicken und zur Kursseite gehen können , wie wir es bereits erwähnt haben. Dann ein bisschen über uns, glückliche Smiley-Leute. Und in der exklusiven Location haben wir unsere exklusive Auswahl mit einigen Karten, die gleich aussehen. Wir haben alle Autos, also haben wir hier alle Elemente und Informationen, wie den Namen, den Preis, Produktionsjahr und die Anzahl der Kilometer, die das Auto hat. Seal Cars führt Sie erneut zum Kursbereich, wo wir erweiterte Garantie-, Wartungs- und Leihangebote anbieten. Ich könnte Seelenfrieden oder Vorteile haben. Also, wenn Sie ein Auto über uns kaufen, was erhalten Sie. Sie erhalten also eine kostenlose Lieferung, dreistufigen polnischen Parteiwechsel, sodass Sie Ihre alte Karte an sie verkaufen können und sie einen Teil des Umtauschs erhalten haben. Dann haben wir das Kontaktformular, was wirklich wichtig ist. Wir haben die Nachricht geschickt, wo wir sind, also unseren Standort und noch einmal wichtige Informationen hier, also adressiert für Nummer, Öffnungszeiten. Und schließlich haben wir die Fußzeile mit all diesen funktionierenden Links. Und dann haben wir in diesen Symbolen, dieses YouTube-Symbol nervt mich und es funktioniert aus irgendeinem Grund nicht , aber es spielt keine Rolle. Wir werden es später in Webflow beheben. Und das ist im Grunde alles. Das war's für den Designteil der Homepage. Im nächsten Video gehen wir zur Seite Autos über und wir werden uns etwas eingehender mit diesen Karten befassen. Wir werden acht davon haben und sie ein bisschen gleichmäßig positionieren. Und ich werde Ihnen zeigen, wie gut es all diese Komponenten gleichermaßen wiederzuverwenden. Navigation, wie ein Kontaktformular Über uns und eine Karte und die Fußzeile unten. Also ich sehe dich im nächsten Video, wenn wir mit unserem Design fortfahren werden. 140. Cars Page Design: Gehen wir nun zur Kursseite über und machen dort weiter, wo wir aufgehört haben Ich zeige Ihnen, wie Sie einige der genannten Elemente wiederverwenden können . Also hier sind wir in unserem Design und was ich machen werde, ist ziemlich einfach. Wählen Sie einfach meine gesamte Zeichenfläche aus, drücken Sie Strg-D und kommen Sie direkt hierher. Und statt Homepage geben Sie Autos ein. Nun zum aktuellen, was wir wollen, ist, dass diese Seite ausgewählt ist, falls Sie sich erinnern. Wenn ich also meine Autos auswähle, haben wir nur ausgewählt, um einem Benutzer zu zeigen, dass wir uns auf dieser Seite befinden. Wenn ich also genau hier klicke, kannst du sehen, dass ich nicht mehr mit der Maus zeigen kann, aber ich kann hier und hier schweben. Es zeigt nur an, dass wir auf derselben Seite sind. Also, wir werden für diesen Abschnitt tun, das loswerden , und diese Abschnitte loswerden, ungefähr so. Und was ich tun werde, ist, das hier ein wenig zu verschieben weil wir alle Autos vorgestellt haben. Wir müssen nicht die Schaltfläche „Alle Autos“ sehen und wir werden es einfach los. mich zunächst Lassen Sie mich zunächst diesen Text auswählen, Strg C drücken und diesen Inhalt einfach hier wiederverwenden. Anstatt linksbündig zu sein, stellen wir sicher, dass es in der Mitte wie folgt ausgerichtet ist. Und lassen Sie mich die Texte auswählen. Ihr Partner für exklusive Autos. Es ist also nur derselbe Text wie hier. Und was den Abstand angeht, können wir ihn vielleicht 40 von oben positionieren. Also Schicht 1234, weil wir wollen , dass es ziemlich nah an der Spitze ist, also so. Und natürlich möchten Sie, dass es direkt unter unserer Navigation ist. In Ordnung? Also hier ziehe ich einen schönen Kreis in den Hintergrund. Um das zu tun, können Sie natürlich Ihren Kreis so verwenden und ihn in der Mitte positionieren , den Rand in Bezug auf Farben entfernen. Verwenden wir Hauptblau, weil das unsere Firma ist Farbe in diesem Fall. Lassen Sie uns mit den Abmessungen 300 mal 300 gehen. Vielleicht. Vergewissere dich, dass es in der Mitte ist und schiebe es von unserem Text nach unten. Vielleicht können wir es sogar hierher schieben. also direkt unter unseren Texten sicher, dass es sich in der Mitte befindet. Etwas ist mit diesem Text nicht ganz gut. Also, wenn ich es hier positioniere, nein. Okay, vielleicht ist es ein XD-Buck. Lass uns jetzt weitermachen und ich werde mein Bild von meinem Auto hierher ziehen und dort ablegen. Auch hier habe ich Envato Elements verwendet. Es ist das Modell, das ich erwähnt habe. Und dieses Auto ist im Grunde einfach aus diesem Modell herausgeschnitten. Was ich in diesem Fall tun kann, ist vielleicht etwas größer zu positionieren, vielleicht 300 oder so etwas, damit wir eine schöne gerade vielleicht 300 oder so etwas Zahl haben. Und von hier aus kann ich es vielleicht leicht hierher schieben, vielleicht irgendwo hier. Und ich möchte nicht wirklich in der Lage sein , den Kreis unten zu sehen, die Positionierung des zu zitieren funktioniert ganz nett, wie Sie sehen können, da dieser transparent ist, wird immer noch die Positionierung des zu zitieren funktioniert ganz nett, wie Sie sehen können, da dieser transparent ist, wird immer noch Kreis im Hintergrund, aber wir werden den Kreis hier nicht haben , er wird uns nur diesen schönen Effekt geben, wenn wir wollen. Und schließlich möchte ich für diesen Abschnitt vielleicht 100 erhöhen. Sehen wir uns also etwas wie 100 an, weil wir diesen Abschnitt immer noch über dem Fehler sehen wollen . Wenn Sie also noch einmal eine Vorschau sehen können, können wir diesen Abschnitt immer noch sehen. Und in diesem Abschnitt wollen wir diese Karte verwenden, Karte, Karte drücken, Control C drücken, genau hier springen und unsere Auswahl öffnen und Control V eingeben, ungefähr so. Platziere es nach unten. Und was es für den Abstand tun kann , ist, dass ich ihm vielleicht 32 geben kann. Also 32, 32, los geht's. Und was Sie tun können, ist diese drei auszuwählen, G zu drücken und ihnen die oberste Reihe zu geben. Da hast du es. Hier in diesem , weil dies keine Komponente ist und das hier der entscheidende Teil ist, denn wenn es eine Komponente wäre, muss ich nachbilden , was ich für diese drei Komponenten getan habe. Ich erstelle den ursprünglichen Zustand, erstelle den Horrorstatus und ändere dann den Text für jeden von ihnen innerhalb jedes dieser Zustände. diesem Grund ist es nützlich, diese Karte und den Standby-Modus ohne Komponenten zu haben diese Karte und den Standby-Modus ohne Komponenten , sodass Sie Ihre Elemente einfach links, rechts und mittig austauschen können , ohne zu unterbrechen. Und dann können Sie zusätzlich zu den Schulden Komponenten erstellen. Wenn wir also zurück zu hier gehen und mich das einfach duplizieren lassen, also Control D oder noch besser, ich kann hierher gehen. Irgendwas stimmt momentan nicht ganz mit meinem XD. Das tut mir so leid. Da haben wir's. Das wird also unsere oberste Reihe sein. Noch einmal. Das wird unsere mittlere Reihe sein. Da hast du es. Und ich werde meinen Stack einschalten. Ich kann auch hier den Stapel von 38 einschalten. Also lassen Sie uns diese beiden duplizieren. Und geben wir 38 an , denn das ist der Abstand zwischen unseren Säulen. Drücken Sie erneut D und positionieren Sie es so, dass es unten ist. Denken Sie daran, dass wir acht Autos haben, also werden wir 32 sein und das letzte loswerden. Das wird also unsere unterste Reihe sein. Da hast du es. Und schließlich ist es jetzt an der Zeit, dass wir all diese Informationen hinzufügen. Was die Information angeht, was ich tun möchte, ist, dass dies Tesla sein wird, und nennen wir es sofort todlos. Aber lassen Sie uns zuerst die Informationen kopieren , das wird auf diese Weise viel einfacher. Das Autojahr wird also 2021 sein, das ist in Ordnung. Und die Laufleistung wird 40.000 km betragen. Nennen wir es also Tesla. Der nächste wird Porsche sein. Und dieser letzte wird McLaren sein. Also für den Porsche kann ich wählen und ich habe gepusht. Das wird der Preis sein. Offensichtlich. Wenn Sie ein solches Design machen, möchten Sie sicherstellen, dass Sie Ihre Preise gleichmäßig positionieren , da McLaren natürlich viel teurer sein wird als der Porsche, z. B. und Tesla. Sie möchten also sicherstellen , dass Sie diese Preise und all diese Elemente entsprechend der Verschuldung auswählen . Es wird also ziemlich wenig Kilometerstand sein. 2020 ist das Jahr. Da hast du es. Was ich sofort tun kann, ist meine Bilder zu verwenden. Also McLaren Nummer drei. Und denk dran, ich verwende Nummer drei für alle. Porsche Nummer drei. Das wird also Porsche Cayenne sein und endlich Tesla Model X. Los geht's. Bevor ich zu diesen übergehe, drücken wir Control K, Control K, Control K, um sie in Komponenten zu verwandeln. Und lassen Sie uns mit unserem Status fortfahren, nennen Sie es Hover, wählen Sie Control C. Und ich werde dasselbe für hier tun, also bewegen Sie den Mauszeiger auch für diesen. Was ich in ihrem Nachlass tun werde, ist einfach mein Aquarell auszuwählen und es auf 100 zu bringen. Mach das Gleiche hier. Bringen Sie es auf 100 und machen Sie dasselbe hier. Also bring es auf 100. Und wenn ich jetzt zu Standard, Standard, Standard wechsle , geht es zurück. Lassen Sie uns abschließend mit diesen letzten beiden Karten befassen, und diese letzte wird Cadillac sein. Nennen wir es so. Also Cadillac oder noch besser TSV anschauen, weil wir schon einen Cadillac oben drauf haben. Dieser wird etwas billiger sein. Vielleicht wird das Jahr im Rahmen des Teiletauschs, den ich erwähnt habe , 2019 sein. 2019. Da haben wir's. Und die Laufleistung wird ziemlich hoch sein. Der Kilometerstand wird aufgrund des Produktionsjahres 2021 sein und es wird ein Range Rover-Evoke sein. Und zum Schluss bringen wir das hier her und die Kilometerzahl wird in diesem sein. Da hast du es. Also geben wir dem den Namen. Nehmen wir an, die Stadt ist drei. Das wird ein Bereich wie dieser sein. Und lassen Sie uns endlich die Bilder reinbringen. Was ist der Range Rover USA Nummer drei, Drag-and-Drop-Einblick und für Cadillac, lass uns mit Nummer drei weitermachen, Drag & Drop hineinziehen. Also los geht's. Nachdem wir das alles getan haben, können wir die verbleibenden Abschnitte, über die wir zuvor gesprochen haben, verwenden und sie einfach aufrufen. Wählen Sie also alle unsere verbleibenden Abschnitte aus , schieben Sie sie hierher und stellen Sie sicher, dass wir 200 von hier entfernt sind. Etwas wie das hier. Ich denke, es wird ganz gut funktionieren. Jep. Und das ist im Grunde alles. Alles was wir tun müssen, ist das einfach zu schließen. Und wenn du dich erinnerst, hasse ich diese Funktion von x dy einfach . Aber was kannst du tun? Weil ich das manuell machen muss, musst du nicht. Du kannst sie einfach so lassen, wie sie sind, weil es nicht wirklich wichtig ist. In Webflow legen wir die Obergrenze für den Abstand unten für den Rand fest. Und es wird diesen Rand auf jeder Seite respektieren. Es ist also viel, viel einfacher in der Entwicklung als InDesign, aber trotzdem einige. Hier haben wir unsere Brücke. Wenn ich also meine Kursseite auswähle, bring dich auf den neuesten Stand. Auch hier haben wir Autos ausgewählt, Kredite und kontaktieren Sie uns. Für exklusive Autos können wir immer noch den Mauszeiger bewegen. Da hast du es. Jetzt haben wir dieses Bild mit einem schönen blauen Kreis im Hintergrund direkt vor unseren Autos. Wir können also auf jedem dieser Autos schweben. Sie können sehen, dass der Hover-Effekt außer bei diesen beiden recht gut funktioniert . Und lassen Sie uns wechseln, damit die Kontaktaufgabe funktioniert, funktioniert, alles funktioniert. Also haben wir vergessen, das hier zu tun. Also lass uns zurückgehen. Control K, control K. Lassen Sie uns das in einen Schwebezustand wie diesen verwandeln. Und lassen Sie uns dieses CSV auch auf Horace State schalten , beim Hover. Ich werde diese hintere Randfarbe auf 100 bringen . Und auf dem Range Rover, mal sehen, Aquarell bis 100. Da haben wir's. Lassen Sie uns sie wieder auf die Standardeinstellungen zurücksetzen. Standardmäßig. Und lassen Sie uns noch einmal eine Vorschau unserer Seite anzeigen. Schauen wir uns Autos und Kredite an. Kontaktieren Sie uns. Alles funktioniert gut. Da haben wir's. Und lassen Sie uns jetzt den Mauszeiger darüber bewegen. Es hat eine kleine Verzögerung beim Schweben, aber mach dir darüber keine Sorgen. Wir werden das in Webflow beheben, damit wir nicht zu viel Zeit mit dem Design selbst verschwenden . Schließlich möchte ich das einfach nach oben treiben. Nennen wir also den VG-Kreis dieses Autos. Und ich werde das hier positionieren. Und vielleicht gib dem einen Namen Werbebereich oder Autos für fast den Abschnitt, so etwas. Dann haben wir unsere Auswahl und wir haben all unsere anderen Elemente. Also los geht's. Das ist unsere Seite für dieses Video. Im nächsten Schritt entwerfen wir eine Seite mit den Debitkartendetails Ihre Benutzer tatsächlich auf eine dieser Karten klicken, um sie zu öffnen und mehr über das betreffende Auto zu erfahren. Und genau das werden wir im nächsten Video angehen. Also werde ich dich dort sehen. 141. Car: Lassen Sie uns nun fortfahren und die Detailseite des Autos oder das ausgewählte Auto erstellen , wie auch immer Sie es nennen möchten. Gehen wir zurück zu XD. Und was ich gleich tun werde, ist, anstatt diesen zu duplizieren, werde ich den Helden auf der Homepage duplizieren , weil ich diesen Abschnitt wiederverwenden werde. Nennen wir es also z.B. ausgewähltes Auto. Da hast du es. Innerhalb der ausgewählten Karte werde ich einige dieser Abschnitte noch einmal entfernen. Klicken Sie also auf Löschen und löschen. Ich werde diesen behalten, löschen, löschen und ich werde all diese Abschnitte behalten. Was ich als Nächstes tun möchte, ist vielleicht, mal sehen, vielleicht können wir das etwas reduzieren um vielleicht 200 Entfernungen zurückzulegen. Da hast du es. Und was ich tun werde, ist einfach meine Zeichenfläche stark nach unten zu erweitern , weil wir hier etwas mehr Platz zum Arbeiten haben werden . Also, was ich jetzt tun werde, ist ein Auto zu wählen. Vielleicht kann ich vielleicht einen Range Rover wählen oder so etwas. Was wir in diesem Fall also tun können ist, dass wir das zweispaltige Layout erstellen werden. Eine Spalte wird den gesamten Inhalt enthalten. Es wird also Bilder haben, es wird eine Übersicht, eine Beschreibung und Informationen zu den Fahrzeugspezifikationen geben. All das Zeug wird links und rechts sein, wir werden diese Karte haben, die ein Sticky-Layout haben wird, das von oben nach unten folgt. Sobald wir tatsächlich mit dem Scrollen auf dem Desktop oder auf dem Handy beginnen, wird es umgeschaltet und es zum Ende dieser Seite kommen. Und genau das werden wir jetzt schaffen. Wenn wir Sie also wieder hierher zurückschalten, haben wir das zweispaltige Layout. Also lass uns anfangen, damit zu arbeiten. Jetzt ausgewählt. Nun, lassen Sie mich tatsächlich anfangen, einige dieser Bilder zu erstellen. So etwas positionieren. Denn wenn wir es hier nehmen, können Sie sehen, dass wir ein Bild haben und darunter haben wir vier verschiedene Bilder. Und dann scrollt die Karte auf und ab und sie wird etwas später klebrig im Webflow positioniert . Also lass uns Schulden machen. Lassen Sie uns das wirklich schnell erstellen. Also für dieses erste Bild kann ich ihm einen Namen geben: Bild, Eins, Hauptbild oder etwas Ähnliches. Und mal sehen, vielleicht können wir ihm 8,4 Spaltenbreiten geben. Also so etwas wie das. Wir können also genau hier ein vierspaltiges Layout haben. Da hast du es. Und was die Größe angeht, nehmen wir, ich weiß nicht, 437, so etwas. Lassen Sie uns den Rand loswerden und lassen Sie mich hineinspringen und mein Bild sofort positionieren. Das wird also das Bild Nummer eins sein. Also lass mich es per Drag & Drop hineinziehen. Da hast du es. Und was den Abstand von oben angeht, können wir vielleicht wieder mit 40 gehen, also ungefähr so. Und konzentrieren wir uns jetzt auf diese Bilder, denn wir haben acht Spalten. Jetzt. Vier der Bilder, jedes von ihnen könnte zwei Spalten breit sein. Also lass uns das machen. Lass uns das duplizieren. Was den Abstand angeht, können wir mit 24 gehen. Ich denke, es wird ganz gut werden. Und lass es uns bis hierher bringen. Und das wird Bild Nummer zwei sein. Lassen Sie uns es innerhalb einer Gruppe positionieren und es Autobilder nennen. Geben wir ihm einen Stapel. Wir können es ein bisschen besser organisieren. Und mal sehen, was die Entfernungen angeht, mal sehen, was wir haben können. Also vielleicht hier oder was haben wir hier, wenn ich nach unten scrolle und mich nur eine Berührung verstecke, können Sie sehen, dass die Dachrinnenbreite, der Abstand zwischen diesen Säulen, 38 beträgt. Also dieser leere Raum zwischen den blauen Spalten. Und genau das werden wir hier angreifen. Geben Sie also 38 ein. Und wie Sie sehen können, wird es mit der nächsten verfügbaren Spalte übereinstimmen. Das wird also Bild Nummer drei sein, Control D. Es wird eine Bildnummer geben für n control dy dt wird Bild Nummer fünf sein. Da hast du es. Lassen Sie mich jetzt kurz diese Bilder reinbringen. Das werden also zwei sein, das werden drei, das werden vier sein. Und schließlich werden es fünf sein. Und wenn Sie möchten, können Sie natürlich hier auf diese Schaltfläche klicken, die wir meiner Meinung nach nicht erstellt haben. Jetzt wird es hier eine Schaltfläche geben, die dir anzeigt, dass alle Bilder angezeigt werden dir anzeigt, dass alle Bilder angezeigt . Wenn du also darauf klickst, wird es vergrößert und es wird dir ein Lightbox-Layout angezeigt, das wir als XD erstellen. Und es ist ein Standard in Webflow. werden wir also nicht allzu viel Aufmerksamkeit schenken. In Bezug auf dieses Heldenbild. Was ich tun werde, ist genau hier zu klicken und z. B. see einzugeben. Alle Bilder. Verwandle diesen Text in einen Textblock. Da hast du es. Position und ungefähr hier. Und in Bezug auf das Rechteck, das hier verwenden werde, ungefähr so. Wirf den Kessel weg. Und mal sehen. Nennen wir es vielleicht alle Bilder Hintergrund oder Sonnenlicht überhaupt. Hintergrund für Amateure. Da hast du es. Alle Bilder ansehen. Und was die Entfernungen und die Größe angeht, können wir vielleicht 50145145 und dann 50 nehmen. So etwas. Und lassen Sie uns diese beiden gruppieren. Nein, das funktioniert nicht gut für mich. Vielleicht kann ich das eingrenzen und auf einen Absatz reduzieren. Da hast du es. Jetzt funktioniert es viel besser. Wenn ich also sicherstelle, dass sie in der Mitte sind, drücke G und tippe z.B. alle Bilder anzeigen. Und was den Abstand angeht, können wir vielleicht mit 24 weitermachen. Also 12, 123-412-1234. Wir sind also 24 auf jeder Seite. Wenn ich meine Alt-Taste oder Wahltaste gedrückt halte, kannst du sehen, wie das aussieht. Also können wir diese gruppieren, um es Bild eins, Bild eins zu nennen, und wir können es Autobilder nennen, z. B. und jetzt wollen wir unsere Aufmerksamkeit für die Karte selbst auf diese Seite lenken. Ich werde also noch einmal unser Rechteckwerkzeug verwenden und ein schnelles Rechteck zeichnen, ungefähr so. Es wird eine weiße Hintergrundfarbe haben. Und mal sehen, vielleicht können wir die Ecken auf acht umrunden , so etwas. Werde diese Grenze los. Wir brauchen es nicht. Und hier können wir es z.B. Car Sidebar nennen und ihm natürlich einen Namen geben , Sidebar PG-Filme genau hier. Und hier können wir das schaffen, dieses Label, das wir erwähnt haben. Also werde ich den Text erstellen. Lass uns den loswerden. Und gib Saloon ein, was eine Art Auto sein wird. Und ich werde es anwenden, den Labeltext darauf. Da hast du es. Und wir werden den beschrifteten Hintergrund anhängen lassen. Lassen Sie uns also ein schnelles Rechteck erstellen. Nochmals, gib ihm einen Namen. Etikett, BG. Da hast du es. Unter dem Text. Ich werde den Rand entfernen und für die Farbe werde ich tatsächlich die Körperfarbe verwenden. Wenn ich also noch einmal auf Vorschau klicke, kannst du sehen, dass es die Körperfarbe hat und dies die weiße Farbe hat, was es nur unterscheidet und es ein bisschen mehr hervorhebt. Und Sie können unsere Bilder sehen, wie schön sie aussehen. In Bezug auf die Größe von Hintergründen mit Schuldenbeschriftung kann ich also vielleicht die Größe 3034 für die Höhe verwenden. Stellen Sie sicher, dass es zentriert ist. Da haben wir's. Und ich habe ein nettes kleines Autowissen, also werde ich es einfügen. Und das ist eine Salonikone. Ich werde es sofort in Komponenten verwandeln. Stellen Sie sicher, dass dies eine Position wie diese ist. Und was den Abstand angeht, kann ich es vielleicht auf 16 von dieser Seite aus positionieren. 16. den beschrifteten Hintergrund angeht, Was den beschrifteten Hintergrund angeht, kann ich vielleicht vier für den Eckradius angeben. Also nicht acht, weil dieses Element ziemlich klein ist, dann können die Entfernungen hier vielleicht acht sein. Also lass uns damit weitermachen. Das kann Label, Icon, Label sein, das ich stapeln und so acht werde. Und schließlich, was diese Entfernungen angeht , kann ich diese beiden vielleicht hierher bringen und ihnen eine Entfernung von 16 geben. Also los geht's. Und jetzt haben wir unseren Label-Hintergrund und einen Labelinhalt. Also nenne ich dieses Label und nennen wir es Saloon-Label. Und mal sehen, was wir tun können. Also der Saloon, ich kann Control K drücken Das ist also unser Standardzustand in Bezug auf die Positionierung dieses Labels, vielleicht können es 24 auf jeder Seite sein. Also lass uns mit 24 und dann mit 24 weitermachen. Lassen Sie uns daraus einen Stapel machen , der es ermöglicht die Schulden, die wir morgen schaffen müssen , wieder aufzufüllen. Also muss ich den SUV erstellen und ich muss die Superauto-Symbole erstellen. Was ich also tun kann, ist diese Symbole einfach hineinzuziehen. Schauen wir uns Solu an, Supercar, was nicht dieser Supersportwagen ist. Ich werde es hierher ziehen. Und Geländewagen, ich werde ihn herschleppen. Da hast du es. Was ich also tun kann, ist diese Icons zu verwenden. Drücken Sie Control K, drücken Sie Control K. Los geht's. Und entferne sie einfach von hier. Also hier haben wir den Saloon als Standardstatus. Als Nächstes klicke ich hier, um den SUV-Status innerhalb des vorderen Etiketts anzuzeigen und ihn hierher zu verschieben. Also innerhalb des SUV-Status öffne ich mein Labelsymbol, wähle mein Solute-Symbol aus und mein SUV-Symbol, das ist dieses. Ziehen Sie es einfach per Drag & Drop , bis es blau wird Ich lasse los, es wird bevölkert. Und dann hier, gib es SUV ein. Und weil wir diesen Inhaltsbereich haben, werde ich ihn in einen linksbündigen Bereich verwandeln . Kehren Sie hier zum Standardstatus zurück , wählen Sie meine Texte aus und stellen Sie sicher, dass sie linksbündig sind, sodass sie sich auf die rechte Seite und nicht auf alle Websites erstrecken. Da hast du es. Jetzt SUV, los geht's. Also Standardstatus, mal sehen, 24, 24, das ist okay. Also lass uns, lass es uns einfach so belassen. Und zum Schluss wollen wir einen für das Superauto erstellen. In diesem, geben wir, mal sehen, Supersportwagen ein. Da hast du es. Und statt Saloon suchen Sie einfach das Supercar-Symbol und ziehen Sie es nach oben, bis es blau wird. Lass los. Und wir haben jetzt ein Supercar-Icon, das zwischen Limousine und Supersportwagen wechselt. Es sieht gut aus, aber der SUV ist nur ein bisschen bewegt. Mal sehen, wo wir damit stehen. Also 24, lass uns sehen, ob es uns jetzt gut geht, wir sind es nicht, also müssen wir trotzdem sicherstellen, dass wir hier sind. Also 24 im SUV. Das ist linksbündig, also müssen wir das manuell korrigieren. Aber mach dir keine Sorgen , in Webflow werden wir einfach diesen verwenden. Also in den Geländewagen, ich schiebe ihn einfach hier hin. Da der Range Rover also der SUV ist, wie Sie sehen, sind wir 24 Jahre alt und lassen Sie uns nun beginnen, unsere Textelemente hinzuzufügen. Also zuerst, lassen Sie uns mit dem Namen beginnen. Also ein Range Rover, Voc. Und dieser Text wird H three sein. Also 24, so etwas. Und lass uns sehen, wo es ist. Also genau hier beschriftet. Ich verstehe nicht, warum es nicht angezeigt wird, aber es spielt keine Rolle. Positionieren wir es so. Da hast du es. Und die Entfernungen werden auch 24 sein. Also 24 los, Strg D, um es zu duplizieren. Und dieser wird unser Preis sein. Und der Preis wird einfach das Hauptblau sein. Und wieder einmal, 24 von hier, Control D geschmiert. Dieser letzte wird sozusagen unser Absatztext sein. Und darin können wir zusätzliche Informationen angeben, können wir zusätzliche Informationen angeben z. B. zur Abholung verfügbar. Nun, wenn nicht, wenn es im Transport ist, können wir diese Informationen vielleicht dort ablegen , wenn wir wollen. Aber es kann abgeholt werden. Nun, dann können wir unsere Komponente einfach dorthin ziehen , wo sie sich als Hauptschaltfläche befindet. Da hast du es. Also zieh es. Und was wir tun können, ist sicherzustellen, dass wir 24 Jahre alt sind. So wie all diese anderen Elemente. Hier. Ich kann etwas eingeben wie dieses Auto reservieren. Da hast du es. Und beim Schweben gebe ich einfach auch dieses Auto reservieren ein. Da hast du es. Und jetzt kann ich diesen Button duplizieren. Stell sicher, dass ich 24 bin. Doppelklicken Sie hier. Hoppla, nur einer. Und stellen Sie sicher, dass wir auch von hier aus 24 sind. Wie noch einer. Da hast du es. Und mit dieser Schaltfläche gehe ich tatsächlich zur Komponente Gruppierung aufheben. Und das wird der Hintergrund der Outline-Schaltfläche sein. Innerhalb des Hintergrunds der Gliederungsschaltfläche wähle ich einfach meinen Text aus , der genau hier dieser Text ist. Und ich gebe die Optionen nur C ein. Da hast du es. Und dafür kann ich es gruppieren, es Gliederung oder BTN, Gliederung nennen. So wie es ist. Und die Option C allein wird eine Disk-Farbe haben. Also vielleicht dieses Dunkelgrau oder so. Ja, lass uns Dunkelgrau nehmen. Und der Knopf wird nicht die Füllfarbe haben, aber er wird die Kesselfarbe dunkelgrau haben , ungefähr so. Da hast du es. Drücken Sie Control K, um es in eine Komponente zu verwandeln. Erstellen Sie nun einen Hover-Status dafür. der Innenseite des Covers ändern wir diese Farbe vielleicht h3-Absatz und ändern auch den Rand unseres Buttons in HD-Absatz. Es wird sich also nur ein bisschen mehr differenzieren . Wenn ich das also sehr schnell in der Vorschau sehe, kannst du sehen, dass das funktioniert und es auch funktioniert. Jetzt haben wir diese beiden. Auch hier bleibt Discard oben auf der Seite und es wird nur ein bisschen nach unten gescrollt. Das werden wir also tun. Lassen Sie uns schnell alle unsere Elemente gruppieren. Wählen wir also das Label aus. Range Rover evoke unter dem Labelpreis, der für die Abholung verfügbar ist , als wir unseren Hauptknopf haben. Wir haben eine Button-Gliederung. Los geht's, Carts Sidebar, wähle alles aus, Strg G oder Command G. Und wir nennen dieses Auto Sidebar. Da hast du es. Und stell es direkt hinter mir her. Jetzt haben wir also unsere Bilder und wir können sie z. B. in eine Gruppe, eine Hauptgruppe, einordnen. Drücken wir also Control G und nennen es z. B. Car Content. Angaben zum Fahrzeuginhalt oder zur Autoentzündungskarte. Du kannst es nennen, wie du willst. Ich nenne es einfach Car Content. Und sehen wir uns 24 auf jeder Seite an. Vielleicht kann ich diesen Button sogar verlängern. Was ich in diesem Fall tun kann, wird vielleicht auf B24 ausgedehnt. Aber um das zu tun, muss ich die Gruppierung dieser Komponente aufheben. Lassen Sie uns zuerst mit diesem befassen. Mal sehen, wo wir sind. 22, 24, los geht's. Und wenn ich zum Hover wechsle, sich das geändert, weil ich die volle Breite dieses Elements verwenden wollte , weil es später in Webflow so aussehen wird . Und für diesen können wir sehen, die Gruppierung aufheben, gruppieren, ihn Main Btn nennen und ihm vielleicht eine Klasse von groß oder so geben, Control K drücken. Dann erweitern Sie es so, dass es passt das und kreiere einen netten kleinen Horace State. Nennen Sie es schweben innerhalb des Horror-Zustands. Oder wir müssen einfach die Farbe des Hovers ändern und ihn wieder auf die Hauptmilchziege umstellen. Und jetzt, in der Vorschau, haben wir etwas mehr Platz hier auf unserer Karte. Wenn ich also den Mauszeiger bewege, können Sie sehen, dass die Informationen etwas lesbarer aussehen als zuvor. Also werde ich das Video hier beenden. Und im nächsten Video werden wir diesen Abschnitt weiter ausbauen , weil wir hier eine Menge Inhalte haben werden . Da wir also schon 17 Minuten in diesem Video sind , lassen Sie uns dort weitermachen. Also werde ich dich dort sehen. 142. Lightbox: Wenn Sie auf dieses große Bild klicken, möchten Sie alle Bilder sehen können und einfach zwischen ihnen nach links und rechts scrollen. Und genau das können Sie mit Lightbox in Webflow tun. Es ist super einfach zu machen. wird es etwas kompliziert sein Später wird es etwas kompliziert sein, es mit CMS zu verbinden. Aber was das Layout angeht, ist es einfach, weil die Komponente bereits da ist. Aber um so etwas in XD zu zeigen, muss man es entwerfen. Lassen Sie uns also zu XD gehen, um genau das zu besprechen. Also hier sind wir in Adobe XD. Und was ich für diese Seite tun werde, ist, eine völlig andere Seite zu erstellen. Drücken Sie also hier Control D , um diesen zu duplizieren und nennen Sie ihn Lightbox. Wenn es etwas erschaffen will, wenn es an mir arbeiten will. Also versuchen wir es noch einmal. Komm schon. Leuchtkasten. Da haben wir's. Hübsch. Und ich werde diese Bilder einfach wiederverwenden. Von hier aus werde ich die Gruppierung aufheben. Lege die Bilder so oben drauf und werde alles andere wie das los. Dann werde ich es auf die Originalgröße verschließen, die ist diese. Doppelklicken Sie also einfach und reduzieren die Größe auf etwas wie dieses. Da haben wir's. Also vielleicht 1080 oder so ähnlich. Wenn ich also auf Vorschau klicke, kannst du sehen, wie das aussieht. Wir machen eine Schleife. Und dann werde ich das loswerden, alle Bilder wie dieses ansehen. Und vielleicht kann ich diesen sogar loswerden, also die Gruppierung aufheben. Und jetzt kann ich sie vielleicht ein bisschen anders positionieren. In diesem Fall können wir also vielleicht, mal sehen, vielleicht können wir hier einen schönen Hintergrund erstellen. Erstellen Sie also den Hintergrund und lassen Sie uns auch die Gruppierung aufheben. Also die Gruppierung aufheben, das wird ein Leuchtkasten sein. Bg. Da haben wir's. Und ich werde es so positionieren, dass es die volle Breite unserer Zeichenfläche hat. Da gehen wir hin und werden die Grenze los. Und was die Farbe angeht, lassen Sie uns, ich weiß nicht, so etwas nehmen. Vielleicht wurde die Opazität auf vielleicht 80% reduziert oder so. Es ist also ein bisschen transparent. Dann kann ich endlich vielleicht mit der Größe experimentieren. Vielleicht bis hierher. Mal sehen. Die Höhe kann also vielleicht 6609 betragen. Hier, funktioniert gut. Vergewissere dich, dass es in der Mitte ist. Das sieht gut aus. Und was ich hier tun werde ist, weil wir 12345 haben, werde ich mehr erstellen. Also Control D 67.8. Also werde ich meine Range Rover-Bilder suchen. Also Autobilder, lasst uns den Range Rover lokalisieren. Also hier haben wir 12345. Also brauchen wir jetzt sechs. Da haben wir's. Dann brauchen wir sieben. Da haben wir's. Und schließlich brauchen wir Nummer acht. Hübsch. Eine letzte Sache, die ich tun möchte, ist mein X oder meine Kleidung von hier aus auszuwählen und es ungefähr hier zu positionieren. Also mal sehen, wir sind 56, 49. Lassen Sie uns es einfach so bewegen , dass es ungefähr in der Mitte steht, also spielt es für diesen speziellen Fall keine Rolle. Denn auch hier hat die Lightbox ihren eigenen Bestand oder ihr eigenes Layout, dem sie innerhalb von Webflow folgt. Und für dieses Layout brauchen wir vielleicht, es entweder so in der Mitte zu positionieren, was meiner Meinung nach für diesen Fall funktioniert. Was wir auch tun können, ist es vielleicht so auf 64 herunterzufahren . Und vielleicht schiebst du das in eine Mitte zwischen unseren Klamotten und diesen Bildern, gleich los geht's. Eine letzte Sache, die wir jetzt für dieses Layout tun wollen jetzt für dieses Layout ist, einfach eine Verbindung herzustellen. Lassen Sie uns das einfach schnell überprüfen. Da haben wir's. Was ich jetzt tun werde ist, wenn jemand auf dieses Bild klickt, z. B. dieses Hauptbild. Da hast du es. Ich werde in den Prototypenmodus wechseln . Klicke und ziehe diesen blauen Griff auf meinen neuen Leuchtkasten, unseren Port. Und was ich anstelle des Übergangs mache, ich wähle Overlay, wodurch das einfach auf unserer Zeichenfläche überlagert wird . Animationsfilm. Vielleicht können wir oben oder unten rutschen oder einfach auf Keine klicken. Es spielt keine Rolle. Oder wir können vielleicht „auflösen“ oder etwas Ähnliches wählen, aber lass uns einfach mit keins weitermachen. Und wenn du irgendwo außerhalb dieser Zeichenfläche klickst, bekommst du diesen Gleiteffekt und er verschwindet einfach. Also lass es uns testen. Wenn ich also diese Kunstfläche auswähle und auf Vorschau klicke, können wir nichts sehen, also können wir nach unten scrollen, wir können all diese Dinge erkunden. Aber wenn ich hier klicke, kannst du sehen, dass der Leuchtkasten einfach an seinem Platz einrastet. Und natürlich kannst du diese Komponente anpassen, aber wir werden nicht zu viel Zeit mit diesem Video verschwenden . Sie können natürlich hinzufügen, wenn ich auf dieses Bild klicke, wird es durch dieses Bild ersetzt. Wenn ich darauf klicke, wird dieses Bild durch dieses Bild ersetzt, aber ich muss eine riesige Komponente mit acht verschiedenen Zuständen erstellen . Status eins wird also als Nummer eins abgebildet, Zustand zwei wird als Nummer abgebildet, um drei zu bleiben und so weiter und so weiter. Aber ich will euch nicht zu sehr langweilen. Was hier wichtig ist, ist, wenn ich genau hier klicke, wird es einfach verschwinden. Also kann ich jederzeit zurückgehen und hier klicken, es wird angezeigt. Aber wenn ich genau hier klicke, verschwindet es und ich werde dorthin zurückkehren. So einfach ist es diese Lightbox-Komponente zu erstellen. Klicken wir bei unserem Design und dem, was wir erstellen können, auf Speichern. Als nächstes kommt vielleicht die Seite für unsere Kredite. Da Kredite sehr wichtig sind, werden wir einige dieser Elemente trotzdem wiederverwenden. Und wir werden diesen Abschnitt haben, diesen Abschnitt und diesen Abschnitt, der anders sein wird , und all diese anderen Abschnitte werden dieselben sein. Also ich sehe dich im nächsten Video, wo wir mit dem Kreditbereich beginnen werden. 143. Darlehensseite: Lassen Sie uns nun die Seite für die Kredite erstellen , denn wie ich bereits erwähnt habe, haben sie diese externen Partner mit denen sie zusammenarbeiten, sowohl für die Lunge als auch für den Transport der Autos und Zollagenten und solche Sachen. Lass uns jetzt zu XD gehen und an der Kreditseite arbeiten. Also hier sind wir wieder in Adobe XD. Lass uns einfach noch einmal eine dieser Seiten duplizieren. Also vielleicht können wir dieses Control D verwenden. Und ich kann das ein Darlehen nennen. Und wenn Sie eine etwas bessere Konsistenz wünschen, können Sie dies aus dem Weg hierher verschieben. Und natürlich wird die Animation immer noch einwandfrei funktionieren, immer noch einwandfrei funktionieren denn wenn ich sie wieder auf Prototyp umstelle, können Sie sehen, dass dies immer noch verbunden ist. Egal, wohin Sie es verschieben, es wird immer noch einwandfrei funktionieren. In diesem Fall wählen wir also unsere Autos aus. Gehen Sie in diesem Fall zum Standardstatus und wechseln Sie zu ausgewählten Krediten, da dies die ausgewählte Seite ist. Schließlich. Da hast du es. Und jetzt werde ich hier einige Anpassungen vornehmen. Also ich brauche diesen oberen Bereich nicht, aber lass uns ihn benutzen. Aber ich werde diese Bilder einfach loswerden , das muss ich immer noch überprüfen. Und das wird alleine sein. Eigentlich nein, lassen Sie uns einen Blick zurück. passiert also etwas. Also lass uns gehen und den loswerden. Das wird also anstelle des Autoversprechens sein, es wird ein Abschnitt mit Kreditversprechen sein. Da haben wir's. Und hier verwenden wir einfach denselben Text, dieselbe Position, Kredite für Ihr Traumauto. Werde diesen Abschnitt los , weil wir ihn nicht brauchen. Und wir werden diese Abschnitte unten haben. Aber lass uns einfach weitermachen und unsere Zeichenfläche erweitern, um diese drei Bereiche zu berühren und etwas nach unten zu verschieben , ungefähr so. Und dann werden wir uns etwas später um die Positionierung kümmern. Hier werden wir diese beiden Bilder verwenden , die ich erwähnt habe. Also werde ich diesen vom Range Rover verwenden und ich werde diesen des Audi RS Five verwenden. Und ich werde weitermachen und das umdrehen, indem ich hier klicke. Und ich werde sie so positionieren. Und mal sehen, wo wir sind. Vielleicht können wir also in die Mitte unserer Seite gehen und die Umschalttaste gedrückt halten und linken Maustaste klicken, damit wir sie gleichmäßig verkleinern können . Was wir jetzt tun können, ist sie einfach ein bisschen besser zu positionieren. Das wird also hier sein. Das wird hier sein. Und natürlich müssen wir die Größe reduzieren, noch mehr davon, bis wir ein gewisses Erscheinungsbild haben, das wir wollen, vielleicht genau hier, ich denke, es wird ganz gut funktionieren. Ja, vielleicht kann ich das mit nur einer Berührung messen. Also über Audi zu genießen, das ist in Ordnung. Bring sie einfach hierher. Und was den Abstand angeht, kann ich sie einfach bewegen, bis sie die Textzeile genau hier berühren. Was den Text selbst angeht, er immer noch bei 40 gehalten, was unserer Meinung nach gut funktionieren wird, aber ich bin mit dem Audi nicht wirklich zufrieden, also kann ich ihn vielleicht ein bisschen anstupsen. Da haben wir's. Ich denke , das funktioniert ganz gut. Also lass uns sehen. fünf n. Chr., vielleicht könnte ich das erhöhen. Nur eine Berührung. Eigentlich nein, lassen wir es einfach so und verschwenden nicht zu viel Zeit, weil ich finde, es sieht ganz nett aus. Der nächste Abschnitt hier wird also dieser Abschnitt hier sein. Also unsere Angebote und darunter werden wir unsere Partner haben. Lassen Sie uns also zuerst mit unseren Angeboten umgehen, und lassen Sie uns das zuerst tun. Nehmen wir also zuerst die Texte. Also werde ich hier das T nehmen und so etwas wie marktführende Kredite von unseren Partnern eingeben . Da haben wir's. Ich werde es in der Mitte positionieren und nur sicherstellen, dass wir uns im H2 befinden. Schnappt es in der Mitte. Da haben wir's. Und was ich als Nächstes tun werde, ist sicherzustellen, dass ich in der Mitte bin. Und stellen Sie schließlich sicher, dass ich nicht 200, sondern vielleicht 150 von diesen Bildern bin. Denn auch hier möchte ich in der Lage sein, all diese Informationen direkt über dem Fehler zu sehen, was meiner Meinung nach aufgrund der SEO-Zwecke und weil Sie möchten, dass Ihre Informationen wenn möglich jederzeit lesbar sein. Also, was wir hier tun werden, ist das Ding noch einmal zu machen. Wechseln wir also zum Ebenenbedienfeld D. Das. Und ich werde etwas wie einfach und praktisch eingeben , aber verwandle das in den H3 Control D darauf. Verschieben Sie es in die Mitte und wählen Sie vielleicht mehrere Zahlungsoptionen, drücken Sie D noch einmal. Und das kann ein Seelenfrieden sein. Wir machen also im Grunde genau das gleiche Layout wie wir es getan haben. Wo machen wir das? So wie wir es hier gemacht haben. Also können wir das einfach nehmen und es erneut einfärben, wenn wir wollen, aber ich werde es einfach direkt von oben nachbilden. Also hier drücke ich Strg-D und wähle die Absatztexte genau hier aus. Und für die Absatztexte kann ich das hier auswählen und vielleicht kann ich es in Dunkelgrau ändern , nur um eine geringfügige Änderung vorzunehmen. Es sieht also nicht genau so aus wie der Text oben. Control C, control V. Los geht's. Und was ich jetzt tun kann, bevor ich mit mehr Inhalten und Informationen weitermache , ich möchte in der Lage sein, diese Symbole an die richtige Stelle einzufügen , okay, hier und hier wähle ich dieses aus, füge es ein genau hier. Schluss wähle ich dieses aus und füge es hier ein . Lassen Sie uns jetzt mit unseren Schichten umgehen. Zuallererst werden wir einen Abstand von 24 zwischen ihnen haben. Also hier, hier und hier können wir sehen, dass wir von jedem von ihnen 24 sind, was in Ordnung ist. Beschäftigen wir uns einfach mit diesen Icons. Stellen Sie sicher, dass sie unten ausgerichtet sind. Und schauen wir uns 24 an. Da haben wir's. Was ich jetzt tun kann, ist diese einfach zu gruppieren. Also lassen Sie uns diese gruppieren. Lassen Sie uns diese Analystengruppe darin gruppieren. Und ich kann sie in einen Stapel verwandeln, was sie für mich einfach ein bisschen gut organisieren wird. Ich muss also nicht zu viel Zeit damit verschwenden, mich um mein Layout und so zu kümmern. Also zuerst, lassen Sie uns es so positionieren, dass in der Mitte ist und dasselbe für dieses tun . Wählen Sie also alles aus und stellen Sie sicher, dass es in der Mitte ist. Und wähle hier alles aus. Komm schon. Da haben wir's. Und vergewissere dich, dass es nur dieser ist. Und stellen Sie sicher, dass es auch in der Mitte ist. Da haben wir's. Jetzt , wo das erledigt ist. zweite wird in die Mitte gehen und die zweite wird mehrere Zahlungsmöglichkeiten bieten. Da haben wir's. Der erste wird einfach und bequem sein. Und der letzte wird Seelenfrieden sein. Also nehme ich nur den Text, damit es ein bisschen schneller gehen kann. Und schließlich, weil der zentrale immer in der Mitte sein wird, klicken Sie hier. Aber diese anderen, lassen Sie uns diesen Rechteck-Trick verwenden. Also werde ich es einfach hier positionieren. Klicken Sie hier, stellen Sie sicher, dass es in der Mitte ist. Da haben wir's. Und schieb das hier hin, bis es in unserem Raster einrastet, eher so. Also. Wählen Sie beide aus. Los geht's und wir werden dieses Rechteck los , weil wir es nicht mehr brauchen. den Abstand angeht, Was den Abstand angeht, können wir vielleicht 64 wählen. Ich denke, es wird gut funktionieren. Mal sehen, wo wir sind. Also einfach so, 64, wir sind da. Und weil wir Grid innerhalb von Webflow verwenden werden, können wir hier einfach Control G drücken und sie vielleicht Loans Grid nennen. Da haben wir's. Und drücken Sie in diesem Abschnitt noch einmal Strg-G. Denken Sie also daran, dass wir 150 sind, weil Sie über dem Fehler gesehen werden möchten. Schieb es hier hin. Und nennen wir diesen Bereich marktführende Klumpen. Lassen Sie uns als Nächstes mit dem nächsten Abschnitt fortfahren. Und um mir ein bisschen Zeit zu sparen, werde ich diese Sitzung einfach von der Homepage Control C, Control V aus wiederverwenden der Homepage Control C, Control und sie so verschieben , dass sie wie diese ist. Eigentlich nein, lassen wir es für diesen Abstand von diesen anderen bei 200 belassen. Also hier, was ich tun werde, ist, dass dieses Bild allein sein wird. Und das können, mal sehen, unsere Partner sein. Unsere Partner. Weil dieses Layout genau das gleiche ist wie auf dem Startbildschirm. Lassen Sie mich einfach annehmen dass Sie das übrigens auch in Webflow tun können. Anstatt dies immer wieder neu zu erstellen, können Sie einfach auf Kopieren doppelklicken und Ihre Kopie direkt aus der Designsoftware Ihrer Wahl, in diesem Fall Adobe XD, einfügen Ihre Kopie direkt aus der Designsoftware Ihrer Wahl, leiht Bild. Lass mich genau hier suchen und per Drag & Drop hineinziehen. Da haben wir's. Vielleicht, schieb es vielleicht hierher. Und jetzt, wo das erledigt ist, lass mich meine Logos auswählen und sie per Drag & Drop hineinziehen. Zuerst wollen wir sie vielleicht auf etwas wie dieses reduzieren oder noch besser, lass uns einige Boxen erstellen, die lass uns einige Boxen erstellen, die unsere Logos umgehen. Gehen wir also mit so etwas und geben wir ihm die Abmessungen 270 mal 60. Und in Bezug auf den Eckradius kann ich den Rand loswerden, aber in Bezug auf den Eckradius möchte ich in der Lage sein, Sehen wir uns den Pin Acht hier und acht hier an, wodurch er oben rechts und unten links von acht. Da haben wir's. Ich kann es in die Mitte meines Bildes rücken. Mal sehen, vielleicht 20 oder 24 oder noch besser auf jeder Seite. Und das wird für die Sonnenbräune sein, ihr Logo. Das wird also ein Logo-Halter sein, so etwas. Und lassen Sie uns das duplizieren, weil wir es hier positionieren müssen . 24 von dieser Seite, wie Sie sehen können. Und lassen Sie uns diese unten hierher verschieben. Verwenden Sie die Sonnenbräune, ihr Logo, verkleinern Sie es, nur eine Berührungsmischung. Wir befinden uns in der Mitte unseres Logo-Halters und drücken Control G. Dies wird unser Top-Partnerlogo sein. Auch hier wird es aus irgendeinem Grund nicht umbenannt. Ich weiß nicht warum. Also versuchen wir es noch einmal. Top Partner, Logo. Kenne ein Thema, aber das Top-Thema. Da haben wir's. Und zum Schluss wollen wir uns mit dem nächsten befassen , der offensichtlich unten sein wird. Lassen Sie uns zunächst die Sache an der Mitte und Mitte ausrichten und in diesem Fall Strg-G drücken. Und statt oben gebe ich ihm eine Flasche. Logo des unteren Partners. Trauen wir uns, gut gemacht weiterzumachen. Sie können also sehen, dass wir jetzt auch diese Seite haben. Schließlich müssen wir diese Abschnitte unten auswählen. Also lasst uns sie auswählen. Lassen Sie uns das jetzt ein bisschen besser organisieren . Wir werden also unsere Partner direkt unter unseren Lungen haben. Also werden wir Helden haben, dann Kredite, Promo-Bereich, dann Markt-Clearing-Kredite sind Partner, was nicht 170 ist und es sollte bei 200 sein. Das liegt daran, dass wir Logos angebracht haben. Da haben wir's. Lassen Sie mich nun diese drei auswählen und sie an ihren Platz bringen , bis sie 200 sind. Da haben wir's. Und zum Schluss noch eine letzte Sache, die Sie tun müssen, ist, dies auf B64 zuzuschneiden. Hoppla, fast da. 64, los geht's. Jetzt, da diese Seite fertig ist, müssen wir endlich müssen wir die Kontaktseite erstellen, was natürlich sehr einfach sein wird. Wir werden diese Informationen einfach wiederverwenden und einfach das Bild darin einfügen. Also werde ich dich im nächsten Video sehen. muss das nächste Video wirklich nicht erstellen, aber ich werde es trotzdem erstellen, einfach versichert, und führe Sie durch einige zusätzliche Informationen, die wir hier nicht behandelt haben. Also werde ich dich dort sehen. 144. Kontaktseite: Lassen Sie uns weitermachen und die Kontaktseite gestalten. Wie gesagt, es wird super einfach sein. Es wird in nur wenigen Sekunden erledigt sein weil wir all diese Komponenten gespeichert haben. Also lass uns direkt zu XD springen und es erstellen. Also hier sind wir in XD, aber ich wähle diesen aus, Control D noch einmal. Und lassen Sie uns das noch etwas weiter vorantreiben , weil es uns aus irgendeinem Grund ablenkt. Los geht's und wir bringen es direkt an seinen Platz. Jetzt haben wir sie alle. Also geben wir dem einen Namen, wenn es umbenannt werden will. Da haben wir's. Nehmen Sie Kontakt mit uns auf. Da haben wir's. Und hier, was wir sofort tun werden, ist, den Standardstatus des Kredits auszuwählen, Kontakt, uns, ausgewählt auszuwählen, weil wir das schließlich auswählen werden. Und werde diesen los. Also das, das und das wird all diese Informationen loswerden. Und zum Schluss brauchen wir einfach ein Bild per Drag & Drop hinein. Lass uns so etwas sehen. Da haben wir's. Es ist wieder einmal ein ziemlich großes Bild von Envato Elements und Inkasso, dem ich Ihnen bereits erzählt und Ihnen gezeigt habe. Also können wir es genau hier verschieben. Eigentlich wissen wir, was wir tun werden, ist es abzuschneiden. Verwenden wir also ein Rechteck mit einer Höhe von, sagen wir 600. Lass uns die Grenze loswerden. Lassen Sie uns es jetzt direkt nach oben bewegen. Ich meine den unteren Teil unserer Navigation. Und nennen wir es vielleicht einen Spinnen-Showroom, weil wir sagen, das ist der Showroom dieser Firma. Und nun innerhalb dieses Platzhalters wir dieses Bild per Drag & Drop, doppelklicken und anpassen, damit es vielleicht ungefähr hierher passt oder so. Ja, schneide ihm einfach die Schuhe ab und ich denke, das wird ganz gut funktionieren. Schließlich müssen wir jetzt nur noch das Ganze nach oben bewegen und ihm einen Abstand von 100 geben, z. B. weil wir es nicht brauchen, dass es 200 sein muss. Noch einmal, um alles knapp über der Falte zu haben. Schneide es auf 64, vielleicht 63, 65 ab. Da haben wir's. Also endlich, das war's. Damit ist unser Design abgeschlossen und hier beginnen wir. Also haben wir mit einer Homepage angefangen. Dann gingen wir zur Kursseite über, auf der unsere Benutzer die gewünschten Autos auswählen können , wenn sie jemals zu diesem Bericht weitergeleitet werden , der als ausgewähltes Auto bezeichnet wird, wo sie zusätzliche Informationen. Sie können sogar auf dieses Bild klicken, um mit diesem Leuchtkasten begrüßt zu werden. Und wenn sie dann zur Lunge wechseln, werden die Kreditinformationen direkt hier auf dieser Seite gegeben . Und schließlich kontaktieren Sie uns, was nur eine einfache Kontaktseite ist. Also los geht's. Das war's für den Designteil, im Grunde mehr oder weniger. In der nächsten Lektion werde ich Ihnen zeigen, wie Sie einige grundlegende Interaktionen und einige grundlegende Animationen zwischen diesen Seiten verbinden einige grundlegende Interaktionen und können. Wenn Sie dies also mit Ihren Kunden teilen, können Sie zumindest einige Übergänge genießen , bevor Sie tatsächlich zu Webflow wechseln , wenn wir einige endgültige Animationen hinzufügen werden und wir wird diese Website von anderen abheben. Also werde ich dich dort sehen. 145. Animation des Designs: In Ordnung, lass uns jetzt an unserer Animation arbeiten. Wir werden nichts Verrücktes machen , denn wie ich bereits erwähnt habe, werden wir das in Webflow machen, wobei alle Abschnitte beim Laden auftauchen und solche Sachen. Aber Sie müssen Ihrem Kunden im Designteil immer noch etwas zeigen . Lassen Sie uns jetzt weitermachen und das tun. Also genau hier in XD werde ich zuerst in den Prototypmodus wechseln , wie ich es zuvor getan habe. Und wähle meine Kredite gleich hier aus. Also Navi, Kredite. Und genau hier klicke ich auf dieses Plus und ziehe es einfach auf Kredite. Und statt der Formel, weil das die letzte Interaktion war, werde ich Transition verwenden. Verwenden wir, ich weiß nicht, gehört Animation. Vielleicht können wir Dissolve verwenden, vielleicht ist unser Nullpunkt, sagen wir 4 s und machen dasselbe, um uns zu kontaktieren. Also klicken Sie auf Drag to here, dann werden die gleichen Einstellungen beibehalten. ich nun auf dieser Seite Was ich nun auf dieser Seite tun werde, wie Sie sehen können, ist es bereits verbunden, weil wir die untergeordnete Komponente dieser Master-Komponente verwenden . Deshalb habe ich von Anfang an gesagt , dass Komponenten in XD extrem wichtig sind. Also hier auf dieser zweiten Seite, weil wir es nicht mit den Nav-Elementen für die Autos verbunden haben. Ich ziehe es einfach hierher und lass es uns gleich hier überprüfen. Es wurde hier immer noch nicht verbunden da dies die untergeordnete Komponente ist. Wir können es hier nicht verbinden , da es bereits auf dieser Seite ist. Was wir also tun müssen, ist mit jedem einzelnen dieser Elemente verbunden . Autos, ziehen Sie es hierher, wählen Sie es von hier aus, navigieren Sie zu Objekten, Autos ziehen es hierher. Und schließlich, mach dasselbe für diesen. Wenn Sie sich etwas Zeit sparen möchten, können Sie das tun , wenn Sie tatsächlich mit der nächsten Seite beginnen. In unserem Fall, als wir tatsächlich mit dieser Kursseite angefangen haben, sollten wir das zu diesem Zeitpunkt tun , damit wir die Freiheit haben, all diese Dinge zu tun. Was wir als nächstes tun werden, sind nur ein paar supergrundlegende Dinge. Erkunden Sie also unsere Autos. Was wir hier tun können, ist klicken und zu diesem Abschnitt ziehen und übergehen. Ja, lass uns einfach das Overlay machen. Also nur ein paar grundlegende Übergänge. Sehen Sie sich alle Autos an, wir werden dasselbe tun. Es wird also einfach auf diese Seite umgestellt. Und schließlich werden wir zum Range Rover gehen. Und wenn ich den Bereich auswähle, wird er klicken und hierher ziehen. Und mal sehen, was wir tun können. Tippe also auf Übergang. Ja, lass uns weitermachen, lass uns etwas anderes nehmen. Also lasst uns statt Übergang weitermachen, wir können die automatische Animation verwenden und ausgewählte Kartenziel ist raus, vielleicht einfach. Lassen Sie uns jetzt ganz entspannt loslegen, reservieren Sie dieses Auto. Was es tun kann, ist, dass wir sie vielleicht auf diese Seite bringen können. Anstelle von Autoanimate verwenden wir einfach Transition Dissolve, sodass die Animation aufgelöst wird. Und schließlich auf dieser Seite C Alone Optionen, Sie werden hier nur zur Lungenseite weitergeleitet. Und die Menge wird das Kontaktformular senden. Natürlich können wir diese Symbole beim Hover animieren und so. Aber wie gesagt, wir werden uns nicht zu viel Mühe geben, weil wir schon viel gearbeitet haben. Wenn ich also eine schnelle Testvorschau sehe, klicke auf die Kredite , um zur Startseite zu gelangen. Klicken Sie auf „Kontaktieren Sie uns“. Wir werden auf die Seite „Kontakt“ weitergeleitet. Klicke auf die Autos. Und was wir genau hier brauchen, ist , dies nicht mit der Homepage, sondern mit der Kursseite zu verbinden . Das war also mein Fehler. Also lass uns sehen. Autos sind hier tatsächlich vernetzt. Also einfach nicht hier. Also hier werden wir es einfach auf diese Seite verschieben. Hier. Wir werden es auf diese Seite verschieben. Und hier werden wir es auf diese Seite verschieben. Da haben wir's. Und jetzt sollte es funktionieren. Also jetzt sind wir bei contactus. Wenn ich also auf zwei Autos klicke , wechselt ich zu Autos. Kredite, zurück zu Autos. Da haben wir es, Kredite kommen. Und die Kontaktaufgabe wird geändert, um uns zu kontaktieren. Eine letzte Sache , die wir wollen, ist, ein Logo anzuschließen, um zur Startseite zurückzukehren. Also klicken Sie hier, wir sind bei Dissolve. Das ist gut. Wählen Sie ein Logo aus und lösen Sie es auf. Wählen Sie ein Logo aus, lösen Sie es auf. Da wählen wir das Logo und Sie können dasselbe in der Fußzeile tun. Also hier, hier, weil die ursprüngliche Komponente offensichtlich auf der Homepage selbst ist, also wird sie nicht so funktionieren. Und endlich, hier, da haben wir es. Also jetzt, wenn wir es umschalten und sagen wir, wir besuchen die Seite oder keine Kredite. Klicken Sie, um es zu ändern. Und wenn ich auf das Logo klicke , komme ich zurück nach Hause. Erkunden Sie also unsere Autos, das wird uns hierher bringen. Das wird uns zurück nach Hause bringen. Alle Autos ansehen. Es wird uns hierher bringen und schauen wir uns den Range Rover an. Also, wenn ich hier klicke, Hoppla, es bringt uns hierher. Also das ist nicht gut. Lassen Sie uns das also sehr schnell ändern. Wenn ich also das auswähle, wähle ich anstelle von automatischen Animationen den Übergang und das Ziel ist, dass dieselbe Animation aufgelöst ist. Der Analyst hat das erledigt. Also, wenn ich hier klicke, meinen Range Rover suchen, klicke, Los geht's. Jetzt sind wir oben auf der Seite „Reservieren dieses Auto“ bringt uns zur Kontaktseite. Also, Autos, wechseln wieder zu Range Rover. C allein Optionen. Du wirst zu lange reden müssen. Wenn ich also ganz nach unten zur Fußzeile wechsle, wenn wir auf das Logo klicken, werden wir zur Startseite weitergeleitet. Da hast du es also. Es ist nur ein kurzer kurzer Übergang und kurzer kleiner Animations-Crashkurs in Adobe XD. Natürlich werden wir uns in Pipe Flow viel ausführlicher damit befassen in Pipe Flow viel ausführlicher damit , wo wir jeden dieser Abschnitte, jede dieser Karten animieren werden, wir werden ein bisschen animieren oder schwebe mit dem Mauszeiger auf Bildern. Wir werden all diese Symbole animieren die an ihren Platz fliegen. Dies dient nur dazu, Ihnen zu zeigen, was in Adobe XD möglich ist. Wenn Sie später nicht in etwas wie Webflow arbeiten, entwerfen Sie natürlich später nicht in etwas wie Webflow arbeiten, nur. Vielleicht verbringst du viel mehr Zeit in Adobe XD und animiere, wie gesagt, diesen Leuchtkasten z.B. oder diese Typform, vielleicht kannst du einen separaten Komponentenstatus erstellen, so etwas, nur um deinem Kunden zu geben ein bisschen mehr Wert mit deinen Animationen. Im nächsten Video werden wir darüber sprechen, wie man all diese Assets für Webflow exportiert. Also werde ich dich dort sehen. 146. Assets exportieren: Lassen Sie uns nun darüber sprechen, wie Sie unsere Assets für eine spätere Entwicklung in Webflow exportieren können. Und ich werde Ihnen einige Dateiformate zeigen, wofür sie verwendet werden können und wie Sie Ihre Dateien tatsächlich strukturieren können, um Ihre Dateien tatsächlich strukturieren einen besseren Anwendungsfall für Sie selbst zu erzielen, denn Sie sind derjenige, der wofür sie verwendet werden können und wie Sie Ihre Dateien tatsächlich strukturieren können, um einen besseren Anwendungsfall für Sie selbst zu erzielen, denn Sie sind derjenige, der der Entwicklungsablauf. Aber noch wichtiger ist es, wenn Sie dies für einen anderen Entwickler oder ein anderes Entwicklungsteam einrichten , damit diese es problemlos verwenden können . Also lass uns dich auf XD umstellen und zeigen, wie das geht. Also hier sind wir in Adobe XD und ich werde nur einige dieser Elemente exportieren. Also zuerst, was ich tun kann, ist dies auszuwählen, weil ich dieses, dieses und das als separate Elemente exportieren werde . Also wähle ich sie alle aus, drücke Strg oder Command E. Und hier kann ich PNG auswählen, aber das werde ich nicht wirklich tun. Was ich hier tun werde, ist diese beiden auszuwählen. Also drücken diese Kreise auf Control E. Und lassen Sie uns hier schnell wechseln. Lassen Sie mich den Ordner direkt hier auf meinem Desktop einrichten, z. B. und ich werde, sagen wir, einen Punkt auf Assets machen . Da haben wir's. Lass mich dir tatsächlich diesen zeigen, den ich machen werde. Also hier in diesem Ordner werde ich einen weiteren Ordner erstellen und ihn Bilder nennen. Und ein anderer Polarstern nennt es Icons. Und weil das entweder Bilder oder Icons sein können, liegt es wirklich an dir, aber in diesem Fall füge ich ihnen zwei Bilder hinzu. Lassen Sie uns sie jetzt auch behalten. Wählen Sie den Ordner aus und stellen Sie sicher, dass Sie das SVG auswählen , da dadurch die Editorfähigkeit später für Entwickler und für Sie selbst erhalten bleibt die Editorfähigkeit später für Entwickler und für Sie selbst . Sie werden ein wenig mit Webflow experimentieren, Animationen, Verzögerungen, Pfadanimationen und solche Sachen. Aber wenn nicht einfach exportieren und es wird die gleiche Qualitätskonsistenz beibehalten , die Sie hier hatten. Weil wir alle unsere Ebenen richtig benannt haben. Es ist sehr einfach für uns, all diese Assets zu exportieren. Lassen Sie uns nun weitermachen und einige dieser Symbole exportieren. Also hier haben wir unsere Icons, also lasst uns sie von hier auswählen. Also hier haben wir Garantie, Wartung, Kredite. Öffnen Sie all diese Ordner. Wählen Sie das aus. Hoppla, ich habe die Komponente dafür nicht erstellt. Und das. Da hast du es. Also jetzt, weil diese im Stapel sind, schauen wir mal. Ja, weil das der Stapel ist, kann ich diesen nicht auswählen und dieser ist einfach alles auswählen. Drücken Sie Control E, SVG zu den Symbolen. Da hast du es. Wählen Sie auch dieses Symbol neben den Icons aus. Und wählen Sie dieses auch zu den Icons aus. Sie werden feststellen, dass ich diese Bilder vorerst überspringe, aber das macht keinen Unterschied. Drücken Sie also Control E, um diesen zu exportieren. Drücken Sie dann Control E , um diesen zu exportieren. Alle als SVG und schließlich dieser als SVG. Da hast du es. Lass uns jetzt zu hier gehen. Also hier, wie sprichst du an? Drücken Sie also Control E, exportiert, wählen Sie das Telefon aus, und das ist das Telefonsymbol. Es ist also intim. Steuerung K, Kontrolle E. Exporte. Da haben wir's. Und Öffnungszeiten, klicken wir auf Umbenennen, um mal sehen, das Telefon. Ich habe einen Fehler gemacht. Lass mich das zeigen. Icons Telefon. Lassen Sie mich das loswerden, denn ich verwandle den gesamten Text mit dem Symbol in eine Komponente und das möchte ich nicht tun. Also, was ich eigentlich tun werde, ist zu hier zurückzukehren, Strg Z zu drücken , um das rückgängig zu machen, und einfach das Telefonsymbol auswählen und Strg E drücken. Jetzt exportiere es. Das ist in Ordnung. Und mach dasselbe für die Öffnungszeiten. Also statt allem wähle ich einfach das Uhrsymbol, Control-V. Los geht's, und das Uhrsymbol wurde exportiert. Lassen Sie mich das nun schließen und lassen Sie uns diese Symbole unten auswählen. Also wir haben diese, ich werde sie alle auswählen und E SVG steuern. Und als letztes möchte ich mein Logo auch als SVG exportieren. Weil ich den Retainer behalten will. Map wird später aktualisiert und direkt in Webflow Solids Deal mit Bildern integriert . Also das Wichtigste zuerst, unsere Vorteile Bildkontrolle E. Und statt SVG werde ich dieses Mal wegen der besseren Kompressionsrate JPEG wählen . Gehen wir also zurück zu den Bildern. Wählen Sie Ordner und klicken Sie auf Exportieren. Tun Sie dasselbe dafür. Also, was wir anbieten, und ich werde sie nicht exportieren weil ich sie bereits in separaten Ordnern habe. Ich wähle diesen aus. Julie, los geht's. Und schließlich wähle diesen aus. Aber statt als JPEG, weil es einen transparenten Hintergrund hat, wähle ich at als PNG-Export. Da haben wir's. Jetzt müssen wir nur noch dasselbe für all diese verschiedenen Seiten tun . Hier. Wir müssen im Grunde nichts tun, weil wir alles ausgewählt haben. Aber hier. Lassen Sie uns das tatsächlich auswählen , es in verwandeln. Wählen wir nun zuerst das Bild aus, da wir uns in diesem Ordner befinden. Exportieren Sie PNG erneut , da es sich um einen transparenten Hintergrund handelt. Hier. Wechseln wir zu SVG und wechseln wir den Ordner. Gehen wir zu den Icons. Da haben wir's. Wählen Sie Ordnerexport aus. Ich werde diese Bilder nicht anfassen. Alles andere hier ist in Ordnung, außer diesem. Lassen Sie uns ein bisschen damit umgehen. Also hat die SUV-Ikone SVG getroffen. Da haben wir's. Ich werde mein Label wechseln, denn denken Sie daran, dass wir drei dieser Symbole haben. Lassen Sie uns also mit dem Export von Supersportwagen fortfahren. Lassen Sie uns es auf den Standardstatus für einen Saloon umstellen . Salon-Symbol. Da haben wir's. Hier werde ich es wieder auf SUV umstellen und es einfach an den Rest des Inhalts hier anpassen. Wenn es schnappen will. Da haben wir's. Also das sieht alles ganz nett aus. Ich werde mich nicht mit diesen Bildern befassen. Und lassen Sie uns schnell mit diesen Symbolen umgehen , denn es gibt hier eine Menge davon. Aber ich kann tun, um meinen Prozess nur geringfügig zu beschleunigen vielleicht versuche, sie alle auszuwählen , aber den Stapel von jedem von ihnen entfernt habe. Wenn wir versuchen, das zu tun, haben wir es geschafft. Also wird der Stapel von jedem von ihnen entfernt , sodass ich mehrere Symbole gleichzeitig auswählen kann. Wenn ich sie also öffne, kann ich auswählen, auswählen, auswählen, auswählen. Eigentlich nein, lass uns das alles öffnen. Also wähle, Select, Select, Select, und ich halte übrigens die Strg-Taste gedrückt, während ich das mache. Und er würde E-SVG-Symbole kontrollieren. Da haben wir's. Jetzt kannst du sie wieder stapeln , wenn du das für nötig hältst. Aber ich werde mich nicht zu sehr darum kümmern. Das ist alles exportiert, das ist alles in Ordnung. Mal sehen, ob wir noch andere Icons haben. Versuchen wir also, diese zu exportieren. Also Strg-Taste bei diesem, Control K bei diesem und Control K bei diesem. Mal sehen, weil sie, glaube ich, in einem Stapel sind. Aus irgendeinem Grund, ja, das ist in einem Stapel. Also egal, lassen Sie uns eins nach dem anderen exportieren. Ich möchte nicht zu viel von deiner Zeit und auch meiner Zeit verschwenden . Wir sind schon fast 8 Minuten in diesem Video. Und Sie können sehen , dass sich dieser Prozess immer wieder wiederholt. Mal sehen, ob ich noch andere Icons habe. Ich akzeptiere das Schließsymbol hier nicht. Aber ich werde es nicht exportieren, da Webflow, wie gesagt, eine eigene Lightbox-Komponente enthält. Beschäftigen wir uns jetzt mit den Bildern. Also beim letzten Bildexport war es dieser. Ich werde das nicht exportieren, weil wir sie bereits in Ordnern haben. Beschäftigen wir uns also mit diesen. Wählen Sie also diese beiden Steuerelemente E. Verwandeln Sie es in PNG , weil es wieder einen transparenten Hintergrund hat. Und lass uns zu unseren Bildern wechseln. Wählen Sie, klicken Sie auf Exportieren und wählen Sie diese drei aus. So wie das hier. Anstelle von PNG wähle ich JPEG, weil sie alle ihre eigenen Hintergründe haben, wie diesen, Control E, JPEG. Und da hast du es. Wir haben alles exportiert , was wir aus unserer Datei exportieren müssen aus unserer Datei exportieren damit wir es in Webflow erstellen können. Sie können also sehen, wie einfach das ist, besonders wenn Sie den Überblick darüber behalten , was Sie tun, wo Sie es tun. Und wenn Sie diese Elemente richtig positionieren , falsch benannt. Es ist also einfach so, dass es einfach schnell ist, es auf unseren Desktop zu exportieren und mit der Vorbereitung für Webflow zu beginnen. Da hast du es also mit dem Design. Die letzte Lektion, auf die ich kurz eingehen möchte , ist Responsive Design. In diesem Abschnitt des Kurses werden wir, wie ich bereits erwähnt habe, kein responsives Design in Adobe XD machen , weil es nur Zeitverschwendung wäre. Dennoch möchte ich Ihnen zeigen, wie Sie mithilfe dieser Stack-Elemente mit responsivem Design arbeiten und wie Sie Responsive später in Webflow besser planen können. Also werde ich dich dort sehen. 147. Design für Responsive: Lassen Sie uns zum Schluss noch ein wenig auf unser responsives Design eingehen. Responsive Design ist im Grunde genommen die Art und Weise, wie sich Design an unterschiedliche Bildschirmgrößen anpasst, die auch Breakpoints genannt werden. Und normalerweise haben Sie in Ihren Tools wie Webflow etwa drei oder vier Haupt-Breakpoints, und dann können Sie zusätzliche Breakpoints hinzufügen , und zwischen diesen Haupt-Breakpoints haben Sie zusätzliche Breakpoints. Also z. B. für das Tablet, das ist der Hauptbruchpunkt, aber Sie haben zusätzliche Tablet-Größen, wie z. B. iPad ist eine Oberfläche ist eine, Samsung Todesfälle eine. All diese haben also unterschiedliche Breakpoints. In verschiedenen Bildschirmgrößen. Lass mich dir zeigen, wie man damit in XD arbeitet. Hier sind wir in Adobe XD, hier ist unser Design fertiggestellt. So werden Sie es von diesem Abschnitt abheben in dem ich tatsächlich weitermachen und all diese Symbole erstellen werde , all diese Farben, Stile, Typografie-Stile, nur um Ihr Leben wird ein bisschen einfacher, wenn Sie zu dieser Datei kommen. Aber trotzdem wollte ich dir hier zeigen, wie man mit Responsive Design arbeitet. Also lass uns z. B. ich weiß nicht, diese Seite duplizieren. Also Strg D genau dort, drücke a auf deiner Tastatur für die Zeichenfläche und lass uns Tablets verwenden. Verwenden wir zum Beispiel diese Tablet-Größe und wir können sie auswählen. Und lassen Sie uns alle acht Spalten wählen, z. B. wählen wir etwa 60 auf jeder Seite, um sie etwas breiter zu machen. Was wir hier also tun können, ist unser Navi auszuwählen, basierend darauf genau hier. Und wenn es die Bildschirmgröße zulässt, können wir das einfach anpassen und ein wenig verschieben. Und dann können wir diesen Anhang vielleicht hierher verschieben. So einfach ist es also, das anzupassen, aber ich muss es einfach von dieser Seite aus anpassen. Und dann doppelklicken Sie hinein und positionieren Sie es. Diese Abschnitte werden natürlich sehr einfach sein, weil sie nur von innen skaliert werden. Also positioniere es ungefähr hier. Weil wir jetzt etwas weniger Größe haben. Vielleicht können wir hier mit 32 gehen. Da haben wir's. Und jetzt in Bezug auf das Bild Lassen Sie uns das Bild ein wenig auf etwas wie dieses verschieben . Circle kann bleiben. Oder vielleicht können wir das Bild etwas nach unten bewegen , damit es den Kreis bedeckt. Lassen Sie uns nun unsere Positionen wechseln und lassen Sie mich das speichern, um fünf Prozent bei Adipositas zu sein fünf Prozent bei , nur damit Sie es ein bisschen besser sehen können. den nächsten Abschnitt betrifft, Was den nächsten Abschnitt betrifft, können wir ihn einfach kopieren, hier einfügen und los geht's. Da wir nun diesen Abschnitt haben, werde ich sicherstellen, dass er sich in der Mitte unserer Zeichenfläche befindet , so wie hier. Aber jetzt kannst du sehen, was wir haben. Also müssen wir jedes einzelne davon anpassen. In dieser Hinsicht werde ich die Gruppierung aufheben. Und ich werde die letzten beiden unten positionieren , genau hier. Und das wird hierher gehen. Also lassen Sie uns diese beiden nach unten verschieben. Das wird genau hier gehen, das wird genau hier hingehen. Da haben wir's. Was wir nun tun können, weil wir acht Spalten haben, jede dieser Karten kann vier Spalten einnehmen. Lassen Sie uns sie also bewegen, um zu hören. Stellen Sie sich vor, sie hören zu und stoßen Sie sie an, zu hören. Und natürlich können sie alle etwa 32 Meter weit zurücklegen. Also lass uns diese auswählen und vielleicht nudge und 32. Und das können auch 32 sein, so. Nun endlich zur Breite, was ich tun kann, ist einfach alle meine Karten auf einer Seite auszuwählen , einfach so. Und stellen Sie einfach sicher, dass die Breite es so bedeckt. Und mach dasselbe für diese. Aber weil sie den Schwebeeffekt haben, brauchen wir hier keinen Hover-Effekt. Sie können also entweder Gruppierung aufheben oder, wenn Sie zu faul sind, können Sie zum Hover-Effekt wechseln. Sie können sehen, dass es geht, dass es in den ursprünglichen Zustand zurückgekehrt ist. Und du kannst einfach dasselbe verlängern, wie ich es hier getan habe. Aber noch besser ist es, einfach weiterzumachen und den Hover-Effekt zu beseitigen , indem Sie diese einfach als Komponente aufheben. Dann, weil wir dieses Kontaktformular haben, z. B. ich kann weitermachen und es hier kopieren und einfügen. Und weil wir die Originalfarbe für diese Website benötigen , geben wir ihr eine Körperfarbe. Da haben wir's. Jetzt steht alles gut , wie es sollte. Also hier kann ich dasselbe tun. Stellen Sie also sicher, dass dies in der Mitte ist. Stellen Sie sicher, dass Sie diesen Button genau hier positionieren. Stell sicher, dass du das genau hier bewegst. Stell sicher, dass du das genau hier bewegst. Und jetzt haben wir diese beiden. Das ist das Responsive auf den Punkt gebracht. Sie ordnen diese Felder also einfach so an, wie es der Platz zulässt. Und sie lassen sich einfach gut stapeln und den verfügbaren Platz überall dort ausfüllen , wo immer der Platz vorhanden ist. Lassen Sie uns das Formular zusammenklappen und sehen, was wir sonst noch haben. Also haben wir in diesem Feld, also kopieren und einfügen. Aber können wir es gleich hier tun, ist, dass wir es sofort in einen Stapel verwandeln können. Aber zuerst lösen Sie die Gruppierung auf, da es sich um die ursprünglichen Komponenten handelt. Also entgruppiere Control G und verwandle es in einen Stapel. Und das kann z.B. sein , wo wir sind, also hoops. Pokale sehen aus, wo wir sind. Und weil wir den Stapel haben, kann ich einfach die Position des Stapels und den Abstand auf 64 ändern. Vielleicht. Los geht's. Und was ich hier tun kann, ist es einfach auszurichten. Also komm her, komm her, erweitere es, bis es die gesamte Breite ausfüllt . Vielleicht reduziere die Höhe ein bisschen auf so etwas. Und dann kann das vielleicht in die Zentren gehen. Also vielleicht kann ich das in der Mitte positionieren und alles in eine Textzeile stellen , wo wir sind, kann in der Mitte sein. Da haben wir's. Und jetzt kann ich vielleicht Inhalte lokalisieren. Ich kann es so in die Mitte meiner Seite verschieben. Aber jetzt habe ich diese drei. Was ich also mit ihnen machen kann, ist sie in eine Gruppe zu legen, sie in dieser Richtung in einen Stapel zu legen. Da haben wir's. Und jetzt bring sie einfach so zu hören, entgruppiere meinen Stapel, komm gleich her, positioniere ihn hier und vergewissere dich, dass in der Mitte ist. Da hast du es. Jetzt haben Sie ein völlig anderes Layout. Was ich tun kann, ist das in den Mittelpunkt zu rücken. Und das alles sieht in der Tat wunderschön aus. Manche, was ich als Nächstes tun kann, ist einfach meine Fußzeile anzupassen. Also Steuerung C, Steuerung V für die Fußzeile. Stellen Sie sicher, dass es in der Mitte ist. Da haben wir's. Und passe einfach an , was ich hier habe. Ich weiß nicht warum. Aus irgendeinem Grund habe ich vergessen, die Fußzeile als Komponente hinzuzufügen . Ich weiß nicht, warum ich das getan habe, aber es ist egal. Weil wir es in unserem gesamten Design beibehalten haben, aber lassen Sie uns es einfach aus Konsistenzgründen behalten. Geben wir ihm weitere Kontrolle C, Kontrolle V. Mal sehen, wo wir damit stehen. 200. Und die Fußzeile wird genau hier angezeigt. Eigentlich. Um nicht zu viel Zeit zu verschwenden. Lass mich das etwas später machen. Konzentrieren wir uns jetzt darauf. Doppelklicken wir also genau hier und verschieben diese Social-Media-Symbole hierher. Also, bewege das in die Mitte, so, und bewege es hier und da hast du es. So super einfach ist es, ein responsives Design zu erstellen und anzupassen. Offensichtlich wollte und habe ich nicht getan, dass ich die Navigation nicht gemacht habe, weil ich auch hier nicht zu viel Zeit verschwenden wollte. Lassen Sie uns dieses Logo einfach aus irgendeinem Grund verwenden. Es ist bei mir genau hier zusammengebrochen. Ich weiß nicht warum, aber es ist nicht wirklich wichtig. Wenn ich also schnell auf Vorschau klicke, kannst du sehen, wie das aussieht. Anstatt eines dreispaltigen Layouts haben wir jetzt ein zweispaltiges Layout. Und weil wir auf dem Tablet sind, ist es vielleicht die beste Idee Gruppierung dieser Komponenten aufzuheben, da Sie nicht mit der Maus auf dem Tablet zeigen können, weil Sie Ihren Finger und nicht Ihre Maus verwenden. Und die gleiche Geschichte hier. So machen Sie die responsiven Designs diese Elemente einfach im Grunde von oben nach unten, links und rechts anordnen von oben nach unten, und sie einfach nach unten verschieben. Verschieben Sie diesen nach oben, bewegen Sie ihn nach unten und skalieren Sie ihn entsprechend der Breite Ihres Bildschirms. Weil es auf die Breite ankommt. Die Höhe spielt eigentlich keine Rolle , da die Höhe endlos sein kann. Damit beende ich diese Lektion über Responsive Design. Denn noch einmal, wir werden es in Webflow viel detaillierter angehen . Es ist also wirklich nicht nötig, dass ich das hier weiter erläutern muss, aber ich wollte Ihnen nur erklären , was Sie in Adobe XD tun können und dass Sie einen Teil dieser Reaktionsfähigkeit erreichen können deine Seiten. Im nächsten Video beginnen wir mit Webflow, da wir bereits all unsere tollen Artikel exportiert haben. Und ich werde Ihnen zeigen, wie Sie mit Webflow beginnen, was es ist und wie Sie es umgehen können, wenn Sie es noch nie benutzt haben. Also werde ich dich dort sehen. 148. Zukunft von Adobe Xd: In dieser letzten Lektion, bevor wir zu Webflow übergehen, wollte ich nur über die Zukunft von Adobe XD sprechen, denn mit den neuesten Nachrichten über den Kauf von Figma von Adobe-Seite wollte ich Ihnen nur meine 0,02$ geben weil ich auch ein Adobe XD-Botschafter bin und bei all diesen Entwicklungen eng mit dem Adobe-Team hinter den Kulissen zusammenarbeite . Was Sie also im Grunde wissen müssen ist, ob Sie wissen, wie man gestaltet, wenn Sie die Struktur von Design kennen, wenn Sie wissen, wie man das Design von Anfang bis Ende strukturiert , damit es die richtigen Probleme lösen und dem richtigen Publikum helfen. Sie interessieren sich nicht wirklich für die Software, die Sie verwenden werden. Denn wenn Sie ein guter Designer sind, können Sie sogar Microsoft Paint verwenden, wenn Sie möchten, und Sie werden trotzdem gute Designs erstellen. Es spielt also keine Rolle, welche Art von Software Sie verwenden und verwenden werden, um die Ziele zu erreichen, die Sie dem Projekt , an dem Sie arbeiten, haben. Was im Grunde passieren wird, ist, dass zum Zeitpunkt der Aufzeichnung dieses Kurses noch Gespräche geführt werden. Dieses Byte ist also noch nicht endgültig. Sie müssen es im Grunde immer noch endgültig schaffen. Sie müssen also immer noch mit den Leuten sprechen , denen Figma tatsächlich gehört, weil es nicht nur ein Besitzer ist, sondern mehrere verschiedene Besitzer. alle auf derselben Seite sein Damit dieses Buy-in zustande kommt, müssen alle auf derselben Seite sein. Außerdem müssen Rechtsteams zusammen wohnen. Sie müssen eine Menge verschiedener Dokumente unterschreiben. Und wenn es dann tatsächlich so ist Figma Teil von Adobe Creative Cloud wird, wie es jedes andere Adobe-Produkt ist, müssen einige Änderungen vorgenommen werden und diese Änderungen müssen innerhalb von Figma. Also grundsätzlich müssen Adobe-Schriften integriert werden. Eine bessere Bildoptimierung und eine bessere Bildeinbindung müssen darin enthalten sein. Einige 3D-Funktionen müssen integriert werden, und das Video muss verbessert werden, ebenso wie die native Low-T-Unterstützung, die Adobe XD bereits bietet, Figma nicht. Zum Zeitpunkt der Aufnahme dieses Videos von Figma wurde gerade die Videomöglichkeit eingeführt, und Adobe XD hatte diese Möglichkeit bereits seit über einem Jahr. Also, bis das alles durchläuft und sie XD herunterfahren, wird es ungefähr anderthalb Jahre dauern. Und in anderthalb Jahren können Sie problemlos zu Figma wechseln, können Sie problemlos zu da Figma in anderthalb Jahren wie XDR aussehen wird in anderthalb Jahren wie XDR , sobald es Teil der Adobe Creative Cloud Suite wird. . XD angeht und es herunterzufahren, werden sie es nicht über Nacht herunterfahren. Und ich spreche ständig mit dem Adobe XD-Team darüber , weil ich all diese Kurse habe, ich habe all diese YouTube-Videos. Und ich muss es wissen, weil mich viele meiner Schüler fragen, wie die Zukunft von Adobe XD aussehen wird. Es wird also aussehen, sobald der Übergang beginnt, werden sie die Updates für Adobe XD langsam auslaufen lassen. Auch hier werden sie es nicht über Nacht ausschalten. Und in den nächsten ein oder zwei Jahren wird XD immer noch so existieren, wie es ist. Und von Zeit zu Zeit wird es immer noch einige grundlegende Updates geben. Und weil sie viele verschiedene Benutzer haben , die Adobe XD verwenden, denke ich, dass es etwa 1 Million oder 2 Millionen Benutzer Adobe XD täglich verwenden. Du kannst dir vorstellen, dass all diese Leute wirklich wütend sein werden , wenn du ihr Lieblingstool einfach über Nacht abschaltest . Sie werden also langsam zu Figma wechseln. Sobald die Figma Teil von Adobe Creative Cloud wird, wenn natürlich alles legal abläuft . Und sobald sie XD ausschalten, ist die Idee dahinter, dass es Adobe XD sehr ähnlich sieht. Die beiden werden also im Grunde fast identisch aussehen. Nur die Tools, die Sie in XD oder Figma gewohnt sind, werden winzig, ein bisschen anders sein. Zum Beispiel wird die Positionierung einiger dieser Elemente hier statt hier sein. Also nichts allzu großes. Und das Letzte, was ich ansprechen möchte , ist die Dateikompatibilität, da Sie immer noch all diese XD-Dateien haben werden. Z. B. habe ich ein Designsystem namens Inception geschaffen. Und du kannst es dir auf meiner Website Alex auf design.co ansehen. Und dieses Inception-Designsystem wurde ausschließlich für Adobe XD entwickelt. Aber sobald Figma Teil von Adobe Creative Cloud wird, haben Sie hoffentlich die Möglichkeit, XD-Dateien nativ direkt in Figma zu verwenden , da all diese Datei-Crosback-Kompatibilität , die Adobe Creative Cloud hat. Denn derzeit können Sie z. B. eine Adobe Illustrator Illustrator-Datei in XD öffnen. Sie können Photoshop-Dateien in XD öffnen. Sie können verschiedene Symbolsätze und Symbolbilder öffnen , beispielsweise in InDesign, Sie können sie in Illustrator importieren. Von Illustrator aus können Sie sie an After Effects senden . Von After Effects aus können Sie sie zur Premiere usw. schicken . Es gibt also all diese Workflows, die ausgeführt werden müssen , bevor Adobe XD endgültig heruntergefahren wird. Und das wird in den nächsten ein oder zwei Jahren passieren. Also, zurück zum Anfang dieses Videos. Der Sinn dieses Kurses besteht nicht darin, Der Sinn dieses Kurses besteht nicht darin Adobe XD zu beschränken, sondern Ihnen zu zeigen und Ihnen beizubringen, wie Sie diese besten und besten Methoden anwenden können Methoden, die das Design Thinking und den Designprozess verwenden. Egal welches Tool Sie verwenden, Sie werden immer noch in der Lage sein, der beste UX-Designer zu sein , den Sie können. Nachdem das geklärt ist, lassen Sie uns zu Webflow übergehen und beginnen, auf dem Webplot aufzubauen . Jetzt. 149. Website-Design in Figma Einführung: In diesem Teil des Kurses zeige ich Ihnen, wie Sie ein Design erstellen, das wir gerade in Adobe XD, figma, erstellt haben. Was sind die Unterschiede zwischen der Arbeit in XD der Arbeit in Figma und welche beiden bevorzuge ich? Warum so etwas überhaupt erstellen? Nun, falls es das nicht schon wüsste, Adobe hat Figma in den nächsten ein oder zwei Jahren für eine riesige Summe Geld gekauft , sie werden es in ihre Creative Cloud-Toolsuite integrieren . Was das für Sie als Designer bedeutet , ist im Grunde gar nichts. Wenn Sie wissen, wie man Adobe XD verwendet, wissen Sie auch ziemlich genau, wie man Figma verwendet, da diese beiden Tools genau identisch sind, mit Ausnahme einiger wichtiger Funktionen, die Figma hat. Adobe XD hat das nicht und umgekehrt. Nun, was das für Figma insgesamt bedeutet, sagen sie, dass sie es überhaupt nicht ändern werden. Es wird immer noch das Gleiche bleiben. Aber Adobe ist meiner Meinung nach nicht zu trauen, denn wenn man sich nur die letzten Jahrzehnte ihres Geschäfts anschaut , was sie mit Makromedien gemacht haben, was sie mit Dreamweaver gemacht haben, was sie mit Demenz gemacht haben und was sie in letzter Zeit mit XD gemacht haben. Sie werden so ziemlich dasselbe auch mit Figma machen. Das bedeutet, dass sie diesen vorhandenen Funktionen langsam neue Funktionen hinzufügen und daraus eine Art Version von Photoshop machen langsam neue Funktionen hinzufügen diesen vorhandenen Funktionen langsam neue Funktionen hinzufügen und daraus werden, wie sie es mit all ihren Tools tun. Aber wir als Designer müssen uns an diese Trends und Veränderungen in der Branche anpassen . Und am Ende des Tages sind dies nur Werkzeuge. Wenn Sie sich diesen Kurs bis zu diesem Zeitpunkt angesehen haben, haben Sie festgestellt, dass der Designprozess nicht nur darin besteht, in einem Designtool wie XD oder Figma zu arbeiten . Dies ist nur ein wirklich kleiner Teil am Ende des Puzzles. Eine weitere Sache, die ich erwähnen möchte ist, dass ich Ihnen beide Workflows zeigen werde da wir uns in diesem Kurs im nächsten Abschnitt dieses Kurses mit Webflow befassen werden . Und ich werde einige Unterschiede zeigen, wie man Dateien aus XD exportiert und dann in Figma arbeitet, in Webflow arbeitet und wie man direkt in Figma arbeitet. Und dann kopieren Sie einfach Ihr Design und fügen Sie es in Webflow ein. Und warum ich das nicht für eine gute Idee halte. Meiner Meinung nach sollten Sie immer alle Ihre Assets exportieren und in Webflow von Grund auf neu erstellen, es sei denn, Sie erstellen diese wirklich einfachen Landingpages , die in etwa 1 h oder 2 h oder so neu erstellt werden können . Meiner Meinung nach ist dieses Plug-in wirklich einen Versuch wert. Und der Aufwand von Figma zu Webflow lohnt sich wirklich, aber nicht umgekehrt, nicht für diese, sagen wir, komplexen Seiten, denn meiner Meinung nach wird man, wenn etwas kaputt geht, wenn man nicht weiß, wie man es in Webflow repariert, dann stolpert man wirklich . Schauen Sie sich also unbedingt den Webflow-Teil an und sehen Sie, wie Sie ihn von Grund auf neu erstellen können. Und ich werde diesen Abschnitt nicht noch einmal aufnehmen , da er bereits aus diesen exportierten Assets von Adobe XD nach Figma aufgenommen wurde , weil es genau dasselbe ist. Auch hier ist ein Bild ein Bild, unabhängig davon, ob Sie es aus Adobe XD oder Figma exportiert In diesem speziellen Beispiel werden Sie immer noch in Webflow landen . Wie ich in der nächsten Lektion sagte, werden wir mit dieser Umstellung von XD Figma beginnen. Und ich werde einige Unterschiede in der Arbeit mit beiden Tools zeigen . Wir sehen uns also in der nächsten Lektion und lass uns anfangen. 150. Moodboard und Sitemap: In Ordnung, weniger als in Adobe XD zu springen. Lassen Sie mich Ihnen zeigen, wo wir in diesem Abschnitt des Kurses waren und wo wir landen werden. Also hier sind wir in Adobe XD und das haben wir bisher erstellt. Wie Sie sich vielleicht erinnern, haben wir diese Papier-Wireframes erstellt, um Benutzerabläufe zu erstellen, Sitemaps für die Inhaltsarchitektur. Dann haben wir dieses Moodboard erstellt, indem Bilder aus dem Internet kopiert und eingefügt haben. Und diesen Styleguide haben wir am Ende unseres Projekts erstellt . Jetzt werde ich nicht genau die gleichen Schritte behandeln , da ich sie bereits erstellt habe und Sie sie wahrscheinlich schon gesehen haben. Sie werden sich also einfach langweilen , weil alles genau gleich ist. Was ich in diesem Teil des Kurses tun werde konzentriert sich nicht auf Papier-Wireframes, auf den Benutzerfluss. Aber ich werde einige Unterschiede in Figma zeigen, insbesondere in Bezug auf diese Pfeile. Und wir werden an der Sitemap und der Inhaltsarchitektur arbeiten . Und nicht wegen des Inhalts an sich, ich werde diesen Inhalt einfach von hier kopieren und in Figma einfügen . Aber ich werde einige Organisationstipps und -tricks zeigen , die Sie bei Figma-Schulden verwenden können. Adobe XD hat, sind aber noch einmal ein bisschen anders, dann für das Moodboard, wir werden das einfach kopieren, weil ich deine Zeit nicht für diesen Styleguide verschwenden möchte. Dieselbe Geschichte. Ich werde das einfach kopieren und einfügen, weil wir nur dieselben Assets verwenden. Und ich werde später nur zeigen, wie Sie das für Ihre Entwickler einrichten später nur zeigen, wie Sie das für Ihre Entwickler denn Figma hat diese Funktion namens Seiten, die Adobe XD nicht hat. Also werde ich dort einige Unterschiede aufzeigen. Dann greifen wir unser Design an. Wir beginnen auf der Homepage, gehen weiter zu Autos, ausgewählten Autos und so weiter und so fort. Also werde ich genau das Gleiche tun wie wir es hier getan haben. Ich werde nur zeigen, wie man es in Figma nachbaut und welche Unterschiede es gibt. Ich möchte Sie, wie gesagt, von Grund auf durch diesen Prozess führen, weil ich Ihnen nur zeigen wollte , dass diese Tools fast identisch sind. Als Außenseiter. Sie könnten sich einige Funktionen ansehen und selbst denken, nun, hier gibt es einige Hauptunterschiede. Sie sind nicht genau gleich, aber glauben Sie mir, sie sind es. Während ich Sie durch diesen Prozess führe, können Sie sich den gesamten XD-Teil des Kurses und jetzt den gesamten Filmteil des Kurses ansehen . Und überzeugen Sie sich selbst, wie unterschiedlich diese Tools wirklich sind. Die Wahrheit ist, sie sind fast genau gleich. Dass es hier und da einige, nur ein paar Unterschiede in, sagen wir Namenskonventionen und diesen Seiten gibt , z. B. wie Komponenten funktionieren und solche Dinge. Aber am Ende des Tages ist das Gesamtbild genau dasselbe und diese Tools machen genau die gleiche Arbeit. Also, was ich tun werde, ist das so zur Seite zu legen und dir zu zeigen, wie man in Figma arbeitet. Also hier sind wir in Figma. Und wie Sie vielleicht feststellen, unterscheidet sich das Tool ein bisschen von XD. Denn wenn ich es in XD noch einmal zurückbringe, können Sie sehen, dass wir all unsere Funktionen und all unsere Komponenten, Farben, Stile genau hier haben und wir unsere Tools auf der linken Seite haben, während wir in Figma unsere Tools genau hier haben und wir haben unser Eigenschaftenfenster genau hier. Teilen funktioniert genauso wie in XD. Sie haben diesen Designprototyp einfach nicht hier geteilt, aber Sie entwerfen sofort. Du musst es nicht per se teilen, du musst es nur teilen, sobald es mit dem Teilen beginnt, und dann wird es automatisch aktualisiert, weil es sich im Browser befindet. Aber hier können Sie einfach klicken, um eine Vorschau anzuzeigen, genau wie in Adobe XD. Und anstatt all Ihre Farben, Stile, Elemente Symbole auf dieser Seite zu haben, werden Sie sie einfach auf dieser Seite haben wenn Sie irgendwo draußen klicken. Der andere große Unterschied ist , dass wir unsere Boards nicht haben. Also in XD haben wir unsere Vögel. Das sind also alles Zeichenbretter, wie Sie sich vielleicht erinnern, das ist z. B. 14 40 mal 5775. Also werde ich weitermachen und das sehr schnell kopieren. Nur diese Breite. Geh zurück zu hier und hier muss ich F für den Frame drücken, einen schnellen Frame ziehen. Und dann hier für die Breite, füge einfach das eine N ein Und hier habe ich meinen Rahmen. Wenn ich mich richtig erinnere, ist das eine Homepage. Lassen Sie mich diesen Text hier kopieren. Gehen Sie zurück zu hier, doppelklicken Sie auf diesen Namen der Frame Control V und drücken Sie die Eingabetaste. Also, was ich hier gemacht habe, ist, dass er einen Flughafen geschaffen hat. Es ist nur, es heißt nicht unser Hafen in Figma. Es heißt Frame. Und der Rahmen hat ein paar Funktionen, die Ports nicht haben. Aber im Grunde sind sie, kurz gesagt , genau dasselbe. Lassen Sie uns also mit dem ersten beginnen und ich werde hier sehr schnell auf Löschen klicken , weil ich x dy nach draußen ziehen möchte . Damit du mich nicht blind siehst , während ich anfange, mit diesem Song zu arbeiten, drücken wir einfach Control C und Control V, um hier und da ein paar Säuren einzufügen. Also werde ich gleich hier reinkommen und dieses Papierdrahtmodell so hineinkleben . Dann erstelle ich im Grunde einen Bericht oder einen Frame wie diesen. Und ich nenne es Moodboard. Und lass mich nachschauen. Es ist 19 201-080-1920 mal 1080, so. Und dann wähle ich alle Inhalte aus, die sich ursprünglich in diesem Moodboard befanden, und wähle Strg-V Inhalte aus, die sich ursprünglich in diesem Moodboard aus , um ihn einzufügen. Und du kannst sehen, dass es es in genau der gleichen Stärke einfügen wird , nur anstatt separate Bilder haben, wie ich sie hier in XD habe, wird es sie als einzelnes Bild einfügen. Was ich an dieser Stelle also tun kann, sind diese Moodboard-Bilder. Und wenn Sie separate Bilder exportieren möchten, was Sie tun können, denn wie Sie sehen können, habe ich sie ausgewählt. In Ordnung, hier. Du schaffst das. Sie können also Steuerung C, Kopieren, Steuerung V und Einfügen ausführen. Es wird also ein einzelnes Bild einfügen. Dann können Sie es skalieren, indem Sie die Umschalttaste gedrückt halten und es genau dort einfügen , wo Sie möchten. Aber in diesem Fall möchte ich Ihre Zeit nicht verschwenden, denn wenn wir sehen wollen, wie ich zu diesen Bildern gekommen bin, schauen Sie sich unbedingt den Moodboard-Abschnitt des Kurses an. Dann ziehe ich mein Logo per Drag & Drop hinein. Und ich werde es irgendwo hier platzieren und es Logo nennen. Und Sie können sehen, dass wir hier einige Probleme haben. Also was ich zuerst machen werde ist zB mal schauen. Vielleicht möchte ich den Buchstabenabstand auf etwa so erhöhen und dann sicherstellen, dass diese beiden zentriert sind. Und ich werde den Umriss so platzieren, wie er ist, wähle mein Logo aus und das ist Ihre Komponente genau hier. Also Strg-Alt-Klick oder Befehls-Alt-Klick auf einem Mac. Anstelle von Control K, du kannst sehen, dass Strg-Alt K hier in XD nur Control K oder Command K, Command Alt-Taste ist . Also im Grunde genau das gleiche Logo. Und wenn Sie eine Version dieses Logos erstellen möchten , müssen wir das nicht, aber wenn Sie möchten, aber wenn Sie möchten, können Sie einfach hier klicken , um eine Variante hinzuzufügen. Was die Variante ist, ist eine Version oder unsere Komponente, die dieser Hauptkomponente untergeordnet ist. Und in diesem Fall wollen wir sehen, was wir tun können. Also diese Variante kann ich sie z.B. statt Varianten nennen , bis ich sie weiß nennen kann. Sie können also sehen, dass wir das jetzt haben. Und wenn ich hier doppelklicke, siehst du die Eigenschaft eins weiß. Die Eigenschaft Eins bedeutet also , dass es die erste Immobilie ist. Wenn wir eine weitere Variante hinzufügen, wird sie Eigenschaft zu Eigenschaft drei sein und so weiter und so fort. Egal, wie viele dieser Eigenschaften Sie hinzufügen, es wird so enden. Also wähle ich meine Gliederung aus. Klicken Sie hier. Achten Sie darauf, Weiß zu wählen. Und ich werde dieses Weiß als Farbe hinzufügen, damit ich hier klicken und mich verstecken lassen kann, damit du das ein bisschen besser sehen kannst. Und ich kann dann auf die Stelle klicken , an der Farbstile stehen. Ich klicke hier und nenne es weiß, so. Und Beschreibung reinweiße Farbe. Da haben wir es. Jetzt haben wir also diesen weißen Stil. Sie können sehen, dass es angewendet wird. Und ich kann diese beiden Texte auswählen und zu meiner Füllfarbe kommen, die hier ist. Klicken Sie auf diese Punkte. Ich denke, wähle Weiß. Also wird es darauf aktualisiert. Jetzt haben wir also ein Logo mit zwei Versionen. Wir haben Weiß und wir haben diese dunkle Originalfarbe. Also lasst uns weitermachen und diese ein bisschen besser organisieren. Ich werde sie so anstupsen. Und bevor wir weitermachen, können Sie sehen, dass wir die Seite genau hier haben. Ich kann auf die Seite klicken, mit der rechten Maustaste hier klicken, Seite umbenannt. Und ich kann zum Beispiel Vermögenswerte oder eine Spinne sehen , weil das der Name ist. Säuren. Drücken Sie die Eingabetaste. Da haben wir es. Und ich kann eine neue Seite erstellen und das Design nennen. Also möchte ich innerhalb des Designs vielleicht Control C und Control V auswählen , um diese Wireframes einzufügen. Denn wenn ich mich an irgendeiner Stelle daran erinnern möchte, ob etwas richtig gemacht wurde, z.B. und ich kann direkt hier doppelklicken und dieses Paper Wireframe z.B. nennen dieses Paper Wireframe z.B. und dann wieder zu einem Spotter-Assets wechseln. Ich kann es loswerden, wenn ich will, aber ich lasse es so, wie es hier ist. Als Nächstes möchte ich für diesen speziellen Abschnitt der Erstellung dieser Sitemap oder Inhaltsarchitektur beginnen . Also klicken Sie auf Frame, drücken Sie F. Klicken Sie nun und kopieren Sie den Namen der Texte und fügen Sie ihn ein. Sobald ich die Inhaltsarchitektur für diesen speziellen Fall Sitemap erstellen kann , werde ich 1173616 tun , weil, hoppla, nicht das Logo. Das ist 11173616. Da haben wir es. Weil ich möchte, dass der Inhalt genau derselbe ist. Und was ich erwähnen möchte, ist, dass Sie diese Figma-Dateien als Projektdateien erhalten, genauso wie wir es mit XD-Dateien gemacht haben. Stellen Sie also sicher, dass Sie sie herunterladen, stellen Sie sicher, dass Sie sie genau dann auf Ihrem Computer öffnen , wenn Sie sie öffnen möchten, und kommen Sie direkt hierher. Zurück zu Dateien und dann zu Dateiimport. Und Sie werden diese Dateien als neue Dateien importieren. Es wird im Grunde so etwas wie Import aus anderen Tools oder so etwas sehen . Also lass mich eigentlich nur nachschauen. Also diese neue Designdatei und Importdatei, Sie können auf Datei importieren klicken, um Dateien aus anderen Tools zu importieren. Und dann wirst du es darin öffnen können. Also lass mich zurück zu meiner Akte gehen, so. Da sind wir also und lassen Sie uns hineinspringen und schnell diese Inhaltsarchitektur erstellen , denn wir sind schon 10 Minuten mit diesem Video beschäftigt. Lassen Sie uns also schnell das dort fertige erstellen. Und dann gehe ich zurück. Zum Benutzerfluss im nächsten Video. Fangen wir also mit der Homepage an. Und lassen Sie uns zunächst einen Text erstellen. Wählen wir also Poppins von hier aus. Poppins, da haben wir es. Und Poppins wird 20 unregelmäßig sein. Da haben wir es. Und die Farbe kann rein weiß sein, also was ich an dieser Stelle tun kann, ist die Startseite einzugeben. Da haben wir es. Und was ich tun kann, ist Shift a zu drücken , dadurch wird ein Frame darum herum erstellt. Und ich werde genau die gleichen Einstellungen verwenden wie zuvor. Also werde ich sicherstellen, dass es zentriert ist. Und ich werde die horizontale Paarung von, mal sehen, 44, 44 Pixeln einbeziehen . Da haben wir es. Und jetzt brauche ich eine vertikale Polsterung von 26 Pixeln, z. B. und ich werde genau die gleiche Form wie diese Form bekommen . Jetzt nur in Figma. nun die Farben angeht, lassen Sie mich die Farbe auswählen , die wir bereits hier und hier haben , wo Füllen steht. Ich klicke auf Plus, klicke hier füge diese Farbe ein. Da haben wir es. Und jetzt wähle ich hier die Schriftfarbe aus. Und mal sehen, eigentlich sollte das weiß sein. Da haben wir es. Farben auswählen. Lass uns einfach sehen. Also fülle. Da haben wir es. Wenn ich jetzt meinen Text auswähle, los geht's. Also das sollte dort weiß sein. Okay? Wenn ich also meine Alt- oder Optionstaste gedrückt halte, können Sie sehen, dass wir 26 von oben und unten und 44 von jeder Seite sind , gleich hier liquidiert. Sie können jetzt also sehen, dass wir den Rahmen haben. Und was die Namenskonventionen angeht, lassen Sie uns dieselbe Namenskonvention verwenden. Also nenne ich es Nav-Item, wie ich es in Adobe XD getan habe. Und ich werde es einfach duplizieren. Also Control D. Und hier nenne ich es Autos. Control D Dieses nenne ich Kredite. Steuerung D. Dies wird „Kontaktieren Sie uns“ sein. Und wenn Sie sich das Video über Inhaltsarchitektur angesehen haben, wozu ich Sie wirklich ermutige, sollten Sie sich im Grunde überlegen, welche Art von Inhalten auf jeder Seite erscheinen werden. Das ist der eigentliche Sinn der Inhaltsarchitektur. Und in diesem Fall denken wir nur darüber nach, was wir auf welcher Seite aufnehmen werden. Damit meine ich, was jede Seite braucht. Lassen Sie mich also versuchen, den Text tatsächlich zu kopieren und einzufügen, aber er basiert nur auf einem Bild. Also lass uns das machen. Also drück T, ich habe navigiert. Und lassen Sie uns einfach hier überprüfen, was es gemacht hat. Und genau das wird in den späteren Versionen von Figma behoben . Jetzt, wo es Teil von XD ist. Schauen wir uns also diese Farbe an. Also werde ich diese Farbe auswählen, lass mich einfach sehen, wie ich sie genannt habe. Dunkle, treffende Farbe, glaube ich. Ja. Lass es uns umbenennen und lass es uns schnell hier hinzufügen, klicke hier. So dunkel, Farbe hinzufügen, dunkelhaarig, und los geht's. Also, was wir jetzt tun werden, ist im Grunde eine Gruppe zu erstellen und diese Gruppe zu nennen. Lass mich sehen, wie ich es genannt habe. Darin befinden sich die Homepage-Sektionen. Jetzt kann ich für diese Gruppe ein automatisches Layout wie dieses erstellen. Und ich kann es einfach so auf den Boden legen. Und mal sehen, was ich in Adobe XD gemacht habe. Sie können hier sehen, dass wir den Stapel bis zum Ende von 20 verwendet haben . Gehen wir also zurück zu Figma. Also in diesem Fall die unteren 20 automatischen Layouts gestapelt. Wenn ich also das Duplikat mache und die Alt-Taste gedrückt halte, können Sie sehen, dass wir einen Abstand von 20 zwischen diesen beiden Elementen haben , was wir wirklich wollen. Also wer sind wir? Da haben wir es. Sie können außerhalb von Control D klicken , um das zu platzieren. Also was wir tun, Kontrolle D, Kontrolle D, Kontrolle D, Kontrolle D. Das wird also unsere Vorteile sein, wo wir sind , und so wird das sein, kontaktieren Sie uns. Dann endlich Kontrolle D Noch einmal Fußzeile. Da haben wir es. Jetzt, wo wir diese Wohnbereiche haben, können wir diese beiden tatsächlich platzieren. Also dieses Nav-Item und Home-Bereich, wir können sie in ein Gruppensteuerelement G legen Und mal sehen, ich kann das z.B. Homepage so nennen . Und stellen Sie sicher, dass Sie dafür das automatische Layout aktivieren. Und dieses Mal werde ich die Distanz von 40 schaffen. Da haben wir es. Und jetzt werde ich dieses Video hier beenden. Wirf die weg. Denn was ich tun kann, ist gleiche Geschichte wie in Adobe XD. zunächst sicher, dass dies so zentriert ist. Und dann mach drei weitere Kopien. Also Control D, Control D, Control D. Ups. Control D, so. Und ich kann jetzt weitermachen und darin doppelklicken und das Auto nennen und dann all das ändern. Ich doppelklicke hier, gebe Kredite ein und ändere all das. Doppelklicken Sie hier und geben Sie Kontakt ein, und ändern Sie dann alles. sehen uns also im nächsten Video, sobald ich damit fertig bin, und dann gehen wir zum Benutzerfluss über . Also werde ich dich dort sehen. 151. Benutzerfluss: Nachdem die Inhaltsarchitektur der Sitemap I fertig ist, gehen wir nun zum Benutzerfluss über und zeigen, wie er in XD aussieht. Das ist es also. Wir werden diese Komponenten schnell in derselben Länge erstellen , wie wir es gerade für die Inhaltsarchitektur in Figma Sort getan haben. Lassen Sie mich Ihnen zeigen, wie Sie genau das machen. Also werden wir es irgendwo hier platzieren, z. B. also Leertaste und Linksklick, um zu navigieren, F für den Rahmen drücken. Zeichne einen heraus und ich nenne ihn z. B. User Flows, genauso wie wir es in Adobe XD genannt haben. Geben wir ihm nun tatsächlich die gleichen, sagen wir Dimensionen. Lassen Sie mich das auswählen und sehen, was wir hier hatten. Wir haben also 18 73 mit 749 solchen. Also Breite und Höhe, und ich werde es genau hier platzieren und es dann hier positionieren, vielleicht irgendwo in und es dann hier positionieren, der Nähe. Also vielleicht können wir das so ersetzen , dass es genauso aussieht, als wäre es in XD , durch so etwas wie dieses. Und dann kann ich vielleicht mein Logo ungefähr hier positionieren. Und ich werde das Logo etwas anders positionieren, weil ich in der nächsten Lektion einen Styleguide erstellen werde , der zeigt, wie das geht. Also werden wir dieses Logo dort platzieren, aber lassen Sie uns es vorerst vielleicht genau hier positionieren , damit wir es ein bisschen näher rücken können. Gehen wir nun zum Benutzerfluss über. Als Erstes werde ich ein paar Rechtecke zeichnen. Also drück R, treffe wieder da drin. Und dann kopiere ich diese beiden Farben. Also kopiere mein Hauptblau. Fügen Sie es hier ein. Da haben wir es. Ich werde gleich hier klicken. Klicken Sie hier, um einen neuen Farbstil hinzuzufügen, und lassen Sie mich verstecken, damit Sie sehen können, was ich mache. Und das nenne ich mal Main Blue. Ich nenne es blaue Hauptfarbe. Das ist also eigentlich der Hauptunterschied in XD Figma, weil Sie die beschreibenden Optionen von d sehen und weiter erklären können, wofür diese Farbe verwendet wird. Also im Grunde genommen, wenn diese Farbe nur für die Knöpfe verwendet wird, dann kannst du sie beschreiben. ZB die blaue Hauptschaltflächenfarbe oder wenn sie nur für Hintergrundbilder oder für Schlagschatten oder was auch immer verwendet wird für Hintergrundbilder oder . Sie können es dann hier beschreiben. Und das ist besonders nützlich für Entwickler. Nein, Sie haben „Weitere Optionen anzeigen“. Wenn ich also genau dort klicke, können Sie sehen, dass wir diese Eigenschaften haben. Ich kann es anpassen, oder ich kann hier sogar neue Eigenschaften hinzufügen. Z.B. Ich kann die Overlays hinzufügen, ich kann hier klicken. Und dann kann ich statt eines festen Gradienten einen linearen Gradienten hinzufügen. Also kann ich vielleicht die Opazität dieses linearen Gradienten verringern. Und ich kann all diese Optionen weiter hinzufügen. Jetzt kann ich einfach auf Stil erstellen klicken weil wir nichts davon benötigen. Ich klicke einfach auf Stil erstellen. Und jetzt haben wir diesen wichtigsten Blues-Stil. Jetzt werde ich dasselbe tun. Lassen Sie mich diesen einfach kopieren und einfügen. Klicken Sie hier, klicken Sie hier und nennen Sie diese Hover-Farbe. Hoverfarbe oder Button-Hover-Farbe. Also unsere Entwickler später, ich weiß, was das ist. Jetzt, wo ich diese beiden erstellt habe, lass mich sie ganz schnell loswerden. Und ich werde dieselben Poppins 20-Texte verwenden. Und ich werde Ihnen etwas später zeigen, wie Sie diesen Text hinzufügen können, aber im Moment werden wir ihn einfach von Grund auf neu erstellen. Ich werde also im Grunde einen Kreis erstellen und die Abkürzung ist hier 0. Du kannst deine Umschalttaste genau hier gedrückt halten. Und lassen Sie mich all diese schließen , damit sie uns nicht stören. Für diesen Fall kann ich es also Kreis nennen, wie Schulden. Und für die Dimensionen nehmen wir ein Fünftel, t ein Fünftel. Also etwas Nettes und Großes. Klicken Sie auf Ihre Farben, klicken Sie auf Hauptblau und geben Sie den Text darin ein. Und ich nenne es so Eintrag. Und wie Sie sehen können, wird es dieselbe Farbe behalten und fügen wir ein Weiß hinzu. Und gruppiere sie alle, achte darauf, dass sie sich in einem Zentrum wie Schulden befinden. Und ich werde sie zuerst in eine Gruppe einteilen. Und ich nenne diesen Eintrag. Und dann werde ich das in eine Komponente verwandeln. Jetzt haben wir also Eintritt. Also werde ich das hier ganz schnell platzieren. Was wir dann auch haben, ist, wenn ich ganz nach unten scrolle, haben wir Eintrag, Aktion, Prozess und Entscheidung. die Aktion angeht, werden wir also Was die Aktion angeht, werden wir also im Grunde diesen helleren Kreis erstellen. Aber jetzt, wo ich es mir ansehe, haben wir es nicht wirklich benutzt. Was wir also tun können, können wir vielleicht einfach die Aktion nutzen. Also lass uns nochmal gehen. Also drücke hier 0, erstelle einen Kreis, 15150. Da haben wir es. Und ich werde die Schwebefarbe daran anhängen. Ich nenne es Kreis. Verwenden Sie dann das Textwerkzeug und geben Sie die Aktion so ein. Und stellen Sie sicher, dass der Text genau hier mittig ausgerichtet ist. Stellen Sie also sicher , dass beide so zentriert sind. Also, da haben wir es. Und ich werde diese gruppieren, um es Action zu nennen. Kann sofort Shift a drücken. Ich werde dir nur zeigen, dass der Workflow, den wir in XD verwendet haben auch hier genau so funktioniert. Jetzt, wo wir Maßnahmen haben , wollen wir den Prozess. für den Vorgang Lassen Sie uns für den Vorgang ein schnelles Rechteck erstellen. Du kannst hier R drücken. Und für den Prozess können wir genau dieselbe Farbe verwenden. Da haben wir es. Und ich nenne es das Rechteck. So. Drücken Sie T für das Textwerkzeug, ich pinne den Prozess so an. Und lassen Sie uns sehen, was wir hier tun können , damit ich es hierher schieben kann. Und mal sehen, dieser war 86 groß. Also lass uns das machen. 86 Zoll hoch und stellen Sie sicher, dass sich dies in der Mitte befindet. Da haben wir es. Und was die Seiten angeht, können wir vielleicht 44 einbeziehen. Ich denke das ist in Ordnung. Ja. Also, wenn ich es gruppiere und es Prozess nenne, los geht's, drücke Shift a und dann kann ich es in eine Komponente verwandeln. Dieses Mal bin ich also andersherum gegangen, aber man kann immer noch sehen, dass sie als Komponente angezeigt werden. Also im Grunde kannst du es machen, wie du willst. Schließlich haben wir eine Entscheidung. Um das zu tun, können Sie ein Quadrat erstellen. Also lasst uns noch einmal mit unserem und daraus 100 mal 100 machen. Da haben wir es. Und wir können dieselbe Horrorfarbe verwenden. Da haben wir es. Und ich kann diese Entscheidung so nennen. Treffen Sie die Entscheidung, die Shift zu drücken, während Sie rotieren Stellen Sie sicher, dass Sie diese beiden so in der Mitte positionieren. Da haben wir es. Und lassen Sie uns das tatsächlich in eine dunkle Farbe verwandeln . Also blaue Hauptfarbe. Und gruppieren Sie diese, um eine Entscheidung zu treffen. Und dann klicken Sie hier, um daraus eine Komponente zu machen. Nun endlich, um all diese Pfeile zu verwenden, können Sie von hier aus einfach einen Pfeil verwenden. Also um all diese zu verbinden und daraus das zu machen, was wir hier in unserer XD-Datei haben. Was ich also tun kann, ist alles so auszuwählen oder C zu steuern. Komm hier rein, gib Control V und es wird es als Bild einfügen. Es wird also eine nette kleine Referenz für uns sein. Was wir hier also tun können ist vielleicht eine Auswahl zu treffen. Also genau hier haben wir diese Entscheidung. Anstatt zu verarbeiten geben wir hier also etwas wie „Autos durchsuchen“ ein und Sie können sehen, dass sich das automatisch anpasst. Für diese Aktion geben wir also View Card ein. Los geht's und stellen sicher, dass beide in der Mitte sind. Also die gleiche Geschichte wie in XD zuvor. Aber aus irgendeinem Grund wird es nicht nuggets, also lass mich es auswählen und manuell und hier platzieren. Also Vieux Carre, los geht's. Dann haben wir diese Entscheidung. Und stellen wir sicher, dass sie alle im Mittelpunkt des Lebens stehen. Also stell sicher, dass du sie hier anstupst. Also hier oben sehen wir, unten sehen wir, also Control D noch einmal. Also siehe Kredite. Da haben wir es. Damit geht es in die Mitte von Control D. Down. Da gehst du und siehst dir Related Cars an. Stellen Sie sicher, dass das in der Mitte ist Kontrolle D. Hier schreibe ich in Kontakt, Händler stellt sicher, dass das in der Mitte ist. Kontrolliere das Buch. Eine Probefahrt, lasse den Loop laufen und dupliziere diesen. Sie anstelle des Eintrags den Befehl exit ein. Jetzt, wo wir einen User Flow haben, ist das, was wir an dieser Stelle tun können, mit Pfeilen verbunden. Also können wir sie vielleicht platzieren und sie vielleicht so positionieren, damit wir sie vielleicht ein bisschen anstupsen. Vielleicht können wir sicherstellen , dass diese zentriert sind. Bewege sie ein bisschen hin und her. Vielleicht mach so etwas, so etwas, weil wir Platz haben und ich werde es hier anstupsen. Dann stellt hier sicher, dass das, diese beiden zentriert sind und das ist ungefähr hier. Lassen Sie uns nun all diese Pfeile hinzufügen. Also als Erstes verwende ich einfach Shift L, aber ich klicke auf den Pfeil, nur um es dir zu zeigen. Du kannst die Schicht benutzen. Da haben wir es. Nun 40 Pfeile, wenn ich mich richtig erinnere, ja, wenn wir diese Farbe verwenden, kann man diesen Kreis nicht haben. Du müsstest es neu erstellen, wenn du willst, dass es genauso ist wie in Figma. Aber vorerst werde ich es einfach in diesem gesamten Kreis verwenden. Also lasst uns hier reinspringen. Lassen Sie mich tatsächlich hierher ziehen. Also hier können wir vielleicht für, für die Dicke, für die Farbe verwenden . Ich kann die Farbe mit dem Mauszeiger wählen und sofort haben wir unseren Pfeil. Ich kann also auswählen D drücken, um es zu duplizieren, Strg D, um es genau hier zu positionieren. Ich kann sehen, dass es in die gleiche Entfernung gesprungen ist, aber ich möchte, dass es ungefähr hier ist. Da haben wir es. Und vielleicht sind diese beiden nicht zentriert. Jetzt sind sie es. Lassen Sie uns also weitermachen und all dies schnell zentrieren. Da haben wir es. Nun, was wir tun können, weil wir diese komplizierteren Pfeile haben, wie diese, z. B. können wir einige Kombinationen machen. Lassen Sie uns zunächst mit diesen Beispielpfeilen abschließen . Also Control D, lass es uns ungefähr hier versuchen. Control D, positioniere es hier so. Und ich drücke Shift. Da haben wir es. Stellen Sie sicher, dass das in der Mitte, sagen wir, bei 23 ist. Drücken Sie dann D und decken Sie ab und drehen Sie, halten Sie die Umschalttaste gedrückt. Da haben wir es. Und 23 hier, und lass uns 23 hier sehen. Da haben wir es. Vielleicht können wir die gleiche Distanz nur der Sache halber zurücklegen. Und positioniere es hier. Mal sehen, Alt 20, zweieinhalb. Los geht's, 24 oder k sorgt dafür, dass das so in der Mitte ist. Und ich werde das so lassen, wie es jetzt ist. Also das einzige andere, was wir brauchen, dieses und das hier. Wählen wir also dieses und dieses Steuerelement D aus, um Duplikate zu erstellen. Also werde ich diesen hier platzieren, diesen hier, los geht's. Und ich werde es hier grob anstupsen. Also lass uns dort nachsehen. Und dieser wird in die Mitte gehen, und dieser wird hierher gehen. Da haben wir es. Also jetzt brauchen wir diese beiden. Also müssen wir uns verbinden, gelb sehen und den Händler kontaktieren. Aus irgendeinem Grund habe ich hier ein Duplikat. Lass mich es loswerden. Was ich also tun werde, ist Control D, um dieses zu duplizieren um sicherzustellen, dass es sich in der Mitte befindet. Kontrolliere D noch einmal. Und ich werde diesen rotieren. Lass uns das noch einmal machen. Da haben wir es. Was ich jetzt tun kann, ist diesen zu verlängern. Halte meine Umschalttaste gedrückt, um in die Mitte zu kommen. Erweitern Sie diese, All my Shift-Taste, und wählen Sie dann hier einfach das Ende aus. Also sagen wir keine. Und dann werden sich diese beiden hier verbinden. Das ist meiner Meinung nach also der erste Vorteil von Figma gegenüber x, z, weil Sie ein solches Tool haben. Jetzt haben wir nicht die Kreise , die ich in XD erstellt habe, aber egal, wir können sie einfach so verwenden. Also drücke einfach Strg D bei diesem. Und ich werde es genau hier anstupsen. Lassen Sie uns also ein wenig hineinzoomen, damit wir sie verwenden und auseinanderführen können . Da haben wir es. Was wir also tun werden, ist, von C-verwandten Autos zu View-Autos überzugehen. Lassen Sie uns in diesem Fall weitermachen. Wird gedreht, indem die Umschalttaste gedrückt gehalten wird. Da hast du es. Stellen Sie sicher, dass Sie dies so in der Mitte unseres Kreises positionieren . Und dann schiebe den Schreibtisch einfach vorsichtig nach rechts, so. Stellen Sie sicher, dass es in der Mitte ist. Stellen Sie sicher, dass das genau hier zutrifft. Wenn die Warteschleife gedrückt wird, und los geht's. Kurz gesagt, wir haben gerade unseren Benutzerflow erstellt und dafür haben wir 14 Minuten gebraucht. Dieser Arbeitsablauf bietet also einige Vorteile . Es gibt einige Nachteile. Du kannst sehen, dass Eis sie einfach alle ausgewählt hat und ich versuche sie zu bewegen. Und manchmal bewegt es sich einfach nicht, manchmal wird es mir gegenüber ein bisschen stur sein und solche Sachen. kannst du also hier sehen. Wir haben nicht die blauen Punkte , die wir in der XD-Version hatten, aber ich denke trotzdem, dass es den Job gut machen wird . Denken Sie daran, dass Sie zu Feigenkeimen übergehen können, was in diesem Kurs nicht behandelt wird. Und für die Deutschen habe ich fast für solche Sachen geschaffen, aber ich wollte zeigen, dass du das auch in Figma machen kannst, indem du genau den gleichen Workflow verwendest, den wir bisher in XD verwendet haben. Also werde ich vorerst all diese auswählen. Lass uns jetzt sehen. Das ist der Pfeil , der von uns wegging und auf Control G drückte. Nennen Sie diese Pfeile , um die Dinge ein bisschen übersichtlicher zu gestalten. Und was ich tun werde, ist diesen Benutzerfluss zu verbergen. Das ist also im Grunde alles für unseren Benutzerfluss. Das ist im Grunde alles für die Struktur hier. In der nächsten Lektion werden wir uns darauf konzentrieren, nämlich den Styleguide. Also wir sehen uns dort und dort wir unsere Typografie strukturieren. Ich werde diese Symbole per Drag & Drop ziehen. Ich werde das Logo positionieren. Wir werden die Schaltflächen herausfinden und sicherstellen , dass sie dort positioniert und im Grunde alle unsere Elemente in Form bringen , bevor wir mit dem Design beginnen und bevor wir mit dem Design der Homepage enden . Also werde ich dich dort sehen. 152. Styleguide erstellen: Lass uns weitermachen und an unserem Styleguide arbeiten. Lassen Sie mich diesen Rahmen zunächst sehr schnell erstellen. Also F für den Rahmen, klicken Sie jetzt auf Call it Style Guide. Und wieder einmal sind wir als Pilar Assets auf den Seiten und werden zum Design wechseln, wenn wir tatsächlich mit dem Design beginnen. Aber lassen Sie uns zunächst unseren Prozess zur Vermögensbildung abschließen . Also hier, wenn du es verlängern möchtest, kannst du einfach hier klicken und es so lange verlängern , wie du möchtest. Aber in unserem Fall werden es 2.400 sein. Also werde ich einfach versuchen, alles genauso zu machen wie in Adobe XD. Also zuerst, was ich tun möchte, ist die Farben hier einzugeben. Da haben wir es. Und das hier nehme ich 32 und drauflos , wie Schulden. Und die Farbe wird hier so dunkel sein, wenn Farben hinzugefügt werden. Ich bin mir also nicht sicher, warum es nicht übersetzt wurde. Oh, da haben wir es. Es hat also einige Zeit gedauert, ein bisschen zu aktualisieren. Also werden wir es 64 von oben platzieren, so. Und wir werden es 32 von dieser Seite aus platzieren. Lass uns sehen, du hast diese nette kleine Option oben diese nette kleine Option, die dir zeigt, wo sie ist. Also zwei Pixel. Und wenn ich meine Alt-Taste oder Option auf dem Mac gedrückt halte, können Sie sehen, dass wir 64,32 sind. Lassen Sie uns also mit der Topographie beginnen , denn das ist meiner Meinung nach viel wichtiger. Diese Farben, weil sie sehr schnell erstellt werden. Also Typografie, ich werde den Text hier einfügen. Stellen Sie sicher, dass es linksbündig ist, stellen Sie sicher, dass es auch linksbündig ist. Wir haben diese Probleme also später nicht. Da haben wir es. Als Erstes drücke ich hier Strg D und kopiere und füge im Grunde den gesamten Text hier ein. Und das Wichtigste zuerst, das wird 64 Bolzen sein . Da haben wir es. Und ich werde es platzieren, lassen Sie uns 40 von hier aus sehen. So. Und dann werde ich das nach unten verschieben es in eine Gruppe namens Topographie einordnen. So. Klicken Sie auf Autolayout oder verschieben Sie eine Mischung, wenn 40 der Unterschied ist, und dann wähle ich dieses aus und komme direkt hierher. Also zuerst, schauen wir uns die Farben an. Ja, wir können diese Überschriftenfarbe haben. Das ist in Ordnung. Ich klicke gleich hier und füge einen neuen Stil hinzu. Und ich werde das H so nennen. Das wird also im Grunde unser H1 sein. Und jetzt lassen Sie uns weitermachen und das duplizieren. Klicken Sie hier. Jetzt klicke ich auf diesen Link, um die Verknüpfung aufzuheben. Dann will ich für diesen zweiten das. Also kann ich vielleicht einfach D steuern und all diese auswählen. Es ist also viel einfacher für uns zu erstellen. Mal sehen, das wird Textblock sein. Da haben wir es. Und Absatz. Da haben wir es. Und unbeschrifteter Text rein, los geht's. zuerst überprüfen, Lassen Sie uns zuerst überprüfen, ob wir dieses Setup haben. Stellen Sie also sicher, dass Sie H1 auswählen und dann darauf klicken, klicken Sie hier. Und schauen wir mal, was wir haben. Wir haben also, was es sagt, einen Zeilenabstand. Wir haben also einen Buchstabenabstand und wir haben eine Zeilenhöhe. In diesem Fall ist es also automatisch. Aber hier geben wir 86 ein, also los geht's. Und jetzt wird alles viel schärfer. Da haben wir es. Das ist also unser H1 hier für diesen zweiten, wir wollen daraus 32 machen. Also bolzen. Und schauen wir uns die Farbe an, ich denke, es ist dieselbe. Ja, ist es. Es ist also eins zu eins zu zwei zu vier. Da haben wir es. Das ist in Ordnung. Das ist also dasselbe. Ich werde weitermachen und diese anpassen. Wir haben also 56 für die Zeilenhöhe oder den Zeilenabstand. Wie wirst du es nennen? Also schauen wir uns 56 an. Da haben wir es. Und ich werde genau hier klicken, hier klicken und es H2 nennen. Dann mache ich für diesen dritten , lass uns sehen, die Farbe ist anders. Also vielleicht sollte ich diese Farben tatsächlich kreieren , damit wir nicht verwirrt werden. Also lass uns das so sehen. Wir haben also schon den Hover, wir haben das Hauptblau, wir haben eine dunkle Überschrift, das ist genau diese Farbe hier, eine dunklere Farbe. Also vielleicht kann ich wirklich schnell weitermachen, mach das einfach. Also unsere Kontrolle D, Kontrolle D, Kontrolle D Kontrolle D, Kontrolle D. Mal sehen. Also für diesen. Was ich tun kann, ist hier zu klicken und dann diese Farbe zu probieren. Für diesen kann ich dasselbe tun und diese Farbe probieren. Für diesen. Ich kann das hellgrau probieren. Da haben wir es. Das wird reinweiß sein. Das haben wir schon. Und schließlich haben wir diese letzte, die eine Körperfarbe ist. Da haben wir es. Lassen Sie uns das probieren. Da haben wir es. Also zuerst, fügen wir diese so hinzu, wie sie sind. Also so. Und das wird hier sein, nur damit ich weiß, was alles ist. Also, um ihnen Namen zu geben, okay, wir können mit diesem beginnen. Also lass es uns schnell hinzufügen. Erstellen Sie einen neuen Stil. Dies wird ein Absatz mit drei Strichen sein. Also Farbe für jeweils drei und Absätze. Da haben wir es. Erstelle es neu. Ich hab's geschafft. Also lass uns das noch einmal versuchen. Also h3, der Absatz, Farbe, Stil erstellen. Da haben wir es. Nun, dieser. Lass uns hier klicken und dann genau hier, nenne es dunkelgrau. Stil kreieren. Das nennen wir ein Hellgrau. Da haben wir es. Dann werden wir das endlich Körperfarbe nennen. Okay? Jetzt, wo alles fertig ist, können wir an dieser Stelle vielleicht weitermachen und das entfernen, die Festplatte auswählen, weil wir auch hier die Karosseriefarbe anwenden müssen . Also einfach hier klicken. Da haben wir es, denn wir wollen sicherstellen , dass das ein bisschen auffällt. Also hier, was wir mit diesem H3 wollen, ist, lassen Sie uns sehen. In diesem Fall benötigen wir also diese H3-Farbe. Also klicken Sie hier, drei Absätze. Da haben wir es. Und lassen Sie uns das anpassen. Also 40 für die Größe, wir nehmen 24. Da haben wir es. Bolt ist immer noch da. Ja. Lass uns gleich hier bei New Style klicken, das wird HD sein. Nun, das wird ein Textblock sein. Gehen wir also zunächst auf vier bis 20 runter. Lass uns zur normalen Molkerei gehen. Und hier haben wir diese Farbe, die dunkelgrau ist. Wählen Sie also hier die dunkelgraue Farbe aus. Da haben wir es. Und 44, der Abstand so. Da haben wir es. Das ist also unser Textblock. Und lasst uns diesen Stil kreieren. Also Textblock, denn später in Webflow werden wir genau diesen Stil verwenden. Es ist also wirklich wichtig. Was wir hier tun werden ist, dass uns aus bestimmten Gründen der Absatz fehlt. Also lassen Sie uns das duplizieren und lassen Sie mich das hier kopieren und einfügen. Da haben wir es. Also für die Absatztexte brauchen wir das für D-Farbe, also für D bis e30. Lass mich überprüfen, ob das diese Farbe ist. Von D bis E drei Nullen. Das ist also dasselbe für den Absatz. Also H drei Absätze , glaube ich, das wird 16, 26, unregelmäßig sein. Und wir werden einen neuen Stil erstellen, nennen wir ihn Absatz. Da haben wir es. Endlich haben wir diesen Labeltext. Und diese Farbe wird dieselbe sein wie diese Farbe. Wechseln wir also zum Absatz für das Alter von drei Jahren. Und hier geben wir 12 Unregelmäßig. Und was da steht, 24 Zeilenhöhe. Da haben wir es. Das nennen wir also unbeschrifteten Text Create Style. Da haben wir es. Jetzt sind unsere Styles fertiggestellt, unsere Farben sind fertiggestellt. Und lassen Sie uns einfach ein Farbmuster erstellen. Also um dir zu zeigen, wie es geht. Lassen Sie uns also grundsätzlich weitermachen und 177-17-7149 erstellen. Ich werde es eigentlich nicht tun. Lass uns mit so etwas wie 186 mit 177 beginnen. Das ist eine viel bessere Position hier. In Bezug auf den Eckenradius gibst du hier den Koronarkranz an. Also hier haben wir acht. Da haben wir es. Und ich werde es von dieser Farbe auf unser Hauptblau anpassen . Da haben wir es. Und ich schlage vor, dass es für die oder 32 ist, lassen Sie uns von hier aus sehen. Also 22, Strich 32. Wenn Sie erneut die Umschalttaste und unteren Pfeil drücken , werden zehn Pixel verschoben, genau wie in Adobe XD. Also werde ich diese Farbe Biji nennen, wie wir es in XD oder Color Card vielleicht gemacht haben. Und dann drück T genau hier. Und lass uns sehen. Da haben wir es. Das ist also unsere Farbe. die Größe angeht, Was die Größe angeht, können wir 24 Volt machen. Also können wir vielleicht einen dieser Stile verwenden. Also 24, und das ist dieser. Da haben wir es. Und statt dieser Farbe verwende ich, sagen wir, diese Farbe. Stellen Sie sicher, dass dies zentriert ist. Da haben wir es. Und ich drücke Strg D, um es zu duplizieren und stelle sicher, dass ich es hier positioniere, und das wird r sein. Mal sehen, ändern wir es in Textblock. Da haben wir es. Und wir werden es Hover Color nennen. Da haben wir es. Was den Abstand angeht, lassen Sie uns hier mit 16 beginnen. Also so etwas. Da haben wir's, da. Lassen Sie mich das zusammenführen. Gruppieren wir das und nennen wir diese Farbkarte. Da haben wir es. Drücken Sie Control G und ich gehe zu Projektfarben speichern. Drücken Sie Shift a, um das automatische Layout zu aktivieren. Und dann schauen wir uns an, der Abstand zwischen diesen kann 24 betragen, so. Und mal sehen, wie viele Farben ich habe. 12345678. Also sieben weitere Exemplare. Eins, oops, das nicht. Ich sollte die Farbkarte 1234567 wählen. Da haben wir es. Und ich werde weitermachen und umbenennen. All dies ist außerhalb des Bildschirms, sodass Sie sich nicht langweilen. Was ich dir hier zeigen werde, ist, also lass uns hier mit 64 beginnen. Da haben wir es. Was ich als Nächstes zeigen werde, ist Ikonographie. Lassen Sie uns also als Erstes diese Farben verwenden Control D und positionieren Sie sie hier auf 64. Dann wählen wir diesen Text namens Ikonographie aus. Da haben wir es. Und ich werde in meine Symbole springen und sicherstellen, dass Sie sie in Ihren Projektdateien finden. Ich würde sagen, auf einem Controller die Umschalttaste drücken, um sie alle auszuwählen, sie Drag-and-Drop hinein zu ziehen. Also sind sie hier und da alle irgendwie zusammen. Also werde ich sie etwas später organisieren. Aber im Grunde musst du verstehen, dass es ein bisschen anders sein wird als früher, diese innerhalb von Figma und innerhalb von XD zu organisieren. So sind sie also in XD organisiert. Und ich werde sie im Grunde alle in dieselbe Gruppe einteilen. Aber bevor ich das tue, werde ich sie alle in Komponenten umwandeln. Das wird also ein bisschen Zeit in Anspruch nehmen. Also werde ich das Video dort pausieren und beenden. Und dann komme ich vielleicht im separaten Video zu dir zurück , um zu zeigen, wie man diese Schaltflächen macht. Und dann beenden wir die Logo-Buttons und diese Autokarten, nur um einige Layouttechniken ganz schnell zu zeigen . Und dann beenden wir das Video dort. Und im Video danach werden wir zum Design übergehen und mit der Erstellung unserer Homepage beginnen. Wir sehen uns also im nächsten Video, in dem wir mit diesem Styleguide abschließen werden. 153. Styleguide erstellen 2: Also hier ist der Styleguide. Jetzt habe ich einfach weitergemacht und all diese verschiedenen Farben, verschiedenen Namen aufgefüllt und all diese verschiedenen Farben, verschiedenen Namen aufgefüllt die ganze Ikonographie geklärt. Und wenn ich mich durchklicke, kannst du sehen, dass ich all diese Symbole einfach mit einem Abstand von 32 in das automatische Layout gesetzt all diese Symbole einfach mit einem Abstand von 32 in habe. Wenn Sie es ein bisschen genauer erkunden möchten, daran, dass Sie all diese Dateien öffnen können. Sie können sie selbst erkunden und sehen, wie all diese Elemente strukturiert , sodass Sie selbst lernen können. Wenn wir bis hierher zurückkehren, hat es auch das Logo, das draußen war, zurückgebracht. Jetzt ist es drinnen. Und ich habe all diese Knöpfe und Kartentexte eingerichtet. also mit den Schaltflächen selbst Lassen Sie uns also mit den Schaltflächen selbst beginnen und sie ganz schnell erstellen. Also lass uns hier nach rechts drücken und es 32 positionieren, z. B. so etwas. Also nenne ich es gleich btn BG und gebe es, mal sehen, was wir tun können. Vielleicht so acht Pixel für die Höhe. Lass uns für die Breite gehen. Lass uns mit zwei bis fünf gehen. Höhe 73. Da haben wir es. Und ich drücke T tippe den Hauptknopf so ein. Und ich werde sehen, schauen wir mal nach den Texten, was wir tun können, lassen Sie uns sehen. Vielleicht Textblock. Ja, ich denke, das Lehrbuch ist in Ordnung. Und für die Farbe nehmen wir reines Weiß. Stellen Sie also sicher, dass der Text von der Mitte ausgeht und dass er hier positioniert werden sollte . Da haben wir es. Und für den Hintergrund der Schaltfläche werde ich das Hauptblau verwenden, was ich für die Farbe tun werde. Jetzt gruppiere ich es, nenne es main, main btn für die Haupttaste. Los geht's, klicken Sie auf Komponenten erstellen und klicken Sie , um eine Variante zu erstellen. Und für diese Variante ändern wir einfach die blaue Hauptfarbe in die Hover-Farbe, da diese Variante Hover heißen wird. Da haben wir es. Und jetzt müssen wir nur noch dies auswählen und zum Prototyp wechseln. Und Sie können auf diese Weise auf Prototypeneinstellungen anzeigen klicken. Und ich werde darauf klicken. Und ich werde es hier anhängen. Da haben wir es. Also weiter beim Schweben, zu Eigenschaft eins gewechselt, was in diesem Fall Schweben ist. Da haben wir es. Und Emission Instant oder du kannst Dissolve oder Smart Animate nehmen, aber ich entscheide mich einfach für Instant. Wenn wir sehen möchten, wie das aussieht, können Sie einfach hier klicken, aber im Grunde wird der Mauszeiger einfach hin und her bewegt. Und das wollen wir wirklich für diese spezielle Animation. Und weil wir die Zeit unserer Nutzer nicht wirklich verschwenden wollen. Wenn ich also genau hier schwebe, kann man es an dieser Stelle wirklich sehen. Also sollten wir es vielleicht wieder verbinden. Mal sehen, während wir schweben. Prototypenbereich anzeigen. Sehen Sie, was wir tun können. Beim Schweben. Wechseln Sie zu. Da haben wir es. Vielleicht sollten wir einfach einen rausziehen. Lassen Sie uns also mit Vermögenswerten beginnen. Und lass uns mit dem Styleguide beginnen. Lass uns unseren Button finden. Da haben wir es. Also werde ich es hierher ziehen. Wenn ich jetzt mit dem Mauszeiger schwebe, siehst du, dass es verrückt wird. Also zuerst, lassen Sie uns das entfernen. Lass uns zweimal gehen und dreimal zurück. Zurück. Da haben wir es. Also wollte ich nur diesen entfernen. Da haben wir es. Wir sind jetzt also genau in diese Richtung. Wenn ich also auf diese Schaltfläche ziehe und den Mauszeiger bewege, können wir sehen, dass wir jetzt diese schöne blaue Farbe für den Hover-Bereich haben . Da haben wir es also. Ich werde diesen loswerden. Jetzt haben wir unseren Hauptbutton mit Schweben. Gehen wir zurück zum Design. Und ich werde es ungefähr hier positionieren und da gehen wir eine Distanz. Lass uns mit 64 gehen, also 123 mit 64. Nett. Und dann haben wir diesen Hover-Button. Und jetzt brauchen wir nur noch diese Button-Outline. Gehen wir also noch einmal mit unserem fort, um ein Rechteck zu erstellen. Und hier müssen wir das schaffen. Also drei vor sechs, was 73. Da haben wir es. Und ich werde, oops, nicht x und y, Breite und Höhe. Also noch einmal drei zu sechs mit 73. Da haben wir es. Jetzt gehe ich weiter und wähle die Schaltflächenumrandung aus. Also gehe ich zurück zu meinen Ebenen und nenne sie die Gliederungstaste B, G. In diesem Fall haben wir es. Ich werde den gleichen Text verwenden. Ich tippe die Button-Outline ein. Da haben wir es. Und in diesem Fall können wir für die Farbe eine dunkelgraue Farbe wählen. So. Und vielleicht schaffe ich es in der Mitte. Sollen wir das auch essen? Wie Schulden. Und mal sehen, wie wir es nennen können. BTN-Gliederung. Herrlich. Was nun den Umriss selbst angeht, muss ich diese Farbe einfach als Rand verwenden. In diesem Fall werde ich also die Füllung loswerden. Ich werde einen Schlaganfall einbeziehen. Und für die Strichfarbe verwende ich die dunkelgraue Farbe. Da haben wir's, so. Und lassen Sie uns jetzt gleich hier sehen, was wir getan haben, wie Sie sehen können, wir haben das gerade hervorgehoben. Das ist also der Standardstatus, das ist der Hover-Status. Das ist in diesem Fall also der Hover-Status. Für das Schwierigere haben wir das nur für die Randfarbe, die ist das also für D bis e30. Und das ist diese Farbe, glaube ich. Ja. Also H drei Absätze, nur für den Mauszeiger oder das Q also lass uns das jetzt machen. Also BTN-Gliederung, lassen Sie uns eine Komponente erstellen. Nett. Lassen Sie uns eine Variante erstellen. In dieser Variante wird es Hover heißen. Innerhalb des Mauszeigers ändern wir einfach von dunkelgrau in den HD-Absatz und von dunkelgrau auf eine CH-Farbe mit drei Absätzen. Da haben wir es. Und jetzt endlich, lasst uns zum Prototyp wechseln und dann dasselbe tun wie zuvor. Wählen Sie also dieses aus und ich ziehe es hierher, während ich den Mauszeiger schwebe Wechseln Sie zu „ Sofort ohne Animation“. Und da haben wir es. Wir sind mit unseren Knöpfen fertig. Stellen Sie sicher, dass Sie es hier positionieren , damit es gut organisiert ist. Also 48, das ist eigentlich in Ordnung. Lass es uns dort belassen. Und was ich tun werde, ist das hier, das hier zu positionieren und all diese sogenannten Schaltflächen zu gruppieren. Da haben wir es. Das sind 64 Todesfälle. Herrlich. Und schließlich werde ich für den letzten Abschnitt, bei dem es sich um eine Autokarte handelt, bei dem es sich um eine Autokarte handelt, auf 64 erhöhen. Mal sehen, 64, los geht's. Und für diese Autokarte kann ich sie hier erstellen, oder noch besser, vielleicht kann ich sie später positionieren. Ich bin mir also nicht sicher, was ich in diesem Fall tun soll. Lass uns zum Design wechseln, tut mir leid. Sei so etwas. Ja. Was ich also tun kann, ist diese einfach als Referenz zu verwenden. Weil wir hier nur die Gliederung haben. Es ist nichts allzu Wichtiges. Und das ist für unser Harvard, das ist für unsere Hauptautokarte. Also lasst uns anfangen , lasst uns das erstellen. Also lass uns mit so etwas beginnen. Also drücke ich hier R und vergewissere , dass es dieser Höhe entspricht. Da haben wir es. Ich nehme acht für den Eckenradius. Und ich werde die Füllung holen. Lass uns gehen und das Pure White einrichten. Da haben wir es. Und für die Höhe nehmen wir 43, für die Breite nehmen wir 374. Da haben wir es. Positioniere es hier in der Klasse, und ich nenne es Lagerposition B, G. Nun zum Strich, lassen Sie uns den Strich einbeziehen, klicken Sie hier. Ich werde mich für eine dunklere Farbe entscheiden, aber in diesem Fall werde ich einfach sehen, was wir hier tun können. Also Strich, dunkle Hörfarbe, vielleicht können wir diese benutzen. Kopiere es tatsächlich von hier und füge es hier ein. Da haben wir es. Und ich werde es vorerst einfach verstecken weil wir es im Moment nicht brauchen. Jetzt, wo das erledigt ist, kann ich Control und D drücken. Los geht's. Und mal sehen, was wir sonst noch hier haben? Also haben wir ein Autobild, ein Autobild dafür. Ich werde den Schlaganfall loswerden , weil ich ihn nicht brauche. Hier. Ich werde dieses Dunkelgrau oder sogar Hellgrau verwenden. Ich denke nicht, dass Dunkelgrau dafür wirklich notwendig ist. Was wir tun können, ist das ein wenig zu erweitern. Für den Eckradius oben links und oben rechts belassen wir ihn also bei acht, aber diese beiden, wir werden ihn bei Null haben, so. Und schauen wir uns die Höhe an, was wir tun können, ist sie auf 250 einzustellen. Das wird unser Bild von unserem Auto sein. Dann sollten wir als Nächstes die Texte der Fahrzeugkarten hinzufügen. Also drück T genau hier. Noch einmal. Und nennen wir das. Lamborghini-Horror-Kahn. Mal sehen, das sollten 24 sein. 24. Ist das nett? Stellen Sie sicher, dass es linksbündig ist. Ist es. Das ist großartig. Schauen wir uns den mündlichen Abstand an, was wir hier brauchen, ist 24,24. 24.24, Das ist großartig. Drücken Sie Strg D, um es zu duplizieren. Und hier werde ich den gleichen Text verwenden, aber diesmal werde ich die Hauptfarbe verwenden, nämlich das Hauptblau. Und lassen Sie mich diesen Preis wirklich schnell kopieren. Da hast du es, Control D Noch einmal. Und dann werden wir hier kleineren Text verwenden. Also lass uns eigentlich mit regulär beginnen. Also H30, lass uns mit Textblock Main Blue beginnen. Lass uns mit dem H2-Absatz weitermachen, denke ich , oder nein, vielleicht können wir diesmal Dunkelgrau wählen. Also lass uns dunkelgrau sehen. Da haben wir es. Das wird das Jahr überbieten. Also 2021, drück Shift a und nenne es, lass uns Jahre, Kilometer wie Schulden sehen und es dann in diese Richtung drehen. Das ist in Ordnung. Mal sehen, vielleicht ist 24 die Entfernung. Wir werden es einbeziehen. Da haben wir es. Und hier werde ich einfach das hier duplizieren . Ich gebe ein, wie viele Kilometer das Auto hinter sich hat? Oder wie viele Kilometer hat es auf dem Kilometerzähler oder wie auch immer du es nennen willst? Dann können wir diese drei Elemente gruppieren. Also der Name, der Preis und das Jahr, die Kilometer, so. Ich nenne das z. B. Auto, Autos Texte erstellen ein automatisches Layout dafür. Und dann können wir vielleicht die Entfernung kennen. Diese 216. Ja, lass uns mit 16 beginnen, so etwas. Da haben wir es. Also lass uns 24, 14 sehen, lass uns mit 24 beginnen. Und dieses Mal gehen wir los und haben das vielleicht angepasst , aus welchem Grund auch immer wir das hier haben. Setze das einfach auf Null. Setzen wir das einfach auf Null. Und jetzt haben wir nur noch einen regulären Text ohne diese Probleme. 16 ist also überall, 24 ist überall. Das mag ich. 17 genau hier unten. Das sollten eigentlich 24 sein. Also 241.616,24. Also sollten wir das vielleicht ein bisschen weniger ausweiten. Null. Da haben wir es. Jetzt sind wir also überall 24. Für 50. Okay, da haben wir es. Nun, da das abgeschlossen ist, können wir diese Goldkartenkarte gruppieren. Nun, lass es uns einfach so belassen. Also Autokarte. Und lassen Sie uns eine Komponente erstellen und wir werden diese entfernen. Und wir legen ein Komponentensatz hin, legen Sie es einfach auf diese Seite. Und hier werden wir es um diese eine Variante erweitern, und das ist diese. Es geht tatsächlich darum, diesen loszuwerden. Und lassen Sie uns eine Variante hinzufügen. Aber ich verstehe nicht wirklich, warum es hier steht. Aber das ist jetzt egal. Ist es. Nennen wir es einfach Hover. Schweben. Da haben wir es. Für den Hover müssen wir das nur zeigen . Da haben wir es. Das ist so ziemlich alles. Wechseln Sie jetzt im Standardstatus zum Prototyp und verbinden wir diese beiden. Während es also schwebt, wird es zum Beispiel zu diesem Thema gehen. Da haben wir es. Und jetzt werde ich das einfach schnell hierher ziehen. Wechseln Sie zum Design. Da haben wir es. Jetzt ist das einzige, was hier im Grunde noch übrig ist, dieses. Wie können Sie das also tatsächlich beheben indem Sie denselben Rand auf diesem Bild haben. Kehren wir also zum Standard-State-Car-Image zurück. Und ich werde einen Hitzschlag bekommen, und ich werde den gleichen Schlaganfall wie diesen haben. Da haben wir es. Und ich werde es verstecken. Komm wieder her, mach den gleichen Schlag, um es zu zeigen. Da hast du es also. Im Grunde genommen Todesfälle, wie einfach es ist und wie super einfach es ist, ein solches Layout zu erstellen. Aber was wir hier tatsächlich tun können, ist, dass wir es vielleicht auch verstecken können. Sollen wir uns dieses Layout ansehen und was wir getan haben? Also hier haben wir die Füllung und wir haben die Grenze. Und die Grenze zeigt, dass es Null Prozent sind. Aktie. Breite der Elemente B, G, E liegt im aktuellen Bild bei 374, ist es 372? Da haben wir es. Es tut mir so leid. Dieses Bild trifft eigentlich nicht auf eine Grenze. Also lasst uns das loswerden und das Gleiche hier tun. Da haben wir es. Das einzige , was es wirklich braucht, ist 372 auf diese Weise zu besiegen. Und stellen Sie sicher, dass Sie diese beiden auswählen. Wir hätten es so in die Mitte legen sollen, sodass Sie auf jeder Seite ein Pixel haben. Hier, 372, da haben wir es. Platzieren Sie es einfach ein Pixel in der Mitte. In vielleicht sollten wir es sogar ein Pixel nach unten schieben. Ich glaube. So etwas. Aber meiner Meinung nach ist es nicht wirklich wichtig. Du kannst es einfach so lassen, weil es nur ein kleines Detail ist. Und es wird nur für eine Sekunde sichtbar sein . Es liegt wirklich alles an dir. Wenn du willst, kannst du es runterdrücken. Aber jetzt werde ich hier Schluss machen , weil mir das mit meiner Nase leid tut. Ich bin immer noch ein bisschen erkältet, aber ich wollte trotzdem durchziehen und dieses Update für euch bringen , damit ihr sowohl Figma in XD genießen könnt , als auch für die Auflistung, die wir eigentlich machen sollten. Bevor wir diesen Abschnitt abschließen, erstellen Sie einfach dieses grundlegende Layout für diese spezielle Zeichenfläche. Und wir können diesen Flughafen überall benutzen. Also drück F so. Ich nenne es z. B. Größe der Zeichenfläche oder unsere Board-Einstellungen oder sagen wir unsere Website für Hafenarbeiter. Nennen wir es so. Passen wir es an, um es zu hören. Sehen wir uns an, die Einstellungen, die wir hier haben, sind 40, 40 für die Breite. Also zu 14, 40, da haben wir die Höhe, das ist nicht wirklich wichtig. können wir später anpassen. Also fügen wir jetzt ein Layoutraster hinzu. Also klicken Sie einfach dort statt auf dieses Raster, klicken Sie direkt hier auf Spalten, 12 Spalten. Schauen wir uns das Layout an, das wir hier hatten. Wie Sie sehen können, ist der totale Zusammenbruch 38, 65, eins zu eins. Versuchen wir also, dasselbe Layout zu replizieren. Schauen wir uns also zunächst an, denn die Farbe kann sich beim Gebrauch ändern, eine Art, ich weiß nicht, vielleicht bläuliche oder rötliche Farbe, so etwas. Wir können die Sichtbarkeit auf vielleicht 5% anpassen , nur damit du sehen kannst, was ich mache und es dort Feierabend machen kannst. Dann lass uns zur Gosse gehen. Wegen COVID 38. Da hast du es. Und die Ränder auf jeder Seite sollten eins zu eins sein. Da haben wir es. Jetzt haben wir also diese beiden Ränder, 38 und Spalte, die 65 sein sollte. Also lass uns gehen. Es zeigt mir Auto, aber ich kann in beide Richtungen gehen. Also einmal 213085 Todesfälle völlig in Ordnung. Und da haben wir es. Jetzt werden wir es einfach wiederverwenden wenn wir mit dem Design beginnen und es einfach hier einfügen. Also los geht's, nur ein paar Klicks. Wir haben es in unseren Dokumenten eingerichtet. Und im Grunde sieht es genauso aus, im Gegensatz zu diesem XD-Dokument , an dem wir bisher gearbeitet haben. Nochmals, wenn Sie sich eingehend mit all diesen Details zu diesem Design befassen möchten , sollten Sie unbedingt den Abschnitt x D lesen, in Sie unbedingt den Abschnitt x dem es um die Denkweise hinter dem Design geht, über den gesamten Prozess , insbesondere über Papierdrahtsysteme , die Architektur der Forschungsgrößen usw. Aber das ist nur sicher , dass der eigentliche Designprozess in Figma und was ist der Unterschied zwischen Fema in XD? Im nächsten Video werden wir uns mit dem Website-Design selbst befassen. Ich werde zeigen, wie Sie diese Komponenten, die wir hier erstellt haben, wiederverwenden können. Also werde ich dich dort sehen. 154. Design: Lassen Sie uns in diesem Video archivieren und mit dem Design beginnen. Und ich werde Ihnen zeigen, wie Sie ein Design, das wir bereits in Adobe XD erstellt haben, in Figma nachbauen können. Also lasst uns anfangen. Also hier sind wir wieder in Figma, und hier haben wir das letzte Mal aufgehört. Was ich also zuerst tun werde, ist diese Website-Seite, die wir haben. Ich drücke Strg C, komme zum Website-Design selbst zu dieser Seite und drücke Strg V, um es einzufügen. Und ich werde es genau hier positionieren. Natürlich werden wir das nicht verwenden , da wir dieses Design bereits in Adobe XD erstellt haben. Aber wenn Sie dieses Dokument zum ersten Mal erstellen oder wenn Sie dieses Dokument mit Ihren Kunden teilen , sind Mitarbeiter Designer. Es ist äußerst nützlich , so etwas zu haben , da sie immer Frame für Frame auf das Papier verweisen und für weitere Details darauf zurückkommen können Frame auf das Papier verweisen und für weitere Details darauf zurückkommen . Wenn ich Sie also zurück zum Adobe XD-Dokument bringe, haben wir 123456 Seiten. Also lasst uns damit anfangen. Also Kontrolle D, Kontrolle D, Kontrolle D, Kontrolle D, Kontrolle D. Also 123456. Und geben wir ihnen allen Namen. Also das Wichtigste zuerst, das wird eine Homepage sein. Als nächstes werden wir Autos haben. Danach haben wir das Auto ausgewählt. Wenn Sie also eine Karte von der Kursseite auswählen, kehren Sie zur ausgewählten Karte zurück und ich werde Sie in nur einer Sekunde durch den gesamten Vorgang führen, nur für den Fall, dass Sie die XD-Videos nicht gesehen haben. Und ich kann Ihnen nur empfehlen , sie sich anzusehen , denn wie ich immer wieder erwähne, werde ich hier nicht auf zu viele Details eingehen. Um mich nicht zu oft zu wiederholen und langweilig für Leute zu sein, die den Teil des Kurses mit den XD-Lektionen bereits gesehen haben. Das werden also Kredite sein. Und dann zu anderen Seiten haben wir Kontakt. Und zum Schluss wird das nur ein Overlay für den Leuchtkasten sein. Und weil der Leuchtkasten abgeschnitten wird, haben Sie eine Höhe von 1080 Pixeln. Da haben wir es. Und das wird das Overlay selbst einfach übertreffen. Lassen Sie mich Sie also kurz durch die XD-Datei führen, so. Und ich werde im Grunde erklären , was diese Website ist, wenn Sie den XD-Teil des Kurses nicht gesehen haben. Also hier haben wir die Homepage. Und auf der Homepage werden wir im Grunde das gesamte Angebot dieser Rede zeigen. Das wird also nur eine einfache Ausleihseite sein. Diese Websites, also wer sie sind, lassen Sie mich diese Zeilen ausblenden, damit Sie sie sehen können. Diese Leitfäden. Also wer sie sind, was sie repräsentieren. Das sind also exklusive Autohändler. Im Grunde werden sie also diese High-End-Autos verkaufen und nicht diese billigen Autos , die Sie im Grunde in jeder anderen Werkstatt oder jedem anderen Händler finden können im Grunde in jeder anderen Werkstatt , der dort ist. Also im Grunde sind diese Leute ein bisschen anders , weil sie diese High-End-Autos verkaufen. Und deshalb wollen wir das repräsentieren und das werden wir auch bildhaft tun. Ich habe diese Bilder also bereits zur Verfügung gestellt und Sie können diese Bilder hier sehen. Im Grunde werden sie so aussehen. Sie haben eine Reihe dieser verschiedenen Bilder, die wir für unsere Webflow-Entwicklung und nicht für das Design verwenden werden . Weil wir für das Design einfach eine von jeder Karte verwenden , um diese Karten zu erstellen, denen wir bereits eine exklusive Auswahl auf der Homepage erstellt haben, werden wir die Auswahl dieser Website und dieses Händlers zeigen , was sie anbieten, was sie im Moment auf Lager haben , was sie anbieten. Also in diesem Fall erweiterte Garantie, Wartung und Kredite. Dies sind nur einige der wichtigsten Funktionen, die sie ihren Kunden bieten werden , ihre Vorteile. Sie bieten Ihnen die kostenlose Lieferung egal wo Sie sich im Land befinden. Dreistufiges Polieren. Bevor sie den Cartoon abliefern, werden sie ihn also in drei Schritten im Teiletausch polieren . Das bedeutet, dass sie dein altes Auto wegnehmen dein altes Auto wegnehmen und den Preis deines alten Autos abziehen, den sie im Grunde danach beurteilen werden, sie im Grunde danach beurteilen werden wie viele Kilometer zurückgelegt wurden, bis zu welchem Zustand sich das bis zu welchem Zustand sich das Auto im Moment befindet, in dem es nicht kaputt ist. Ist es beschädigt und so weiter und so weiter. Dann haben wir die Kontaktseite. Wir haben, wo wir mit der Kartenseite sind , und wir haben die Fußzeile. Nun, diese Abschnitte, die Sie bemerken werden , werden sich oft wiederholen. Hier haben wir also die Kontaktkarte und den Filter Kontaktkarte wird zusammengeklappt oder Fußzeile der Kontaktkarte, die Inhaltskarte, die Fußzeile. Daher wird es für Sie sehr vorteilhaft sein diese als Komponenten zu erstellen, sobald Sie sie fertiggestellt haben. Und genau das werden wir tun. Und im Grunde ist diese Seite, diese Website selbst wird später in Webflow wirklich einfach zu erstellen sein . Und der Grund, warum ich das Plugin von Figma Tool Workflows, die von selbst veröffentlicht wurden, nicht verwenden werde Figma Tool Workflows, die von selbst veröffentlicht wurden, , ist diese spezielle Seite. Ja, Sie können das in diesem Plug-In erstellen, aber es wird viele verschiedene Wege gehen, viele um dieses Design zu umgehen , damit es in Webflow funktioniert. Also wegen dieser Seite selbst werde ich dieses Plug-in nicht verwenden, aber trotzdem werde ich Ihnen das Plug-In in einer der späteren Lektionen zeigen . Nur damit Sie sehen, wie Sie in Webflow Pauper, dieser speziellen Seite, eine solche Website erstellen in Webflow Pauper, dieser speziellen Seite, eine solche Website . In Webflow wird es nicht funktionieren , da wir verschiedene Techniken verwenden werden. Also behalte das einfach im Hinterkopf. Wenn Sie versuchen, etwas mit diesem Plugin zu erstellen, sollten Sie es zuerst testen und prüfen, ob es funktioniert. Ja, Sie können in Figma ein solches Layout erstellen. Es wird in jedem Fall für Sie von Vorteil sein und Sie müssen nicht alle Seiten importieren. Sie können einige Seiten manuell erstellen , da Sie einige Komponenten in Webflow erstellen können. Sie können einige Komponenten in Figma erstellen. Figma importiert all diese Stile, Farboptionen, Schriftarten und Komponenten von Figma in Webflow. Sie können also einige davon verwenden, aber denken Sie einfach an diese Seite wie diese, da sie zusätzliche Überlegungen erfordern, über den Tellerrand hinauszuschauen. Und einige sind im Grunde Webflow-Hacking damit sie funktionieren, weil es in Webflow keine vorgefertigten Standardoptionen gibt, um solche Layouts zu erstellen. Also für diese grundlegenden Seiten wie diese, wie diese, diese beiden, wird es gut funktionieren. Aber sobald Sie mit diesem Layout, mit diesem Sticky-Layout, mit diesem Overlay auf so etwas stoßen mit diesem Sticky-Layout, mit diesem Overlay auf so etwas . Wenn Benutzer also auf eines dieser Bilder klicken, werden ihnen diese Leuchtkastenoptionen angezeigt. Da bricht es also auseinander. Also wollte ich dir das nur zeigen und dir das erklären. Natürlich stammen die Bilder von Envato Elements, was ich bereits im XD-Bereich erwähnt habe. Und Sie haben die Möglichkeit, all diese Bilder zu erhalten, wenn Sie das Premium-Abonnement von diese Bilder zu erhalten, wenn Sie Envato Elements abschließen, da es sich bei diesen Bildern um Premium-Bilder Wenn Sie dies nicht möchten, können Sie dann kostenlose Bilder verwenden. Es liegt an dir. Aber wenn Sie genau diese Bilder verwenden möchten, die ich in meinem Design verwende. Sie müssen sie von Envato Elements lizenzieren, sonst können Sie sie nicht in Ihrem Portfolio verwenden. Schauen Sie sich also unbedingt auch diese Lizenz an. Schauen Sie sich unbedingt das PDF schauen Sie sich all diese Bilder an , die ich in dieser speziellen Sammlung bereitstelle. Und wie bereits erwähnt, stammen all diese Assets von Envato Elements. Das wird es also für diese spezielle Lektion sein. In der nächsten Lektion beginnen wir mit der Homepage und lassen Sie mich das ein wenig erweitern. Sie können also einfach hier klicken. Und wie gesagt, wir werden von der ganzen Seite beginnen und mit dem Aufbau unseres Homepage-Layouts beginnen. Also werde ich dich dort sehen. 155. Homepage-Design Teil 1: Lass uns weitermachen und mit der Homepage beginnen. Und als erstes möchte ich zu meinen Assets gehen und nach einem Logo suchen. Genau hier oben. Ich habe dieses Logo. Ich werde es irgendwo in der Nähe ziehen und dort ablegen. Lassen Sie mich mein Originaldesign einchecken. Ich glaube, ich positioniere es bei 20. Was ich also tun kann, ist es nach oben zu bewegen, zweimal nach unten zu wechseln, meine Alt- oder Wahltaste gedrückt zu halten und zu sehen, dass ich bei 20 Pixeln bin. Dann werde ich weitermachen und die Navigation erstellen. Also werde ich solche Autos eingeben . Und ich werde die vordefinierte Option für die Textstile wählen . Lass uns mit Textblock gehen. Da haben wir es. Lass mich kurz nachschauen. Ja, da sind wir. Ich werde einfach diese Farbe verwenden, in diesem Fall also dunkelgrau. Und lassen Sie mich es schön und einfach an meinem Logo ausrichten. Sie können beide auswählen. Sie können hier klicken, sicherstellen, dass sie ausgerichtet sind, und sie drei Pixel nach unten verschieben. Da haben wir es. Jetzt, wo wir Autos haben, kann ich Strg-G drücken, um sie zu gruppieren. Und ich nenne das Top Nav und mache daraus ein automatisches Layout in dieser Richtung. Und lassen Sie uns anhand dieser beiden Ds sehen, dass ich etwa 24 schaffen kann. Ich denke, das wird in Ordnung sein. Drücken Sie Control D, Control D, um zwei weitere Kopien zu erstellen. Dieser wird ein Lowe's sein und dieser hier wird Kontaktiere uns sein. Da haben wir es. Jetzt, wo ich das getan habe, werde ich sie alle auswählen. Also Top Nav und stellen Sie sicher , dass Sie sie hier schnappen. Nun als Erstes sollten wir für jeden dieser Komponenten Komponenten erstellen, da dies ein Standardzustand ist. Wenn es dich zurück zu XD bringt, wenn du es nicht gesehen hast, sieh es dir unbedingt noch einmal an. Wir haben also den Hover-Status und wir haben den ausgewählten Status. Wenn ich also hier etwas näher hineinzoome und Standardzustand meines Autos in dieser dunkelgrauen Farbe auswähle, ist Horace State diese Hover-Farbe, die Sie hier sehen können. Und dann ist der gewählte Staat diese blaue Hauptfarbe. Dies wird ausgewählt, wenn Sie sich auf der Seite befinden, auf der Sie sich gerade befinden, um diese zu erstellen. Gehen wir also zurück zu Figma. Und um so etwas zu tun, kann ich im Grunde alle auswählen, Strg C drücken und sie nach draußen zu irgendwohin hier in der Nähe bringen . Weil ich in der Lage sein wollte, diese Komponenten zu erstellen. Also wähle ich diese einfach so aus, wie sie sind. Und ich werde das in eine Komponente verwandeln, daraus eine Komponente machen und das, und dann werde ich zwei weitere solche erstellen. Und fügen Sie bei einer Variante eine weitere Variante hinzu, bei einer Variante Variante hinzufügen und Variante hinzufügen. Lassen Sie mich sie ein wenig voneinander trennen. Nun, das ist eine nervige Sache an Figma, wenn du mich fragst, weil du das nicht innerhalb deiner Zeichenfläche machen kannst, wie du es in XD kannst. Anstelle von XD kannst du sie also einfach an Ort und Stelle austauschen. Aber hier in Figma können Sie das genau hier tun. Und dann können Sie den gewünschten Bundesstaat wählen , aber es werden immer wieder diese Varianten erstellt. Das ist also etwas , das ich an Figma nicht wirklich mag, aber was kann man tun? Also lasst uns anfangen. Dies ist unser Standardstatus. Das wird unser Horrorstaat sein. Also wähle ich einfach den Typ mit dem Mauszeiger aus. Wählen Sie meinen Hover aus, so. Drücken Sie Control C. Da haben wir es. Und ich werde diesen auswählen. Was für eine Variante zwei. Dann füge ich dort auch die Hover-Farbe ein. Wählen Sie dieses aus, indem Sie den Mauszeiger bewegen. Hier. Da haben wir es. Und dieser letzte wird ausgewählt. Ausgewählt. Lass mich auswählen, ausgewählt. Lass mich das gleich hier machen. Und ich mache das, weil es für mich später viel einfacher sein wird , sie zu organisieren. Denn was als nächstes kommt, ist im Grunde nur, diese Farben hier und da zu ändern. Jetzt, wo wir da sind, wählen wir den gesamten Horror-Status aus. Und gehen wir zur Füllfarbe. Hoppla, nicht die Füllfarbe, sondern wähle den Text selbst statt Dunkelgrau aus. Gehen wir zu Horrorfarbe, Farbe, Farbe und wählen wir dann diese Farbe anstelle von Dunkelgrau aus. Gehen wir zum Hauptblau. Hauptblau, und geh hinein, drück Hauptblau. Da haben wir es. Jetzt, wo das erstellt wurde, können wir sie hier testen. Was ich also tun kann, ist, dass ich diese tatsächlich loswerden kann . Lassen Sie mich also zu meinem Asset-Panel gehen. Und was ich eigentlich tun kann, ist diese Basisdomain hier auszuwählen . Los geht's, Control G. Machen Sie daraus Auto Layout 24. Hoppla, das ist 62424. Da haben wir es. Stellen Sie sicher, dass wir uns in der Mitte dieser beiden befinden. Da haben wir es. 24. oder 2018, 20. Verschiebe das einfach und schätze es ab. Also hier wähle ich das aus und Sie können sehen , dass wir Autos haben, kontaktieren Sie uns und Kredite. Das haben wir also genau hier. Und hier haben wir die Standardeinstellung, wir haben den Hover. Wir haben ausgewählt, also werde ich die Standardkomponente auswählen und das unsere Optionen für diese bestimmte Komponente. Sie können die Instanz trennen, wenn Sie kaufen möchten , und wenn Sie irgendeine Änderung an diesen Hauptkomponenten vornehmen , werden diese Instanzen folgen. Lassen Sie uns sie also schnell in Top Nav umbenennen. Da haben wir es. Und ich werde das hierher ziehen. Nachdem wir das getan haben, lassen Sie uns fortfahren und das gruppieren und wann wir es Navi nennen. Und unter der Navigation werden wir im Grunde den Heldenbereich einbeziehen. Erstelle also einen Heldenbereich. Und ich werde weitermachen und diese sehr schnell kopieren. Da haben wir's, Control D. Und wir nehmen diesen. Los geht's, Control D sofort. Ich werde es so ändern. Ich ändere die Füllfarbe auf dunkelgrau. Das wird der H1 sein. Da haben wir es. Ich werde sie hier schön ausrichten. Herrlich. Und dann Vermögenswerte. Ich ziehe meinen Button rein. Für meinen Button gebe ich etwas wie Autos erkunden ein. Da haben wir's, Nice. Und dann muss ich diese Gruppe erstellen. Also Control G, lass mich zu den Ebenen wechseln. Das werden unsere Heldentexte sein. Da haben wir es. Lassen Sie uns das in ein automatisches Layout umwandeln um 32 herunterzufahren, um die Entfernung zu sein. Achte darauf, sie auf der linken Seite zu platzieren. Da haben wir's, nett und einfach, nicht wahr? Und eine letzte Sache , die wir hier brauchen ist die Erstellung unserer Heldenabteilung. Um das zu tun, werde ich mein Bild einbringen. Ich habe also mein Bild vom Maclaurin. Wir werden es genau dort platzieren und dann zwei Kreise erstellen. Es ist also ein Hit. In Ordnung, hier wechselt er. Da haben wir es. Strg D, um es zu duplizieren, positioniere es ungefähr dort. Und ich nenne diesen kleinen Kreis. Und das wird ein großer Kreis sein. Los geht's und positionieren es dort und da. Nun zum kleinen Kreis, was die Größe angeht, geben wir ihm 1054105, nur damit er genau den gleichen See in unserem ursprünglichen Design in XD und diesen großen Kreis, mal sehen, vielleicht können wir ihn so erstellen, dass er 13130 ist. So. Da haben wir es. Und ich wähle die gesamte Seite aus und verstecke dieses Layout für eine Sekunde. Da haben wir es. Nett und einfach. Und was uns hier fehlt , ist dieser weiße Kreis, glaube ich. zuerst Lassen Sie uns zuerst die tatsächlichen Farben ändern. Also dieser PG-Kreis sollte, tut mir leid, nicht dieser sein, sondern dieser, sollten wir blau meinen und dieser Kreis hier sollte dunkelgrau sein. Da haben wir es. Und jetzt muss ich diesen Hintergrundkreis erstellen. Gehen wir zurück hierher. Der Heldenbildkreis ist also 388 mal 388. Also lassen Sie uns diesen duplizieren. Heldenbildkreis. Mal sehen, die Farbe wird weiß sein und die Größe wird 388 sein. Von 388. Los geht's, so etwas und positionieren es direkt hinter diesem Heldenbild. Und stellen Sie sicher, dass diese zentriert sind , so etwas. Da haben wir es. Vergewissere dich, dass das hier ist, das ist hier. Und ich finde das großartig. Nur um das ganz schnell zu überprüfen , da die Körperfarben nicht angezeigt wurden. Also lasst uns dieses Jahr tatsächlich verstecken, wir haben die Heldenkreise. Wir müssen es alle erstellen, weil ich es aus dem Originaldesign als Bild exportiert habe . Lassen Sie uns nun fortfahren und diese Änderung tatsächlich auf all diese anwenden. Also werde ich einfach Shift gedrückt halten. Und für die Füllfarbe verwende ich Körperfarbe. Da haben wir es. Das nächste , was ich tun werde, ist meine Kolumnen zurückzubringen , damit wir sehen können, was wir tun. Und hier werde ich ein paar Icons vorstellen. Also zuerst, lassen Sie uns das Schlüsselsymbol hier einfügen. Ich stupse es an und lege es in die Mitte. Los geht's, Strg G, um es zu gruppieren. Und dann verwende ich hier dieses andere Symbol für diese Art von Metall wie das für das Abzeichen. Vergewissern Sie sich, dass sich diese beiden im mittleren Steuerelement G befinden . Los geht's, klicken Sie zurück zu den Ebenen. Und innerhalb von XD werde ich das Ganze so benennen. Und Name und Abneigungen. Also positioniere das etwas nach unten, positioniere es so. Und ich werde das alles gruppieren und es Hero IMG nennen. Da haben wir es. Was ich tun kann, ist beide auszuwählen und sicherzustellen, dass sie mittig ausgerichtet sind. Mal sehen, vielleicht können wir sie zu 100 vom Heldenbild aus bewegen , von der oberen Navigation aus, tut mir leid. Jetzt, wo wir das Bild haben, haben wir den Text. Was wir tun können, ist diese zu gruppieren, um sie Helden zu nennen. Los geht's und fahren mit dem nächsten Abschnitt fort. Und für den nächsten Abschnitt benötigen wir nur dieses Bild. Setze es so und verwende dann einfach ein paar Textzeilen. Also zuerst, lasst uns D drücken. Organisieren wir unsere Texte ein wenig. Also lass uns das noch einmal machen. Da haben wir es. Control D Und ich werde einen anderen benutzen. Control D Ich nehme einen anderen. Da haben wir es. Nun, dieser sollte ein Absatz sein, dieser sollte h3 sein. Dieser sollte es sein, mal sehen. Textblock. Das ist in Ordnung. Nur eine andere Farbe, dunkelgrau. Da haben wir es. In Bezug auf den Abstand. Lassen Sie uns C über D bis D bis E gehen. H sollte also drei Absätze enthalten. Da haben wir es. Was den Abstand angeht, lassen Sie uns mit 24 beginnen. Was ich also tun kann, ist sicherzustellen, dass sie in Ruhe gelassen werden. Wir sollten sie gruppieren. Wer wir sind. Text, schalten Sie Auto Layout ein, um 24 Grad herunterzufahren. Da haben wir es. Und stellen Sie sicher, dass Sie es genau hier positionieren. Wir haben also 12345 Zeilen, und dann wird dieses Bild das an der Mitte ausrichten. Drücken Sie Strg G, um es zu nennen, wer wir sind. Und die Entfernung beträgt 200 von hier. Also so etwas. Also 200. Fahren wir fort und fahren mit dem nächsten Abschnitt fort. Der nächste Abschnitt wird dieses exklusive Angebot sein. dazu Lassen Sie uns dazu ein solches Textelement erstellen. Fügen Sie unsere exklusive Auswahl ein, um sicherzustellen, dass wir in der Mitte sind , und stellen Sie sicher, dass Sie h drei auswählen. Da haben wir es. Stellen Sie sicher, dass Sie es in der Mitte platzieren, sodass es 200 aus dem obigen Abschnitt sind. Also schieb es einfach hier hin. Schauen wir uns 200 an. Herrlich. Was wir tun werden, ist die Karten, die wir erstellt haben, tatsächlich reinzubringen . Also können wir sie hier finden. Da haben wir es. Hier haben wir die gleiche Karte. Positioniere es genau dort. Und was wir tun werden, ist, dass es hier 64 ist. 64, los geht's. Und ich gehe zu Control D, um es zu duplizieren. Control D wird es genau hier platzieren. Und ich gehe zurück und suche meinen Knopf, positioniere ihn dort und stelle sicher, dass er in der Mitte ist. Und stellen Sie sicher, dass der Abstand 64 von dieser Karte genau hier ist. Auf dieser Schaltfläche sollte nun stehen: Alle Autos anzeigen. Nochmals, denn das ist großartig an Figma und nicht großartig an XD. Wenn Sie zum Hover wechseln, wird der Text automatisch geändert. In XD müssen Sie es manuell ändern. Lassen Sie mich also einige Texte ausfüllen. Also Cadillac Escalade wird das sein. Der Preis wird dieser sein. Siehst du, das Jahr wird 2020 sein. So. Und lassen Sie mich zu meinem Ebenen-Panel wechseln und hier, wo wir sind, also Jahre, Kilometerkarte, Textfeld. Das sollte ein bisschen anders sein, da wir hier eine Entfernung von 28 haben. Lass uns das hier ändern. Ich bin mir nicht sicher, warum es 28 ist, es sollten 24 sein. Also aus irgendeinem Grund ist es hier aktualisiert. Also müssen wir vielleicht eine feste Höhe haben, keine feste Breite. Ich weiß, aus irgendeinem Grund wird es sich nicht ändern oder Derek up also ist es geändert, wenn ein Schalter zu reparieren, denke ich. Ja. Also, wenn ich auf feste Breite wechsle, feste Breite hier, feste Breite. Wenn ich also die Höhe auf feste Breite ändere, wird sie wieder auf 24 geändert. Also lasst uns das für alle tun. Also feste Höhe, los geht's. Und feste Breite. Ich weiß nicht, warum das passiert ist. Denn wenn du weitermachst und umschaltest, alles rein, XD ist einfach geblieben, bleibt so, wie du es gesagt hast. Das wird also Lucid Air sein. Das wird der Preis sein. Und das werden die Kilometer sein, und das Jahr wird 2022 sein. Da haben wir es. Jetzt, wo dieser Abschnitt fertig ist, muss ich ihn nur noch schnell testen. Schau im Schwebeflug, los geht's. Also hat es sich geändert und daran erinnert, was das Schöne daran ist. Was ich also tun werde, ist auf meine Kursseite zu gehen . Und suchen Sie nach einer Lamborghini-Motorhaube und wählen Sie diese aus. Also für das Autobild. Und ich werde weitermachen und es in Fülle verwandeln. Mach das Gleiche hier. Also füge einfach eine Füllung hinzu. Da hast du es. Was ist passiert? Und ich werde mein Bild über der Füllung positionieren. Dann mach dasselbe für Cadillac Escalate. Suchen Sie einfach das Bild Nummer drei. Positioniere es darauf. Und das wird im Grunde ein bisschen langsamer funktionieren, wenn das Bild groß ist, obwohl ich es optimiert habe Das ist das Problem mit Figma. Sie können Bilder nicht einfach per Drag & Drop ziehen. Man kann zum Beispiel Adobe XD essen, was an diesem Tool wirklich nervig ist. Wenn ich es also ziehe, wird es platziert. Da haben wir es. Also Lucid, Air, Bild Nummer drei und platziere es einfach da rein. Da haben wir es. Wir haben unsere Karten. Das ist großartig. Also lasst uns das ein bisschen besser organisieren. Lassen Sie mich also zunächst diese Karten in ein Gruppenauto einbauen. Karten. Da haben wir es. Schalten Sie es auf automatisches Layout ein. Da haben wir es. Und jetzt wähle das alles aus. Und exklusive Auswahl. Da haben wir es. Und verwandle das in ein automatisches Layout. Nachdem dieser Abschnitt abgeschlossen ist, wird der nächste Abschnitt der Abschnitt Angebote sein. Also lasst uns weitermachen und das erstellen. Also zuerst, lasst uns weitermachen und das tatsächlich kopieren. Also unsere exklusive Auswahl, fahren Sie fort und klicken Sie hier rein, wo sie ist, genau hier. Da haben wir es und das im Navi. Aber hier müssen wir das organisieren. Da haben wir es. Und ich werde das auch auf 200 setzen. So. Also was wir anbieten, los geht's. Und ich brauche dieses Bild sehr schnell, um zu zeigen, was sie hier anbieten . Und mal sehen, wir können es bei 64 Pixeln von diesem Rand aus haben . Achte darauf, dass du es ausrichtest. 64. Da haben wir es. Und jetzt muss ich nur noch diesen Text eingeben. Aber bevor ich das tue, möchte ich diese Symbole sehr schnell hineinziehen. Also brauche ich den Wartungszyklus. Ich benötige das Symbol für die erweiterte Garantie. Lass mich es einfach ganz schnell finden. Aus irgendeinem Grund wird es hier nicht angezeigt. Okay. Schauen wir uns die Kredite an. Kredite. Da haben wir es. Wenn wir uns für Garantie entscheiden, verwende ich einfach diese . Es spielt keine Rolle. Also lass uns weitermachen und es damit auffüllen, blau zu sein. Oder lassen Sie uns sehen, was wir tun können. Also, als ich zu Layers gewechselt habe, öffne es. Also haben wir hier einen Teil. Der Teil ist gefüllt. Also Hauptblau, hier ist eine Füllung drauf. Also vielleicht hat Blau hier eine Füllung drauf. Also Main Blue, los geht's. Das ist also erledigt. Also das sollte jetzt oben stehen, weil wir hier die erweiterte Garantie anzeigen wollen, dann sollte dies unten sein und dies sollte auch darunter sein. sollten also alle auf diesen ausgerichtet sein. Also lasst uns weitermachen und loslegen. Also werde ich hier das Textwerkzeug auswählen. erweiterte Garantie stellt sicher, dass ich hier bin. Mal sehen, 24 Schrauben. Das wird uns also bis zum Alter von drei Jahren bringen. Herrlich. Und jetzt kann ich das tatsächlich auswählen, duplizieren, duplizieren, Tomaten duplizieren. Da haben wir es. Ich werde sicherstellen, dass diese beiden zentriert sind. Diese beiden sind zentriert. Das sind diese auch. Da haben wir es. Ich möchte das im Grunde so duplizieren. Stellen Sie sicher, dass es sich um Textblock handelt. Stellen Sie sicher, dass Sie es genau hier positionieren und stellen Sie sicher, dass Sie die dunkelgraue Farbe Control D verwenden . Control D. Los geht's. Nun, diese beiden, ich werde weitermachen und zu meinem Ebenen-Panel wechseln und sicherstellen, dass sie gruppiert sind. Ich werde diese gruppieren, ich werde die Gruppierung dieser beiden aufheben. Da haben wir es. Autolayout, Autolayout und Autolayout werden also 16 sein. Das wird auch 16 sein, und das wird auch 16 sein. Was wir hier also brauchen , ist das Wort Wartung einzugeben. Bei letzterem müsste es heißen, äh, jede Menge. Im letzten Fall sollten wir diesen Text haben. In diesem. Wir sollten diesen Text haben. Das ist also im Grunde das, was sie anbieten. Also hier werde ich Los eingeben. Das wird Wartung sein. Und dieser erste sollte 1.2 sein. Das sollte Garantie heißen. Da haben wir es. Und jetzt sollten die Abstände zwischen dem Text und dem Titel 24 betragen. Also wählen wir das aus und ordnen sie einer Gruppe zu. Wählen wir das aus, geben wir die Aminogruppe und diese Gruppe ein. Also das sind Kredite, das ist Wartung. Und schließlich ist dieser 1.2. Wenn ich das also in das automatische Layout setze und 24 verwende, mache ich dasselbe für dieses. Und mach dasselbe für diesen. Was ich auch tun kann, ist, sie auch in ein anderes automatisches Layout zu setzen , wenn ich möchte. Also so und die Entfernung zwischen ihnen allen. Nennen wir es also so etwas wie Angebotstext. Dieser Text sieht ziemlich klein aus. Sollte eigentlich H2 sein. Das sollte auch H2 sein. Also lass es uns wechseln. Da haben wir es. Und das sollte meiner Meinung nach auch H2 sein, wenn ich mich nicht irre. Ja. Also statt H drei schalten wir es auf H12 um und stellen sicher, dass es ausgerichtet ist. Ja, ist es. Dieser ist bei 64.200 Grad, dieser bei 48. Was ich also tun kann, ist es vielleicht auf 64 zu erhöhen. Hier, stell es auf 200. Dann sollte das bei 64 sein. Da haben wir es. Und dann sollte das automatische Layout bei 40 und es einfach direkt oben platzieren, so. Oder vielleicht können Sie es sogar in den Mittelpunkt stellen, das ist nicht wirklich wichtig, es wird die Schulden so oder so decken. Also, was wir an Texten anbieten, los geht's. Also wähle ich im Grunde diese drei aus, drücke Control G, Was wir anbieten so und hier kannst du sie in ein automatisches Layout setzen , wenn du möchtest. Ich werde mich nicht darum kümmern. Ich gehe einfach zum nächsten Abschnitt über. Im nächsten Abschnitt finden Sie die Vorteile. In diesem Fall werden wir also sehr schnell einige Vorteile nutzen. Sie sich den Ort vor, der genau hier sitzt. Stellen Sie sicher, dass wir in der Mitte sind. Sorgt dafür, dass wir 200 sind. Noch einmal, vom Bild oben, los geht's. Die Spitze der Schulden. Was ich tun werde, ist im Grunde einfach ein Rechteck zu zeichnen, also drücke R und stelle sicher, dass wir es so abgedeckt haben, dass es nur die gesamte Breite unseres Bildes abdeckt. Und das wird Hintergrund im Bereich Leistungen bezeichnet. Da haben wir es. Das kann diese Füllfarbe sein. Also schauen wir mal, vielleicht alle drei Absätze und Bilder, wir werden einfach die Opazität auf vielleicht zehn Prozent reduzieren . Also lass uns so etwas machen , damit wir dieses schöne transparente Bild haben. Ich finde das sieht toll aus. Heil, lasst uns weitermachen und diese Abschnitte noch einmal organisieren . Also schauen wir mal, was wir haben. Wir sollten ein Navi oben drauf haben. Dann Held, das sind wir. Das ist eine exklusive Auswahl. Da haben wir es. Was wir dann anbieten und jetzt werden sich diese Vorteile als nützlich erweisen. Was ich also sofort tun kann, ist sie einfach in eine Gruppe einzuteilen und das Vorteile zu nennen. Da haben wir es. Also wähle ich diesen Text aus. Typ T sind Vorteile. Da haben wir es. Nett. Stell das so in die Mitte der beiden. Und vergewissere dich einfach , dass es genau hier ist. Und schauen wir mal von oben, was ich tun kann, ist vielleicht 95 oder so. So schön, so ein großer Abstand, Control D. Und für diesen verwenden wir H drei. Da haben wir es. Das wird jetzt so eine kostenlose Lieferung sein. Und ich werde es hier zusammenführen. Und schauen wir mal, für diesen können wir vielleicht 16 gebrauchen. Also für den Absatz und für die Farbe nehmen wir Weiß. Das sollte also auch weiß sein. Das sollte auch weiß sein. Also, weißt du was, vielleicht können wir diese Zeichenflächenfarbe hier verwenden. Die Körperfarbe. Ich denke, das wird hier eine viel bessere Option sein. Da haben wir es. Also drücke ich bei diesem oder nein Strg-D, lassen Sie uns zuerst ein Symbol platzieren. Also zuerst, lassen Sie uns sehen, vielleicht können wir diese beiden so positionieren, dass sie so eine Entfernung von 24 haben. Verwenden wir dieses Symbol. Lassen Sie uns das also zunächst schließen. Und mal sehen, wir müssen dieses Symbol finden. Gewicht, der Locator. Da haben wir es. Der Abstand zwischen den Schulden sollte wieder 24 betragen. Schauen wir uns also an, wo wir gerade sind. 20. Wir sind also 24. Wenn ich also alle auswähle und gruppiere, klicke auf Ebenen. Kostenlose Lieferung. Da haben wir es. Control D oder Control D noch einmal. Da haben wir es. Jetzt drücke ich einfach R, erstelle ein Rechteck, wähle diese beiden aus und achte darauf, dass du es in der Mitte positionierst. Dann verwende genau das gleiche Rechteck. Geh zurück zu hier, richte es aus, verschiebe es, richte es am Raster aus. Wählen Sie diese aus, um sicherzustellen, dass wir uns in einem Zentrum befinden. Wirf dieses Rechteck los. Wir brauchen es nicht mehr. Nun, dieser zweite sollte dreistufiges Polieren heißen. Da haben wir es. Und kopieren Sie einfach die Texte und fügen Sie sie ein. Denn auch dies sind nicht die Vorteile, die wir bereits erwähnt haben. Und letzteres sollte ein Teilaustausch sein. Da haben wir es. Endlich der Text im Inneren. Was diese angeht, also was ich tun kann, ist dieser Teiletausch. Das sollte polnisch sein. Das ist kostenlose Lieferung, das ist in Ordnung. Was wir in dieser Phase also brauchen , ist, dass wir diese Symbole ersetzen müssen. Also wähle ich dieses Symbol aus, gehe zurück zu meinem Assets-Menü und suche mein polnisches Symbol. Milchmädchen müssen das also einfach hineinlegen und wieder zu solchen Schichten wechseln. Klicken Sie auf Löschen. Stellen Sie sicher, dass ich mit diesem Text in der Mitte stehe. Und ich werde weitermachen und es auf 24 erhöhen. Da haben wir es, nett und groß. Und schließlich dieses Symbol für den Teiletausch. Also mal sehen, wir müssen das Auto nur mit einem Autoschlüssel finden . Da haben wir es. Und schiebe es einfach an die richtige Stelle, positioniere es hier, wähle dann das Original aus und entferne es. Da haben wir es. Gehen Sie also zurück zum Ebenen-Panel und sehen wir uns den Teileaustausch so an. Jetzt, wo wir diesen Abschnitt haben, müssen wir nur noch die drei Leerzeichen setzen. Verwenden Sie also diese drei und drücken Sie sie von diesen Vorteilen auf 64 herunter . Lass uns sehen. 64, los geht's. Also sollte der Lack im Mittelpunkt stehen. wir sicher, dass es in der Mitte ist. Da haben wir es. Und die Vorteile sollten ebenfalls im Mittelpunkt stehen. Stellen Sie sicher, dass es in der Mitte ist. Da haben wir es. Die Benefit-Sitzung ist also abgeschlossen. Als nächstes müssen wir uns kontaktieren. Wir haben das Formular und wir haben die Fußzeile. Aber ich werde dich mit dieser Lektion nicht zu sehr langweilen , denn wir sind schon in etwa 30 Minuten oder so. Also lass uns hier aufhören und mit der Heldenseite fortfahren. Im nächsten Video werden wir diese drei Abschnitte fertigstellen , da sie sich in unserem gesamten Design wiederholen werden. Also werde ich dich dort sehen. 156. Homepage-Design Teil 2: Lassen Sie uns diesen Homepage-Abschnitt und die Rede selbst abschließen . Also gebe ich T ein und tippe Kontakt ein. Und ich werde es von Textblock auf H12 umstellen. Stellen Sie sicher, dass es sich in der Mitte befindet und die Mitte so ausgerichtet ist. Und stell sicher, dass es 200 von hier aus sind, einfach so. Und dann werde ich auch diesen duplizieren. Und ich werde es als Textblock auswählen, so. Und mal sehen, ich kann es von hier aus auf 64 setzen. Lass uns sehen. So. Und ich werde diese dunkelgraue Farbe verwenden. Da haben wir es. Ich bin mir nicht sicher, warum es diese erbt, aber das spielt keine Rolle. Also lasst uns diese dunkelgraue Farbe verwenden und ich werde hier mit vollem Namen schreiben. Und ich werde es so linksbündig ausrichten. Wir sind also bei 64, das ist großartig. Und ich drücke noch einmal Control und D, um das zu duplizieren. Und ich werde hier Absatztexte verwenden. Und ich werde sicherstellen, dass ich das auf, lass uns sehen, drei Absätze ändert . Und ich sage etwas wie Gib deinen vollen Namen ein. Da haben wir es. Und jetzt werde ich weitermachen und das Eingabefeld dafür erstellen. Schauen wir uns das an, nehmen wir ein Rechteck und ziehen eines von einer Kante zur anderen heraus, so. Nun zur Entfernung, das ist in Ordnung und wir nehmen die Körpergröße von 60. Sie mit der rechten Maustaste und Sie können sehen, also gehen Sie zur Seite, In den Hintergrund. Sie können den umgekehrten Schrägstrich verwenden, wenn Sie möchten, und achten Sie darauf, ihn in der Mitte selbst zu positionieren. Nun, was die Farbe angeht, so wird dies die weiße Farbe haben , was den Namen angeht, es wird ein Eingabefeld sein. Und was den Abstand zwischen diesen angeht, werde ich diese 16 verschieben. Wenn ich also meine Alt-Taste aufrufe, können Sie sehen, dass es 16 von der linken Seite und 17 von oben und unten gibt. Lassen Sie uns nun fortfahren und diese beiden gruppieren. Und ich werde diesen Input so nennen. Und ich gruppiere diese beiden Kontrollgruppe G. Und ich nenne diesen Namen so. Mal sehen Für die Entfernungen können wir vielleicht Autolayout und 16 so verwenden . Da haben wir es. Drücken Sie jetzt Strg D, um dies zu duplizieren, und ich werde es auf 32 verschieben. Also lass uns sehen. 32. Da haben wir es. Nun, diese zweite sollte eine E-Mail sein. Und das Eingabefeld selbst sollte kürzer sein, also sechs Spalten breit sein. Also 123456. Und lassen Sie uns das an der Spalte ausrichten. Da haben wir es. Nette Vergrößerung. Das wird also eine E-Mail sein. Geben Sie also eine E-Mail ein. Und anstatt Ihren vollständigen Namen einzugeben, heißt es, geben Sie Ihre E-Mail-Adresse so ein. Was wir hier tun können, ist das in eine Gruppe einzufügen und es als Mitte zu bezeichnen, wenn Sie möchten. Aber das werde ich nicht, ich drücke einfach Strg D, um es zu duplizieren, es genau hier zu positionieren und es an der Seite auszurichten. Ich bin mir nicht sicher warum. Es zeigt mir das, aus welchem Grund auch immer. Aber ich denke, wir sind startklar. Also schauen wir es uns an. Aus irgendeinem Grund. Es rastet nicht in das Stromnetz ein. Die Breite ist also fünf AT, also stellen Sie sicher, dass dies auch fünf AD ist. Da haben wir es. Jetzt wird es auf beiden Seiten perfekt in das Raster einrasten . Dieser wird also nicht per E-Mail gesendet. Dieser wird Spaß machen. Ich tippe Telefon ein. Gib deine Telefonnummer ein. Großartig. Und jetzt duplizieren wir dieses und positionieren es hier. 32. Dies wird eine E-Mail oder Nachricht sein. Und das wird so etwas wie deine Nachricht schreiben. Hier. Da haben wir es. Und jetzt benennen wir das einfach in Nachricht um und stellen sicher, dass wir es bis hier positionieren. Und dieses Feld werden wir ein wenig erweitern. Es wird also 171 Zoll hoch sein, nur damit wir unseren Benutzern etwas mehr Platz geben können, damit sie jede Art von Nachricht einfügen können , die sie haben. Verwenden Sie unseren Hauptknopf, um zu Vermögenswerten zu nähen. Und hier werden wir den gleichen Abstand von 30 haben , um sicherzustellen, dass wir es links ausrichten und darauf doppelklicken und Nachricht senden eingeben. Da haben wir es. Und wechseln Sie hier zurück zur Position des Ebenenfensters und stellen Sie sicher, dass Sie uns ****** hier kontaktieren. Ich werde diese gruppieren und sie Inputs nennen. Und ich werde das alles gruppieren, positionieren und mich mit uns in Verbindung setzen. Und hier ist der entscheidende Teil. Wenn ich dir das zeige, so kontaktiere uns. Ich wähle das gesamte Feld aus und verwandle es in eine Komponente. Jetzt kann ich es kopieren und in all diese anderen Abschnitte einfügen all diese anderen Abschnitte die ich Ihnen bereits zuvor gezeigt habe. Lassen Sie uns also weitermachen und den nächsten erstellen. Also stell sicher, dass wir 200 sind. Ja, das sind wir. Wo wir also sind , wird unser nächster Abschnitt sein. Also lasst uns schnell eine Karte wie diese hineinziehen, um sicherzugehen, dass wir hier sind, stellt sicher, dass wir 200 von dieser entfernt sind. Also, los geht's. Was wir jetzt hier tun werden ist, dass wir dasselbe H12 verwenden. Also wo wir sind. Und ich werde diesen als H12 verwenden. Da haben wir es. Linksbündig. Es stellt sicher, dass es hier zwei Raster gibt. Nun, das ist Textblock. Wir werden Dunkelgrau verwenden. Verwenden Sie dieses, stellen Sie sicher, dass es linksbündig ist , und positionieren Sie es dort. Mal sehen, wir werden 24 von diesem Rand entfernt sein. Mal sehen. 24. Herrlich. Das wird also der Titel sein. Und stell sicher, dass du es bis hierher schiebst. Positioniere es nach oben, nur damit wir genug Platz haben? Jetzt benötigen wir hier einige Icons. Das erste Symbol, das wir benötigen, ist das Ziehen eines Telefons. Ziehen wir eine Uhr rein, diese hier, und malen wir einen Locator. Also dieser wird an die Spitze gehen. Dieser wird nach unten gehen. Dieser wird in der Mitte sein. Da haben wir es. Drücken Sie nun D, geben Adresse ein und wandeln Sie diesen vom Textblock in einen Absatz um. Und stellen Sie sicher, dass Sie diese gruppieren , um sicherzustellen, dass sie gleich positioniert sind. Und das hier haben wir. Von hier bis hier sollten es 16 sein, denke ich. Ja. Aber bevor wir das tun, stellen wir sicher, dass wir das hier einfügen . Und ich möchte zuerst meine Inhalte organisieren , damit ich dann ein bisschen weitermachen kann. So. Da haben wir es. Hier sollte also die Telefonnummer stehen. Und lassen Sie mich die Telefonnummer einfügen. Das werden die Öffnungszeiten sein. Das sind die Öffnungszeiten. Da haben wir es. Lassen Sie uns zunächst sicherstellen, dass diese zentriert sind, sie in eine Gruppe ein und stellen Sie sicher, dass das automatische Layoutdesign sicherstellt, dass es bei 16 ist. Diese beiden sind in einer Gruppe. zunächst aus, ordnen Sie sie in eine Gruppe ein und verwenden Sie das Autolayout 16. Diese beiden sollten in einer Gruppe oder auf Layout und 16 ausgerichtet werden . Und diese anderen können auch 16 Jahre alt sein. Sie können diese automatischen Layouts also 16 gruppieren. Dann können Sie sicherstellen , dass diese in einem Gruppen-Autolayout 16 linksbündig angeordnet sind . Und diese sind linksbündig in einem Gruppen-Autolayout 16. Jetzt müssen wir nur noch zu unserem Ebenen-Panel zurückkehren , weil wir nur Frames haben, also Stunden. Nun, das kann ein Telefon sein und dieses erste kann adressiert werden. Da haben wir es. Jetzt können wir all diese in einer Gruppe zusammenfassen und sicherstellen, dass wir sie z. B. Content nennen . Setze das in das automatische Layout von 24. Da haben wir es. Und jetzt müssen wir das nur noch von hier distanzieren. Lassen Sie mich also einfach sehen, was ich im ursprünglichen Design gemacht habe. Also ja, vielleicht können wir es auf 32 setzen. 32, los geht's. Wählen Sie alle unsere Inhalte aus, bringen Sie sie in die Mitte unserer Karte und stellen Sie sicher, dass sie linksbündig sind. Ist es. Und mal sehen, gruppieren Sie einfach alles. Stell sicher, dass wir 200 sind. Wir haben es ganz unten positioniert. Und diesen Abschnitt werden wir nennen, wo wir sind. So. Verwandle das in eine Komponente. Eine letzte Komponente, die wir hier einbeziehen müssen , ist die Fußzeile selbst. Was ich also für diese spezielle Phase tun werde, ist einfach meine Navigation zu verwenden, sie zu duplizieren, sie zu zentrieren und sie ganz nach unten zu bewegen. Vergewissere dich, dass ich ungefähr hier bin und los geht's. Dann werde ich weitermachen und die Gruppierung aufheben. So. Und lassen Sie uns das High selbst für die Streuung sicherstellen , damit Sie es ein bisschen besser sehen können. Also werde ich dieses Logo verwenden und sicherstellen, dass es in der Mitte steht. Und ich werde im Grunde mein Textwerkzeug verwenden und den Text einfügen, der ursprünglich da war. Und mal sehen, wir können den Textstil für den Absatz verwenden . Los geht's, und stellen Sie sicher, dass Sie es in der Mitte unserer Seite platzieren. Der Javelin 64 von diesen so. Und das Logo sollte auch 64 davon sein. So. Eine letzte Sache, die wir jetzt tun müssen, ist, diese Social-Media-Symbole hinzuzufügen. Wir haben also Twitter, wir haben YouTube. Suchen wir Instagram, sorry, LinkedIn und Facebook. Lassen Sie mich sie also ein bisschen besser organisieren. also zuerst Facebook als Twitter, YouTube und dann die Verknüpfung her. Stellen Sie sicher, dass alle mittig ausgerichtet sind. Und schauen wir mal, was wir haben. Vielleicht können wir sie in eine Gruppe einteilen. Auto Layout 24 einschalten ist in Ordnung. Wechseln Sie zurück zum Ebenen-Panel und ich nenne diese Gruppe oder diesen Frame soziale Symbole. Da haben wir es. Und jetzt werde ich sie einfach an der Mitte mit diesem Text hier ausrichten. Vergewissern Sie sich einfach und überprüfen Sie es noch einmal. Da haben wir es. Also wähle ich all das aus, drücke Control G, lege das alles wieder da hin , nenne es Fußzeile so und stelle sicher, dass ich 200 von hier entfernt bin. Da haben wir es. Und eine letzte Sache, die ich tun möchte, ist, das zu verschieben und ein bisschen zu zerschneiden. Ich bin also im Grunde 64 von diesem bestimmten unteren Rand entfernt. Also morgen nur noch drei Pixel. Also Höhe, mal sehen, wir müssen zwei weitere hinzufügen. Sehen wir uns das Original an, was da steht, 5775. Aus irgendeinem Grund haben wir es nur ein bisschen erweitert, aber das ist wichtig. Fügen wir zwei weitere hinzu. Fügen wir noch einen hinzu. Also 5796. Lass uns sehen. Da haben wir es. Das ist also unsere Homepage fertig. Lass uns das ganz schnell verstecken. Lass uns weitermachen und eine Vorschau ansehen weil ich dir etwas zeigen wollte , weil wir hier sofort einige Probleme haben . Also müssen wir diese Probleme beheben. Wir sind also, solange es geladen wird, das haben wir nicht. Öffnen wir es also im Vollbildmodus. Verstecken wir das. Wir haben diesen Schwebeeffekt nicht. müssen wir also ändern. Hier verbunden. Wenn ich mit dem Mauszeiger schwebe, können Sie sehen, dass die Bilder verschwinden. Also müssen wir für jedes dieser Bilder mit dem Mauszeiger fahren und zusätzliche Bilder hinzufügen. Wieder einmal funktioniert hier alles gut, sieht hier gut aus. Hier funktioniert alles super wie es sollte. Also lass uns weitermachen und das hinzufügen. Lassen Sie uns zunächst diese verbinden. Wechseln Sie also zunächst zum Prototyp und schalten Sie das hier ein. Diese beiden hier, diese beiden hier. Beim Schweben. Dies sollte geschehen, während Sie schweben. Dies sollte geschehen, während Sie schweben. Und wenn ich auf den Hover selbst klicke, ändere ich auf Eigenschaft eins. Da haben wir es. Auf Klick. Und schließlich auf Klick. Das ist großartig. Jetzt, wo es funktioniert, können wir unsere Aufmerksamkeit wieder auf diese richten. Gehen wir also zurück zu unserem Design. Wechseln wir zum Schweben. Klicken Sie hier, wechseln Sie zum Wie oder klicken Sie hier, um zum Schweben zu wechseln. Also das Wichtigste zuerst, wir brauchen, lass uns weitermachen und zuerst ein Lucid Air hinzufügen, weil ich es hier schon geöffnet habe. Dann mach weiter und füge eskaliert hinzu. Da haben wir es. Und füge Oticon sehr schnell hinzu. Da haben wir es. Jetzt müssen wir diesen auswählen, Standardeinstellung setzen, ihn auf die Standardeinstellung setzen, ihn auf die Standardeinstellung setzen. Da haben wir es. Jetzt, wo das alles abgeschlossen ist, ist unsere Seite im Grunde fertig. Und im nächsten Abschnitt werden wir zur Gestaltung dieses Kursabschnitts übergehen , der im Grunde eine Menge davon enthalten wird und hier mehrere Abschnitte haben wird. Wir müssen es also nur ein wenig erweitern, und wir werden auch einige dieser Abschnitte duplizieren. Wir werden zusätzliche Inhalte hinzufügen. Wir werden immer mehr hinzufügen und einige dieser Abschnitte kopieren und einige Seiten wie diese „ Kontaktiere uns“ wird extrem einfach zu gestalten sein , da wir, wie bereits erwähnt, die meisten dieser Abschnitte bereits fertiggestellt haben. Wir sehen uns also im nächsten Video, in dem wir Seite mit den Autos angreifen werden, und wir sehen uns dort. 157. Cars Page Design: Lassen Sie uns nun die Seite dieses Autos gestalten. Was ich also tun werde, ist auf unsere Homepage zurückzukehren, weil ich vergessen habe , dies in eine Komponente zu verwandeln. Also jetzt, wo ich hierher gewechselt bin, gehe zurück zu meinem Vermögen und gehe zu Aspire to als Website-Assets. Also, was ich hier habe, ist auf meiner Homepage, ich habe all diese. Also navigiere ich es per Drag & Drop, positioniere es hier, positioniere es hier und positioniere es dann auf 20. Was ich auch tun kann, ist für jeden von ihnen dasselbe zu tun . Denn das, was wir haben werden, ist im Grunde auf jeder Seite im gleichen Layout. Warum also nicht direkt hier zusätzliche Zeit sparen? Mal sehen, Contact Us wird unsere letzte Position hier und dann hier sein. Da haben wir es. Und was all diese Seiten im Grunde auch haben werden , sind all diese Aktionen mit Kontaktformular, Karte und Fußzeile. Also lasst uns weitermachen und das tun. Und lassen Sie mich tatsächlich überprüfen, ob ich die Fußzeile erstellt habe, ich habe es nicht getan. Lassen Sie uns das also auch in eine Komponente umwandeln. Lassen Sie uns also als Erstes die Fußzeile m auf diese Seite, auf diese Seite, auf diese Seite und auf diese Seite ziehen . Stellen Sie sicher, dass es linksbündig ist. Und positioniere es einfach 40 Pixel von unten, weil wir es natürlich etwas später anpassen werden es natürlich etwas später anpassen , sobald wir den Inhalt hinzugefügt haben. Also werde ich den gesamten Abschnitt nach unten schieben, weil ich direkt darüber liege. Ich füge meine Karte hinzu, stelle sicher, dass sie zentriert ist, und stelle sicher, dass sie von hier aus 200 Pixel entfernt ist. Und das Kontaktformular ist zentriert. Und ich werde es von hier aus tatsächlich 200 Pixel hinzufügen. Dann dieselbe Geschichte hier. Ich werde diese beiden in der Mitte positionieren. Und das wird bei 200 Pixeln sein, und das wird auch bei 200 Pixeln sein. Dann mach die gleiche Geschichte hier. Wir werden also die Karte haben, wir werden das Kontaktformular haben. Wir werden die Karte haben das Kontaktformular, das Zentrum, das Zentrum. Und sehen wir uns 222200200 in der Mitte an. So können Sie sehen, wie viel Zeit wir für später sparen. Und das wird unseren Fruchtklon nur stark reduzieren. Deshalb sind diese Komponenten so nützlich. Für den Refrain-Abschnitt selbst werde ich diesen Abschnitt also im Grunde duplizieren und ihn hierher ziehen. Sehen wir uns die Ebenen an. Wenn ich mich hier durchklicke, exklusive Auswahl. Hier haben wir eine exklusive Auswahl. Stellen Sie sicher, dass Sie es in der Mitte einrasten. Was ich hier oben tun werde, ist, diesen Text hier zu verwenden . Und ich werde es einfach in den Mittelpunkt stellen, hier in der Mitte. Und ich werde in den Text schreiben also Ihr Partner für exklusive Autos. Und mal sehen, ich kann diesen Text 40 machen. Lass uns einfach sehen, dass hier etwas nicht stimmt. Da haben wir es. Jetzt ist es nett und zentriert. Also von diesem Rand gehe ich in Schicht 1234. Stellen Sie sicher, dass Sie es 40 Pixel nach unten bewegen. Da haben wir es. Und ich werde diesen Kreis erstellen , der im Hintergrund erscheinen wird. Also tippe auf 0. Verwenden Sie sofort die blaue Hauptfarbe. Und für die Größen nehme ich 300 mal 300. Los geht's, stell sicher, dass es zentriert ist. Und von diesem Rand werde ich es im Grunde an der Mitte meiner Texte und am unteren Rand ausrichten . Und hier, lassen Sie mich das Bild des Autos hinzufügen , das ich verwenden werde, platzieren Sie es in der Mitte und schieben Sie es irgendwo hier hin, damit wir den eigentlichen Kreis im Hintergrund nicht sehen. Dann verschiebe ich diesen exklusiven Auswahlbereich und stelle sicher, dass er von hier aus 100 Pixel entfernt ist. So. Und ich werde weitermachen und C loswerden, alle Autos fallen so runter. Und hier haben wir, falls Sie sich erinnern, dass wir diese Autokarten haben. Also werde ich in diesem Fall das automatische Layout entfernen weil ich diese duplizieren und reduzieren werde. Also Autokarten, ich werde jetzt das automatische Layout einschalten. Gehen wir also noch einmal zurück, weil wir diese Gruppe mit drei Karten darin haben diese Gruppe mit drei Karten darin , also 12.3 und wir haben kein automatisches Layout drauf. Ich werde diese Gruppe dadurch in eine andere Gruppe einordnen. Und jetzt drehe das automatische Layout in diese Richtung und der Abstand zwischen diesen Autos sollte 32 betragen. So. Und jetzt müssen Sie nur noch Control D und Control D drücken, um zwei weitere Kopien zu erhalten. Nun, das wird eine exklusive Auswahl sein. Und jetzt müssen wir nur noch diese langweiligen Informationen eingeben. Aber bevor wir das tun, möchte ich. diese im Grunde so an, dass sie an Ort und Stelle sind. C15, 6200. Da haben wir es. Und jetzt nur 64 von unten rechts hier. Also lasst uns weitermachen und das ganz schnell machen. Wir haben also alles vorbereitet. Mal sehen, wo wir sind. 59, also nur ein bisschen mehr. Da haben wir es. Nun, da das erledigt ist, lasst uns weitermachen und uns auf diese Autos konzentrieren denn diese Seite ist mehr oder weniger fertig. Was ich hier habe, ist das Tesla Model X. Also werde ich mich zuerst auf den Inhalt selbst konzentrieren. Und das Autojahr ist 2020. Eigentlich 2021. Warum nicht? Lass es uns so belassen. Das ist also das Tesla Model X nought S, tut mir leid. Der nächste danach wird also ein Porsche Cayenne sein. Der Preis wird dieses Jahr sein, es wird 2021 sein. Und Kilometer. Also 18.000.692. Da haben wir es. Der nächste wird McLaren sein. Konzentrieren Sie sich also noch einmal auf exklusive Autos. Das ist es, worum es in diesem Autohaus geht. Sie können jede Art von Auto benutzen, wenn Sie möchten. Wenn Sie diese Envato Elements-Bilder nicht haben möchten, wenn Sie sie nicht lizenzieren möchten, möchten Sie Ihre eigenen Bilder verwenden. Natürlich kannst du einfach sicherstellen, dass du einige der Regeln befolgst, die wir in diesem Kurs erwähnt haben , was Konsistenz und Layout und Abstände und Tempo und Rhythmus und solche Dinge angeht und Layout und Abstände . Nur um im Grunde das gleiche Layout zu haben , das wir hier gemacht haben. Also 56, mal sehen, 24, wir sind immer noch da. Das ist in Ordnung. Und das ist das ältere Auto in dieser Sammlung. Also vielleicht hat es jemand als Teiletausch gegeben. Lassen Sie uns abschließend einen Range Rover Revoke verwenden. Wenn Sie 90 Kilometer zurücklegen, ist das Jahr 2021. Jetzt, weil ich das nicht habe, werde ich es loswerden und löschen. Das sind also im Grunde alle unsere Autos. In dieser Phase werde ich einige davon schließen da sie nicht so oft geöffnet werden müssen. Eigentlich. Lass uns weitermachen und sie so schließen. Da haben wir es. Was ich an dieser Stelle tun werde, ist meine Bilder zu lokalisieren. Also schauen wir uns Tesla Nummer drei an und schalten es um. Da haben wir es. Das wird Porsche Cayenne sein. Das wird McLaren sein. Das wird ein Cadillac CTS sein, tut mir leid. Und schließlich wird dies ein Range Rover Evoke sein. Ein letztes Puzzleteil. Denkt einfach daran, was wir zuvor gemacht haben. Sie können diese alle schließen, da alle diese drei erledigt sind, wenn Sie sich von der Homepage aus daran erinnern. Also, was wir jetzt tun werden, ist diesen auszuwählen ihn in einen Hover zu verwandeln. Wählen Sie dieses aus und drehen Sie es in den Hover. Das zum Schweben. Das sollte also hover sein, diese App gefällt, sie sollte hover sein. Da haben wir es. Lassen Sie mich nun fortfahren und sie alle noch einmal auswählen. Gehen wir also von hinten vor. Das ist also ein Range Rover, schließ ihn und mache ihn zur Standardeinstellung. Cts, wir haben einfach den Drang, das Bild in der Mitte des Feldes zu fotografieren, weil ich das in XD machen kann. Ich hoffe nur, dass das Team das in Zukunft hinzufügen wird, da beide Teil desselben Teams sind weil es einfach sinnvoller ist, es hier zu platzieren als hier auf diesem kleinen Feld, also macht es hier zu platzieren als hier auf diesem kleinen Feld, es einfach keinen Sinn. McLaren sollte also eigentlich dieses Bild sein. Da haben wir es. Nett und locker. Standardmäßig sollte dies auf Koreanisch übertragen werden. Suchen wir also die Nummer drei. Da haben wir es. Ziehen Sie es und legen Sie es ab und setzen Sie es wieder in den Standardzustand zurück. Und der letzte sind die Teslas. Suchen wir also den Tesla Nummer drei. Da haben wir es. Jetzt sind sie alle abgeschlossen. Sie können sehen, dass wir nur 10 Minuten entfernt sind. Diese Seite wurde bereits fertiggestellt. Und lassen Sie uns weitermachen und es ganz schnell testen. Denn ja, eine Sache, die ich vergessen habe zu erwähnen, ist hier, weil wir auf der Kursseite sind. Ich werde dieses Feld auswählen und es in ein ausgewähltes Feld umwandeln. Jetzt kannst du dort oben sehen, dass Autos drauf steht und dass es ausgewählt ist. Und wie unsere Effekte immer noch funktionieren, kontaktieren Sie uns, funktioniert immer noch. Und ich werde herausfinden, wie wir diese Bar loswerden können, nur damit es uns nicht stört. Also hier, ich denke ja, ich denke, vielleicht wurde es nicht geladen oder so, weil du gesehen hast, dass wir es umgestellt und alle ersetzt haben. Also muss ich vielleicht einspringen und sie alle noch einmal machen. Was für jede einzelne einzelne Instanz. Also werde ich das außerhalb der Kamera machen, nur um sicherzugehen, dass es funktioniert. Aber das alles funktioniert. Das ist immer noch da. Das ist alles hier. Cars ist ausgewählt und zusätzliche Seite von Diego wurde fertiggestellt. Noch ein Schritt, es ist geschafft. Also vielleicht, weil V das zuerst einfügt. Ja, du kannst sehen, als ich die Standardeinstellung im Hover geändert habe, es funktioniert hier. Ja, nein, es funktioniert auch nicht auf einer Homepage. Also sollte ich es vielleicht hier einrichten und dann zu Ihnen zurückkommen, nur um es Ihnen zu sagen und Sie wissen zu lassen , was die Lösung war. Aber vorerst ist die Cars-Seite fertig. Im nächsten Video werden wir zur ausgewählten Karte übergehen , was der schwierigste Teil des gesamten Designs ist. Also ich sehe dich dort und ich werde dir auch zeigen, wie man es einrichtet. 158. Design ausgewählter Autoseiten: Lassen Sie uns dort weitermachen, wo wir in der vorherigen Lektion aufgehört haben. Und bevor wir das tun, möchte ich nur zeigen, wie ich diese Autokarten repariert habe. Also habe ich sie im Grunde von Grund auf neu erstellt. Und alles, was ich hier getan habe, ist einfach den Namen dafür zu erstellen , damit der Name des aktuellen Inhabers deutlich eskalieren kann. Und das wirst du sehen, wenn du diese Datei herunterlädst und sie selbst im Figma öffnest. Und alles, was ich getan habe, ist einfach eine weitere Instanz davon zu erstellen. Sie können also sehen, dass ich hier den Hover habe und hier habe ich den Standard. Also habe ich das einfach erstellt und eine Variante hinzugefügt. Variante ist der Mauszeiger für jede dieser Karten. In der Hover-Variante für jede dieser Karten habe ich nur diesen Hintergrund ausgewählt und diese Strichfarbe angezeigt. Das ist im Grunde alles, weil alles, was ich versucht habe, hier so gut wie gescheitert ist. Also, wenn ich z.B. eine Vorschau der Homepage ansehe und alles, was ich Ihnen hier zeigen möchte, ist nur, damit Sie sehen , dass es jetzt tatsächlich funktioniert, weil dies die eigentlichen Komponenten der eigentlichen Seite sind . Wenn ich also mit dem Mauszeiger schwebe, hat sich nur dieser Umriss hier von der Hintergrundfarbe abgehoben. Das ist so ziemlich alles. Und jetzt können wir zur nächsten Seite übergehen. In diesem gesamten Prozess habe ich genau das Gleiche getan, wie ich es erwähnt habe. Und hier möchte ich nur die ausgewählte Kartenseite erstellen. Jetzt wird die Bildauswahl für den Leuchtkasten genau hier sein. Und wir werden es etwas später animieren. Es wird die folgenden Informationen enthalten und ich werde dort ein bisschen kürzen. Aber bevor ich zu all dem übergehe, wollte ich Ihnen den Instanzenwechsel in Figma zeigen. Wenn ich das auswähle, können Sie sehen, dass ich dann eine exklusive Auswahl erstellt habe, also rho 12.3. Und jetzt, wenn ich diesen auswähle, z.B. und ihn tauschen möchte. Sie können sehen, dass ich das genau hier arrangiert habe , das ist der Range Rover. Wenn ich klicke, werden mir verschiedene Instanzen angezeigt. Das ist eine viel bessere Option als XD, muss ich zugeben, weil sie auf diese Weise einfach viel schneller ersetzt werden können. Um ihn dann genau hier zu finden, klicken Sie auf Ziehen und legen Sie darauf, um die Instanzen zu wechseln. Sie können also einfach klicken, um es zu Porsche zu ändern, z. B. und dann zurück zu Range Rover. Viel schnellere Methode, besonders wenn Sie Tausende dieser verschiedenen Symbole usw. haben. Also für die gewählte Karte, was ich machen möchte, und wie gesagt, ich mache einfach weiter und habe diese erstellt. Also werde ich das einfach ganz schnell irgendwo in der Nähe bringen ganz schnell irgendwo in , nur damit wir uns hier ein bisschen Zeit sparen können . Ich habe diese Fahrzeugspezifikation. Also lasst uns weitermachen und mit den Bildern beginnen. Also, was ich tun möchte, ist mein Rechteckwerkzeug genau hier zu verwenden. Also R und erstelle das Bild genau hier, acht Spalten breit. Also ist 786 die Breite und die Höhe ist 437. Da haben wir es. Das wird also Image1 sein, so. Und darunter werden wir einige Autobilder haben. Lassen Sie uns diese also sehr schnell mit einer Entfernung von 24 erstellen . Ich kann diesen sogar duplizieren. Positioniere es auf 24. So. Und ich werde es einfach so verkleinern. Und es sollte 93 hoch und 168 breit sein. Also schauen wir einfach nach, ob wir da sind. Da haben wir es. Also, was ist 68, 93. Da haben wir es. Und ich kann dieses Bild Nummer zwei nennen und es im Grunde in separate Gruppenbilder einteilen. Und ich kann sogar das automatische Layout einschalten und dieses duplizieren. Also wähle es einfach aus. Und mal sehen, der Abstand kann z.B. 38 betragen und aus welchem Grund auch immer, ja, es ist nur, weil es das auf einem einzigen Bild platziert hat. Also lassen Sie uns das, bevor wir das tun, einfach auf die altmodische Art duplizieren , so und so. Lassen Sie uns also einfach eine separate Kopie erstellen. Das werden also zwei, das werden drei sein. Und die Benennung deiner Ebenen ist wirklich wichtig, besonders hier, denn wenn du zu Figma kommst, willst du wirklich, dass die Dinge funktionieren. Das wird also ein Pinsel Nummer vier sein und das wird Bild Nummer fünf sein. Jetzt kann ich sie gruppieren, sie Bilder nennen. Da haben wir es. Und 24 ist die Entfernung, was in Ordnung ist. Was ich jetzt auch tun werde, ist einfach dieses Alt-Tag hier ein bisschen zu erstellen. Also werde ich ihm noch einmal eine weiße Farbe geben. Da haben wir es. Und lass uns sehen. Das wird 145, Breite 50 sein. Da haben wir es. Und ich werde alles Bilder nennen, BG, Mal sehen, Entfernungen können sein, Mal sehen, was wir zuvor gemacht haben. Also 24, 24 auf jeder Seite. Also lass uns das machen. Also 24, 24 Kinder D See. Alle Bilder sind zentriert und stellen Sie sicher, dass Sie sie hier positionieren. Dies ist übrigens eine Absatzgröße, Strg G , um die dünnen Gruppen zu platzieren, siehe alle Bilder. Da haben wir es. Und jetzt kann ich in dieser Phase einfach meine Bilder reinbringen. Also werde ich meinen Range Rover finden. Also der Reihe nach, dieser erste wird einfach Bild Nummer eins sein. Das wird Bild Nummer zwei sein. Das wird Bild Nummer drei, Blutung Nummer vier und schließlich Bild Nummer fünf sein. Da haben wir es. Und das werden wir später beheben, wenn wir diesen Lightbox-Effekt erstellen. Aber im Moment denke ich, dass wir bereit sind, hierher zu gehen , und ich denke, wir werden es einfach so lassen, wie es ist. Also hier werden wir das einfach der Navigation zuordnen. Es 40, bring es in Pixel. Und da haben wir es. Jetzt sind wir 40 von der Spitze entfernt. Also hier drücke ich einfach noch einmal R und erstelle ein Rechteck , das vier Spalten breit ist. Da haben wir's, so. Und für diesen Fall wollen wir sehen, was wir tun können. Vielleicht können wir ein bisschen Maisradius in die Mischung einbringen . Ja, also für den Eckenradius nehmen wir acht. Für die Hintergrundfarbe nehmen wir Weiß. Und für die Höhe nehmen wir einundzwanzig. Dies ist der Abschnitt, tatsächlich nach oben und unten skaliert wird. Also eigentlich, lass uns mit vier bis 53 gehen, so etwas ist eine nette Vergrößerung. Also, was ich tun werde, ist diesen Auto-Seitenleistenhintergrund zu nennen . Da haben wir es. Hier fange ich an, diese Labels zu erstellen. Assets ausfindig machen Lassen Sie uns zunächst mit dem Symbol beginnen, die und das SUV-Symbol ausfindig machen , das ist dieses. Zieh es in die Hitze, sind so etwas wie das hier. Triff D SUV. Das sollte jetzt von links gehen und eigentlich sollten solche Texte beschriftet sein. Nun, das sollte 33 Zoll hoch sein. Es sollte die Körperfarbe sein und es sollte für den Eckenradius sein. Da haben wir es. Wechseln Sie zurück zu unserem Ebenen-Panel und ich werde es genau hier positionieren. Also beschriften Sie BG. Da haben wir es. Mal sehen, was die Distanzierung angeht, was ich tun kann, ist vielleicht 16 zu verwenden. Lassen Sie uns dies zunächst in der Mitte positionieren. Das alles so. Und lass uns das sehen. Wir können 16 davon mitnehmen, so. Und der Text selbst sorgt dafür, dass er zentriert ist. Ist es. Das kann um acht sein. Vielleicht. Da haben wir es. Was ich also tun kann, ist das in eine Gruppe einzuordnen, die man Narbentyp nennt . Und stellen Sie sicher, dass Sie das automatische Layout mit acht und dann beschrifteten Hintergründen aktivieren. Was ich tun kann, ist vielleicht 16 auf jede Seite zu legen. Lass uns sehen. Bring es zurück hierher. Zwei Pixel, was also 88 sein sollte. Da haben wir es. Lass es uns noch einmal überprüfen. Also 6.7. Da haben wir es. Jetzt, wo das erledigt ist, gruppiere ich das einfach und nenne es ein Label. Und ich positioniere es einfach vom oberen und unteren Rand so, dass es, tut mir leid, von oben und links, sodass es 24 ist. Da haben wir es. Jetzt, wo das erledigt ist, ist es weiß. Dies ist im Grunde die schärfere Farbe, sodass sie sich vom weißen Hintergrund abhebt. Was wir als Nächstes tun werden, ist im Grunde nur unseren Titel hierher zu bringen. Geben Sie also Range Rover ein, das wird RH drei sein. Da haben wir es. Und die Entfernung hier sollte 24 sein. Control D Noch einmal. Mach daraus eine blaue Farbe , denn das wird der Preis sein. Da haben wir es. Kontrolliere D noch einmal. Und dabei werde ich in einen Textblock oder noch besser in einen Absatz übergehen. Jeder Absatz, und ich werde daraus einen Absatz machen. Es wird z. B. jetzt zur Abholung verfügbar sein. Und die Entfernung dafür wird ebenfalls 24 betragen. 24 hier, 24 hier. Alle Entfernungen sind also konsistent und es wird ein Kinderspiel sein, dies später in Webflow zu entwickeln. Also, was ich in dieser Phase tun werde, ist diese Knöpfe reinzubringen. Das wird also unser erster Button sein, 24. Da haben wir es. Und die Entfernung hier sollte 24 betragen, das ist also in Ordnung. Und jetzt werde ich den zweiten Button einfügen, den wir erstellt haben, und zwar diesen. Positioniere es hier. Stellen Sie also sicher, dass wir hier 24 sind. 24. Und mal sehen, wir sollten das eingrenzen, bis wir bei 24 sind. Die Höhe sollte also 448 sein. Da haben wir es. Das ist es also. Nun, was diese Schaltfläche angeht, sollte sie, mal sehen, 73 ist die Höhe, drei bis sechs ist die Breite. Das sollten eigentlich auch drei bis sechs sein. Aber bevor ich das ändere, lass mich das auf Reserve umstellen. Dieses Auto. Wir gehen. Da haben wir es. Stellen wir es wieder auf Hover um. Es funktioniert. Das ist großartig. Das mit dem Mauszeiger funktioniert, das ist großartig. Und das sollte nur C-Optionen bedeuten. Da haben wir es. Jetzt sind diese Schaltflächen fertiggestellt. Alle Informationen wurden darin enthalten. Lass uns weitermachen und es Control G auswählen und es Auto-Seitenleiste nennen. Da haben wir es. Und diese Seitenleiste in Webflow wird unseren Inhalten folgen, wenn wir nach unten scrollen. Also im Grunde werden wir das dort einbeziehen. Als nächstes beschäftigen wir uns mit der Übersicht, die genau hier erscheinen wird. Verwenden wir also zunächst ein Rechteck. Also stellen Sie unsere Position so ein, dass es acht Spalten breit ist. Und lassen Sie uns, mal sehen, Acht für den Eckradius verwenden . Stellen Sie sicher, dass das weiß ist, damit es sich von diesem Hintergrund abhebt und stellen Sie sicher, dass Sie es noch einmal auf 24 positionieren. Von hier aus wird dies der Übersichtshintergrund sein oder Oreo BG drücken und Übersicht eingeben. Da haben wir es. Stellen Sie sicher, dass es links ausgerichtet ist, genau dort. Und wir werden uns bei dieser Gelegenheit für H drei entscheiden. Also noch einmal 24, lassen Sie uns 24 überprüfen. Das ist großartig. Und jetzt ist es an der Zeit, dass wir dieses Layout erstellen. Aber bevor wir das tun, möchte ich dieses Layout korrigieren , weil das viel schneller sein wird . Lassen Sie mich tatsächlich weitermachen und diese beiden duplizieren. Setze sie in eine Gruppe und positioniere sie hier. Nun, diese Gruppe wird so beschrieben. Und das sollte Fahrzeugbeschreibung heißen. Das ist großartig. Strg D, um das zu duplizieren. Und das sollte eigentlich ein Absatz sein. Da haben wir es. Nun, lassen Sie mich den Text kopieren und einfügen. Also das sollten 24 sein, so. Und die Gesamthöhe sollte 198 betragen. Also ändern wir das auf 198. Da haben wir es. Wir sind also 32 vom unteren Rand entfernt. Das ist großartig. Nun, das gefällt mir nicht wirklich, also werde ich es auf einen Absatz mit einem Alter von drei Jahren ändern, und das ist im Grunde genommen alles für diesen speziellen Abschnitt. Die Beschreibung ist also fertig. Beschäftigen wir uns nun mit der Fahrzeugübersicht. Aber bevor wir das tun, lassen Sie uns das noch einmal auf 24 verschieben. Lassen Sie uns das auf 24 verschieben, was wir gerade erstellt haben. So. Da haben wir es. Und ich werde das etwas später verschieben. Aber im Grunde sind es 200, genau wie all die anderen Sachen, aber wir müssen diesen Abschnitt einbeziehen. Aber lassen Sie uns zuerst mit der Übersicht befassen , da wir hier einige Symbole haben. Was wir also zuerst tun werden, ist einfach den Text einzufügen und für den Text selbst werde ich einfach eine Reihe dieser Absatzelemente erstellen. Also nenne ich es 2021. Das wird für das Jahr sein. Also Absatz für die Absatzfarbe werde ich diese verwenden. Da haben wir es. Und ich gehe schnell zum Symbol und zum Kalendersymbol hier. Stellen Sie es hier hin und stellen Sie sicher, dass ich sie gruppiert habe. Achte darauf, dass ich sie einen Kalender nenne. Stellen Sie dann sicher, dass ich das automatische Layout aktiviert habe, aber bevor ich das tue, stellen Sie sicher, dass ich sie so zentriert habe. Automatisches Layout des Kalenders. Und mal sehen, die Entfernung dafür kann z.B. 16 sein, glaube ich. Ja. Also 16, Da haben wir es. Jetzt werde ich es genau hier anstupsen. Da haben wir es. Und im Grunde werde ich in dieser Phase einfach ein paar Kopien erstellen. Mal sehen, 24 von diesem Rand sollten gut funktionieren. Ja, ich finde das großartig. Erstellen Sie also einfach zwei weitere Kopien wie diese. Und ich werde es automatisch in diesen Anruf einbauen. Das Getriebe, das wird Benzin für die Kraftstoffart sein , und das werden 15.246 km sein. So viel hat das Auto bisher gemacht. Also lass uns sehen. Wir haben den Kalender, und das ist dieser. Dann haben wir den Kilometerstand , der unter dem Kalender stehen sollte. Dann haben wir den Feldtyp, unter dem Kilometerstand liegen sollte. Und schließlich haben wir die Übertragung, die genau hier hingehen sollte. Was wir in diesem Stadium also tun können, ist das irgendwie zu vielleicht, ich weiß nicht, ADH oder so etwas zu bewegen . Also lass uns mit, mal sehen, 88 beginnen. Und dann kann ich diese vier auswählen, nach oben kommen und einfach aufräumen. Ja. Er macht sechs Werke gut, aber ich bin mir nicht sicher. Mir gefällt, was ich zuvor gemacht habe. Verteilen Sie also den horizontalen Abstand. Da haben wir es. Ich denke, das wird in Ordnung sein. Schauen wir uns also einen T9 an. Lassen Sie uns nun versuchen, diese Symbole zu vertauschen. Für diesen benötigen wir also diese Übertragung. Stellen Sie also sicher, dass Sie es finden. Da haben wir es. Für diesen. Lass uns zum Tausch gehen. Wir werden zum Feldtyp gehen. Dieser ist der Kilometerstand. Also ich denke, das Kilometerzählersymbol sollte hier gut funktionieren. Da haben wir es. Und jetzt, wo diese abgeschlossen sind, können wir sie im Grunde genommen in eine Reihe legen und diese Zeile duplizieren und sie nach unten positionieren. Das wird also eine zweite Zeile da drin sein. Lass uns das in einen Motor ändern. Weil es der Motortyp sein wird. Das sollte V8-Motor heißen. Motortyp, wie wir wollen. Anstelle des Kilometerstands wird hier das Türsymbol angezeigt. Also lass uns sehen, wo es ist. Da haben wir es. Und es wird fünf Türen haben. Da haben wir es. Nun, der nächste sollte Sitze haben, also sieben Sitze. Dieses Symbol wird also für die Samen stehen, die hier in der Nähe sind. Sitze. Und dieser letzte sollte aus Garantiegründen sein. Weil einige Autos eine Garantie haben, andere nicht. Es hängt alles davon ab, wie alt Ihr Auto zum Zeitpunkt des Verkaufs ist. Und wenn du beweisen kannst , dass es deins ist, wenn du das beweisen kannst, ist es das wert, was du sagst und solche Sachen. Also sind wir nicht Da haben wir es. Das ist also so ziemlich alles dafür. Und ich denke, dass dieser Abschnitt abgeschlossen ist. Alles was wir tun müssen, ist es ein bisschen aufzuräumen. Also werde ich das auch auf 24 setzen und daraus eine 196 machen. Die Höhe ist also 196. Da haben wir es. Wir sind also 32 von unten, 24 von jeder dieser Seiten. Und jetzt werde ich das einfach oben und das unten drauf legen. Nennen Sie diese Übersicht. Und lassen Sie mich mich dieser Seite zeigen. Also 24 auf dieser Seite, lass uns das einfach auf 24 schieben, auch das auf 24. Hier müssen wir nur diesen Abschnitt kopieren. Also schieb es einfach hier hin und stelle sicher, dass es zentriert ist. Und schauen wir uns die Entfernung an, wir setzen sie auf 200. Also schauen wir mal, wo wir hier sind, ungefähr so. Also 200 und dann sollten die folgenden Abschnitte bei 200 sein sowie zu so etwas. Da haben wir es. Und ich werde das einfach nach unten erweitern , damit meine Fußzeile nicht abgedeckt wird. Es wird um 64 Uhr sein, genauso wie wir es zuvor getan haben. Die Höhe sollte also 5856 sein, denke ich. Da haben wir es. Ein bisschen Mathe reicht also. Da hast du es. Das ist diese Seite. Alles wurde abgeschlossen. Also lasst uns für das Ende dieses Videos auf Vorschau klicken. Ich möchte Ihnen nur zeigen, was wir bisher gemacht haben und was wir mit dieser speziellen Seite machen werden. Also hier werden wir diese Bilder haben. Und wenn Sie auf eines der Bilder klicken, wird die Leuchtbox angezeigt. Sie können das im Adobe XD-Teil des Kurses sehen, aber wir werden das auch in einem der späteren Videos hier tun . Wir haben für diesen Kurs eine Reserve, Sie sollten hier Ausleihmöglichkeiten und Autos auswählen, was sofort behoben wird, da dies eigentlich der Teil der Kursseite ist. Also wählen wir das aus. Und statt der Standardeinstellung wählen wir ausgewählt. Jetzt können Sie sehen, dass es genau hier hervorgehoben ist. Reservieren Sie dieses Auto oder die Option C alone. Also füge hier einfach S hinzu. Und deshalb überprüfen wir das. Das ist also großartig. Also Ceylon-Optionen. Sie können diese Kreditoptionen also auf der nächsten Seite sehen. Und es wird dir nur allgemeine Optionen geben. Aber natürlich wird es für jedes Auto und für jeden Preis anders sein. Es ist also besser, einfach die Person zu kontaktieren, die die Kredite innerhalb dieses Unternehmens oder eines externen Unternehmens vergibt, um Ihnen die bestmögliche Option zu bieten. Also Ceylon-Optionen, wir werden Sie zur Kreditrede selbst bringen. dieses Auto reservieren, fahren Sie einfach zum Forum Philip. Sie können dieses Formular ausfüllen, reservieren. Dieses Auto wird wissen, dass Sie von dieser Seite gekommen sind. Es wird also viel besser laufen, so dass wir die großartige Fahrzeugbeschreibung haben , was großartig ist. Das alles ist großartig. alles ist in Ordnung. Wir haben 200 all diese funktionstüchtigen Fahrzeuge. Kontaktieren Sie uns. Da haben wir es. Das alles funktioniert also einwandfrei. Und da haben wir es. Das war's. Das war's für diese Seite, Kreditseite, kontaktieren Sie uns, das wird super einfach und leicht sein. Es wird im Grunde das gleiche Layout sein , aber es werden mehr Bilder hinzugefügt. Wir sehen uns also im nächsten Video, in dem wir diese Kreditseite erstellen werden. Also werde ich dich dort sehen. 159. Kredite, Kontakt und Lighbox: Fangen wir mit der Kreditseite an. Also, was ich zuerst tun werde, es ist einfach dieser Text hier ausgewählt. Control C, komm gleich her, Control V, füge es an Ort und Stelle ein. Und ich werde es durch einige zusätzliche Texte ersetzen. Also Kredite für dein Traumauto. Und ich komme gleich mit meinen Bildern her. Und ich werde einfach Bilder reinbringen, die oben in den Heldenbereich gehen. Richten Sie sie so aus, bringen Sie sie hierher und stellen Sie sicher, dass Sie sie noch weiter an so etwas ausrichten , dann bringen Sie das ein bisschen näher, vielleicht sogar an so etwas. Aber ja, ich denke, das wird in Ordnung sein, weil es für mich einfach sein wird, diese Bilder in Bezug auf die allgemeine Ausrichtung auszurichten . Ich denke, hier geht es uns gut. Wählen wir also diese Bilder aus, nennen wir sie Heldenbilder. Da haben wir es. Und ich werde das alles gruppieren und es Helden nennen. Überprüfe den Text einfach ganz schnell. Das ist großartig. Wählen Sie die Kredite aus und wir werden dort hineinspringen. Nav Ich weiß nicht, warum es mir nicht angezeigt wird. Da haben wir es. Also Kredite, die ich wählen werde , solange wir da draußen sind, gehen Sie zu Kontakt und wählen Sie, wählen Sie sie aus. Da haben wir es. Also geh zurück in die Lunge. Was wir hier brauchen, ist, einen weiteren Abschnitt darunter zu erstellen . Also drücke T und ich werde so etwas hineinschreiben, achte darauf, dass es zentriert ist. Und stattdessen werde ich mich dafür entscheiden. Also wieder zentriert, Mitte der Seite. Und ich nehme 150 von diesem Bild. Also so, los geht's. Ich werde es natürlich unter meinen Heldenbereich stellen. Und dann werde ich das duplizieren und sicherstellen, dass es in diesem Fall drei Jahre alt ist. Ich werde im Grunde das gleiche Layout neu erstellen , das wir hier haben. Wir können das sogar kopieren, wenn du willst. Lassen Sie uns das also tatsächlich tun, denn im Grunde werden wir einfach das gleiche Layout verwenden. Wählen Sie also diese drei aus, drücken Sie Control C und kommen Sie hierher zurück. Drücken Sie Control V. Stellt sicher, dass wir uns so in der Mitte der Seite befinden , und stellen Sie sicher, dass wir, mal sehen, 64 von hier entfernt sind . Also 64, los geht's. Jetzt werde ich in die H3-Farbe wechseln. Da haben wir es. Tun Sie dasselbe dafür. Also h3h3 und das, mal sehen, vielleicht ist es diese dunkelgraue Farbe. Ich denke, das wird in Ordnung sein. Und dunkelgrau und dunkelgrau. nun, was den Inhalt angeht Lassen Sie uns nun, was den Inhalt angeht, dasselbe ausfüllen. Da haben wir es. Da haben wir es. Und ich lasse die Symbole für das Ende übrig weil wir in nur einer Sekunde zu ihnen kommen werden. Ich werde zeigen, wie Sie einige dieser Abschnitte schnell verwenden und wiederverwenden da sie sich wiederholen. wirst du sowieso in Webflow machen. Warum also nicht auch in Figma machen? Also hier wählen wir dieses Symbol aus und wir werden es so bequem wie möglich machen und ändern . Ich kann sogar bequem tippen. Da haben wir es. Das wird, mal sehen, Autozahlung sein. Ersetzen Sie es also durch Autozahlungen. Dann wird das die Autogarantie sein. Autogarantie. Da haben wir es. Jetzt möchte ich nur noch diese drei aufeinander abstimmen. So, glaube ich. Nein, versuchen wir es bis zum Ende. Da haben wir es. Jetzt sieht alles gut aus. Mal sehen, ob ich diesen auswähle. Wir sind 64, wir sind 72 aus irgendeinem Grund hier. Vielleicht ist dieses Symbol etwas kürzer. Ich wähle also einfach alle drei aus, klicke auf Gruppierung aufheben und ordne alles manuell an. Von hier bis hier sollten wir also um 24 Uhr sein. Da gehen wir von hier nach hier, wir sollten bei 74 sein. Da haben wir es. Dies sollte auch um 24 Uhr sein. Da haben wir es. Und das sollte auch eine 24 sein, weil wir einige Instanzen getauscht und einige dieser Symbole geändert haben. Versuchen wir es von hier aus. Ich weiß nicht, warum es hier nicht übereinstimmen wird. Da haben wir es. Komm schon. Okay, jetzt ist das erledigt, das ist erledigt, das ist erledigt, das ist großartig. Also Control G, Control G, Control G, Control G. Los geht's. Das wird einfach sein. Das wird eine Zahlung sein. Das wird Garantie sein. Seelenfrieden. Da haben wir es. Also jetzt sind wir es. Wenn wir sie alle auswählen, sollten wir 64 Jahre alt sein. sind wir. Wir stellen es hier hin, drücken Control G und nennen das marktführende Kredite, drücken Control G und nennen das marktführende Kredite, z. B. Da haben wir es. 150 aus dem obigen Abschnitt, was ich in diesem Fall tun werde ist diesen Abschnitt Steuerung C, Steuerung V genau hier auszuwählen . Aus welchem Grund auch immer, ich habe es nicht eingefügt. Also lass uns vorerst mit so etwas beginnen. Und was ich tun werde, ist einfach ein weiteres Bild hierher zu ziehen , um dieses zu füllen. Da haben wir es. Und ich werde diese auswählen, um sicherzustellen, dass sie zentriert sind. Hier. Lassen Sie mich diesen Text kopieren. Da haben wir es. Füge diesen Text ein. Da haben wir es. Jetzt, wo das erledigt ist, wähle ich diese aus, um hier zu klicken. Da haben wir es. Und jetzt möchte ich die zusätzlichen Logos hinzufügen , die zuvor enthalten waren. Also lass mich sie hier reinziehen. Da haben wir es. Also haben wir weitergemacht und wir haben dieses S-Leasing. Also irgendwann wird es genau hierher kommen und im Schlaf wird Zink genau hierher kommen. Da hast du es. Also 24 auf jeder Seite. Da haben wir es. Jetzt, wo das erledigt ist, wähle ich im Grunde diese drei aus. Also lasst uns das tatsächlich reinbringen. Also wer sind wir? sollten wir für unsere Partner ändern. Da haben wir es. Die Hand unseres Partners. Bringen wir die beiden da rein. So etwas. Da haben wir es. Achte nur darauf, dass es perfekt in der Mitte ist. 24. Und jetzt ist das erledigt. Unsere Partner sind also fertig. Wer wir sind Steuerpartner. Text. Okay. Im Grunde ist das alles für diese Seite. Das einzige, was uns noch bleibt ist, dies und das auf einen Abstand von 200 Pixeln auszurichten . Lass es uns vergrößern. Da haben wir es. Doppelklicken Sie hier, um unseren Kreditrahmen auszuwählen. Schieb es runter und wir sollten bereit sein, so etwas zu machen. Also minus drei. Also 3885. Da haben wir es. Weil wir hier sind und uns hier im Grunde nur das Bild fehlt. Lassen Sie uns also auch die Kontaktseite fertigstellen. Also ziehe ich einfach ein Bild hierher und stelle sicher, dass es mittig ausgerichtet ist. Stellen Sie sicher, dass es bis hier ausgerichtet ist, 20 Pixel nach unten, z. B. oder noch besser. Ja, 20 Pixel sind in Ordnung. Alles, was wir hier tun müssen, ist im Grunde all diese Inhalte auszuwählen und aufzurufen. Also statt 200 nehmen wir 100, weil wir diesen Abstand nicht benötigen. Also schauen wir uns 100 an. Und noch einmal, reduziere das im Grunde einfach im Kern. Da haben wir es. Mal sehen, wo wir sind. Wir sind in 9 Minuten. Vielleicht können wir auch dieses Overlay fertigstellen. Also 4273564. Da haben wir es. Machen wir also weiter und machen den Leuchtkasten selbst. Also lass mich das kopieren. Lass mich das einfügen. Und der Leuchtkasten selbst. Lass uns sehen. Das sollten zehn sein. Also 10905609. Da haben wir es. Stellen Sie sicher, dass es in der Mitte ist. Werde ich glauben, dass wir das reinbringen werden. Es wird so bleiben wie es ist. Also 168 mal 93, das ist großartig. Und jetzt müssen wir nur noch drei weitere hinzufügen, weil wir 12345 haben. Also drei weitere werden hier gut ausreichen. Also gehe ich zunächst zurück zu hier und mache daraus ein automatisches Layout. Komm her, mach daraus ein automatisches Layout. 123. Das sollte also Nummer sechs sein, das sollte Nummer sieben sein. Los geht's, und das sollte Nummer acht sein. Jetzt, wo das erledigt ist, können wir sie auch im Grunde ein bisschen besser ausrichten. Also zuerst müssen Sie das in die Mitte der Seite einrasten. Ich werde das etwas reduzieren. Schieb drauf, z. B. mal schauen, 64, vielleicht 64 von dieser Seite, das ist super. Und vielleicht 16 von dieser Seite. Lass mich so etwas sehen. Weil ich alle Bilder sehen möchte oder vielleicht sogar noch besser, wir können sie einfach so in der Mitte fotografieren. Da haben wir es also. Sehen Sie vielleicht ein-zwanzig von diesem Rand aus. Also so etwas. Ja. Jetzt, wo wir das haben, können wir R für das Rechteck drücken und es einfach so positionieren, dass es diesen Rahmen vollständig ausfüllt . Da haben wir es. Positioniere es im Hintergrund. Und ich nenne es Leuchtkastenhintergrund. Ich werde ihm diese dunkelgraue Farbe geben. Da haben wir es. Und ich gebe ihr eine Basisstadt von 80 Prozent. Füllen Sie also das Dunkelgrau und die Adipositas von 80 Prozent aus. Da haben wir es. Was wir hier auch brauchen, ist dieses Schließsymbol. Also können wir diesen benutzen. Da haben wir es. Positioniere es ungefähr hier, sodass es in einer Reihe steht. Und ich gebe ihm die, mal sehen, Auswahlfarbe. Also statt dieser Farbe, nicht der Füllfarbe, wählen wir sie tatsächlich aus. Fail sollte weiß sein. Da haben wir es. Herrliches Jonglieren. Und von oben sollten es, ich weiß nicht, vielleicht 53 oder so sein. 56, glaube ich. Ja, 56. Und das ist im Grunde alles. Das ist unser Overlay fertig. Weil wir das bei 80 Prozent belassen haben. Es wird im Grunde genommen weitergegeben. Wenn wir es also über diese Seite legen, kann die Opazität im Hintergrund angezeigt werden. Also lasst uns diese tatsächlich gruppieren und sie so Leuchtkasten nennen . Und da haben wir es. Unser Design ist abgeschlossen, alles ist erledigt. Im nächsten Video können wir einige grundlegende Prototypen ausprobieren. Und im Video danach kann ich Ihnen vielleicht zeigen, wie Sie einige dieser Assets exportieren können. Und dann, am Ende, werde ich Ihnen das Plugin zeigen, mit dem Sie einige grundlegende Designs von Figma in Webflow umwandeln können, ohne eine einzige Codezeile zu schreiben. Fügen Sie all diese Komponenten in Webflow selbst hinzu, ohne sie zu berühren , da Sie das alles in Figma tun können. Aber denken Sie noch einmal daran, dass es für wirklich einfache Seiten ist. Wir sehen uns also im nächsten Video dem wir mit dem Prototyping beginnen werden. 160. Prototypen in Figma erstellen: Lassen Sie uns jetzt mit einigen ziemlich einfachen Prototypen beginnen. Was ich also tun werde, ist genau hier, wo Autos steht, ich werde zum Prototyp wechseln und es auf die Auto-Seite ziehen. Ich werde sofort klicken und navigieren, weil ich keine Animationen zwischen den Ausleihungen haben möchte . Dieselbe Geschichte. Wählen Sie es also einfach aus und gehen Sie zu Darlehen und kontaktieren Sie uns, wählen Sie es aus und gehen Sie zu Kontakt. Da wir es nun von hier aus angewendet haben, wie Sie sehen können, wurde es auf jede einzelne Instanz dieser bestimmten Komponente übertragen . C-Taste für alle Autos. Was ich tun werde, ist es einfach auszuwählen und von dort aus gehe ich sofort zu dieser Seite. Gehen wir zu Smart Animate , weil wir diese Option genau hier haben werden. Kontaktieren Sie uns Navigation. All das wird so ziemlich gleich bleiben. Auf dieser Seite werden wir nun den Range Rover auswählen. Wählen wir also die Debitkarte aus und wir werden zu dieser speziellen Seite gehen. Lassen Sie uns auch in diesem Fall für Smart Animate entscheiden Reservieren Sie die Kreditoptionen von Garcia? Also, was die Kreditoptionen angeht, gehe ich in die Lunge. Hier, sehen Sie sich alle Fahrzeuge an oder es wird uns hier auf diese Seite bringen . Ich glaube nicht einmal, dass wir diesen Button jetzt , wo ich darüber nachdenke, brauchen, aber lassen wir ihn so, wie er ist, weil wir ihn später in Webflow aufnehmen werden . Und das ist so ziemlich alles für diese spezielle Seite. Nun, denn hier ist alles getan, alles ist getan. Jetzt müssen wir nur noch diesen Leuchtkasten anschließen. Um das zu tun, klicken Sie einfach hier oder hier. Also wähle ich C alle Bilder aus. Klicken und ziehen Sie beim Klicken zum Leuchtkasten. Gehe zu, ich gehe zu Overlay öffnen. Und ich entscheide mich einfach für Instant. Und innerhalb des Leuchtkastens klicke ich und wähle dieses Schließen aus. Klicken Sie hier. Beim Klick. Ich habe diese Interaktion schon irgendwie. Also lass uns das schließen. Lass uns das schließen. Wählen Sie es also noch einmal aus. Klicken und ziehen Sie hier. Also beim Klicken schließe ich das Overlay. Das wird also im Grunde das dort schließen. Nun, eine Sache, die ich nicht recherchiert habe, ist, wie ich diese spezielle Menüleiste , die hier von oben nach unten kommt, verstecke diese spezielle Menüleiste . Also dieser, es gibt wahrscheinlich eine Option, aber ich war einfach zu faul. Also, wenn ich jetzt gehe und klicke , werde ich einfach dorthin gebracht, was in Ordnung ist. Hier. Wir können sehen, wie das alles aussieht. Und ich kann sogar hierher zurückkehren. Aber ich sollte es wahrscheinlich als Prototyp verwenden. Also lass es uns einfach hier einchecken. Also Autos, alles funktioniert. Wenn ich hier klicke, wird diese Seite geöffnet. Also funktioniert alles einwandfrei. Sie können sehen, dass wir die Cover haben. Alle Autos anzeigen führt uns zu dieser Seite. Es wird diese Position beibehalten, was nicht ideal ist, aber dennoch diese C-Kreditoptionen für das Auto reservieren. Es wird uns zwei Lungen kosten. Und wenn Sie auf Alle Bilder anzeigen klicken, wird diese Seite geöffnet. Was wir nun mit dieser Seite machen können, ist sie in der Höhe etwas einzugrenzen. Also lass uns weitermachen und das schließen. Da haben wir es und schließen das. Wechseln Sie zum Design. Also, was wir hier haben , sind 64, wenn ich mich richtig erinnere, ja, das tun wir. Also können wir das einfach erhöhen. Mal sehen, wo wir hier sind, 118. Catia glaubt, dass es gut funktionieren wird . Und sehen Sie, wo wir damit stehen. Ja, also muss ich auch das Lightbox-Bild eingrenzen . 68, also vier runter, 150. Da haben wir es. Und Lightbox selbst sollte 150 sein. Da haben wir es. Jetzt, wo das erledigt ist, können wir vielleicht gleich hier auf dieser speziellen Seite auf Vorschau klicken , um zu sehen, ob es einen Unterschied zu dem gibt, was wir erstellt haben. Ja, das gibt es, denn jetzt schiebt es es nur ein bisschen nach oben in Richtung Mitte. Und das war so ziemlich alles für das mündliche Prototyping und was Sie damit machen können. Wir werden hier nicht verrückt werden, weil wir später in Webflow Prototypen erstellen werden. Im nächsten Video werde ich einige Exportoptionen zeigen und wie Sie einige dieser Assets für Entwickler exportieren können , wenn Sie dies nicht selbst oder für sich selbst entwickeln. Wenn Sie das in Webflow entwickeln wie wir es tun werden, sehen wir uns dort. 161. Assets aus Figma exportieren: Lassen Sie uns nun mit dem Export einiger dieser Artikel befassen. Und ich werde Ihnen im Grunde drei verschiedene Formate erklären, Dateiformate, unter denen Sie exportieren können. Sie können sich also an dieser Stelle die Exportumleitungen ansehen und mit dem Webflow-Teil dieses Kurses beginnen , um ein wenig zu verstehen, wie einige dieser Optionen importiert werden, wofür sie verwendet werden wofür jedes Dateiformat verwendet wird. Das alles habe ich im Backflow-Teil des Kurses erklärt. In diesem Teil des Kurses werden wir Exportelemente aus Adobe XD verwenden. Figma funktioniert genauso . Zeige es dir hier, zB haben wir jetzt diese Icons, jedes einzelne Symbol werde ich als SVG exportieren. Und um das zu tun, wähle ich das Symbol selbst aus. Kommen Sie direkt hierher, wo Exportieren steht, klicken Sie auf Auswählen. Und hier kann ich für diesen Kurs das Dateiformat von PNG auf JPEG, SVG und PDF ändern . Und im Allgemeinen müssen Sie sich um PNG, JPEG und SVG kümmern . Denk einfach so daran. SVG eignet sich hervorragend für Icons weil es die gleiche Qualität beibehält und konsistent bleibt, egal auf welcher Größe Sie entwerfen, da SVG skalierbare Vektorgrafiken ist Es wird immer die gleiche Qualität beibehalten. JPEG ist für eingebundene Bilder ohne transparenten Hintergrund. Und ich werde dir hier einen von ihnen zeigen. ZB dieses Bild hier. Es hat keinen transparenten Hintergrund, daher ist JPEG für dieses bestimmte Dateiformat in Ordnung. Und schließlich haben wir P&G. P&G eignet sich hervorragend für solche Bilder , z. B. für Bilder wie diese, wie diese beiden. Weil sie transparente Hintergründe haben. Um zu exportieren, haben Sie hier also wirklich zwei verschiedene Möglichkeiten. Nehmen wir an, ich möchte dieses Symbol anstelle von PNG exportieren Ich wähle SVG. Sie können hier verschiedene Suffixe hinzufügen, z. B. 1x2x3 x. Wenn Sie dies bei einem x2, x3 x exportieren möchten, müssen Sie nur ein x als Suffix hinzufügen. Klicken Sie hier. Es wird automatisch hinzugefügt, hinzugefügt, um erneut zu klicken, drei verlassen a3x. Sie können immer mehr und mehr hinzufügen, wenn Sie möchten, aber das brauchen wir nicht wirklich. Also werde ich im Grunde weitermachen und diese loswerden. Sie können hier sehen, wie es aussieht. Aber ich werde einfach all diese schließen und einfach bei diesem exportieren. Ich werde das Suffix entfernen , weil ich es nicht wirklich brauche. Was ich tun kann, ist einfach auf Autoschlüsselbild exportieren zu klicken. Und du kannst genau hier sehen, wenn ich mich rüberstupse, dass es es sehr schnell auf meinen Desktop exportiert. Dadurch kann ich es einfach per Drag & Drop in Webflow ziehen, wie ich es im nächsten Teil des Kurses tun werde , wenn wir mit dem Web für die Entwicklung beginnen. Und es wird einfach super einfach sein per Drag & Drop alle Ihre Dateien in diesen bestimmten Organisationsmustern zu konsistent zu halten. Also lass mich dir das auch zeigen. So sehen diese Bilder im Grunde aus. Sie können also sehen, dass einige von ihnen SVG sind, wie dieser und dieser. Das ist ein PNG. Wenn ich also ganz schnell übergehe, siehst du eine PNG-Dateierweiterung. Dies ist eine JPEG-Datei, da wir die PNG-Erweiterung nicht wirklich benötigen. Dies ist das PNG, weil es transparenten Hintergrund hat, den Sie sehen können , also hier ist es ein JPEG, wie ich bereits erwähnt habe, weil es keinen transparenten Hintergrund hat, was die Symbole angeht , Sie können sehen, dass sie alle SVG sind. Und im Grunde habe ich einfach alle exportiert. Aber was passiert, wenn Sie mehrere Icons exportieren möchten? Nun, Sie können das Symbol einfach auswählen , während Sie entwerfen. Klicken Sie auf Exportieren und ändern Sie dies in SVG. Und wenn ich jetzt dieses auswähle, wird es wissen, dass ich dort immer das SVG auswähle. Es wird dieses als SVG auswählen. Vielleicht kann dieses als JPEG exportiert werden und dieses als großes. Das Hero-Image kann also bei P&G exportiert werden. Was passiert also, wenn wir einen Export auswählen möchten? alle, nun, das können Sie ganz einfach tun, indem Sie hier klicken. Dann Datei und Export. Und es wird alle Elemente exportieren, die Sie im Grunde für den Export ausgerichtet haben, weil Sie sie alle markiert die Dateiformate ausgewählt haben. Dann können Sie zu Dateiexport gehen und es wird an Ihr gewünschtes Ziel exportiert. Im Grunde ist das so ziemlich alles. So einfach ist der Export. Ich werde mir nicht die Mühe machen einen Experten für all diese Themen auszuwählen. Im Grunde müssen Sie diese Ellipse damit nicht einmal exportieren. Sie können es in Webflow neu erstellen, aber ich glaube, ich habe es trotzdem aus Adobe XD exportiert , weil es einfach viel einfacher ist, SVG-förmig zu importieren und selbst eines zu erstellen. Denn in Webflow ist das so ziemlich ein Div mit nur einem Eckradius von 100 Prozent und blauer Farbe im Inneren. Das ist so ziemlich alles. Und dann können Sie mit den Positionierungsoptionen in Webflow spielen . Sie exportieren keine Schriften. Sie exportieren keine Farben, Sie exportieren keine Schaltflächen. Sie erstellen all diese Dinge in Webflow. Sie müssen dies also im Grunde nicht tun und sie direkt aus Figma exportieren. Apropos Export von Figma nach Webflow. Im nächsten Video werde ich mich mit diesem berühmten Plugin befassen. Und wir werden es untersuchen und sehen, was Sie Figma tun können, wie Sie es mit Ihrem Webflow-Projekt verbinden und wie Sie darin wie Sie es mit Ihrem Webflow-Projekt verbinden an ähnlichen Projekten arbeiten können, aber nicht an diesem. Also werde ich dich dort sehen. 162. Figma zu Webflow: In Ordnung, also los geht's. Ich werde Ihnen zeigen, wie Sie den Figma-Tool-Workflow verbinden. Ich mache das zum ersten Mal und werde dir zeigen, wie es aussieht. Im Grunde kommst du also direkt hier zu deiner Plugins-Panel-Suche, Figma zu Webflow und du wirst diesen installieren. Stellen Sie einfach sicher, dass es von Webflow Labs ist. Sie können es genau hier sehen. Um sicherzugehen, dass es sich um ein offizielles Plugin handelt, klicken Sie auf Ausführen. Und es wird im Grunde eine Installation ausführen. Du kannst es genau hier sehen. Und es wird Ihnen alle möglichen Optionen zeigen . Safari wird also nicht unterstützt. Verwenden Sie den Workflow in Chrome. Ich verwende es in Chrome, daher bin ich mir nicht sicher, warum es mir das zeigt. Und das ist so ziemlich alles. Also, was wir hier haben, wir haben Layouts und wir haben Struktur. Sie können also Abschnitt und Container einbeziehen. Zwei Spalten, drei Spalten, Überschrift mit vier Spalten plus drei Spalten und so weiter und so fort. Und das solltest du wirklich im Webflow-Abschnitt des Kurses selbst lernen , was das alles ist und wie du deine Websites strukturierst. Und dann komme ich vielleicht darauf zurück. Wenn Sie mit der grundlegenden HTML-Struktur Ihrer Seiten nicht vertraut sind, haben wir das Layout, und dies sind im Grunde die Vorlagen, die Sie verwenden können. Also lass uns das zur Seite schieben. Gehen wir eigentlich zu unseren Spot-Assets. Verwenden Sie unsere Website und drücken Sie Control C. Gehen Sie zurück zum Website-Design-Steuerelement V. Positionieren Sie es ungefähr hier. Da haben wir es. Was ich tun werde, ist, sagen wir, dieses Nav-Logo zu verwenden, linken Maustaste zu klicken und es zu Canvas hinzuzufügen. Also werde ich klicken und es wird es hoffentlich hier hinzufügen. Es ist nicht vielleicht so, dass es woanders ist. Weißt du, aus welchem Grund auch immer funktioniert es nicht. Ich bin mir nicht sicher warum. Vielleicht sollten wir mit einer Strukturvorlesung beginnen. Lass uns diesen loswerden. Also lass es uns so versuchen. Da haben wir es. Also neue Seite. Wir müssen ihre eigenen benutzen. Also 14, 40. In diesem Fall. Hier werden wir nur das Nav-Logo übrig lassen. Es wird den Helden enthalten , der nach links geht. Lass uns sehen. Also Heldenteam, schauen wir uns die Funktionen an, die Feature-Matrix. Da haben wir es. Sie können also sehen, dass es anfängt, all diese hinzuzufügen , vielleicht Teambereiche, Teamkreise. Da haben wir es. Vielleicht Testimonials. Also lass uns diesen benutzen. Und vielleicht können wir Logos verwenden. Vielleicht dieser, Footer, vielleicht dieser. Und da haben wir es. Lass es uns noch einmal versuchen. Da haben wir es. Jetzt, wo wir alles haben, wollen wir uns kurz mit diesem Layout da Sie dieses spezielle Layout verwenden müssen , um dieses Layout in Ihre eigenen Seiten zu implementieren. Als Erstes können wir also sehen, dass das Layout auf 14:40 API, 14, 40 Pixel festgelegt ist . Also hier haben wir auch 14, 40. Aber unsere ist nicht repariert. Sie sollten es also im Grunde reparieren. Und Sie sollten all Ihre Inhalte in das automatische Layout umwandeln. Sie können also sehen, dass sie das automatische Layout haben. Also zB wenn ich das gleich hier mache, damit ich ein automatisches Layout erstellen kann, anstatt eine feste Breite zu verwenden. Und da hast du es. Mein Inhalt ist der gleiche wie ihrer. Also, was sollten wir als Nächstes tun? Nun, im Grunde sollten sich all diese in einem eigenen automatischen Layout befinden. Also hier haben wir jetzt das Navbar-Logo links, das ist diese Navigationsleiste oben. Und wenn ich es öffne , können Sie zunächst sehen, dass es sich um ein automatisches Layout handelt. Und Sie können sehen, dass wir eine horizontale Polsterung von 24 haben. Wenn ich es also öffne, haben wir den Navbar-Container, der Behälter ist , in den der Inhalt hineingelegt werden soll. Dann haben wir den Inhalt der Navigationsleiste selbst. Ja. Leihen Sie sich jetzt Inhalte aus, in denen sich all das befindet. Darin haben wir die Marke Navbar und wir haben das Navbar-Menü. So sollten Sie Ihre Dateien strukturieren und nur sicherstellen, dass Sie so einrichten, dass Sie den Behälter füllen und die darin enthaltenen Gegenstände umarmen. Wenn ich das also auswähle, können Sie sehen, dass es 14 40 S. ist. Aber weil es auf jeder Seite in einem Abstand von 24 eingestellt ist, können Sie es genau hier sehen. Wenn ich dann meinen Container auswähle, legen sie die feste Breite von 1.200 und dann die volle Breite des darin enthaltenen Inhalts fest. Dadurch wird es sofort responsiv. Was hier passieren wird, ist, dass Sie dieses auswählen können. ZB und dann können Sie stattdessen Ihr eigenes Logo hier einfügen. Sie können also beispielsweise einige Instanzen austauschen oder Ihr Logo einfach per Drag-and-Drop hineinziehen. Und lassen Sie uns das tatsächlich versuchen. Lass uns eine Spinne sehen. Da haben wir es. Sie können sehen, dass Sie Ihr Logo darin platzieren können und Sie könnten einfach ihr Logo loswerden. Achten Sie nur darauf, dass Sie den Abstand zu den Schulden einhalten. Also eigentlich Control X, Control V. Drücke darauf, lösche das und los geht's. Jetzt ersetzen wir das Logo durch unser eigenes Logo. Wir können hier all unsere Instanzen auf viele Funktionen setzen und so weiter und so fort. Aber eigentlich, wie man das alles miteinander verbindet. Sie müssen Ihre Workflow-Dashboards öffnen und das Projekt finden. Hat diese Figma-Datei etwas damit zu tun? In unserem Fall handelt es sich um Spider Exclusive Cars, die in Webflow entworfen wurden Es heißt genauso. Wenn Sie also Ihr Workflow-Dashboard öffnen, melden Sie sich an. Also klicken Sie einfach hier. Sie melden sich an und klicken dann auf dieses bestimmte Projekt, damit Sie es verbinden können. Wenn Sie es dann verbinden , können Sie alle Texte und Farbstile kopieren, nur Text und nur Farbstile. Du kannst in die Plugin-Einstellungen gehen und es dort einrichten. Jetzt können Sie im Grunde für jede Figma-Datei eine Verbindung zu einem anderen Web für Projekte herstellen und umgekehrt vorgehen. Warum? Ich denke nicht, dass dies für komplexe Projekte nützlich ist, da Sie hier so ziemlich alles tun können. Aber wie gesagt, für unseren speziellen Anwendungsfall erfordert diese Seite wirklich einige zusätzliche Optimierungsarbeiten. Und Sie werden sehen , dass, wenn Sie auf die Webflow-Seite kommen , weil diese Leuchtkästen, ich mehrere Leuchtkästen kombinieren musste, weil der Workflow keine Standardoptionen hat, die ich wirklich benötige, um dieses Projekt auszuführen. Es ist also wirklich schwierig, einige Dinge zu tun , wenn Sie nur zur Standardroute wechseln. Manchmal muss man es im Grunde vortäuschen und manche Dinge auf eine andere Art und Weise tun, eine andere Sache. Aber damit werde ich diese Design- und Prototyping-Phase im nächsten Video beenden . Grundsätzlich werden Sie in der Lage sein, mit dem Webflow-Teil dieses Kurses zu beginnen. Sie können diese Figma-Datei öffnen, um sie zu erkunden. Sie können all diese Assets exportieren, wie ich es Ihnen gezeigt habe. Sie können mit einigen Prototyping-Einstellungen herumspielen. Denken Sie daran, dass in Figma alles genauso funktioniert wie in Adobe XD. Die einzigen zwei Hauptunterschiede sind, wie Sie bisher gesehen haben, im Grunde drei. So erstellen Sie diese Stile für Text und Farben. Weil sie in XD genau hier auf der linken Seite sind. In Figma sind sie genau hier. Sie können also beim Instanzwechsel darauf klicken da Sie in XD die Komponente ziehen und auf die neue Komponente legen können . Hier haben Sie den Instanzwechsel , der meiner Meinung nach ein bisschen besser ist als hier. Und im Grunde in der gesamten Struktur , die sie hier Autolayout nennen, und in XD werden sie Stacks genannt. Alles andere ist meiner Meinung nach genau dasselbe. Einige Dinge, die meiner Meinung nach noch schlimmer sind, wie das Hinzufügen von Bildern, die Sie nicht einfach per Drag-and-Drop auf die Form ziehen können. Dann musst du, genau hier auf der rechten Seite, diese Form finden und sie dann per Drag & Drop dorthin ziehen. Natürlich gibt es beim Femur einige massive Unterschiede , die besser sind als in XD, wie du horizontale und vertikale Raster hinzufügen kannst, z.B. kannst du mehrere Opazitäten und mehrere Farben und Farben, Stile und Textilien zusätzlich zu den vorhandenen Mengen hinzufügen und mehrere Farben und Farben, . In XD kannst du das nicht tun. Es gibt also so ziemlich viele Tote. Und das sind natürlich einige fortgeschrittene Prototyping-Funktionen wie Nutzungen und Nice Outs und du kannst die Kurven ändern und solche Sachen. Aber ich wollte dich absichtlich nicht zu sehr mit dem Zeug belästigen , weil wir das sowieso später in Webflow machen werden. Also, was ist der Sinn? Genau hier habe ich dir nur einige grundlegende Prototyping-Schrauben in XD und hier in Figma gezeigt . Damit ist dieser Designabschnitt des Kurses so ziemlich abgeschlossen. Es tut mir leid, wenn einige Videos länger waren, aber ich habe nur versucht, so viel wie möglich über diesen Übergang von XD Figma zu erklären . Sie können sehen, dass es so ziemlich dasselbe ist und es wird jetzt, wo Adobe es gekauft hat, so ziemlich dasselbe sein . Wir sehen uns also in der nächsten Lektion wir mit dem Workflow beginnen werden. 163. ABSCHNITT 16 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, die von mir bereitgestellten Dateien zu verwenden und zu versuchen , entweder verschiedene Bilder oder verschiedene Farben oder eine ganz andere Topographie zu verwenden. Und nur um mit den Dateien herumzuspielen, empfehle ich Ihnen wirklich, diesen Kurs in seiner Gesamtheit zu verfolgen , da die Dateien diesem speziellen Grund zur Verfügung gestellt werden. Versuche nicht einfach, die fertige Datei zu verwenden und damit herumzuspielen, um zu versuchen, mir zu folgen, zu folgen und neben mir zu kreieren, während ich unterrichte. Um viel besser zu verstehen, als einfach die fertige Datei zu verwenden und sie einfach auseinanderzureißen und den Tag zu beenden, es ist immer der beste Ansatz, um nebenbei zu lernen. Während ich unterrichte und du dir diese Lektionen ansiehst, ist es immer der beste Ansatz, ihnen zu folgen und zu versuchen, sie selbst zu erstellen. Und während du es das erste Mal kreierst, experimentiere vielleicht ein bisschen, nur um vielleicht einen anderen Grauton zu verwenden und nicht genau den gleichen Grauton , den ich in dieser Lektion verwendet habe. Und das ist meiner Meinung nach der beste Weg zu lernen. 164. ABSCHNITT 17 Webflow: In diesem Abschnitt des Kurses werden wir das, was wir gerade entworfen haben, in den Workflow übernehmen . Workflow ist ein fantastisches Tool ohne Code entwickelt wurde. Das bedeutet, dass der Code im Hintergrund läuft, aber du machst tatsächlich die visuellen Dinge, aber es unterscheidet sich von all diesen anderen Tools, weil du HTML lernen wirst, CSS und JavaScript auf dem Weg dorthin, ohne dass Sie tatsächlich eine einzige Codezeile kennen müssen. Fangen wir also mit dem Webflow an und beenden wir dieses Projekt. 165. Einführung in Webflow: Webflow ist ein fantastisches Tool, mit dem Sie inhaltsreiche Websites erstellen können, die vollständig responsiv und vollständig animiert sind , ohne eine einzige Codezeile zu kennen. Natürlich ist es am besten, wenn Sie wissen, wie man programmiert , da Sie dann diese Web-False-Funktionalität erweitern können . Aber wenn Sie nicht wissen, wie man programmiert, ist das völlig in Ordnung, denn entweder können Sie Ihr Design von Grund auf neu erstellen , wie wir es in diesem Kurs tun, oder Sie können einige der Tausenden von Wept verwenden, verschiedene Vorlagen , die Webflow bereitstellt. Und dann können Sie eine dieser Vorlagen bearbeiten und einfach dort weitermachen, wo sie aufgehört haben, mit dieser Vorlage. Auch hier ist es für Sie von Vorteil, zumindest die Struktur des Codes zu kennen. Aber wenn Sie es nicht wissen, werden wir in diesem Kurs darüber sprechen, wir werden es in Kürze tun. Aber im Moment ist Webflow ein fantastisches Tool, weil es dir nicht erlaubt, dich mit einigen Plugins und Updates wie WordPress zu verzetteln , z. B. es ist nicht sehr eingeschränkt wie behoben, z. B. wo alles ist schon vorbereitet und du bist begrenzt mit diesen Vorlagen, Breiten und Größen und so weiter. Sie können jedoch alle Ihre Inhalte von Grund auf neu erstellen. Sie können Ihre individuellen Designs von Grund auf neu erstellen. Und es war wirklich offiziell, besonders wenn es um die CMS-Funktionalität geht, auf die wir später in diesem Kurs eingehen werden. Und natürlich die E-Commerce-Funktionalität, der Ihre Kunden mithilfe von Webflow Dinge online verkaufen können . Was Workflow von all seinen Mitbewerbern unterscheidet , ist, dass es Hosting anbietet, was für Sie und Ihre Kunden von großem Vorteil ist. Denn sofort, wenn Sie Ihr Design fertiggestellt haben, wenn Sie die endgültige Genehmigung von Ihren Kunden erhalten haben, können Sie sofort mit dem Hosting beginnen. Sie können Ihr gehindertes Hosting Ihres Domainnamens direkt von Webflow aus integrieren . Oder du kannst deinen Domainnamen für etwas wie GoDaddy kaufen und diesen Domainnamen einfach in dein Webflow-Hosting implementieren . Schließlich, wenn Sie keine Websites mit Fire Flow hosten möchten , möchten Sie ihn auf externen Websites wie Whole Stinger oder Host Gator oder so, Blue Host vielleicht, hosten. Dann hat Webflow auch diese Option. Sie können Ihren gesamten Code exportieren und ihn einfach in einem einzigen Ordner gut vorbereiten lassen. Anschließend können Sie diesen Ordner in einen Stammordner auf Ihrer Hosting-Website hochladen . Lassen Sie mich Ihnen also zeigen, was fließt und was es jetzt tun kann. Also hier sind wir auf webflow.com und Sie können diese Website besuchen um sich ein wenig darüber vertraut zu machen, was Webflow kann und wie es aussieht. Natürlich werden wir in diesem Kurs viel durchmachen , aber es ist immer von Vorteil , dass Sie zumindest ein wenig wissen , bevor Sie mit dem Inhalt selbst beginnen. Also, was wir hier haben, ist, wie Webflow aussieht. Dies ist also der Vorschaumodus und Sie haben dieses Symbol genau hier, auf das wir im Kurs oft eingehen werden . Hier oben hast du deine verschiedenen Breakpoints, die ich im Designbereich erwähnt habe. Das ist also der Desktop und in Webflow beginnt alles auf dem Desktop und es geht, beginnt alles auf dem Desktop wie bereits erwähnt, unter. Sie entwerfen also zuerst für den Desktop und dann gehen Sie zu Tablets über, was sich von anderen unterscheidet. Das ist mobile Landschaft und das ist mobiles Portrait. Und hier können Sie die Vorschaugröße Ihres Fensters sehen. Wenn Sie also einen kleineren Laptop haben, ist das wirklich von Vorteil, da Sie hier verschiedene Größen wie z. B. 2000 Pixel Breite des Bildschirms eingeben können . Und es wird die Breite eines 2000-Pixel-Bildschirms nachahmen, auch wenn Ihr Bildschirm 13, 80 oder etwas Ähnliches sein könnte . Dann haben wir hier die Adenin-Funktion , die Ihre Kunden ganz einfach bearbeiten können, sobald Sie die Seite veröffentlicht haben, weil Sie sie einfach einladen oder den Link teilen können oder wenn Sie übersetzen und Stellen Sie Ihre Website von Ihrem Design auf ihr Hosting um, z. B. können sie sie dann direkt bearbeiten. Sie können den Text wechseln, sie können neue Texte erstellen. Sie können verschiedene Bereiche der Website kopieren und einfügen . Sie können über CMS völlig neue Inhalte erstellen, auf die wir noch ein wenig eingehen werden. Und dann können Sie die gespeicherten Änderungen genau hier sehen. Und hier kannst du Änderungen veröffentlichen, damit die Welt sie sehen kann. Es ist also ganz einfach, wenn Sie den Dreh raus haben, aber es wird kompliziert aussehen, aber ich verspreche Ihnen, dass es überhaupt nicht kompliziert ist. Stell es dir einfach wie ein großes Design-Tool vor, vielleicht so etwas wie Photoshop oder so. Und es wird wirklich leicht für dich sein, es zu verstehen. Eine letzte Sache, die ich bezüglich Webflow ansprechen möchte , ist diese. Wenn Sie Ihre Websites an einem anderen Ort, in CMS und E-Commerce, einschließlich Foren, hosten möchten , wird das nicht richtig funktionieren, da all diese Elemente zu Workflow-Funktionen kombiniert werden. Wenn Sie also Ihre CMS-Elemente erstellen möchten , wie wir es in diesem Kurs für all diese Autos und Detailseiten all dieser Autos tun werden, müssen Sie dies über Webflow tun. Andernfalls wird es nicht richtig angeschlossen und es funktioniert nicht richtig. Denken Sie also daran. Gleiche gilt für die E-Commerce-Funktionalität des Webflow. Sie müssen also die Produkte Ihres Kunden in Webflow hosten Produkte Ihres Kunden , damit es funktioniert. Und zum Schluss möchte ich auf Foren eingehen. Foren wie das Kontaktformular, das wir in dieser Klasse erstellen werden, sind über die Workflow-API verbunden. Es sendet die Informationen also direkt über Webflow. Zu Ihrem, sagen wir Gmail oder was auch immer Sie Ihre E-Mail erhalten. Das wird also auch nicht richtig funktionieren. Wenn Sie jedoch Kontaktforen erstellen, können Sie sie etwas später einfach bearbeiten. In etwas wie, ich weiß nicht, kann Sublime Text sein oder was auch immer Ihr Texteditor ist, wenn Sie nur ein bisschen Code kennen, damit Sie einfach auf diese E-Mail verweisen können . Es wird also nicht über Workflow-Server gesendet , sondern direkt über Ihren Server Sie können das und genau das einfach direkt in Gmail positionieren , z. B. wenn Sie Hosten Sie Ihre E-Mail auf Gmail. Aber ich wollte nur darauf hinweisen und es ist wirklich wichtig, wenn Sie mit Ihren Kunden zusammenarbeiten, ihnen zu sagen , dass CMS, E-Commerce und Foren werden dort nicht direkt funktionieren. Also eine Sache, die Sie bei statischen Websites beachten sollten: Ich, die Seiten, die sich nicht bewegen werden, sie werden völlig statisch bleiben, so wie Landingpages alle anderen Seiten auf dieser Website sind , außer den Seiten für verschiedene Autos. Das wird sich ändern. Sie also daran und teilen Sie Ihren Kunden einfach im Voraus mit, worauf sie sich einlassen. Also hier sind wir wieder auf der Workflow-Website. Und wie ich bereits erwähnt habe, lassen Sie mich einfach durchblättern und Ihnen einige Beispiele zeigen , was Sie erstellen können. Hier seht ihr den Farbwähler, also ähnlich, sagen wir Photoshop oder irgendein anderes Tool. Wir werden diese Farbfelder erstellen wie wir es in Adobe XD gemacht haben. Hier können Sie sehen, wie seine Nation veröffentlicht wurde. Sie können also entweder über eine Staging-Domain veröffentlichen, was Sie für bis zu zwei Websites im kostenlosen Tarif auf Webflow tun dürfen . Und hier können Sie Ihre benutzerdefinierte Domain oder Ihr benutzerdefiniertes Hosting oder was auch immer Sie wollen direkt über Webflow verbinden, sodass Sie Ihre benutzerdefinierte Domain wie in diesem Fall lattice.com verbinden können Ihre benutzerdefinierte Domain wie in diesem Fall lattice.com und du kannst es direkt auf Webflow hosten, wie ich bereits erwähnt habe, und es wird alles für dich verbinden. Sie können veröffentlichen, um die Domains wie diese auszuwählen, oder Sie können zu den erweiterten Optionen gehen und Code und ähnliches exportieren. Also hier, wo Veröffentlichen steht, kannst du dort klicken und es wird dir die Exportcode-Option angezeigt, die ich etwas später zeigen werde. Wenn ich also anfange, nach unten zu scrollen können Sie sehen, dass all diese Websites erstellt wurden oder zumindest einige Seiten haben , die auf Webflow erstellt wurden. Upwork wird fast vollständig auf Webflow erstellt, und ich weiß, dass Gamma Road auch auf Webflow erstellt wird. So können Sie sehen, wie viele Designer Webflow derzeit verwenden. Und so sieht es aus, wenn Sie anfangen, innerhalb des Workflows zu arbeiten. Sie können also einfach auf Anpassen klicken und es wird in Echtzeit angepasst. Wie bei jedem anderen Design-Tool. Und es erinnert mich sehr an Photoshop, vor allem wegen des Farbschemas und der Positionierung all dieser verschiedenen Elemente. Sie können Elemente per Drag & Drop auf die Seite ziehen und so ganz spezifisch werden. Und Sie können sogar benutzerdefinierten Code eingeben. Wie gesagt, wenn Sie wissen, wie man codiert, wenn nicht, ist es völlig in Ordnung. Du weißt nicht einmal, wie man codiert. zeige ich dir später. Eine gewisse kreative Kraft, die weit über Vorlagen hinausgeht. Sie können also sehen, dass dies das CMS ist , auf das wir ein wenig eingehen werden , damit Sie Inhalte aus Ihrer Bibliothek abrufen können was wir etwas später erstellen werden. Also werden wir diese dynamische Seite erstellen , die nur eine Seite, eine Vorlage hat, die das Layout und den Inhalt all unserer verschiedenen dynamischen Seiten enthält. Denken Sie also daran, dass wir acht verschiedene Autos haben werden, also acht verschiedene dynamische Seiten. Aber anstatt noch einmal acht verschiedene Seiten zu erstellen oder einfach Elemente zu kopieren und einzufügen. Wir werden das alles innerhalb des CMS erledigen. Aus diesem Grund ist ein Content-Management-System oder CMS wie dieses für Ihre Kunden von Vorteil. Wie bereits erwähnt, können Sie benutzerdefinierte E-Commerce-Shops einrichten, sodass Sie die Preise positionieren und verschiedene Farboptionen, Schaltflächen und ähnliches hinzufügen können . Durch eine Mitgliedschaft können wir Inhalte nur für Mitglieder monetarisieren. Und du kannst es knallen lassen. Sie können also hier alle möglichen Animationen sehen . Und mit Animationen kann man wirklich, wirklich spezifisch werden. Und wir werden etwas später auf Animation eingehen . Aber wir können im Grunde einen ganzen Kurs über Animationen erstellen einen ganzen Kurs über Animationen weil sie so fortgeschritten sind und sie auch so fortgeschritten sein können. Aber gleichzeitig können sie sehr einfach zu erstellen sein. Es liegt ganz bei Ihnen, was Sie mit Ihren Website-Animationen erstellen möchten . Wenn Sie also etwas nach unten scrollen, ist es für das Marketing optimiert und durch Design unterstützt. Sie können also so etwas sehen. Warum sie erwähnt haben, dass Ihre Kunden vielleicht einen neuen Text hinzufügen möchten, vielleicht eine neue Kopie hineinlegen möchten und Sie können es gleich hier sehen, also haben wir diese Schaltfläche zum Veröffentlichen. Sobald Sie Ihre Kopie bearbeitet haben, können Sie auf Veröffentlichen klicken und die Änderung wird live veröffentlicht. So können Sie SEO optimieren. Sie können also Titel-Tags hinzufügen, Sie können Meta-Beschreibungen hinzufügen. Sie können Flows mit Logik erstellen, was sehr nützlich ist, insbesondere wenn Sie etwas wie Air Table verwenden , um Informationen aus der Lufttabelle direkt über Ihr Internet abzurufen Informationen aus der Lufttabelle . vollständige Website. Und Sie können diese benutzerdefinierten Logikbeispiele wie Zapier verbinden . Also, wenn der Benutzer das tut, dann machst du das und hast ihm das gezeigt. So können Sie alle möglichen Dinge verbinden. Beispiel, wenn der Benutzer mir eine E-Mail sendet, geben Sie diese E-Mail-Adresse von diesem Benutzer in eine Datenbank namens Marketing for Mondays oder etwas Ähnliches ein. So können Sie mit der Webflow-Logik sehr spezifisch und wirklich kreativ Webflow-Logik sehr spezifisch und all Ihre Lieblingstools verbinden. Wenn Sie also Google Analytics verwenden, können Sie, wenn Sie Facebook-Pixel verwenden, können Sie, wenn Sie über, sagen wir, Kurse über Teachable verkaufen , das auch tun. Sie können also eine Menge Dinge direkt hier in Webflow tun. Sie können also wachsen , weil es auf Unternehmenswachstum ausgelegt ist, insbesondere wenn Sie größere Blogs erstellen. Vielleicht ist dies nicht die richtige Option für Blogs, die vielleicht neue Größen haben, weil es manchmal umständlich werden kann, weil diese großen Websites dazu neigen , von Zeit zu Zeit die Seiten zu wechseln von Zeit zu Zeit mit verschiedenen Elementen interagieren. Vielleicht ist so etwas wie eine kundenspezifische Lösung großartig. Aber bis das Unternehmen in jedem so etwas wie eine Nachrichtenagentur mit Tausenden von verschiedenen Blogbeiträgen ist so etwas wie eine Nachrichtenagentur , täglich gepostet werden, dann ist Webflow eine großartige Option dafür. Sie können einige Websites sehen , die in Webflow erstellt wurden. Und im Grunde sind keine Grenzen gesetzt , wenn es um Kreativität geht. Du kannst dir Made in Webflow ansehen und alles darüber erfahren und sehen, was die Leute erstellt haben. Sie haben eine großartige Ressource namens Webflow University, und du kannst ihre Tutorials entweder auf webflow.com oder auf YouTube ansehen . Sie haben einen großartigen YouTube-Kanal, den Sie kostenlos ansehen können, bis Sie bereit sind, zu starten. Sie können Ihre Website kostenlos erstellen und sich so lange Zeit nehmen, wie Sie möchten. Füge einfach einen Seitenplan für mehr Seiten und eine gewohnte Domain hinzu, wenn du bereit für die Welt bist. Du kannst also sehen, warum sie das kostenlos anbieten, weil du bauen kannst, du kannst es lernen, du kannst alles vorbereiten. Und wenn Sie bereit für den Start sind, dann zahlen Sie. Apropos, lassen Sie uns kurz über die Preisgestaltung und schauen wir uns an , wie das aussieht. Wenn ich also gleich hier zur Preisgestaltung gehe, können Sie sehen, dass wir Lagepläne haben. Wir haben Starter-, Basis-CMS, Business- und Enterprise-CMS. Das kann jetzt etwas kompliziert sein. Seitenpläne eignen sich also hervorragend, um Webflow auszuprobieren. Und wenn Sie eine kostenpflichtige Website erwerben, um zusätzliche Funktionen zu veröffentlichen, zu hosten und freizuschalten. Dies ermöglicht es Ihnen also im Grunde , Ihre fertige Website zu veröffentlichen, und dafür sind die Seitenpläne da. So können Sie sehen, was in der Grundversion enthalten ist. Sie können die benutzerdefinierte Domain ohne CMS-Elemente einschließen. Es ist also nicht für CMS, 500 monatliche Forenabonnements. So können Sie so viele Leute über Ihre E-Mail und 50 GB Bandbreite erreichen. Und für das CMS können Sie CMS-Elemente der 2000er Jahre haben , was ich erwähnt habe. Denken Sie nur daran, dass wir in diesem Fall z. B. acht haben. Aber in unserem Fall, sagen wir, wenn ein Kunde das Auto verkauft, wird er dieses Angebot natürlich löschen. Also hier haben wir CMS-Artikel der 2000er Jahre. Wir haben nur acht, aber wir haben einen verkauft, also werden wir ihn löschen, jetzt haben wir sieben, wir wollen zwei weitere hinzufügen. Jetzt haben wir also neun. Wir werden einen verkaufen und einen löschen. Jetzt haben wir also acht. Sie können sich also die 2000er Jahre ansehen, es ist wirklich schwierig zu skalieren, insbesondere für Unternehmen dieser Größe. Also 23$ monatlich oder wenn ich gleich hier auf jährlich umsteige. Das wird also jährlich gebaut, also 23 mal 12, und das ist es, was du bekommen wirst. Wir haben also General und dann haben wir E-Commerce , der Ihnen erneut unterschiedliche Funktionen bieten wird . Hier haben wir also tausend verschiedene Artikel und ein jährliches Verkaufsvolumen von 2.000, 200.000. Und hier haben Sie unbegrenztes Verkaufsvolumen. Es ist also offensichtlich, dass Sie als Ihre geschäftlichen Fähigkeiten diese verschiedenen Standortpläne erweitern und hinzufügen werden. Und wenn Sie diese Websites an Ihre Kunden verkaufen, ist es natürlich wichtig, sie durch all das zu führen, damit sie verstehen, dass es für sie am besten ist, kleiner anzufangen. Wenn Ihr Kunde also keine CMS-Seiten hat und keine dynamischen Inhalte möchte, dann funktioniert diese Anlage ganz gut. Sobald sie jedoch einige CMS-Inhalte hinzugefügt haben, müssen Sie diesen Plan erwerben. Sie müssen es erneut kaufen , da sie ihre Website im Workflow hosten , wenn sie ein CMS wünschen. Wenn sie kein CMS wollen, sondern nur reguläres Hosting, dann ist dies wahrscheinlich eine gute Option. Aber wenn sie kein CMS benötigen, ist vielleicht sogar dies keine gute Option da es ziemlich teuer wird, wenn Sie es hinzufügen. Denn wenn sie etwas ändern wollen was sie brauchen, müssen sie einen Designer-Plan erstellen , zu dem Sie in nur einer Sekunde gelangen , damit sie Änderungen vornehmen, neue Bilder hochladen, sie ersetzen und solche Sachen. Vielleicht ist sogar das keine gute Option, aber es liegt wirklich an Ihnen und Ihrem Kunden, sich darauf zu einigen. Beispiel wollte einer meiner Kunden seine Website nicht auf Webflow hosten, aber für jede einzelne Änderung er mich kontaktiert und ich habe ihm jede einzelne Änderung auf der Website in Rechnung gestellt. Aber so stimmen Sie Ihren Kunden einfach zu , denn für diesen bestimmten Kunden haben wir, glaube ich im Laufe eines Jahres Änderungen vorgenommen. Es ist also nicht wirklich schwierig, aber wenn Ihr Kunde ständige Änderungen an seiner Website benötigt, Kauf von Webflow-Hosting vielleicht ist der Kauf von Webflow-Hosting vielleicht eine gute Option für ihn. Wir haben Arbeitsplätze für Freelancer und Agenturen. werden wir nicht zu viel ansprechen. Aber wenn Sie Teil einer Agentur sind oder eine Agentur gründen, muss dies natürlich Teil einer Agentur sind oder eine Agentur gründen, erklärt werden. Und hier haben wir noch mehr. Also. Wir haben Produktdesigner, was uns am Diskurs interessiert. Und wir haben die Struktur, navigieren durch ihre Symbole, alles Mögliche. Also werden wir in nur einer Sekunde darüber sprechen. Ich möchte nur sehen, ob ich hier die Preise finden kann. Ich glaube nicht, dass ich das kann. Wenn ich zum Dashboard gehe und zum Konto gehe und zu Pflanzen gehe. Also ich war leicht, aber es wird an diesem Tag abgesagt, weil ich auf Pro aktualisieren möchte, aber ich wollte es vorher nicht aktualisieren. Wenn Sie Ihren Plan kündigen, können Sie also monatlich oder jährlich zahlen. Sie können also sehen, dass dies mein aktueller Plan ist. Sie können kostenlos loslegen. Wie ich hier erwähnt habe, haben Sie zwei Projekte. Wir haben kostenloses Staging, aber Sie haben keine Code-Exporte. Sie müssen also dafür bezahlen, dass Sie Code exportieren können , ohne White Labeling. Das bedeutet, dass Sie dem Editor Ihr eigenes Logo hinzufügen und das Webflow-Branding entfernen können Editor Ihr eigenes Logo hinzufügen und das Webflow-Branding entfernen Es gibt keinen Passwortschutz für die Website und kein Team-Dashboard. Sie haben das hier also auch nicht, aber Sie haben in diesem Plan, warum ich diesen Plan gewählt habe, dass meine Kunden Code exportieren können und dass ich zehn Projekte habe, was meiner Meinung nach völlig ausreichend ist mir. Auch hier können Sie dies manuell oder jährlich oder monatlich bauen, wie Sie möchten, aber Sie müssen diese Anlage, wie ich bereits erwähnt habe, kaufen , wenn Sie mehr als zwei Projekte wünschen mehr als zwei Projekte und wenn Sie Code exportieren möchten, wenn Sie nichts davon tun möchten. Wenn du einfach nur lernen willst, ist dieser, Start to Flat Plan völlig in Ordnung. Du kannst Webflow lernen. Sie können so viele dieser Projekte erstellen, wie Sie möchten. Sie müssen nur einige davon löschen wenn Sie das Limit von zwei Projekten erreicht haben. Und wenn Sie dann einige Kunden haben sollten, können Sie den Abfrageplan kaufen und einfach dort weitermachen wo Sie zehn Projekte haben oder wenn das klein wird, hoffentlich bald für Sie dann kannst du zur Sonde gehen. Also nochmal, um schnell zu decken, muss man Account-Pflanzen kaufen, wenn man mehr als zwei Projekte haben und Code exportieren möchte mehr als zwei Projekte haben . Wenn Sie auf Webflow hosten möchten, nicht Sie, sondern Ihre Kunden, müssen diese Hosting-Pakete erwerben. Und wenn sie selbst Änderungen an ihren Websites vornehmen möchten , müssen sie auch diese Kontopläne erwerben , damit sie Änderungen vornehmen können und in der Lage, Bilder selbst hinzuzufügen, zB mit dem CMS herumzuspielen und solche Sachen. Sie müssen das also Ihren Kunden erklären . Dies ist nur eine normale Ausgabe für das Unternehmen. Also jeder, der Geschäfte macht, ich, ich selbst, z. B. ich zahle dafür, dass Teachable alle meine Kurse hosten kann. Ich bezahle dafür, dass Gmail geschäftliche E-Mails haben kann. Ich zahle für den Workflow, wie Sie in diesem Beispiel hier sehen können, ich zahle z. B. für den Geschäftsplan also ist alles Teil des Geschäfts und sie müssen nur wissen , dass dies ihre Kosten sind. Behalte das im Hinterkopf. Sie müssen eine Domain kaufen. Sie müssen auf jeden Fall Hosting kaufen, sei es über Webflow oder über Hosting Girl, Bluehost, Host, Gator, was auch immer sie kaufen müssen , dass sie auch eine Domain sind. Sie müssen Ihre Domain über GoDaddy oder Google-Domains oder über Webflow erwerben . So oder so müssen sie diese Dinge kaufen. Webflow bietet Ihnen nur diese zusätzliche Option, mit der Sie alles an einem Ort entwerfen, erstellen, inszenieren, starten und hosten können. Also, wenn Ihre Kunden das tun wollen, ist es völlig in Ordnung. Wenn nicht, liegt es in Ihrer Verantwortung, es ihnen zu erklären. Dann werden all diese Funktionen nicht funktionieren. Wenn Sie nicht auf Webflow hosten. So einfach ist das. Also los geht's. Wir haben Webflow erklärt. Hoffentlich macht das jetzt mehr Sinn. Wenn es nicht sicherstellt, dass Sie es noch einmal erkunden, schauen Sie sich dieses Video noch einmal an. Wir werden es einfach selbst sehen und dort Ihr Konto erstellen. Auch hier ist es für Sie völlig kostenlos, bis zu zwei Projekte ohne Codeexperten zu starten . Aber ich werde dir in diesem Kurs zeigen, wie das aussieht. Als Nächstes bereiten wir unsere Dateien vor und beginnen mit Erstellung unseres Webflow-Projekts. Also werde ich dich dort sehen. 166. Das Projekt anlegen: In Ordnung, lassen Sie uns jetzt unsere Dateien von Adobe XD vorbereiten und sicherstellen, dass sie über Webflow übersetzt werden. Und ich werde dir zeigen, wie du ein neues Projekt startest. Also lass uns anfangen. Also hier sind wir in Adobe XD und das ist unser Projekt, und hier haben wir es aufgehört. Also wieder einmal, hier haben wir den Benutzerfluss, wir haben Papier-Wireframes, die wir gemacht haben. Wir haben Sitemap und Inhaltsarchitektur. Wir haben unser Moodboard und hier haben wir unser Design. Aber das hast du vorher in den Videos nicht gesehen. Das ist also der Styleguide und wie du so etwas erstellen kannst. Es ist einfach super einfach. Und zuallererst, warum du so etwas überhaupt erstellen würdest . Styleguide ist viel einfacher, wenn Sie Stile und Elemente bei Bedarf einfach kopieren und einfügen und alle Ihre Elemente behalten und auf einen Blick haben . Hier seht ihr, dass ich Farben, Typografie, Ikonographie, Logo, Knöpfe und Autokarten entworfen habe . Warum ist das wichtig? Nun, es ist für mich viel übersichtlicher , dies jetzt in Webflow zu erstellen. Und das werde ich in nur einer Sekunde zeigen. Aber bevor ich mache, wie man etwas Freude daraus macht, kreierst du einfach, sagen wir für Typografie, du erschaffst all diese Elemente. Und wenn Sie etwas ändern möchten, klicken Sie einfach hier und die Änderung wird übernommen , wie ich es Ihnen in diesem Fall gezeigt habe. Also für die Farben habe ich genau dasselbe gemacht, weil ich diese Hex-Codes entweder von hier oder von hier kopieren möchte . Aber es ist viel einfacher, sie nur auf einen Blick zu haben, sowohl für Sie als auch für Ihre Kunden. Für Entwickler, wenn Sie dies zur weiteren Entwicklung an senden . Aber in diesem Fall nur, um uns daran zu erinnern, was in diesem Projekt enthalten ist und was in diesem Projekt enthalten ist. Lassen Sie mich zunächst zu Overflow wechseln. Und hier haben wir meine Seiten. Dies ist die Staging-Seite, die ich erstellt habe , um Sie zu diesem Kurs führen zu können. Und in diesem Fall werde ich eine neue Site erstellen, werde ich eine neue Site erstellen die sich genau hier befindet, die sich in meinem Webflow-Dashboard befindet. Also wenn ich gleich hier klicke und du siehst, kannst du mit den Vorlagen beginnen. Und Sie haben diese Vorlagen , Premium-Vorlagen, die von einer Designer-Community erstellt wurden. Und du kannst Fleisch in Webflow verwenden und hier, wo die Ressourcen stehen, hast du Vorlagen. Wenn ich also mit der rechten Maustaste klicke und das in einem neuen Tab öffne, kannst du alle möglichen Vorlagen sehen, aber sie sind meistens Premium. Aber du kannst hier oben kostenlos durchfiltern. Und Sie können hier alle möglichen kostenlosen Vorlagen sehen . Aber die meisten guten und großartigen Vorlagen sind Premium-Vorlagen. Sie können also nach der beliebten Kategorie CMS, E-Commerce suchen. Sie können all das herausfinden oder Sie können in Webflow auf Treffen klicken , um sich inspirieren zu lassen. Und es wird einige tolle Websites zeigen , die in Webflow erstellt wurden. Aber zurück in unserem Dashboard werde ich einfach mit einer leeren Vorlage beginnen. Sie können sehen, natürlich ist es kostenlos. Wenn ich also genau dort klicke, muss ich ihm einen Namen geben. In diesem Fall gebe ich ihr den Namen einer exklusive Spider-Autos, nur um sie von der ursprünglichen Website zu unterscheiden , die ich erstellt habe. Klicken Sie auf Website erstellen. Und es wird anfangen zu kreieren. In diesem Fall. Hier werden wir von unseren Designern begrüßt. Bevor wir weitermachen, wollte ich nur ein bisschen mehr über diesen Designer sprechen . Was es macht, ob einige Funktionen, über die Sie Bescheid wissen und über die Sie lernen sollten. Und welche Art von Code ist erforderlich, damit Sie zumindest verstehen, wie er funktioniert. Also hier sind wir wieder in unserem Designer und so sieht alles in Webflow aus. Begann von hier aus. Wenn Sie den Mauszeiger über dieses Workflow-Logo bewegen, können Sie darauf klicken und es werden Ihnen ein Dashboard, Projekteinstellungen und ein Editor angezeigt . Wenn ich also hier draußen klicke, haben wir alle möglichen Elemente , die wir zu unserer Seite hinzufügen können. Aber wo Sie sie hinzufügen können, können Sie hier klicken , um all diese Elemente zu öffnen. Wir haben also Elemente und Layouts, bei denen es sich im Grunde um vorgefertigte Vorlagen handelt, die Sie verwenden können. In diesem Kurs beginnen wir alles von vorne, aber Sie können einige dieser Elemente verwenden, wenn Sie möchten. Sie sind so etwas wie UI-Kits. Sie können sie einfach per Drag & Drop hineinziehen. Also hier haben wir Layout, Grundelemente, Typografie, CMS, Medien, Foren, Komponenten, alle möglichen Dinge direkt da. Damit Sie also etwas hinzufügen können, haben Sie drei Möglichkeiten. Wenn ich also einen Abschnitt hinzufügen möchte, kann ich hier klicken und ziehen und loslassen oder ihn von hier entfernen lassen. Was ich tun kann, sagen wir mal, drücken Sie noch einmal Abschnitt. Ziehe es direkt hier in den Navigator , der wie ein Ebenenfenster aussieht. Und es befindet sich genau hier. Du kannst es in einer letzten Sache sehen. Und das werden wir die ganze Zeit machen. Wenn ich den Text auswähle und Strg K oder Befehl K drücke, dann kann ich so etwas wie Abschnitt eingeben, Enter oder Return drücken, und das wird direkt hier veröffentlicht. Wir werden das während des gesamten Kurses verwenden, also stell sicher, dass du dich noch einmal daran gewöhnst Control K. Also in diesem also stell sicher, dass du dich noch einmal daran gewöhnst Control K. Abschnitt werde ich einen Div-Block platzieren, z. B. in den Div-Blog, z. B. Control Ich gebe erneut H für die Überschrift ein und klicke mit der Maus. Und nehmen wir an, das ist das H2 , dann unter der Überschrift Control K, IMG für das Bild. Und unter dieser Bildkontrolle K, sagen wir Absatz. Und Sie können sehen, wie einfach das ist, weil es HTML ist. Denken Sie daran, dass in HTML alles von oben links nach unten geht. So stapelt HTML Dinge. Es ist nicht eins neben dem anderen. Oder wenn ich es hier im Navigator öffne, kannst du sehen, dass wir in diesem Abschnitt unseren Div-Block haben , der all unsere Elemente enthalten wird. Dann haben wir innerhalb des Div-Blocks eine separate Überschrift. Wir haben ein Bild und wir haben Absätze, und sie sind nicht eins unter einander, wie sie es in Photoshop oder XD oder Figma oder einem anderen Design-Tool der Fall sind, sondern sie sind untereinander. Also müssen wir etwas erstellen , das als Y-Achse bezeichnet wird. Und wir werden gleich darauf eingehen , ein bisschen später. Aber bevor wir das tun, möchte ich Ihnen weitere Dinge zeigen. Also, was wir hier haben, dieses Feld sind Symbole, und Symbole sind im Grunde Komponenten, auf die wir ein wenig eingehen werden. Wenn ich dich also wieder auf XD umstelle, haben wir hier eine Komponente für die Navigation und dann haben wir eine Komponente für unser Kontakt-Formular und für die Karte und den Standort und für die Fußzeile, z. und hier in Webflow wird es genauso sein, wo wir diese Komponenten erstellen werden sobald wir mit unserem Layout beginnen. Darunter haben wir diesen Navigator , den ich Ihnen bereits gezeigt habe. Es ist so etwas wie dein Ebenenpanel. Und hier kannst du alle Leben zusammenklappen oder sie hier öffnen, du kannst den Navigator abkoppeln und er wird sich bewegen, aber ich empfehle nicht , einfach auf den Navigator zu klicken und schon geht es bleib die ganze Zeit da. Sie können den Mauszeiger bewegen und dann die Breite des Navigators anpassen , etwa so. Wenn Sie mehr vom Navigator selbst sehen möchten, haben wir unten die Seiten. Hier fügen Sie also Ihre zusätzlichen Seiten, neue Seiten, Utility-Seiten Wir haben ein Passwort und vier oder vier Weiterleitungen. Sie können es zu diesen hinzufügen. Sie können direkt dort klicken und es hinzufügen, wie es aussieht. Oder wenn du eine neue Seite erstellen möchtest, dann kannst du direkt hier klicken. Und wenn Sie einen neuen Ordner erstellen möchten, ist das natürlich aus vielen verschiedenen Gründen nützlich. Aber vorerst werden wir nur neue Seiten für diese Website erstellen. Darunter befindet sich das CMS , ein Content-Management-System. Wir werden etwas später darauf eingehen, also müssen wir eine neue Kollektion erstellen. Die Sammlung wird Autos zum Verkauf sein oder einfach Autos, was auch immer. Und dann erstellen wir innerhalb dieser Sammlung eine Seite oder ein Objekt und erstellen diese Seite dann einfach noch einmal von vorne. Sobald wir anfangen, neue Daten und Informationen zu erstellen und sie einzufügen. Darunter haben wir E-Commerce. Und Sie können hier sehen, was darin steht, aber wir werden uns im Diskurs nicht mit E-Commerce befassen. Darunter verfügen wir über Vermögenswerte. Hier. Sie werden in der Lage sein, all Ihre Assets per Drag & Drop zu ziehen. Und lassen Sie uns das jetzt tun. Wenn Sie sich also erinnern, exportieren wir diese hier. Wir haben alle unsere Projektbilder hier, wir haben alle unsere Projekt-Icons. Also wähle ich einfach alle aus, klicke, ziehe sie hinein und lege sie ab. Und Sie können sehen, dass es mit all diesen verschiedenen Symbolen gefüllt wird . Und ich werde dasselbe mit meinen Bildern machen. Wählen Sie einfach alle meine Bilder aus, ziehen Sie sie per Drag & Drop hinein. Da hast du es. Und es wird all deine Bilder hochladen und sie positionieren. Sie sprechen über Bilder. Was Sie für Icons tun können, ist auf diese Uhr zu klicken. Wenn Sie also den Mauszeiger bewegen, wird dieses Zahnrad in der oberen rechten Ecke angezeigt. Wenn ich also genau dort klicke, wird dir angezeigt, ist das Bild beschreibend oder dekorativ? Weil es beschreibend ist , weil es versucht, etwas zu erklären. Ich sage so etwas wie ein Mann, der so im Autohaus steht und ihn einfach zumacht. Warum habe ich das getan? Wenn ich noch einmal klicke, um es zu öffnen, liegt das an Menschen mit Sehbehinderungen Screenreader verwenden, damit sie auf der Website navigieren können. Deshalb verwendest du es. Und wenn ich hier klicke, füge weitere hinzu, damit die Leute den Deal für Autoverkäufe, Autoverkäufe oder ähnliches abschließen . Da hast du es. Dann geben wir hier so etwas wie Leute einen Spinnenauto-Showroom erkunden. So wie. Und hier werden wir Kredite für exklusive Spider-Autos haben, so etwas. Dann können wir hier so etwas wie eine Mercedes-Benz-Si-Klausel erstellen . Da hast du es. Dies wird ein Bild oder eine Farbgebung mit einem Spinnenauto sein. Auto. Bild vielleicht, oder weil es dekorativ ist, ich kann es loswerden und es wird einfach auf dekorativ umgestellt. Sie vermitteln also keine Bedeutung und benötigen keine Alt-Texte, also sind sie nur zu Dekorationszwecken da. Aber weil das so ist, werde ich so etwas wie Audi RS five eingeben und zu meinem Range Over wechseln , der dieser sein wird, Range Rover, Vogue. Da haben wir's. Jetzt wird der Alt-Text diese zeigen und das wird sich gut darin niederschlagen dies meinem Publikum zu zeigen. Lassen Sie mich nur diese Vorteile sehen. Das Bild sieht etwas anders aus, weil es die Opazität hat. Also lass mich es loswerden. Eigentlich. Lassen Sie mich zu Adobe XD wechseln. Lass es mich finden, hier ist es. Und wenn ich dir zeige, sind es zehn Prozent, aber das möchte ich in Webflow machen. Also erweitere ich es hier, drücke Strg oder Command E. Und wir haben JPEG-Bilder, das ist in Ordnung. Exportieren. Und dann bring es hier auf 10%. Wenn ich jetzt auf Workflow umstelle und Sie zurück zu meinen Autos bringe, können Sie jetzt sehen, dass es in Ordnung ist. Also werde ich es genau hier finden. Klicken Sie darauf und klicken Sie auf Löschen. Bestätigen, Löschen. Da haben wir's. Und jetzt kann ich zu meinem Ordner zurückkehren, auf Drag & Drop klicken. Und jetzt wird es bei 100 Prozent positioniert. Denn wie gesagt, ich möchte diese Einstellungen anpassen können . Was du für all deine Bilder tun solltest. Aber ich werde Sie nicht zu sehr mit Diskursen belästigen, aber es ist einfach die beste Methode, dies zu tun. In diesem Fall sollte jedes Ihrer Bilder oder Symbole Alt-Text haben. Der Alt-Text wird aus dem Namen übernommen. Deshalb benennen wir sie in XD. So praktisches Autosymbol, das wird es sein. Beschreibung des Dekors. Sie können also eine Beschreibung des Bildes schreiben. Alt-Text wird von Bildschirmleseprogrammen verwendet und/oder wenn ein Bild nicht geladen wird. Es wird also den Alt-Text verwenden, und das sind die alten Texte , die wir erstellen werden. Sie können also einfach so etwas verwenden. So praktisches Autosymbol. Sie können das also entweder erstellen. Also Kuan, milde Autoikone. Und es wird die alten Texte daraus verwenden. Es ist also deine Aufgabe, all deine Bilder, all deine Icons, all deine Logos durchzugehen Icons, all deine und dort enthalten zu sein. Und wo wir über Logos sprechen, ich glaube nicht, dass wir hier Logos exportiert haben. Ich glaube, das haben wir nicht getan. Gehen wir also schnell zurück zu XD. Zoomen Sie ein bisschen hinein. Ich habe dort mein Logo, aber ich werde es direkt von hier aus machen. Also statt JPEG, nehmen wir SVG und fügen es in unsere Bilder ein. Und wenn wir zu meinem Webflow wechseln, los geht's. Gehe zurück zu meinen Bildern und wo ist mein Logo? Dort? Es ist dazu gedacht, es per Drag & Drop hineinzuziehen. Und los geht's Jetzt haben wir unser Logo. Also noch einmal, wenn Sie eines dieser Bilder ziehen möchten , sagen wir dieses , klicken Sie einfach darauf, ziehen Sie es hinein und legen Sie es ab. Und du kannst sehen, dass es platziert wird, genau dort platziert werden wird. Das waren also unsere Bilder. Und schließlich haben wir hier einige Einstellungen. So können Sie allgemeine Backups sehen. Der E-Commerce-Workflow erstellt automatisch Backups für Sie. Und es wird all deine Elemente dort sichern. Aber im Grunde war's das von da an. Also hier haben wir Audits, hier haben wir benutzerdefinierte Suche, also finde alles. Hier haben wir Video-Tutorials, die du dort findest. Und hier haben wir den Hilfebereich. Also wenn ich alles schließe und einfach meinen Navigator offen lasse. Was ich hier habe, ist die Vorschau, also die Vorschau umgeschaltet. Und so wird Ihre Website live aussehen. Und Sie können sich durch alle möglichen Breakpoints klicken alle möglichen Breakpoints , um zu sehen, wie Ihre Website an diesen Breakpoints aussehen wird . Außerdem können Sie sagen, ich bin auf einem Tablet, Sie haben diesen Griff. Wenn du also klickst und ziehst, wechselt es zwischen deinen Größen. Du kannst einfach hier oben zusehen, wie ich ziehe, was vor sich geht. Es wird also zwischen diesen Größen wechseln. Oder wie ich bereits erwähnt habe, können Sie hier klicken und etwa 2000 Pixel eingeben , um zu sehen, wie die Website auf 2000 oder sagen wir 4.000 Pixeln aussehen wird . Und du kannst es genau dort sehen. Also wird es das einfach nachahmen und es wird dir das nur zeigen. Wenn ich also wieder hier zurückkehre, wir uns als Nächstes lassen wir uns als Nächstes durch dieses Panel führen und wir werden das Video dort einfach beenden weil ich nicht möchte, dass es zu verwirrend wird für dich und zu lange. In diesem Video, in diesem Abschnitt geht es also um die Stile. Wenn ich den Mauszeiger hier rechts bewege, siehst du, dass es das Style-Panel ist. Dies ist das Einstellungsfenster. Das sind die Style Manager. Wenn Sie also Ihre Klassen hinzufügen, werden wir uns in nur einer Sekunde darum kümmern. All diese Klassen werden hier aufgelistet. Und schließlich ist dies Ihr Animationsbereich. Wir werden im Laufe des Kurses auf all diese Abschnitte eingehen, aber hauptsächlich auf diesen Stilbereich. Also im Grunde, wie Sie sich Webflow ansehen können, ist auf dieser Seite , alles HTML, also alles über die Struktur, wie alles auf der Seite festgelegt wird. Und hier rechts ist alles CSS. Also, wie alles aussehen wird und wie es stilisiert werden wird . Also. Was ich in diesem Fall tun kann, z. B. lass uns all diese Elemente loswerden. Also klicken Sie einfach bei allen auf Löschen. Und lass uns einfach an unserer Überschrift arbeiten. Wir werden etwas später Unterricht geben. Im nächsten Video werden wir darauf eingehen. Aber hier können Sie ändern, wie es angezeigt wird. Nehmen wir an, ich möchte den Rand auf 100 Pixel setzen. Ich kann hier klicken, 100 Pixel anheften und es wird genau hier positioniert. Dann unten, gleiche Größe. an, ich möchte für die Größe Nehmen wir an, ich möchte für die Größe einen weiteren Div-Block darunter erstellen. Also drücke Control K div, nur damit du sehen kannst, was ich mache. Und vielleicht kann ich das so positionieren, dass es sich um ein Pairing handelt. Ich weiß nicht, 60 Pixel vielleicht. Und dann verwende die Farbe hier für so etwas. Da hast du es. Und für die Größe geben wir ihm eine Breite. Geben wir ihm eine Höhe von 200 Pixeln, nur damit Sie sehen können, was ich mache. Und lassen Sie uns es sogar noch weiter verschieben, bis ich für die Höhe, für die Breite, sagen wir 500, weiß . Also hier haben wir eine Box , die der Div-Block ist, 500 Breite 200 Pixel. Und wenn ich anfange, das zu erweitern indem ich die Umschalttaste und die linke Pfeiltaste gedrückt halte, kannst du sehen, wie stark es expandiert. Wenn ich den Rand , also den Raum außerhalb Ihres Objekts, nach links hinzufüge , also den Raum außerhalb Ihres Objekts, , können Sie sehen, wie er aussieht. Oder nach rechts wird es genau gleich sein und der Abstand ist der Abstand innerhalb Ihres Objekts. Also, wenn ich weitermache und in diesem Div-Blog Control K eintippe und so etwas wie Textblock eintippe, füge es hinein. Sie können sehen, dass der Text jetzt drin ist. Wenn ich also so etwas eintippe, ist unser Button, kannst du sehen, dass der Text da sein wird. Du kannst dir vorstellen , dass das vielleicht unser Button ist. Die Höhe beträgt also, sagen wir 100 Pixel und die Breite sagen wir bis 50. Da hast du es. Sie können jetzt also sehen, wie es den Text verschiebt. Aber es gibt für mich auch eine andere Möglichkeit, das zu beheben, die Flexbox heißt. Also, wenn ich hier klicke und wir in diesem Kurs viel auf Flexbox eingehen werden. Sie können zwischen horizontal und vertikal wechseln. Und hier können Sie positionieren, wie Ihre Elemente auf der Seite platziert werden , sodass Sie sehen können, wie einfach das ist. Und wenn ich das ein wenig anpasse, kannst du sehen, dass wir jetzt eine Art Knopf hier drinnen haben . Das ist also der Displayblock, Display-Flex, Display-Grid, Display, Inline-Block. Dies ist die Inline in der Standardeinstellung für Text, und das ist alles für ausgeblendet. Wenn ich also dort klicke, werden alle Elemente, die sich in diesem Div-Block befinden, einschließlich des Blocks selbst, ausgeblendet die sich in diesem Div-Block befinden, einschließlich des Blocks selbst, . Abstand, wie ich schon erklärt habe, Größe, werde ich schon erklären. Das ist also dein Gewicht, deine Größe, das ist deine Mindestbreite und deine Mindesthöhe. Und das tun Sie z. B. für kleinere Bildschirmgrößen, sagen wir für wirklich kleine mobile Bildschirme. Ich möchte nicht, dass meine Elemente in Breite oder Höhe kleiner als diese Größe sind. Max-Breite oder Max Height bewirken genau das Gegenteil davon. Also wachsen Sie z. B. nicht größer als, sagen wir, 1.300 Pixel in der Breite, z. B. dann zeigt der Überlauf Elemente im Inneren an. Wir werden etwas später darauf eingehen. Wir haben die Fülloptionen, die sich hervorragend für Bilder eignen. werde ich dir später auch zeigen. Wir haben die Positionierung, also sind wir statisch, relativ, absolut, fest und klebrig. Die meisten davon werden wir in diesem Kurs behandeln. Dann haben wir die Topographie, die das ausführlich abdecken wird. In der nächsten Lektion. Wir haben die Hintergründe für alle möglichen Elemente. Dann haben wir den Randradius, wir haben die Ränder und schließlich haben wir die Effekte und Animationen hier unten. Hier werde ich dieses Video tatsächlich beenden. Denn wenn ich in diesem Video auf viel mehr Details eingehe, wird das Video viel länger als 20 Minuten dauern. Da ist es gerade. Gehen wir also zum nächsten Video über und machen wir uns keine Sorgen. Wenn es momentan zu verwirrend aussieht, wird es viel klarer, sobald wir anfangen , in Webflow zu arbeiten. Denken Sie daran, dass auf der linken Seite das HTML ist, das ist eine Struktur. rechten Seite befindet sich das CMS und die Animationen können js sein, was eine gelbe Schrift ist. Also werden wir in diesem Kurs auf alles eingehen. Lass dich nicht einschüchtern, wenn du nicht weißt, was vor sich geht. Wenn du nur ein bisschen verwirrt bist, wird es ganz einfach sein, versprochen. Und wir sehen uns im nächsten Video. 167. Styleguide erstellen: Stilführer. Lassen Sie uns es jetzt in den Workflow verschieben und unseren Styleguide erstellen. Also hier sind wir in Webflow und ich werde versuchen, das so schnell wie möglich zu machen, aber trotzdem versuchen, Sie in so vielen Details wie möglich durchzugehen . Eines der ersten Dinge, die ich tun werde, ist, meine Farben hinzuzufügen. Also, was ich tun werde, ist den Körper auszuwählen, das Body-Tag ist. Und noch einmal, wenn wir Sie auf Adobe XD umstellen , so. Also hier haben wir die Seite, stell es dir einfach so vor, unser Port in diesem Fall, aber es ist nur eine Seite. Also alles, was sich auf dieser Seite befindet, befindet sich im Body-Tag. ist also wirklich wichtig, das zu verstehen. Und die Struktur sieht ungefähr so aus. Also hier haben wir, wenn ich hier klicke, wir haben das Navi, wir haben den Helden, wer wir sind, und so weiter und so weiter. All dies sind Abschnitte. In den Abschnitten können Sie Container sehen. Sie können sich also einfach vorstellen , dass sich das durch all diese erstreckt , nennen wir es so. Es erstreckt sich vollständig vom linken Rand bis zum rechten Rand. Das ist ein Abschnitt. Container ist eigentlich dieser, der 1.200 Pixel breit ist, den wir erklärt haben. Und dann haben wir in diesem Container verschiedene Div-Blöcke, die wiederum verschiedene Container sind, die diese Informationen enthalten. Wahrscheinlich sieht es im Moment zu verwirrend aus, aber mach dir darüber keine Sorgen. Ich verspreche dir, dass es nicht so sein wird. Also noch einmal, hier haben wir einen Abschnitt, der vom linken zum rechten Rand geht. Wir haben einen Container , der Inhalte enthält , die nicht breiter als 1.200 Pixel sein dürfen. Und dann haben wir zusätzliche Container, auch Div-Blöcke genannt. Dies ist einer von ihnen , z.B. der den Inhalt enthält und hier können Sie ihn sehen. Also Heldeninhalt, und dies ist ein weiterer für Hero Image, weil er drei verschiedene Bilder enthält. Gehen wir also in Webflow und fangen wir an, unsere Farben hinzuzufügen, wie ich bereits erwähnt habe. Wenn ich also zu hier wechsle, scrolle hier ein bisschen nach unten, auf dieser Seite, was wir haben, sind die Farben. Was ich also tun kann, ist, wo Typografie steht, ich kann anfangen, meine Farben hinzuzufügen, oder ich kann einfach gehen, Lass uns Hintergründe sehen. Ich kann sogar dorthin gehen. Und was ich tun möchte, ist dich auf XD umzustellen. Und als erstes möchte ich diese Körperfarbe hinzufügen. Also lass mich es kopieren, mit der rechten Maustaste klicken und kopieren. Wechseln Sie zu Webflow. Wählen Sie diesen Text hier aus. Drücken Sie V, um es einzufügen. Und es wird diese Körperfarbe einfügen, um es hinzuzufügen. Lass mich mich hier wechseln, damit du es ein bisschen besser sehen kannst oder genau hier in der Materie. Also habe ich die Effektcodierung eingefügt. Ich klicke hier und gebe die Körperfarbe so ein. Drücken Sie die Eingabetaste und es wird diese Körperfarbe hinzugefügt. Als nächstes haben wir die weiße Farbe. Also werde ich ganz auf Weiß umsteigen. Klicken Sie hier und geben Sie etwas wie reines Weiß ein, denn das hatten wir in XD. Wenn ich dann zu XD wechsle, was haben wir als nächstes hellgrau. Klicken Sie also mit der rechten Maustaste, kopieren Sie, gehen Sie zu Webflow und wählen Sie einfach Einfügen, Enter. Klicken Sie hier, geben Sie hellgrau ein. Und ich verwende keine Bindestriche, aber du kannst. Es liegt also wirklich an dir, wie du das verwenden wirst. Als nächstes haben wir Dunkelgrau. Also werde ich gleich hier reinkommen. Klicken Sie auf dunkelgrau. Sie können sehen, dass Webflow Ihnen einige Hinweise darauf gibt einige Hinweise darauf , welche Art von Namen Sie verwenden möchten. Kopiere meine Farbe und füge sie ein. Und für diese möchte ich ihr diesen Namen geben. Also H drei Absätze. Also H drei Absätze. Ich weiß also, welches es ist und wo ich es verwenden kann. Dann haben wir diesen. V, klicken Sie auf Plus Dark und fügen Sie Farbe hinzu. Und dann haben wir unser Hauptblau. Komm wieder her. Füge es hier hinzu. Also hauptsächlich blau. Und endlich haben wir unsere Coverfarbe. Also kopiere es, füge es ein, klicke hier und nenne es Hover Color. Da haben wir's. Jetzt, da Sie alle unsere Farben haben, wenden wir diese Körperfarben an. Wenn ich den Mauszeiger bewege, kannst du sehen, wie sie aussehen. Wenn Körper im Navigator ausgewählt wird die Körperfarbe angewendet und es wird die Körperfarbe enthalten, die genau den Designs hier entspricht. Lassen Sie uns nun zur Typografie übergehen. Und das ist der Grund, warum ich das tatsächlich geschaffen habe. Also, wenn ich nur ein bisschen hineinzoome, damit du es ein bisschen besser sehen kannst , ungefähr so. Also müssen wir zunächst die Poppins-Schriften integrieren. Damit wir das tun können , lass mich mich verstecken. Für diesen Teil können Sie direkt hier gehen, klicken und zu den Projekteinstellungen gehen. Auf der exklusiven aktuellen Website von Spider haben Sie alle möglichen Optionen. Für den General können Sie hier also alle möglichen Dinge eingeben. Und für das Fab Icon empfehle ich Ihnen wirklich, diesen Webclip für iPhone-Geräte hochzuladen , wenn sie in einer Art Lesezeichen gespeichert wurden. Es wird also nur angezeigt, dass Sie einfach ein Bild Ihres Logos auf 56 x 256 Pixel hochladen , vielleicht fünf, ich kann dasselbe tun. Also 32 mal 32, lade es einfach dort hoch. Dies ist die Zeitzone, in der Sie sich befinden, Webflow-Branding, Übersicht und alle möglichen Dinge. Was mich hier interessiert, ist das Hosting. Sie können diese Hosting-Pakete hinzufügen. Wie bereits erwähnt, ist der Editor derjenige, der es hinzufügen kann. Tarife und Abrechnung: Sie können die Lagepläne hinzufügen, über die wir gesprochen haben. Seo ist etwas, auf das wir etwas später eingehen werden. Also Google-Site-Zertifizierungs-Tags und so weiter und so weiter. Vielleicht kannst du eine benutzerdefinierte Sitemap hinzufügen wenn du sie hier hast. Und Sie können die Webflow-Subdomain-Indizierung deaktivieren. Nun, warum das wichtig ist, ist, wenn Sie diese Website zur Vorschau starten möchten, wird sie nicht indexiert. Google wird es also erst finden können, wenn Sie zulassen, dass es es findet. Dadurch werden Ihre Benutzer daran gehindert, die Website zu besuchen, bevor sie fertig ist. Deshalb ist das also da. Dann haben wir die Formulare. Also hier in einem Formular können Sie einen fremden Namen hinzufügen Beiträge an die gewünschte E-Mail senden. Ihre Eingaben müssen bearbeitet werden, Betreffzeile, Antwort auf die Adresse E-Mail-Vorlagen, damit Sie all das eintragen können. Erfassen Sie die Validierung erneut, um zu verhindern, dass Validierung erneut, um zu verhindern Spammer die Formularintegration bilden. So können Sie verschiedene Formularintegrationen von verschiedenen Online-Anbietern erstellen verschiedene Formularintegrationen . Wir haben Backups, Integrationen. Das habe ich also für Google Analytics erwähnt, z. B. Google Optimize für Google Maps. Für die Verwendung von Google Maps auf Webflow-Websites ist ein API-Schlüssel erforderlich von Google Maps auf Webflow-Websites . Diesen werden wir etwas später erstellen. Sie können also einen Google Maps JavaScript-API-Schlüssel erstellen und ihn hier einfügen. Und ich werde etwas später unseren Kartenleitfaden überprüfen , wenn wir tatsächlich dazu kommen, Facebook-Pixel zum Verfolgen des API-Zugriffs, Sie können das API-Token generieren und es mit allen möglichen verschiedene externe Anbieter , die dann über diese API über Webflow kommunizieren werden. Web-Hooks, du kannst deine Web-Hooks anhängen, sie sind draußen, ich autorisiere Anwendungen. Und schließlich ist benutzerdefinierter Code, hier werden Sie Ihren benutzerdefinierten Code nicht exportieren. Ich werde das in nur einer Sekunde teilen. Aber hier, wenn ich auf Veröffentlichen klicke, können Sie sehen, worüber wir zuvor gesprochen haben. Es wird also kostenlos auf dieser Stage-Domain veröffentlicht. Oder Sie können zu einer benutzerdefinierten Domain wechseln und dann die Domain verbinden, die Sie gekauft haben. Benutzerdefinierter Code ist hier. Wenn du einige benutzerdefinierte Funktionen hinzufügen möchtest, zum Beispiel vielleicht möchtest du, ich weiß nicht, zusätzliche Popups hinzufügen , oder andere Chat-Funktionen , die über externe Chats und so sprechen so. Das werden wir also hier importieren. Hier siehst du also etwas , das Head Code genannt wird. Kopf ist das Element, das über den Körper hinausgeht. Es befindet sich auf derselben Seite und der Hauptteil und Kopf funktionieren für jede Seite Ihrer Website, aber es geht einfach darüber hinaus. Inhalt geht nicht in den Kopf, sondern Code geht in den Kopf. Der Inhalt wird in das Body-Tag eingefügt. Und dann haben wir den Footer Code , der noch einmal ganz unten geht und darin können sie sein, Sie können einen Code vor dem Textkörper oder bevor das Body-Tag fertig ist, sehen , und es geht auf unten auf der Seite. Manchmal fügst du im Feed verschiedene Stylings hinzu. Manchmal fügen Sie verschiedene Stile und weitere hinzu, je nachdem, was Sie in Ihre Website integrieren möchten . Was uns hier interessiert, sind die Schriften. Wenn ich also auf die Schriften klicke, können wir hier ganz einfach Google-Schriften integrieren. Wenn Ihr Kunde benutzerdefinierte Schriftarten hat, können Sie sie einfach entpacken und direkt hier hochladen. Wir werden ihnen zeigen Adobe-Schriftarten ein bisschen anders sind , denn auch haben Sie Ihr API-Token und fügen es einfach hier ein, speichern Sie das Token. Und es wird diese Schrift aus Adobe-Schriften abrufen und auf Webflow anzeigen. Wir sind an Google-Schriften interessiert , weil ich die Dinge einfach halten wollte und was wir brauchen sind Poppins. Also, wenn ich zu Poppins gehe, dann sind wir da. Was ich brauche, ist regelmäßig. Ich brauche das fett , sagen wir mehrere hundert, was mutig ist. Das ist normal und mittelgroß, also kann ich z. B. einfach auf Schrift hinzufügen klicken. Es wurde hinzugefügt, und ich kann hier klicken , um zu meinem Designer zurückzukehren wird es genau hier laden. Und jetzt können wir anfangen, unsere Schriften hinzuzufügen. Um das zu tun, werde ich zunächst die Abschnitte erstellen, die ich erwähnt habe. Wenn ich dich also noch einmal zu XD zurückbringe, erstellen wir diesen Abschnitt in voller Breite. Und dann erstellen wir einen Container mit 1.200 Pixeln. Drücken wir also die Strg-Taste und geben Sie, sagen wir, Abschnitt ein. Hier füge ich eine Abschnittsklasse hinzu. Drücken Sie die Eingabetaste. Und diese Abschnittsklasse wird für alle unsere Abschnitte auf unserer Website dieselbe sein . Und es wird alle möglichen Elemente enthalten , die wir hineinlegen werden. Ich werde diese Elemente also überhaupt nicht ansprechen. Vielleicht kann ich es vielleicht in voller Breite hinzufügen. Also maximale Breite von, sagen wir, 100 Prozent. Und Sie können einfach Prozent eingeben und die Eingabetaste drücken. Und Webflow ist so intelligent , weil es nur den Prozentsatz der Pixelbreite ersetzt. Und was Sie auch tun können, ist direkt hier zu klicken und es anzupassen. Und was wir jetzt tun werden , ist, da wir uns in diesem Abschnitt befinden, der die Klasse der Sektion ist Ich drücke Strg K und füge ein Div ein. Und Sie können sehen, dass diblock für dieses Div-Protokoll auftaucht, das sich genau hier befindet. Ich gebe ihm eine Klasse von Containern. Also Kuan, Dana, drücke die Eingabetaste. Und hier haben wir die Klasse Container. Was ich zunächst tun werde, ist hier für den Abstand zu klicken , der das Element horizontal zentriert. Und es wird es einfach in die Mitte stellen. Und ich gebe ihm eine maximale Breite von, sagen wir, 1.200 Pixeln. So wie es ist. Und du kannst sehen, dass es in der Mitte meiner Seite ist, weil ich genau dort geklickt habe. Also das ist, das ist mein Container. Und für meinen Container werde ich einfach etwas Polsterung hinzufügen, das ist das Element darin. Und es wird mir später ein einfacheres responsives Design ermöglichen . Also werde ich gleich hier klicken. Sie können sehen, dass wir bereits einige Voreinstellungen haben. Ich gebe 20 auf dieser Seite und 20 auf dieser Seite ein. Da hast du es. Und wenn wir jetzt mit dem Einfügen von Inhalten beginnen, wird das 20-Pixel-Padding von links und rechts angezeigt, was Sie in den nächsten Lektionen sehen werden , sobald wir mit der Gestaltung beginnen Seite. Aber im Moment gibt es uns nur diese Atempause, wenn wir zu den kleineren Größen übergehen. Und es wird uns später ein viel einfacheres responsives Design ermöglichen . Also im Inneren des Containers, wie Sie sich erinnern, unser Inhalt. Also werde ich das vorerst loswerden weil wir auf den Körper klicken werden. Wir kontrollieren K und geben H-Überschrift ein und wählen einfach die erste Überschrift hier, so wie sie ist. Und ich werde gleich hier klicken. Und Sie können sehen, dass wir dieses HTML-Tag haben , das alle H1-Überschriften aussagt. Wir werden das auswählen, denn wo auch immer Sie Ihre H1-Einstellungen haben, es werden diese Einstellungen auf Ihrer gesamten Website übersetzt , unabhängig davon, auf welcher Seite Sie sich befinden, was wir tatsächlich wollen. Also, wenn ich ein bisschen nach unten scrolle damit du sehen kannst, was ich auswähle. Anstelle von Bereichen wähle ich meine Poppins aus, die genau hier sind. Und das Gewicht wird mutig sein. Gehen wir zurück zu XD und sehen, was wir erstellt haben. Also los geht's. Jetzt haben wir, mal sehen, H1 Poppins, 64 Schrauben und 86 ist der Zeilenabstand. Also wenn ich da wieder hin gehe, also lass uns mit 64 fahren, 86 Volt ist die Farbe. Und schließlich ist dies die Farbe, die wir wählen werden. Dieser wirklich düstere hier. Also dunkle Überschrift, Farbe. Da haben wir's. Und jetzt ist unsere Schrift vorbereitet und sie wird linksbündig ausgerichtet sein, was in Ordnung ist. Das wird also unser H1 sein. Also, wenn ich so etwas wie Überschrift eins eintippe, nur damit wir wissen, was es ist. Und wenn ich Control K, h eintippe , verwende die Überschrift erneut. Dieses Mal wählen wir H2 und wählen alle H2-Überschriften aus, weil wir dies für alle H1-Überschriften geändert haben. Und wenn ich hier klicke, können Sie sehen, dass die Werte aus allen H1-Überschriften stammen. Es bezieht also dieses Styling aus allen H1-Überschriften, bei denen es sich um HTML-Elemente handelt. Und sie sind für jede einzelne Seite unserer Website gleich . Also noch einmal, das ist der H2 und er stammt aus allen H2-Überschriften hier. Also statt Fläche, lassen Sie uns es hier in Poppins ändern. Es wird mutig sein. Und mal sehen, für die Größe haben wir einen Zeilenabstand von 32 Schrauben und 56. Lassen Sie mich nur die Farbe auf eins bis zwei bis vier überprüfen. Und wenn ich den Mauszeiger genau hier auf eins, auf zwei bis vier bewege, ist es dasselbe wie bei dieser Farbe. Also dreh es auf, und das ist 56. Also genau hier, 22, ich verstecke, diese 56 Farbe wird diese dunklere Farbe sein. Da haben wir's. Da haben wir's. Unser H2 ist fertig und es wirkt sich auf alle H2-Überschriften aus. Wenn ich nun auf Control K drücke, gebe ich H-Überschrift und H3 und H4, H3-Überschriften ein. Wir werden uns wieder für Poppins entscheiden. Und lass uns zurück zu XD gehen. Das ist also auch Bolt, aber 24. Und ist es jetzt dieselbe Farbe? Es ist jetzt die Farbe mit drei Absätzen , weil es die H3 ist. Also lass uns wechseln, oder tut mir leid. 24,40 ist also der Zeilenabstand. Also 24, das werden 40. Und diese Farbe wird diese Farbe für H3 und Absatz sein. Da haben wir's. Wir wirken uns also auf alle h3-Überschriften aus. Und mal sehen, was wir als Nächstes haben. Wir haben den Textblock. Also lass uns das machen. Und ich werde den Control K-Textblock eingeben. Aber jetzt schau, was passiert , wenn ich hier klicke. Wir haben diese Textblock-Option nicht, daher müssen wir unser eigenes Textfeld erstellen. Geben Sie einfach den Textblock ein, mein Maler, und das wirkt sich auf das gesamte Textfeld aus. Also hier werden wir Poppins auswählen. Da haben wir's. Normal ist das Gewicht. Und schauen wir mal nach der Farbe, was wir haben. Wir haben diese 70, 70, die dunkelgrau ist, glaube ich hier. Und es sind 20 unregelmäßig und 40 für den Zeilenabstand. Gehen wir also davon aus, dass dies das Dunkelgrau ist. Los geht's, und 20.40 Uhr. Und los geht's. Jetzt haben wir unsere Schriftgröße. Wir haben also 24 hier und hier haben wir 20, was meiner Meinung nach vielleicht ein bisschen viel im Internet sein wird. Ich weiß es nicht. Lass uns, lass es uns einfach da belassen. Wir haben also unsere Textblöcke, und jetzt wählen wir unseren Absatz aus , der regulär 16, 26 ist und diese h3-Farbe hat. Also 16, 26 regulär. Lassen Sie uns also diesen Kontroll-K-Absatz erstellen. Und ich werde hier alle Absätze auswählen, Poppins, 16, 26. Und für die Farbe werden wir den Absatz „Alter drei“ verwenden. Da haben wir's. Hübsch. Geben wir ihm einfach ein Textdiagramm. Da haben wir's. Das wird unser H2 sein. Das wird RH Three sein, das wird unser Textblock sein. Was wir dann für unseren Absatz benötigen, ist alle Stylings für die alten Absatz-Tags fertiggestellt wurden , die Sie direkt dort sehen können. Und schließlich brauchen wir, dass alle Texte, also drücken Sie einfach Strg K geben Sie den Textblock ein. Da hast du es. Innerhalb des Textfeldes werde ich es nennen. Lass uns sehen. Also beschriftete Texte, was Poppins 12.20 sein wird. Nennen wir es also so Labeltext. Und es wird, wie gesagt, Poppins sein , 12, 20, normal für die Größe. Sie können also sehen, dass normal, mittel und fett das ist, was wir für die Farbe verwenden. Mal sehen, mal sehen. Bearbeiten Sie es damit auf D bis e30, was, wenn ich den Mauszeiger bewege, in dieser Farbe ist. dritte Absatz ist also die Farbe, die es verwendet. Also klicken Sie hier , drei Absätze. Da haben wir's. Und jetzt haben wir einen beschrifteten Text , den ich gleich hier schreiben werde. Also beschriftete Texte, und los geht's. Jetzt haben wir also all unsere Elemente. Denken Sie daran, dass wir bereits alle unsere Bilder hinzugefügt haben, also haben wir sie einfach per Drag & Drop hineingezogen. Und jetzt haben wir unseren Bereich, unseren Container, all unsere Typografie, all unsere Farben erstellt . Jetzt sind wir bereit, loszulegen und tatsächlich mit dem Aufbau dieser Website zu beginnen. In dieser Hinsicht brauchen wir es nicht mehr. Ich kann einfach zurückgehen und bei allen auf Löschen klicken. Und du kannst dich an diesen Körper erinnern, wir haben diese Körperfarbe bereits im Inneren verwendet. Jetzt, da wir im nächsten Video fertig sind, wir uns mit diesem Website-Design befassen und ich werde Ihnen zeigen, wie Sie was wir in Adobe XD gemacht haben, jetzt in Webflow einfach nachbilden können. Also werde ich dich dort sehen. 168. Navbar: In Ordnung, lassen Sie uns abschließend mit dem Aufbau unserer Webflow-Website beginnen . Und lass uns gleich anfangen. Also hier sind wir in Webflow und zuerst wählen wir meinen Körper aus. Klicken Sie gleich hier rein. Und was wir hier haben, sind all diese verschiedenen Elemente, die wir einbeziehen können. Aber wie bereits erwähnt, werde ich noch einmal Abkürzungen verwenden, um mich schneller fortzubewegen. Und ich werde einfach noch einmal Control K verwenden und Navi eingeben, wodurch mir diese Navigationsleiste angezeigt wird. Aber bevor ich diese Navigationsleiste einfüge, werde ich einen Abschnitt erstellen, also Control K-Abschnitt. Und wenn ich einen Abschnitt in diesen Bereich lege, werde ich eine Navigationsleiste platzieren. Also steuere die K-Navigationsleiste. Da hast du es. Ich nenne das Navbar Navbar Navbar. Also gib ihm einen solchen Kurs. Und hier können wir all diese verschiedenen Einstellungen haben , aber das sind wir nicht, das ist uns egal. Was uns wichtig ist, ist dieser Container, in dem sich all diese Informationen befinden, denn dieser Container hat eine Breite von etwa 960. Also werden wir das beheben, indem wir unseren Container auswählen, denn unser Container hat, wenn Sie sich erinnern, 1.200 für die maximale Breite. Also drücke ich noch einmal Control K, tippe div und füge mein Div hier ein. So wie. Ich nenne das Div Navbar, so etwas, oder Navigation oder nennen wir es oder Hauptnavigationsleiste oben, Navigationsleiste oder so, oder NAV. Die Abweichung. Nennen wir es, nennen wir es so, weil wir innerhalb der Schulden nur eine Navigation haben werden . Ich werde nur das alles n. Und statt der Navigation, lassen Sie uns das tatsächlich in Container umbenennen . So wie das. Eigentlich noch besser. Lass uns die Klasse entfernen und von vorne beginnen. Also Container, weil wir diese Klasse bereits haben und sie Navigation nennen werden , so eine Navigationsleiste. Jetzt haben wir also eine Kombiklasse. Und was eine Kombiklasse ist, ist deine Hauptklasse, die in diesem Fall Container ist. Und es weiß bereits, dass es 1.200 Pixel breit ist, weil es sich um einen Container handelt. Und diesen Container haben wir bereits erstellt. Entschuldigung, Navbar, weil wir wissen wollen , was der zusätzliche Mehrwert ist. In diesem Fall wissen wir also, dass der Container, wie gesagt, 1.200 Pixel breit ist 1.200 Pixel breit und die Paarung von 20 hat. Wie Sie sehen können, liegt unsere Navigationsleiste daran, dass die Navigation oben ist. Was ich als Nächstes tun werde, ist es ein bisschen zu stylen. Also wähle ich meinen Container aus. Und hier sind wir, lassen Sie uns den Container vorerst behalten. Vielleicht können wir es hier komplett aufschreiben. Lass es uns jetzt einfach behalten. Lass es uns einfach so belassen, wie sie es erstellt haben. Weil ich denke, wir können so einen Mehrwert hinzufügen oder ich kann sogar, mal sehen, Container 1.200 hinzufügen . Und unser Container ist 1.200, also das ist in Ordnung. Also habe ich diese Containerklasse einfach zu ihrem ursprünglichen Container hinzugefügt . Und in diesem Container habe ich ihn gerade als Navbar erstellt. Es ist also ein bisschen verwirrend, aber mach dir darüber keine Sorgen. Es wird alles gleich erklärt. Also, was ich hier machen werde, ist, wo Marke steht. Vielleicht kann ich das hinzufügen, aber vorher fangen wir mit unserem Container und lassen Sie uns zuerst die Farbe ändern. Wenn ich also ganz nach unten scrolle , wo Farbe steht, steht transparent. Ich wähle hier die Körperfarbe aus. Und ich werde dasselbe für die Navigationsleiste tun. Sie können also sehen, dass es diese hellgraue DDD-Farbe ausgewählt hat, aber ich werde einfach meine Körperfarbe wählen. Da haben wir es, und jetzt haben wir es da. Also das Wichtigste zuerst für die Marke Ich navigiere einfach hier zu unseren Assets, wähle mein Logo aus und ziehe es hinein. Da haben wir's. Und ich werde einfach Alt-Texte von Asset verwenden, das ist das Logo. Oder ich tippe auf eine benutzerdefinierte Beschreibung und z. B. auf ein Spotter-Logo. Da hast du es. Und ich werde es einfach genau dort platzieren. Als Nächstes wähle ich diesen Nav-Link aus. Wir müssen diese Nav-Links tatsächlich zuerst stylen. Geben wir ihm also eine Klasse von Nav-Links wie dieser. Und was das Styling angeht, was wir tun können, ist, wenn ich hier zu meinem Design zurückkehre, wenn ich es auswähle und genau hier springe, kannst du sehen, dass wir das Design des Textblocks haben, also 20 unregelmäßig und 40. Also werden wir diese Einstellungen dort anwenden. Also lass uns mit Poppins gehen, wo wir sind. Und dann gehen wir mit 2040. ganz ohne Dekoration hier. Also ohne Links. Und ich werde diese Farbe hineinlegen, was meiner Meinung nach diese ist. Ja, also dunkelgrau, das ist unsere Farbe für den Link. Und weil wir die Nav-Link-Klasse haben, kann ich diese auswählen, um sie loszuwerden. Control C, Control V, Control V. Also habe ich jetzt drei davon. Wenn wir also zurückfahren, haben wir alleine Autos und kontaktieren uns. Das heißt also Autos. Hier heißt es Kredite, und das heißt , kontaktieren Sie uns. Da haben wir's. Schauen wir uns nun das Styling an, denn dafür haben wir 20 auf jeder Seite. Kontaktieren Sie uns. Ich wollte auf der rechten Seite bleiben. Was ich also tatsächlich tun werde, ist eine weitere hinzuzufügen , die eine Kombinationsklasse für das letzte I ist , damit ich diese Polsterung auf der rechten Seite so loswerden werde . Also wird es hier dabei bleiben. Lassen Sie uns jetzt das Styling erstellen. Also hier sind wir standardmäßig ausgewählt. Lass uns also mit dem Hover State weitermachen. Klicken Sie also einfach auf diesen Pfeil und wählen Sie Ihren Hover-Status aus. Alles, was wir hier tun müssen, ist die Farbe von Dunkelgrau auf Schwebefarbe zu ändern . Und dann hier, Lass uns mit dem depressiven Zustand fortfahren und einen depressiven Zustand einfügen. Ich möchte unsere blaue Hauptfarbe wählen. Da haben wir's. So einfach ist es, das zu erstellen. Jetzt müssen Sie nur noch hier klicken. Ich gehe in den Vorschaumodus und bewege den Mauszeiger. Sie können sofort sehen, dass wir den Hover-Effekt haben, weshalb ich im Designbereich erwähnt habe, sich darüber keine allzu großen Sorgen. Verbringe nicht zu viel Zeit mit deinen Elementen. Ich denke, das wird gut funktionieren. Schließlich wählen wir unseren Container mit all unseren Elementen aus und verwandeln ihn in eine horizontale Flexbox. Und sagen wir so und wählen wir unser Logo aus. wird einfach unsere Marke sein, es genau hier zu positionieren und es wird es genau hier platzieren. Und lass uns mit einigen Einstellungen herumspielen. also innerhalb des Containers Wählen wir also innerhalb des Containers unser Navigationsmenü aus. Und hier haben wir Ausrichtung und Reihenfolge, und ich kann dort rechts klicken und auswählen, was verloren gehen soll, wodurch es genau hierher verschoben wird. Dann wähle meinen Container aus und spiele vielleicht mit diesen Einstellungen herum, z. B. und wenn du den Mauszeiger bewegst, kannst du sehen, was das macht. Dies ist für das Ende und dies ist der Zwischenraum , um sich gleichmäßig von Anfang bis Ende zu verteilen. Wenn ich jetzt auf Vorschau klicke, können Sie sehen, dass mein Logo neben diesen Elementen zentriert ist . Und wenn ich hier mit der Maus auf die rechte Seite gehe und klicke, kannst du sehen, dass meine Navigation einwandfrei funktioniert , weil wir auf jeder Seite 20 Pixel aufgepolstert haben. Sie können also sehen , wie das aussieht. Und wenn ich jetzt hier klicke, kannst du sehen, wie meine Links hier aussehen, direkt positioniert, sodass alles gut aussieht und wir die Schulden noch weiter anpassen können. Also, wenn ich genau hierher gehe, gehe zurück und dann kann ich vielleicht meine gesamte Komponente auswählen. Vielleicht kann ich zum Styling gehen und du kannst sehen, wie das Öffnen funktioniert. Und es funktioniert, es funktioniert. Es funktioniert also für Tablets, es funktioniert für die Telefonlandschaft und es funktioniert für die mobile Landschaft. Also wenn ich sage, zeige z.B. Innere des Tablets, kann ich jetzt damit beginnen, das zu stylen. Also, wenn ich hier klicke, was kann ich für mein Logo tun. Wählen wir also das aus. Und im Hintergrund können Sie sehen, dass dieser Hintergrund ausgewählt ist. Vielleicht kann ich diesen dunkleren Hintergrund wählen. Ich denke, das wird funktionieren. Vielleicht ein bisschen besser, glaube ich, nein. Wir können also sehen, dass dies für den Hintergrund ausgewählt ist. Also lass uns zur Ikone gehen. Die Farbe ist in diesem Fall transparent, daher weiß ich nicht, woher das Styling-Spiel stammt. Schauen wir uns also an, was wir hier tun können. Ja, es nimmt also dieses Styling von hier an. Aber wenn ich es auf hier ändere, los geht's. Es ist also nur das Styling von hier. Wenn ich es von hier aus auswähle, weiß ich nicht, warum es sich nicht ändert. Da haben wir's. Also endlich gilt es. Also werde ich diesen Absatz für das Alter von drei Jahren wählen, vielleicht mehr, vielleicht sogar diese dunklere Farbe. Ich weiß es nicht. Aber lass es einfach hellgrau wie es ist, und gehe dann in mein Symbol und ändere meine Symbolfarbe vielleicht in diese Farbe. Aber aus welchem Grund auch immer , es hat sich in das verwandelt. Was wir also später tun können, ist, dass wir vielleicht das Symbol selbst ändern können , weil es dieses Feld umgibt. Sie können das Kästchen rund um das Symbol sehen. Gehen wir also vielleicht zurück zum Transparenten und vielleicht können wir dieses Kästchen auswählen. Vielleicht können wir etwas anderes auftragen , vielleicht verfärbt. Da hast du es. Und was die Navigationslinks angeht, sehen wir uns den Farbübergang der Navs an. Mal sehen, wo wir sind. Da haben wir's. Wählen wir also einfach diesen aus. Und wende es überall an. Und aus diesem Grund, ja, also los geht's. Jetzt haben wir alle drei so. Ich denke, es ist in Ordnung. Und es ist für den Hover. Was wir tun können, ist zum Hauptspiel überzugehen. Sie können also sehen, dass dies einen Nav-Link hat. Jetzt färben wir und dieser war der letzte. Also jetzt Lincoln weniger. Sie könnten es also eines von diesen hinzufügen. Und lassen Sie uns den Hover-Status wählen. Und was wir innerhalb der Styles tun können, ist, dass wir die Vorspannung sehen können. Also, wo führt es uns hin? Ich denke nicht, dass wir das können, wir sollten das eigentlich wählen. Siehst du, ich finde das in Ordnung. Das ist eigentlich in Ordnung, weil Sie sowieso nicht in der Lage sein werden, etwas zu behandeln , wenn Sie mit Ihrem Design beginnen. Also ich denke, das ist in Ordnung, das sieht gut aus. Das sieht auch gut aus. Also werden wir etwas später darauf eingehen, aber ich denke, für den Moment ist das in Ordnung. Bis wir das Symbol ersetzt haben. Was wir eigentlich tun können, ist, dass wir vielleicht schnell zu X d gehen können . Also lass uns das machen. Hier in meinen Plugins. Was ich für die Icon-Scouts tun kann, wenn es geladen wird, schauen wir mal, was es macht. Gehen Sie also noch einmal zu Icon Scalp zurück. Und hier kann ich nach Nähe suchen. Da haben wir's. Wir haben diesen. Oder noch besser, wir haben bereits dieses Schließsymbol. Mal sehen, was es irgendwo hier in der Nähe ist, glaube ich. Aber ich habe es nicht als Komponente hinzugefügt. Da hast du es. Deshalb ist es nicht da. Wenn ich also diesen auswähle und Strg C drücke, kann ich ihn schließen. Ich brauche es nicht. Gehen Sie dann zurück zu meiner Ikonographie, sind genau hier, drücken Sie z. B. Control V und wählen Sie dann, sagen wir, dunkle Überschriftenfarbe und schließen Sie das Symbol, drücken Sie Control K. Und dann kann ich meine Ikonographie öffnen und Schulden und füge sie einfach in meine Icons ein. Es wird ganz , ganz am Ende stehen. Da hast du es. Jetzt muss ich es nur noch an der Mitte ausrichten oder so. Drücken Sie Control oder Command E als SVG anstelle von Bildern Ich werde es in Symbole exportieren. Wählen Sie einen Ordner aus und klicken Sie auf Als SVG exportieren. Das ist in Ordnung. Lassen Sie uns dieses Steuerelement schließen, um zu Webflow zurückzukehren. Und ich werde gleich hier rüber gehen. Und lass mich einfach meinen Ordner noch einmal öffnen. Wir haben also ein Spotter-Assets. Da sind wir als Ikonen. Und ich wähle C aus, schließe das Symbol, ziehe es hinein und lege es ab. Da haben wir's. Und jetzt, wenn ich zum Tablet gehe , kann ich genau hier hingehen, wo Symbol steht, und dieses auswählen. Und lass uns, lass uns, lass es uns an die Körperfarbe anpassen. Da haben wir's. Und wähle mein Symbol aus. Und mal sehen, wählen Sie diese Einstellungen aus. Vielleicht kann ich es sogar reinziehen. Lassen Sie uns das überprüfen. Klicken Sie darauf und ziehen Sie es hinein. Mal sehen, ob das funktioniert. Du sitzt schon. Wenn ich also dieses Symbol auswähle und auf Löschen klicke, wird es genau dort platziert. Also, wenn ich hier klicke, genau hier klicken, da hast du es. Alles ist da. Und lassen Sie uns auf Show klicken, um zu sehen, wie das aussieht. Ich finde, das sieht ganz gut aus. Und jetzt können wir sogar weitermachen und damit weitermachen. Also das Wichtigste zuerst, ich denke, wir brauchen diese Farbe nicht mehr, hellgrau, also lass uns sie auf Körperfarbe ändern. Da haben wir's. Und all das kann Körperfarbe sein, wenn du willst, aber ich denke, Hellgrau funktioniert ganz gut. Und belassen wir es einfach dabei. Wie Sie sehen können, haben wir jetzt dort das benutzerdefinierte Symbol. So einfach ist es also und so schön sieht es aus. Und es wird bei allen verschiedenen Größen einwandfrei funktionieren. Jetzt, da wir unsere Navigationsleiste erstellt haben, wir ziemlich viel Zeit gebraucht weil ich das erklären wollte, weil wir sie in unserem gesamten Design wiederverwenden werden. Was wir jetzt tun werden, ist, es in dieses Symbol zu verwandeln. Um ein neues Symbol zu erstellen, haben wir diese Navigationsleiste in unserem Abschnitt. Also wähle ich einfach meine gesamte Navigationsleiste aus. Denn später werden wir einen Abschnitt erstellen. In diesem Abschnitt können wir die Navigationsleiste aufrufen. Oder noch besser, wir können es einfach draußen aufstellen. Geben wir ihm einen Namen. Aber er benannte Klasse von Navbar. So wie das hier. Lass uns die Navigationsleiste entfernen, obere Hauptnavigationsleiste. So wird unsere Sektion in diesem Fall heißen. Nur damit wir es auf der Seite mit diesem Namen sehen können . Wie du es sehen kannst. Wählen Sie unser Symbol aus, erstellen Sie ein neues Symbol, und ich nenne es Nav-Leiste. Und erstelle ein Symbol. Da hast du es. Jetzt haben wir unsere Hauptnavigationsleiste, und wo auch immer wir uns auf der Website befinden, können wir weitermachen und sie bearbeiten und wir können sie einfach kopieren und einfügen, wenn ich zu meinen Symbolen wechsle. Sie können sehen, dass wir habe Navbar eine Instanz. Wenn wir es auf vier Seiten verwenden, haben wir vier verschiedene Instanzen und so weiter und so weiter. Also im Grunde ist es das, was wir bisher haben. das jetzt im nächsten Video Lassen Sie mich das jetzt im nächsten Video für eine Sekunde schließen . Im nächsten Video werden wir zu diesem Abschnitt übergehen und dieses Bild mit einem Auto erstellen . Genau hier werden wir ein bisschen Polsterung auf 100 Pixeln haben . Also werde ich dich im nächsten Video sehen. 169. Home Hero Abschnitt: Ordnung, also lass uns dort weitermachen, wo wir aufgehört hier haben wir diese Heldenabteilung. Gehen wir also zurück zu Overflow. Und wir wählen unseren Körper aus, drücken Control K und geben S für diesen Abschnitt ein. Ich gehe hier zurück und gebe Abschnitt ein, um ihm diese Klasse zu geben Control K, gib div für den Do-Block ein, ich nenne ihn C für den Container. Da haben wir's. Und jetzt in diesem Abschnitt, nennen wir es, geben wir ihm eine Combo-Klasse von Helden. Und in diesem Container können wir vielleicht in verschiedene Tauchgänge einbauen. Ich denke, dass das sehr vorteilhaft sein kann. Aber vorher können wir es in einen Wrapper packen. Der Wrapper ist eigentlich das Element, das geht Denken Sie nur daran, wenn wir hier zu XD zurückkehren. Also müssen wir das in diesen Wrapper packen. Was ich also tun kann, ist das entweder als Container zu verwenden und es Rapper zu nennen oder einen komplett neuen Wrapper zu erstellen. Also werde ich das tun, anstatt Container als meinen Wrapper zu verwenden, ich drücke noch einmal Control K und gebe div ein und nenne diesen einen Hero-Wrapper. Da hast du es. Und der ganze Zweck hier ist dass es unseren Inhalt darin verpackt. Sie können also sehen, dass der Container hier ist, Hero-Wrapper ist drin. Wir haben immer noch diesen Abstand von 20 Pixeln , weil er den Hero-Wrapper verschiebt und in den Helden-Rapper hinein, was wir eigentlich wollen, sind zusätzliche Divs. Also drücken wir Control K und geben div ein. Dieser Div-Block wird, sagen wir mal, Heldeninhalt sein. Da hast du es. Und du kannst es dir hier ansehen. Und ich möchte einen anderen auswählen, drücken Sie Control K, geben Sie div ein. Und dieser Div-Block kann hero.eg sein. Für das Heldenbild, z. B. innerhalb des Heldeninhalts , können wir vielleicht zuerst den Hero-Wrapper verwenden und daraus eine Flexbox machen. Und das wird unsere Inhalte Seite an Seite drängen, wie Sie hier sehen können. In diesem Container können wir nun, oder noch besser in diesem Abschnitt, tun , was wir tun können, sagen wir, ihm eine obere Marge von 100 geben. Also hier haben wir diesen Abschnitt, Held. Und ich werde die obere Marge von 100 verwenden, und das wird diesen Inhalt aus meiner Navigation verdrängen . Also geh zurück zum Helden, Rapper. Was ich hier machen werde ist z.B. Ich kann vielleicht, sagen wir mal, so verteilen. Es wird also den Inhalt von einer Seite zur anderen übertragen. Genau wie wir es hier mit der Navigation innerhalb des Heldeninhalts gemacht haben. Was wir tun können, ist, dass ich Control K eingeben kann, die H-Überschrift und ich werde den H1 wählen. Lass uns einfach den Text verwenden. Also H1 und verwende alle H1-Überschriften. Da hast du es. Ich weiß nicht, warum ich nicht abgeholt dass etwas nicht stimmt. Also wenn ich zu Poppins und 64 gehe und meine Farbe für die dunkle Farbe verwende. Da haben wir's. Wenn ich jetzt meinen Text einfüge, ja, etwas stimmt nicht. Ich weiß nicht, warum es die Klassen, die wir zuvor gemacht haben, nicht gespeichert hat. Wenn ich also mein Alter eins auswähle, kannst du sehen, dass es 86 Jahre sind. Also wenn ich zurückgehe und 86 eintippe, muss das ein Bug oder so sein. Also dein Partner für Ich drücke die Eingabetaste für exklusive Autos. Da haben wir's. Also jetzt innerhalb der Schulden, was ich tun werde, ist Control K für einen Text zu drücken, nicht für einen Textlink. Entschuldigung, ich kann diesen Steuerschlüssel loswerden. Textblock. Ich werde ihm sofort eine Klasse von Textblöcken geben . Da hast du es. Jetzt haben wir das. Also kopiere ich meinen Text und füge ihn hier ein. Eine dokumentierte Geschichte sieht toll aus. Und eine letzte Sache, die ich tun möchte, ist eine Schaltfläche hinzuzufügen. Drücken Sie also die Taste Control K. Da haben wir's. Und ich werde ihm eine Klasse von Main Btn geben, genau wie wir es mit dem gemacht haben, mit dem Design in Adobe XD. Also hier gleich, was ich tun werde, ist die Schrift von Poppins zu verwenden. Ich glaube, es waren 20. Lassen Sie mich also mein Design überprüfen. Also lass uns sehen. Das sind Poppins 20 Regular und 40, und es wird die Farbe Weiß haben. Also mal sehen, 2040, Poppins, normal, das brauchen wir. Die Farbe wird reinweiß sein. Da hast du es. Und jetzt, was die Polsterung angeht, können wir vielleicht etwas wie, ich weiß nicht, vielleicht 16 hineinlegen . Also halte ich Alt und meine linke Maustaste gedrückt, 16. Oder du kannst hier klicken, dass ich 16 Jahre alt war. Klicke hier, sie waren 16, wenn es bei dir nicht funktioniert. Und für hier werde ich etwas wie 52 verwenden. Ich denke, das wird gut funktionieren. Und für den Eckradius können Sie ganz nach unten scrollen und etwa acht eingeben. Ich denke, das wird gut funktionieren. Da hast du es. Ich werde mich jetzt nicht mit irgendwelchen Größenangaben befassen. Ich denke, das ist in Ordnung für die Farbe Wir wählen unsere Hauptfarbe aus. Und hier werden wir tippen, unseren Kurs erkunden und Sie können sehen, dass die Schaltfläche genau wie in Adobe XD wächst. Schließlich wähle ich hier den Hoverstatus und die Farbe aus. Ich werde es auf unsere Farbe umstellen. Da haben wir's. Entferne es von hier, weil ich möchte, dass mein aktueller Status so ist. Und wenn ich jetzt auf Vorschau drücke und den Mauszeiger bewege, kannst du sehen, wie das aussieht. Ich finde, das sieht toll aus. Das sieht gut aus. Und lassen Sie uns jetzt darauf zurückkommen. Und lass uns Hero-Rapper sehen. Was ich tun kann, vielleicht, ja, vielleicht kann ich meinem Hero-Wrapper eine maximale Breite von 1.200 geben . Da hast du es. Und wegen des Inhalts , der sich durchsetzt, kann ich ihm vielleicht noch einmal 20 Punkte geben, sagen wir so etwas. Und jetzt, wenn ich genau hier treffe, kannst du sehen, dass sie jetzt tatsächlich ausgerichtet sind . Das Sub nimmt einfach diese 20 und gibt ihm weitere 20 hinein. Wenn ich also zu genau hier wechsle, können Sie sehen, dass wir jetzt 20 hier und 20 hier haben, was mit unserem Top-Logo übereinstimmt. Oder was wir auch tun können, ist zurückzugehen und es einfach von hier zu entfernen. Aber ich denke, für dieses Beispiel wird es gut funktionieren . Also hier haben wir 20, hier haben wir 20 oder besser, ich kann es gleich hier loswerden. Also Null und dann Null genau hier, weil wir den Container haben, in dem die 20 drin ist. Und ich kann einfach die Navbar anpassen. Drücken Sie also die Eingabetaste. Und in der Navbar kann ich für meinen Container hier 20 tun. Und wenn ich hier wieder reingehe , habe ich 20. Also hier kann ich Null erreichen. Hier kann ich Null erreichen, und jetzt werden sich diese beiden ausrichten. Wenn ich also noch einmal auf Vorschau klicke, kannst du sehen, dass der Inhalt jetzt ausgerichtet ist und wir immer noch 20 Padding auf jeder Seite haben. So einfach ist es also, das Problem zu beheben und mach dir keine Sorgen darüber. Wir werden uns etwas später mit Responsive damit befassen . Kehren wir zu unserem Design zurück und lassen Sie uns mit dem Bereich Hero-Inhalte arbeiten. Nun, was ich hier für einen Heldeninhalt tun kann , ist, dass ich diesen vielleicht ein bisschen Polsterung oder Rand oder etwas Ähnliches geben kann diesen vielleicht ein bisschen Polsterung oder Rand oder , nur um sie zu unterscheiden, zu unterscheiden ein bisschen. In diesem Fall kann ich also alle H1-Überschriften eingeben und auswählen. Und in diesem Fall fügen wir hier H1 Hero anstelle des oberen Randes hinzu. Ich werde es loswerden. Und für den unteren Rand füge ich 32 hinzu. Da hast du es. Hier für meinen Textblock kann ich sagen Textblock und eine Combo-Klasse von Hero hinzufügen. Und innerhalb dessen können wir eine untere Marge von 32 Milchschweinen hinzufügen . Und wenn ich Sie zurück zu unserem Design bringe , haben wir genau das. Wenn ich also meinen alten Schlüssel, 32, und dann hier 32 auswähle , funktioniert das wie ein Zauber. Ich denke, das wird für uns ganz gut funktionieren. Aber eine letzte Sache, die wir vielleicht tun möchten, ist , diesen Heldeninhalt auszuwählen und ihm vielleicht eine maximale Breite zuzuweisen. Also in diesem Fall komme ich gleich her und es heißt Breite. Und Hoppla, nicht das Klicken und dann das Zurücksetzen. Sehen wir uns die Breite an. Ich kann ihm eine Breite von 60% geben. Also ich weiß nicht, was vor sich geht. Also 60 und geben Sie Prozent ein. Da hast du es. Jetzt wird es die Breite auf 60% begrenzen. Wie ich bereits erwähnt habe, können Sie Pixel verwenden, Sie können Prozentsätze verwenden, Sie können alle möglichen dieser verschiedenen Werte direkt hier in Webflow verwenden. Aber für diesen Fall werden wir 60 verwenden. Und für unsere Heldenbilder können wir eine volle Breite verwenden. Was wir also tun können, ist zu unserem Design zurückzukehren . Mal sehen, wo wir sind. Und wenn ich das gesamte Feld auswähle, siehst du, dass es 515 mit 450 ist. Also, wenn wir zurück zu hier gehen, kann ich vielleicht etwas anderes nehmen, wie fünf vor zwei und vielleicht 388. Da hast du es, so etwas. Und in unserem Heldenbild, weil das fertig ist, schauen wir mal mit dem Button, ich weiß nicht, warum mir das diesen Spielraum gibt. Schauen wir uns also Heldeninhalte an. Hat es den Spielraum? Nein. Also hier sind unsere Wrapper oder vielleicht können wir sie in der Mitte positionieren. Da haben wir's. Jetzt wird der Text in der Mitte unseres Bildes sein. Also mit unserem Bild werde ich auf Control K drücken und Bild eingeben. Für mein Bild würde ich dieses Auto benutzen wollen. Da hast du es. Geben Sie nun noch einmal Control K ein, geben Sie das Bild ein, noch einmal, wählen Sie das Bild aus. Und mal sehen, wir werden das und Control K noch einmal brauchen , IMG, wir brauchen ein anderes Bild. Und dieses Bild wird dieser graue Kreis sein , der dieser ist. Da haben wir's. Und jetzt können Sie anhand des HTML-Codes sehen, dass sie unten positioniert wurden. Und das möchte ich nicht wirklich tun. Also, was ich tun werde, ist mein Heldenbild zu verwenden. Und jetzt werden wir über Positionierung sprechen. Wenn ich also ein bisschen nach unten scrolle, haben wir hier die Position statisch statt statisch, die einfach da ist. Ich werde es auf relativ setzen. Und relativ ermöglicht es Ihnen im Grunde, Ihren Code zu zeigen. Denken Sie daran, dass Webflow den Code ständig im Hintergrund schreibt , wenn wir mit dem Entwerfen beginnen Er verweist auf Code eine bestimmte Aufgabe, die Sie ausführen möchten. Für diesen Fall möchte ich dieses Bild auswählen. Und statt, lassen Sie uns sehen, statt der Position statisch, werde ich sie auf die absolute Position setzen. Und Sie können sehen, dass es ein absolutes bis heldenhaftes Bild ist. Wo auch immer das Heldenbild ist, es wird absolut für diese Position sein. Also hier werde ich in diesem Fall mein blaues Bild in die obere linke Ecke legen und dann kann ich die Positionierung in einer Sekunde anpassen. Aber ich werde auch dieses graue auswählen und auch als absolut ausgewählt . Aber in diesem Fall die untere rechte Ecke, so. Und jetzt kann ich es auswählen und gleich hierher kommen und vielleicht kann ich diesen blauen Kreis anpassen. Mal sehen. Lass es uns tatsächlich zurücksetzen. Und vielleicht kann ich es hier anpassen und vielleicht sogar so etwas hören. Und Sie können sehen, wie einfach das mit diesem zu tun ist. Ich werde hier vielleicht nicht zu viel experimentieren. Und ich denke, wir können dort einen Tag ausklingen lassen. Und wenn Sie die Größe anpassen möchten, einfach so an ziehen Sie von der Ecke aus. Und dann kann ich es vielleicht leicht nach unten bewegen , leicht schubsen. Da haben wir's. Wir haben unseren fertigen Abschnitt. Denken Sie daran. Wir werden es etwas später anpassen , wenn es um Responsive geht. Und dieser Abschnitt ist, mal sehen, 100 von oben. Also wird es das respektieren. Wenn ich also eine Vorschau anschaue, sieht unsere Website bisher so aus. Wir haben hier keinen Link weil wir eine Seite erstellen werden, schreiben Sie etwas später. Gleiche Geschichte mit diesen Seiten. Sobald wir mit der Homepage fertig sind, werden wir diese Seiten übergehen und sie positionieren. Und was ich vergessen habe, dir zu sagen, bezieht sich auf meine Positionierung. Also werde ich in nur einer Sekunde darauf eingehen. Aber vor allem beim Tablet wird alles kaputt gehen. Also werden wir uns etwas später damit befassen , wenn wir reagieren. Aber lassen Sie uns vorerst zurück zu hier gehen. Und was ich hier machen werde ist mit diesem ausgewählten Bild oder noch besser mit diesem Bild, oder noch besser mit diesem Bild mit diesem blauen ausgewählt wurde. Und ich werde diesen finden, der Z-Index ist. Und im Grunde hast du deinen X-Index , der oben und unten ist. Sie haben Ihren Y-Index, der links und rechts ist. Und andersherum, die Y-Indizes, der obere und der untere Max-Index sind links und rechts. Da haben wir's. Und der Z-Index ist vorne und hinten. Also im Grunde, als würde man Dinge noch einmal in 3D betrachten, weil HTML die Dinge übereinander legt und Abstände egal sind. Deshalb haben sie diesen Z-Index erstellt. Also, damit wir darauf hinweisen können. Hier kann man also sehen , dass dieses Bild von Sean irgendwie durchscheint. Also wähle ich dieses blaue aus, setze den Z-Index vielleicht auf fünf. Und jetzt werde ich wissen, dass es ganz vorne mit diesem Autobild steht. Und ich werde dasselbe für diesen tun. Also benutze einfach Nummer fünf, drücke die Eingabetaste und jetzt weiß ich, was auch immer passiert. Es wird vor diesem Bild sein. Aber was die Positionierung angeht, da das Hauptbild relativ ist und diese beiden Bilder absolut sind, werden sie dort positioniert. Also los geht's. Das ist unsere Heldenabteilung. Und ich nenne es gleich hier. Denn wenn ich meinen Hero-Wrapper auswähle, kannst du sehen, dass die Flexbox horizontal positioniert ist. Wenn ich es auf vertikal umstelle, ist das wieder großartig, um zu reagieren. Sie können also sehen, wie einfach es ist, das anzupassen. Aber wie gesagt, wir werden es etwas später anpassen und mit den Einstellungen herumspielen. Im Moment werden wir nur diese Abschnitte durchgehen . Und wie gesagt, das ist unser Sektionsheld. Und in der nächsten Lektion befassen wir uns mit dem Breitenabschnitt über uns, und wir sehen uns im nächsten Video. 170. Wer wir sind Abschnitt: Ordnung, lassen Sie uns jetzt den Abschnitt „ Wer wir sind“ erstellen. Und ich wähle den Körper aus. Denn wenn ich diesen Abschnitt erstelle, erhalte ich eine Fehlermeldung , weil ich keinen Abschnitt in diesen Abschnitt einfügen kann. Wählen wir also die Körpersteuerung K aus, geben C für diesen Abschnitt ein. Wählen Sie den Abschnitt aus, und ich gebe ihm eine Kombiklasse, die zeigt, wer wir sind. Sagen wir mal. Anstelle dieses Steuerschlüssels div. Für das Div wähle ich die Kombinationsklasse des Containers aus. Da haben wir's. Und für diesen gebe ich ihm jetzt eine obere Marge von, sagen wir 200. Und ich werde es von hier aus auf 200 erhöhen. Denn wenn ich Sie zurück zu Adobe XD bringe, können Sie sehen, wenn ich den Mauszeiger bewege, dass zwischen diesen beiden Abschnitten 200 liegen. Wir haben 100 zwischen dem und der Navigation. Also brauchen wir das jetzt. Wenn ich also diesen Abschnitt auswähle und diesen Container auswähle, brauchen wir, dass wir ein weiteres Div erstellen, also Control K, gib den Def-Block ein. Und wir werden es nennen, sagen wir mal, wer wir sind. Rapper, so etwas in diesem Container. Und für diesen Rapper werde ich das Flex-Display einschalten , weil ich Control K erstellen und ein Bild einfügen werde . Und dieses Bild wird dieses Bild sein. Da hast du es. Ich wähle dann aus , wer wir sind, Rapper. Und drinnen erstellen wir ein weiteres Content-Div. Und lassen Sie uns gestalten , wer wir sind, zufrieden. Und in diesem Inhalt können wir vielleicht, mal sehen, eine H2-Überschrift eingeben und H2 eingeben. Mal sehen, ob es in den Einstellungen gespeichert ist. Also alle H2-Einstellungen. Ich weiß es nicht. Warum wusste ich es nicht einfach nicht. Also verstehe ich es nicht. Also H12 genau hier, es hat es aus irgendeinem Grund nicht gespeichert. Also, wenn ich hier Poppins wähle und die Farbe von H2 wähle, ist das 132. Und mal sehen, ich glaube, wir sind bei 48 oder so, 30 bis 56. Lassen Sie uns die Todesfälle von 56 behalten. Alle H2-Überschriften. Da hast du es. Jetzt haben wir das. Lassen Sie mich also meinen Text auswählen und exklusive Autos von Spotter nehmen. Da haben wir's. Bevor wir weitermachen, kann ich meinem Bild vielleicht hier einen Rand geben , damit ich es gleichmäßig verteilen kann . Noch besser. Wer wir sind, unser Wrapper, wir können dasselbe tun. Also klicken Sie hier, es wird sie genau dort positionieren. Und dann Bild, ich kann vielleicht 80 eingeben, so etwas. Und dann brauchen wir das nicht einmal. Vielleicht können wir es nach links positionieren. Da hast du es. Und jetzt haben wir die 80 Pixel. Wenn ich den Mauszeiger über mein Bild bewege und den Mauszeiger hier rechts bewege, können Sie sehen, dass wir hier den AD-Pixelabstand für den Rand haben . Jetzt drücke ich in unserem Inhalt Strg K und gebe einen Textblock wie diesen Gib ihm eine Klasse von Textblöcken wie diesem. Und ich werde mit Leidenschaft und Hingabe meinen Texttyp wählen , Control K. Und schauen wir mal, ob wir ein Design für den Absatz haben. Noch einmal, nein, ich weiß nicht, warum das passiert. Also wähle Poppins gleich hier aus. Lassen Sie uns also Größe 16 wählen, wählen Sie die Farbe von H3 und Absatz. Da haben wir's. Und was die Höhe angeht, schauen wir uns an, wo wir mit Adobe XD stehen, es sind 26. Also komm rüber zu 26. Da haben wir's. Und ich wähle einfach meinen Inhalt hier aus. Und ich wähle nur aus und füge ein. Sie können aus Adobe XD einfügen , weil ich zwei Monitore habe. Ich kopiere einfach den Text aus unseren Designs und füge ihn ein. Also, wenn ich dich zu Adobe XD mitnehme, hast du es. Also doppelklicke einfach auf copy Control C und gehe zurück zu Webflow und füge es einfach ein. Das war's also im Grunde für diesen Abschnitt. Jetzt müssen wir es nur noch ein bisschen stylen. Also zuerst, wen wir Wrapper nennen, weil es die Flexbox ist. Ich klicke gleich hier, wodurch mein Inhalt zentriert wird. Und jetzt gebe ich diesem Bild eine Klasse. Also werde ich es umbenennen in das, was wir sind. Img, also, nur damit wir wissen, was es ist. Und hier wollen wir sehen, was wir tun können. Also vielleicht können wir das geben. Er hatte t2 verlobt. Ich gebe ihm eine separate Klasse. Also geben wir ihm einen Th2. Wer wir sind. Nun, lass uns sehen. H2. Vielleicht dunkel, weil du es auf unserer gesamten Website wiederverwenden wirst. Und was die Marge angeht, ich gehe mit Null. Für den unteren Rand entscheide ich mich vielleicht für 24. Hier für diesen Textblock kann ich eine Kombiklasse hinzufügen, die zeigt, wer wir sind. Da hast du es. Und hier füge ich einen weiteren unteren Rand von 24 hinzu und der Absatz ist in Ordnung. Da haben wir's. Jetzt haben wir diesen Abschnitt abgeschlossen. Und Sie können sehen, wie super einfach das war. Wenn ich also hier klicke, können Sie jetzt sehen, dass wir diesen oberen Bereich mit der Schaltfläche haben. Und jetzt haben wir diesen unteren Bereich. Und wenn ich auf ein Tablet umgestiegen bin, werden wir diese beiden natürlich austauschen und das Bild wird nach oben gehen. Der Text wird nach unten gehen. Es wird also gut funktionieren. Und hier haben wir diese Summe. Ich habe tatsächlich einen Fehler gemacht , weil ich anstelle des Menüsymbols das Kleidungssymbol eingefügt habe. Also werde ich das reparieren. Gehen wir zurück zu hier. Gehen wir zurück zu unserer Navigationsleiste, geben Sie die Eingabetaste ein, gehen Sie hierher und wählen Sie unser Symbol aus. Lassen Sie mich tatsächlich zu X d gehen, und lassen Sie mich tatsächlich hierher gehen. Und mal sehen, wählen Sie unser Suchmenü. Da haben wir's. Menu und vielleicht können wir dieses benutzen. Ich denke, es wird gut werden. Da hast du es. Lassen Sie uns hier auswählen, ob Sie es einfügen möchten. Und geben wir ihm einen Namen für das Menü. Icon. Geben wir ihm die Farbe, die Sie verwenden, eine dunklere Farbe. Da haben wir's. Und ich werde es hier in die Mitte stellen. Es wird also viel einfacher für mich sein , es in meine Symbole einzufügen und es ganz unten unter dem Schließsymbol zu positionieren . Da haben wir's. Stellen Sie sicher, dass es sich in der Mitte befindet, und drücken Sie Strg E, um es in Assets zu exportieren. Da haben wir's. Und jetzt, wenn ich zu meinem Ordner wechsle, lass mich einfach herausfinden, wo er ist. Da haben wir's. Und ich gehe zu meinen Icons und wähle dann meinen Webflow aus. Gehe zu meinem Vermögen. Finde das Menüsymbol. Da haben wir's. Hübsch. Und dann klicken wir für das Menüsymbol genau hier, um es zu erweitern. Ich weiß also nicht, warum es mir so zeigt, aber es spielt keine Rolle. Gehen wir einfach zum Menüsymbol hier und fügen es hier hinzu. Da haben wir's. Und was ich tun kann, ist es vielleicht ein bisschen größer zu machen. Also Breite, vielleicht können wir 16 mal 16 oder 24 mal 24 Pixel nehmen. Da haben wir's. Sieht toll aus. Wähle das aus, werde es los. Aus irgendeinem Grund. Sie können sehen , dass es es nicht sofort loswird. Es ist also wirklich nervig. Menübild. Werde es los. Da haben wir's. Und ich gebe dieses Symbol „In Menü umbenennen“. Da haben wir's. Jetzt sieht es toll aus. Wenn ich jetzt zu meiner Instanz zurückkehre, den Desktop auswähle, auf Vorschau klicke und gehe zum Tablet. Jetzt haben wir dieses Menüsymbol. Wenn ich also klicke, kannst du sehen, dass das alles jetzt so funktioniert, wie es sollte. Also geh zurück zu ihm und geh zurück. Im nächsten Abschnitt kehren wir also zu XD zurück, um Ihnen zu zeigen, wo wir mit unseren Karten tatsächlich anfangen werden. Also wie gesagt, und ich habe es genau hier. Wir werden diese Karte entwerfen. Wir geben diese Informationen ein und fügen diese Bilder etwas später hinzu. Also werde ich dich dort sehen. 171. Autoauswahl Abschnitt: Okay, lass uns weitermachen und diesen Abschnitt so gestalten , dass du sehen kannst, dass wir den Titel in der Mitte haben, und dann haben wir diese drei Karten mit der Bot-Schaltfläche im Hintergrund unten. Es tut mir leid. Lassen Sie uns Sie also auf unseren Workflow umstellen, oder? Also lass mich meinen Ordner schließen , damit es mich nicht ablenkt. Ich wähle meinen Körper aus und drücke Control K. Ich füge div, div block an. Und für diesen Div-Block, was ich ihn nennen kann, ist eigentlich nein, lass uns ihn loswerden. Entschuldigung, der Typ Control K wurde zuerst unterteilt, geben Sie ihm eine Klasse von Abschnitt und Auto oder Auswahl. Auswahl. Das wird unsere Abteilung sein. In diesem Div. Für den Container. Da haben wir's. Und in diesem Container können wir vielleicht einen Wrapper oder etwas Ähnliches erstellen. Aber lassen Sie uns zunächst einen Spielraum von 200 geben, damit wir ihn von diesem Abschnitt, diesem, wegschieben können. Und in diesem Container kann ich Control K type in div, div block eingeben. Und das wird unser Wrapper für Autokarten sein. Da haben wir's. Also in diesem Container werde ich zuerst Control K eingeben und Überschrift eingeben. Ich werde dafür das H2 verwenden, und ich werde alle Überschriften verwenden. Da haben wir's. Schließlich sind wir jetzt dabei und ich werde nur das H2-zentrierte hinzufügen. Da haben wir's. Und innerhalb des H2-Centers werde ich dies und das loswerden. Da haben wir's. Und ich werde dafür sorgen, dass es so zentriert ist. Und drinnen werde ich quasi unsere exklusive Kollektion eintippen . Da haben wir's. Und ich werde es einfach über meine Wrapper-Karten legen. Und wenn ich meinen Bereich auswähle, kannst du sehen, dass wir jetzt 200 für den Rand innerhalb des Content-Rapper haben . Was ich tun werde, ist , diesen Content-Wrapper etwas später in ein Raster umzuwandeln . Aber bevor ich das mache, drücke Control K und gib div ein, um ein weiteres Div hinzuzufügen , das meine Elemente beherbergen wird . Und dieses Div, ich gebe ihm einen Namen oder eine Fahrzeugkarte. Da hast du es. Also in meine Fahrzeugkarte werde ich tatsächlich all meine Informationen eingeben. Schauen wir uns an, was wir tun können. Wir können sagen, in der Fahrzeugkarte kann ich auf Control K drücken und Bild eingeben. Und belassen wir es vorerst einfach dabei. Autobild, weil es ein Bild aus dem Container ziehen wird . Aber lassen Sie uns, schauen wir mal, was wir tun können. Also für hier kann ich Autobilder verwenden und vielleicht drei verschiedene Bilder auf dem Guinea hinzufügen Hurra Khan war eins. Lassen Sie mich es also tatsächlich von hier auswählen. Also, wer das Konto ist, wird hinzugefügt. Dann schauen wir mal, die Eskalation wird hinzugefügt. Und Lucid Air wird auch hier drinnen hinzugefügt. Weil wir später Bilder hinzufügen werden wenn wir tatsächlich anfangen, mit unserem CMS herumzuspielen. Aber für den Moment werden wir es einfach hier platzieren. Also Autobild, ich drücke diese Uhr, wähle Bild und ich wähle ein Twitter-Konto aus, nur damit wir sehen können, dass es offensichtlich einfach riesig ist , weil wir all diese zusätzlichen Elemente hinzufügen müssen . Und um das in den Autokarten zu tun, werde ich ein weiteres div Control K erstellen. Stell es dir einfach wie einen Ordner vor, gib div ein. Und diesen Div-Block können wir so etwas wie Autokarteninformationen, Karten, Karteninformationen benennen . Und innerhalb dieser Informationen kann ich vielleicht in Alter drei hinzufügen, die Pin-Überschrift H3 vom Typ K steuern und sehen, was wir hier haben. Also alle H3-Überschriften, es hat immer noch nicht die Informationen genommen. Also nehmen wir Poppins. Ich weiß nicht, warum es mir keine Probleme bereitet hat, als ich das zum ersten Mal entworfen habe, aber jetzt, aus welchem Grund auch immer, tut es das einfach. Also hier haben wir diese drei Farben, also lass uns das machen. Also färbe h drei und Absatz. Da haben wir's. Und ich wähle aus und das nur , damit ihr sehen könnt, was ich mache. Und was ich tun werde, ist alle drei Absätze zu verwenden. Das ist in Ordnung. Hier werde ich eintippen Lamborghini würde vorkommen. Da haben wir's. Und genau hier drücke ich Strg C, Strg V, um es einzufügen. Und dieses H3 wird H drei blau sein. Und alles was ich tun möchte, ist es einfach auf die blaue Farbe umzustellen. Und diese blaue Farbe wird tatsächlich für den Preis sein. Also lass uns mit 1949990 weitermachen, tut mir leid. Und dann werden wir endlich einen weiteren Div-Block darin erstellen einen weiteren Div-Block darin denn wenn ich dich auf mein Design umstelle, falls du dich erinnerst, haben wir dieses Jahr Kilometer erstellt und ich gehe um das auszuwählen und es als Kombiklasse zuzuweisen. In diesem Jahr hat der Kilometer die Polsterung drauf und es hat eine Entfernung von 24. Also genau das werden wir hier tun. Also kontrolliere K noch einmal, indem du div if block eintippst, ich gebe ihm die Klasse, die nur kopierte Jahreskilometer sind . Und lassen Sie uns zwei Texte hinzufügen. Also Control K tippe Text ein. Und mal sehen, Textblock vielleicht. Ich denke, ja, Textblock, gib ihm hier eine Klasse von Textblöcken. Textblock, los geht's. Dieser erste wird 2021 sein. Da hast du es. Ich drücke Control C, Control V, um eine weitere zu erstellen. Und das wird für die Kilometer sein. Gehen wir also mit 63 bis 4 km. Und ich tausche sie einfach um und wähle dann deine Jahreskilometer aus. Komm gleich hier zum Display. Klicken Sie hier für die Flexbox und klicken Sie, um in der Mitte zu sein und verteilen Sie sie dann einfach so. Da hast du es. Jetzt müssen wir nur noch mit den Einstellungen unserer Elemente herumspielen. Was ich also mit H drei Blau hier machen kann , ist, es vielleicht anstelle dieses Randes mit Null zu geben . Unterer Rand, wir können 16 oder so nehmen. Mal sehen. Oder vielleicht Padding, wir können es 16 von Pairing geben. Da haben wir's. Und dieses H drei, nennen wir es h three dark. Vielleicht. Hier werden wir das entfernen, und hier werden wir es entfernen und vielleicht auch 16 geben. Aber was wir jetzt tun können, ist ja, ja, gib es einfach. Und für den Namen der Autokarte gebe ich ihm tatsächlich eine Polsterung von 24. Denn wenn ich dich zurück zu XD bringe und meinen Autokartentext auswähle, in diesem Fall 24 hier, 24, 24. hier. Um das in Webflow zu machen, wähle aus und gehe dann 24 hier, vier hier. Und endlich 24 hier. Und da hast du es. Jetzt, wo unsere Karte fertig ist, werden wir ihr tatsächlich eine Klasse geben wer das Auto so mag und auf den Autokarten, Rapper, was ich tun werde, ist das Display von Inline in ein Raster zu verwandeln. Und Grid funktioniert so. Sie haben Ihre Spalten und Sie haben Ihre Zeilen. Nun, das sind die Spalten im Moment, wir haben nur zwei Spalten. Aber wenn ich gleich hierher gehe und dieses Plus eintippe, haben wir jetzt drei Spalten und jetzt haben wir zwei Zeilen. Sie können sehen, dass dies die Zeile Nummer eins ist, diese großen drei Spalten. Und jetzt ist das die zweite Zeile, diese drei kleineren Spalten, um sie loszuwerden, weil wir sie nicht brauchen. Ich werde einfach hier in den Zeilen auf Entfernen klicken. Und jetzt haben wir nur noch eine Spalte, ganz einfach. Du kannst also hier mit den Einstellungen für das Raster und für die Größen und so weiter und so weiter herumspielen . Aber bevor wir etwas tun, haben wir die Fahrzeugkarte, die sich in der einen Spalte unseres Rasters befindet. Ich drücke Control C, Control V, Strg V, um es dreimal einzufügen. Und bevor ich weitermache, möchte ich als Nächstes meine Autokarte bearbeiten, ich möchte ihr diesen Hintergrund geben. Also Autokarte gehe zu meinem Design für den Hintergrund. Ich kann die Farbe wählen und ich kann meine weiße Farbe wählen. kannst du dir hier ansehen. Wählen Sie also einfach Ihr reines Weiß aus. Da haben wir's. Und es wird von jeder Seite in den Farben gefärbt. Nun, was wir hier haben ist der abgerundete Eckradius. Also wähle ich die Schulden und die Tipphilfen aus. Da haben wir's. Wir haben jetzt die Acht für den Eckradius und für Bilder, wählen wir diesen ersten aus, z. B. weil hier alle genau gleich sind für dieses Bild, denke ich, wir werden habe die Eskalaten. Also klicken wir hier mit der rechten Maustaste. Duplizieren Sie den Klassentyp in eskaliert. Da haben wir's. Ich werde das Bild sofort ersetzen , damit es nicht verwirrend ist. Da haben wir's. Und hier für mein Bild, was ich für den Radius tun werde, ist hier zu klicken. Für die linke Ecke gebe ich acht ein. Für die rechte Ecke tippe ich acht ein und sie wird durch diese beiden ersetzt, aber nicht durch diese , weil ich sie ändere. Wenn ich also meine Eskalation auswähle und dasselbe tue, also gib Hilfe ein, tippe acht ein. Und es wird diese Ecken so umrunden. Und genau das will ich. Aber das Letzte ist dafür. Also du kannst hier mit den Jahren, Kilometern sehen, was ich machen werde ist nur vielleicht, mal sehen, vielleicht kann ich die Paarung hier oder 24 vielleicht einbauen . Und ich denke, das wird gut funktionieren. Oder vielleicht sogar besser mit 16, weil wir hier auf dieser Seite nicht so viel Abstand brauchen . Und da hast du es. Unsere Karten sind fertig. Aber noch besser, was ich tun kann, ist hier Null einzugeben , weil ich das erreichen möchte. Und wenn ich statt Textblöcken tippe, nenne ich es Car Card Year. Und wenn wir es zurück zum Design nehmen, sehen wir uns das hier an. Da haben wir's. Wir haben einen Stapel mit einer Entfernung von 24 Metern. Wenn ich also zu unserem Design zurückkehre, lassen Sie uns hier Q nehmen. Und für die Textblöcke können wir dieses Tech-Blog-Autojahr auswählen und einfach eine Marge von 24 hinzufügen. Da haben wir's. Und jetzt das, wir werden es so einrichten, dass es so ist, dass es hier in einer Reihe steht. Und dieses Jahr wurde Kilometer, aus welchem Grund auch immer, nicht hierher übersetzt. Also lass uns dem einen Kurs geben. Also das war Textblockkarte, Kartenjahr. Wenn ich es also hier hinzufüge, Kartenkartenjahr, wird es angewendet. Wählen Sie diesen aus. Karte, Kartenjahr. Es wird es anwenden. Da haben wir's. Und eine letzte Sache , die wir noch tun müssen, ist, dies einfach auszuwählen. Also Cadillac eskaliert, das ist der Preis. Das wird die Eskalation des Glücks sein. Ich denke, so schreibst du es. Mit zwei L eskalieren 2020 und das wird der Kilometerstand sein. Das wird also 2020 sein. Und das wird der Kilometerstand sein. Da haben wir's. Und schließlich wird das Lucid Air sein. Lass uns weitermachen und ersetzen. Lassen Sie uns zunächst genau hier klicken. Duplizieren Sie die Klasse, nennen Sie sie Lucid für dieses Bild und ersetzen Sie das Bild einfach hier. Da haben wir's. Und für den Preis kehren wir zu XD zurück. Mal sehen. 2022 ist das Jahr. Das ist der Preis. Das werden 22. 22, los geht's. Und für das Jahr 40 km, tut mir leid, wir können hierher zurückkehren und Schulden eintragen. Also los geht's. Jetzt haben wir unsere Karten. Und das Letzte, was ich eigentlich tun möchte, ist zuerst all das zusammenklappen und dann unsere Karte so auswählen. Ich wähle meine Karte und lege dann genau hier einen Rand an. Also klicke ich auf den Rand. Anstelle von Schwarz wähle ich diese Farbe oder noch besser diese Farbe und reduziere sie dann ganz auf Null, damit sie nicht sichtbar ist. Das ist also unser Standardstatus. Und jetzt lasst uns einen Horrorstaat schaffen. Und alles, was wir tun müssen, ist , es einfach wieder auf 100 zu bringen , einfach so. Wenn ich jetzt auf Vorschau klicke, funktioniert es hoffentlich. Da haben wir's. Aber aus welchem Grund auch immer , es bleibt genau hier. Mal sehen, wie es heißt. Mach das. Da haben wir's. Also wenn ich das entferne, klicke jetzt auf Vorschau und bewege den Mauszeiger. Sie können sehen, dass alles einwandfrei funktioniert. Aber jetzt haben wir ein kleines Problem, weil das zu nah ist und diese zu nahe beieinander liegen. Wenn wir also zu meinem Arbeitsablauf zurückkehren und sehen, was wir hier tun können. Vielleicht können wir dem Wrapper der Autokarten einen oberen Rand von 64 hinzufügen . Da hast du es. Und schließlich können Sie auf dieses Symbol klicken, um das Raster selbst zu bearbeiten . Hier haben wir diesen FR , der Bruchteil des Netzes. Und wie Sie sich das vorstellen können, ist, dass Ihre Gitterspalten standardmäßig zu gleichen Teilen geteilt sind, also hier haben wir drei Brüche, also drei gleiche Brüche. Und Sie können diese Brüche anpassen, indem Sie direkt hier klicken, sie anpassen , eine Spalte kurzfristig machen, eine Spalte vergrößern. Aber was ich in unserem Fall tatsächlich tun werde , ist zu XD und C zu kommen. Also haben wir 38, also müssen wir nicht unbedingt das gleiche Ergebnis erzielen. Aber wenn es 24 gewesen wären, vielleicht wegen der Lücke zwischen diesen Spalten, drücken Sie die Eingabetaste, Sie können sehen. Also vielleicht können wir 32, sogar 38 haben. Mal sehen. Also ja, ich finde, das sieht ganz nett aus. Vielleicht ist es schon zu spät. Ich denke nicht, dass 38 absolut notwendig sind. Da haben wir es, weil meine Bilder dadurch etwas kleiner aussehen. Und Sie können sehen, dass die Hover-Effekte so funktionieren, wie sie sollten. Und da hast du es. Jetzt haben wir das erstellt. Nun natürlich, weil dies unser dynamischer Inhalt sein wird. Sobald wir diese Seite tatsächlich fertiggestellt haben, werden wir anfangen, über diesen dynamischen Inhalt zu sprechen , bevor wir zur nächsten Seite übergehen , da wir ihn natürlich für die nächsten Seiten benötigen . Aber lassen Sie uns vorerst schnell sehen, was wir getan haben. Also hier haben wir unsere Navigation. Wir haben unseren Button und er funktioniert. Wir haben diese beiden Abschnitte. Dann haben wir diesen Abschnitt mit unserem Bild und dieser Breite oder dem Text. Und schließlich haben wir unsere exklusive Sammlung, wenn wir den Mauszeiger bewegen, sie funktioniert genauso, wie wir es uns in Adobe XD vorgestellt haben. Ich bin also sehr zufrieden damit, wie das aussieht. Im nächsten Abschnitt werden wir darüber sprechen, was wir anbieten. Und wir sehen uns im nächsten Video. 172. Angebotsbereich: Ordnung, lassen Sie uns dort weitermachen, wo wir aufgehört haben und mit unserem Angebotsbereich beginnen. Drücken Sie also Control K für den Körpertyp im Abschnitt. Und ich werde eine Abschnittsklasse hinzufügen. Und vielleicht unser Angebot. Da haben wir's. Und in diesem Steuerelement geben Sie K div ein. Geben Sie ihm für das Div die Klasse C des Containers. Da haben wir's. Und für unseren Abschnitt, mal sehen, vielleicht können wir ihm einen Spielraum von 200 Sekunden geben , damit wir ihn von diesen unten im Container Control K auf div verschieben können diesen unten im . Für das Div werde ich ihm eine Angebotsklasse hinzufügen. Unsere Angebotshülle. Da haben wir's. Und in diesem Wrapper werde ich vielleicht sehen, was wir tun können. Vielleicht können wir, mal sehen, verwenden wir dieses H2. Also drücken Sie Control C genau hier, schließen Sie alles und drücken Sie Control D genau hier in unserem Container. Und es wird es einfach direkt unter unsere Verpackung legen. Stell es einfach hier hin. Und ich werde einfach die Texte von dem, was wir anbieten, so verwenden . Da haben wir's. In unserer Verpackung. Was ich tun werde, ist vielleicht daraus eine Flexbox zu machen. Denn denken Sie daran, wenn wir Sie hier zu unserem Design zurückbringen , scrollen Sie zurück zu dem, was wir anbieten. Wir haben immer noch diese beiden Spalten, genau wie wir es mit dem Helden gemacht haben und mit was auch immer. Also hier in dieser Kolumne werden wir diesen Abschnitt haben. Lassen Sie mich das schließen, damit es nicht verwirrend ist. Also hier in unserem Angebot haben wir vier angeboten und wir haben unser Image nebenbei. Das ist also genau das Gleiche was wir hier mit unserem Design machen werden. Also drücken wir Control K, geben Sie def ein und fügen ein Div hinzu. Und dieses Div wird so etwas wie unser Angebotsinhalt sein . Da haben wir's. Und vielleicht können wir auf Control K klicken, ein Bild eingeben und das Bild für das Angebot hinzufügen, das ist dieses. Da haben wir's. Da wir daraus eine Flexbox gemacht haben, stellen Sie sicher, dass wir sie zentriert und verteilt haben. Also haben wir die gleiche Positionierung zwischen unseren Elementen platziert. Jetzt haben wir das und wir haben das. Schließlich kann unser Angebotsrapper eine Marge von 64 haben. Vielleicht. Da haben wir es, damit wir es vom Text unterscheiden können. Und wenn ich Sie hierher zurückbringe, haben wir, wie Sie sehen, immer noch diese 64 Texte. Also innerhalb unseres Angebotsinhalts möchte ich z. B. sehen, was wir tun können. Vielleicht erstelle, vielleicht erstelle ich drei verschiedene Nachrichten. Denn wenn ich es hier nehme, kann das vielleicht ein Div sein und der gesamte Inhalt sollte reingehen. In diesem einen Div können wir also drei weitere Divs haben. Also 12.3 und in jedem von ihnen kann ein Div sein, das dieses enthalten wird, das den Stapel von 16, also Icon und den Text und den Text darunter hat also Icon und den Text . Also lasst uns es so strukturieren. Wenn ich also genau hier zu meinem Workflow zurückkehre, haben wir unseren Angebotsinhalt, und das ist dieser. Und innerhalb der Schulden kann ich vielleicht Control K drücken und div eingeben. Und in diesem Div, das ich mal sehen werde, bieten wir Garantie an. Bieten Sie Garantie an. Was ich da hineinlegen werde, ist vielleicht ein Bild. Für das Bild verwende ich das Symbol von, mal sehen, mal sehen, mal sehen, wo wir uns für diesen Stapel befinden. Aber ich brauche das blaue Abzeichen. Es sieht so aus, als ob es es nicht exportiert weil sie nur diese weiße Version davon haben. Lassen Sie uns das vorerst einfach angeben, bis wir zu X d gehen, ausgewähltes Garantiesymbol, Badge, Blau, Control X-Exporte. Da haben wir's. Und jetzt lass mich es in meinem Ordner finden. Da haben wir's. Wir sind bei icons. Und mal sehen, ich kann hier auf meine Icons klicken. Das war also Garantie, Abzeichen, Symbol, Blau, Drag & Drop. Da haben wir's. Lass mich das schließen, damit es uns nicht stört. Ersetzen Sie das Bild durch dieses. Und jetzt ist es drinnen. Also wenn ich zurück zu hier gehe, hier haben wir die angebotene Garantie und hier haben wir dieses Bild. Also werde ich so etwas wie Krieg eingeben . Ist gelaufen. T, Symbol, blau. Los geht's und wir entscheiden , dass ich einen Text brauche , der ein H3 sein wird. Also Control K, Überschrift eingeben, H3 auswählen. Mal sehen, ob es gespeichert ist. Meine Einstellungen, alle h3-Überschriften. Ja, war es. Endlich, herrlich. Und Sie können die Einstellungen direkt hier sehen. Und was ich tun werde , ist vielleicht eine Kombiklasse aus H3 und Dark hinzuzufügen . So, nur damit wir wissen, was wir haben. Und ich werde dieses Lager vorerst loswerden , weil ich es in diesem Fall nicht brauche. Und hier schreiben wir so etwas wie eine erweiterte Garantie. Da haben wir's. Jetzt werden wir diese angebotene Garantie nutzen und daraus eine Flexbox machen. Stellen Sie sicher, dass es zentriert ist. Und ich wähle hier mein Symbol aus, Garantiesymbol blau, und gebe ihm einen Spielraum von 16, denn das hatten wir, wenn Sie sich erinnern, in unserem Stack, in unserem Design, statt in unserem Angebotsinhalt, was ich tun kann ist vielleicht, mal sehen. Vielleicht will ich das nicht tun. Vielleicht kann ich das umbenennen , um einen Titel anzubieten, vielleicht. Also wurde die Klasse umbenannt, um einen Titel anzubieten. Da haben wir's. Und ich werde hier ein weiteres Div erstellen. Lege das oben drauf, dann füge diesen Titel einfach in dieses Div und gib dann dieses Angebot ab. Angebot Schauen wir uns die Garantie an. Bieten Sie Garantie an. Innerhalb dieser Angebotsgarantie werde ich einen Textblock, K, Textblock einfügen. Da haben wir's. Und hier gebe ich ihm eine Klasse von Textblock. Und lassen Sie mich nur ein paar Texte nehmen. Da haben wir's. Und hier für diesen Textblock kann ich einen Titel anbieten. Vielleicht kann ich es ein bisschen runterdrücken . Mal sehen, was wir tun können. Vielleicht können wir es mit 24 bewerten. Wählen Sie also unseren Angebotstitel aus und es wird bis zum unteren Rand von 24 angezeigt. Ich denke, das wird gut funktionieren. Hier haben wir unsere Angebotsgarantie. Was ich also mit diesem Abschnitt machen kann, ist der Inhalt unseres Angebots, wiederum der Hauptbestandteil ist, der ihn an Ort und Stelle hält. Was ich vielleicht tun kann, ist, daraus einen Stapel zu machen, aber vielleicht muss ich das nicht einmal. Schauen wir es uns an. Wenn es also wie Control C, Control V, Control V trifft , wird es dreimal eingefügt, was meiner Meinung nach in Ordnung ist, weil unser Offer-Wrapper Remember selbst eine Flexbox ist. Das ist also nur das Kind unserer Flexbox, dieser Angebotsinhalt. Also hier werde ich die Garantie anbieten, ist in Ordnung. Das nächste wird Wartung sein. Mal sehen, was ich hier tun kann. Also biete Garantie an, ich werde gleich hier klicken. Duplizieren Sie die Klasse. Anstelle der Garantie gebe ich Wartung ein. Und dann wähle ich die Texte hier aus. Also für den Titel ist in Ordnung, aber das, ich werde es ersetzen, das Symbol ersetzt und wir müssen nur das Wartungssymbol finden. Also lass uns sehen, wo es ist. Da haben wir's. Und anstatt das Garantiesymbol zu blühen, dupliziere ich die Klasse und gebe Wartung ein. Icon. Da haben wir's. Und es wird dieselbe Einstellung von 16 beibehalten , wie Sie sehen können, was genau das ist, was wir wollen. Und zum Schluss wollen wir das letzte ändern. Also klicken wir mit der rechten Maustaste, Linksklick, sorry, haben die Klasse dupliziert. Und das werden Angebotskredite sein. Und lassen Sie uns hier doppelklicken und Kredite eingeben. Und das wird allein die Klasse duplizieren. Icon, herrlich. Und statt dieses Symbols ersetzen wir es durch das Kreditsymbol. Also lass es uns finden, wo es ist. Es ist die Hand, die ein Auto hält. Also lass es uns finden. Da haben wir's. Kreditsymbol weltweit. Es hält immer noch Abstand zu dieser 16. Lassen Sie mich jetzt einfach den Text nehmen und ihn hier einfügen. Und nimm den Text von hier füge ihn hier ein. Hübsch. Und was ich als Nächstes tun werde, und schließlich ist, wenn ich es zu XD zurückbringe, wir einen gewissen Abstand zwischen diesen beiden haben. Wir haben also 40 und wir haben 40 hier. Vielleicht können wir das auch hier tun. Also, wenn ich all meine, äh, schließe, sehe, was ich zuvor gemacht habe. Also biete Garantie an, vielleicht kann ich sie auf 40 erhöhen und Wartung anbieten. Vielleicht kann ich das auch auf 40 erhöhen. Schauen wir uns an , wie das aussieht. Da haben wir's. Wenn ich auf Vorschau klicke, denke ich, dass das in Ordnung aussieht. Aber vielleicht sind 40 ein bisschen viel und wir wollen Platz für unser Image haben. Also lass uns mit 32 weitermachen. Ich denke, es wird gut funktionieren. Also 32, herrlich, reizend. Jetzt ist dieser Abschnitt im Grunde abgeschlossen. Sie können also sehen, was wir gemacht haben und wie schnell das war. Und ich sehe Sie im nächsten Video, in dem wir diesen Abschnitt mit den Vorteilen erstellen werden. Und aufgrund der Bildüberlagerung wird es etwas mehr Arbeit erfordern . Also werde ich dich dort sehen. 173. Leistungsbereich: Ordnung, lassen Sie uns weitermachen und uns mit unserem Leistungsbereich befassen . Also wenn ich dich hier zurück zum Flow bringe, wähle ich den Body Hit Control K, gib C für uns ein, sorry, S für einen Abschnitt. Abschnitt. Da haben wir's. Sie wurden kontrolliert, Kate und Div, und das wird unser Container sein. Hübsch. Und jetzt können wir in diesem Behälter vielleicht in die Verpackung legen. Also Control K tippe div ein. Und dieses Div kann, mal sehen, Vorteile sein. Rapper. So wie es ist. diesem Inhalt wird sich natürlich unser Textinhalt befinden . Lassen Sie uns diesen Abschnitt nun Vorteile nennen. Los geht's und gib ihm eine obere Marge von 200, wie bei all diesen anderen, die wir gemacht haben. Und zum Schluss möchte ich hier einige Änderungen vornehmen. Also für den Container möchte ich, dass er tatsächlich die volle Breite hat. Also werde ich für meine Kombiklasse in voller Breite eingeben. Und für die Breite hier gebe ich 100% ein. Und es wird den gesamten Prozentsatz meines Bildschirms beanspruchen. Die Vorteile von Wrapper werden tatsächlich bei 1.200 Pixeln liegen. Da haben wir's. Und wir werden es genau wie diesen Container zentrieren. Dann mache ich, anstatt dort, wo Hintergründe, Bild, Farbverlauf stehen, wähle ich das aus und füge ein Bild ein. Ich wähle mein Bild aus. Und von hier aus wähle ich meine Vorteile aus. Da haben wir's. Stellen Sie sicher, dass es zentriert ist, stellen Sie sicher, dass es keine Kacheln hat, und stellen Sie sicher, dass es deckend ist. Und auf diese Weise wird es gut abgedeckt. Nun endlich, was wir als Nächstes noch tun müssen, ist vielleicht, mal sehen, einige innere Änderungen vorzunehmen. Also, wenn ich reingehe und sehen, kann ich vielleicht einige Inhalte in unseren Leistungs-Wrapper einfügen. Und lassen Sie uns vorerst sehen, lassen Sie uns diesem Behälter eine gewisse Größe geben. Wenn ich Sie also hierher zurückbringe, haben wir für unsere Vorteile 469. Lassen Sie uns das also vorerst als Platzhalter verwenden. Gehen wir zurück zu hier. Container sollten also Höhe von 469 haben. Und jetzt haben wir das. Das ist also der Vorteil, dass Wrapper und Container vielleicht ineinander leben können. Aber lassen Sie uns vorerst einfach mit dem Benefits Wrapper arbeiten. Also drücke ich Strg K und gebe H für die Überschrift ein. Und hier für die Überschrift , schauen wir mal, vielleicht H12. Da haben wir's. Und es wird all unsere Einstellungen beibehalten. Also lass uns mit H2 White weitermachen. Und dafür können wir diesen Spielraum loswerden. Beseitigen Sie diesen Spielraum hier. Wir können mit weißer Farbe und wir können auch mit zentrierter Farbe wählen. Und ich kann so etwas wie unsere Vorteile eingeben. Hübsch. Und darunter können wir vielleicht ein weiteres div Control K erstellen, indem wir div eingeben. Dieses Div wird eine Klasse unserer Vorteile haben. Etwas wie das hier. Innerhalb der Schulden. Was ich tun kann, ist vielleicht ein anderes zu erstellen. Unsere Vorteile werden also unser Hauptgeschäft sein. Und lassen Sie uns auf Control K klicken und div eingeben. Dieses Div wird als kostenlose Lieferung bezeichnet. Lieferung. Da haben wir's. Wählen wir es von hier aus aus und drücken Strg K, um ein Bild einzugeben. Und ich werde ein schnelles Bild hinzufügen, das das Liefersymbol sein wird, das das Auto mit einer Stecknadel oben ist. Da haben wir es, das ist dieser. Und darunter werde ich vielleicht Werbung machen. Mal sehen, vielleicht ein H3 Control K, h. Lass uns mit H3 fahren. Speichern Sie die Einstellungen. Nein, aus irgendeinem Grund nicht. All diese drei Überschriften, los geht's. Hübsch. Und ich füge einfach H drei Weiße hinzu. So wie es ist. Wählen Sie es von hier aus. Achte darauf, dass es weiß ist. Und stellen Sie auch sicher, dass es so zentriert ist. Hier gebe ich so etwas wie kostenlose Lieferung, Schleife zulassen ein. Und innerhalb unserer kostenlosen Lieferung drücke ich noch einmal Control K und gebe P für den Absatz ein. Alle Absätze. Es hat das Styling gedauert und ich werde so etwas wie Absatz oder P- oder P-Körperfarbe eingeben . Denn das ist das Styling , das es brauchen wird. Und von hier aus werde ich die Farbe der Körperfarbe wählen , also so. Lassen Sie mich diesen Text einfach kopieren und einfügen. Lass uns so etwas sehen. Also lass uns den schönen Speer kopieren und einfügen. Und so werden unsere Inhalte im Grunde aussehen. Nun, es ist offensichtlich nicht zentriert, also sollte das Peabody College zentriert sein. Da haben wir's. Und damit ich all diese Elemente in den Mittelpunkt stellen kann, kann ich sie in eine Flexbox verwandeln, aber lassen Sie uns das nicht tun. Lassen Sie uns einfach unsere Vorteile nutzen und daraus ein Raster machen. Und Sie können sehen, dass es diese Elemente sofort zentriert hat. Verwenden wir also 32, genauso wie wir es zuvor getan haben. Und lassen Sie uns einfach eine weitere Spalte hinzufügen. Lass uns diese Reihe loswerden. Hübsch. Und ich drücke Control C, Control V, Control V, um es noch zweimal einzufügen. Bei dieser kostenlosen Lieferung kann ich sie in eine Flexbox mit vertikaler Ausrichtung verwandeln und ich werde einfach genau hier klicken, wo Mitte steht. Und es wird all meine Inhalte darin zentrieren. Hübsch. Alles ist da, wo es sein sollte. Du kannst es sogar einfach auf die Mitte auftragen, aber ich denke nicht, dass es unbedingt notwendig ist , vielleicht lege es einfach oben hin. Was wir als Nächstes tun können, ist hier in der Mitte, wir benötigen keine kostenlose Lieferung, also kann ich diesen Kurs duplizieren und ihn als dreistufiges Polnisch bezeichnen . So wie es ist. Und das letzte wird sein, lass uns hier klicken, den Klassenteil duplizieren, austauschen, Teile austauschen, während Schleife läuft. Und lassen Sie uns den Inhalt tatsächlich hinzufügen. Also füge es ein. So wie es ist. Dieser letzte wird Teil eines Austauschs sein und der Inhalt wird darin enthalten sein. Da hast du es. Nun, was H drei Weiß angeht, werde ich dieses Top loswerden. Und für den unteren kann ich 24 eingeben. Es wird mir den schönen Abstand geben, den ich will. Und was das Bild angeht, was ich tun kann ist, dass das Symbol geliefert wird. Und vielleicht kann ich auch den unteren Rand von 24 angeben. Das wird die polnische Ikone sein. Und mach dasselbe dafür. Wenn wir hier sind, stellen Sie sicher, dass wir diesen loswerden und unser Politur verwenden, das ist dieses, sehr schön. Und schließlich wählen wir dieses Symbol aus, das Teil des Austauschsymbols ist. Und in diesem Fall, lass uns auch mit 24 weitermachen. Klicken Sie hier und ersetzen Sie es durch den Teiletausch. Was, mal sehen, um sicherzugehen, dass ich es in meinem Design sehe. Ja, der mit dem Schlüssel. Der mit dem Schlüssel , der ist wunderschön. Und was können wir als Nächstes tun? Jetzt, wo wir all unseren Inhalt haben, können Sie sehen, dass unser Leistungs-Wrapper irgendwie ganz oben auf dieser Seite bleibt. Also, was werden wir tun, ist, aus einem Container eine Flexbox zu machen und dann unseren Wrapper zu verwenden und einfach sicherzustellen , dass er sich so in der Mitte befindet. Dann können wir sicherstellen, dass unsere Leistungen die Obergrenze haben. Wenn ich also genau hier auswähle, kannst du sehen, dass wir hier 64 haben, also das ist es, was du auch hier erstellen wirst . Unsere Leistungen sollten also eine Spitzenmarge von 64 haben , und alles wird ganz gut aufeinander abgestimmt sein. Jetzt verwenden wir endlich unseren Container und scrollen dort, wo wir unser Bild haben. Also, was wir jetzt tun werden, ist die Farbe auszuwählen. Schauen wir uns vielleicht die Farbüberlagerung an. Und für die Farbe können wir vielleicht diese verwenden. Also dunkles Haar und Farbe und reduziere es einfach um etwa 10%, vielleicht sogar ein bisschen mehr, so etwas. In diesem Fall können wir, weil es umgekehrt ist, vielleicht auf 80% gehen, nur um den gleichen Effekt zu erzielen wie in XD. Wenn ich es also zu XD nehme, kannst du sehen, wie das aussieht. Also wenn ich hier Control Enter drücke, tut mir leid, Control, Control Enter für die Vorschau und scrolle nach rechts, genau hier. Sie können sehen, dass wir jetzt diesen Effekt haben. Also ich denke, das funktioniert ganz gut. Der nächste Schritt ist unser Forum. Lass uns weitermachen und das beenden, denn ich finde, das sieht ziemlich gut aus. Und ich glaube nicht, dass keine weiteren Änderungen an diesem Abschnitt erforderlich sind , um ehrlich zu sein. Und es wird ganz gut funktionieren, weil es ein Grid ist. Wenn wir anfangen , deren Größe zu ändern, verschieben wir die Inhalte natürlich einfach übereinander. Aber im Moment funktioniert alles so, wie es sollte. Diese Kredite, fangen wir von oben an. Also hier haben wir das, wir haben das, wir haben diese Karten, die einwandfrei funktionieren. Wir haben diesen Abschnitt , der wie ein Zauber funktioniert, und dann haben wir diesen Abschnitt. Ich bin also ziemlich zufrieden damit, wie das aussieht. Und im nächsten Abschnitt werden wir, wie gesagt, im Forum darauf eingehen. Also werde ich dich dort sehen. 174. Kontaktformular: In Ordnung, lassen Sie uns jetzt mit dem Kontakt-Formular fortfahren. Und bevor wir zum Workflow übergehen, wollen wir uns kurz daran erinnern, wie er in XD aussieht. Also hier haben wir den Text Kontaktiere uns, dann haben wir ein vollständiges Formularfeld oder InputField. Dieser wird sechs Spalten oder drei Spalten höher einnehmen , Sie möchten ihn nennen, weil dies ein Raster sein wird. Und dieser wird etwas mehr Platz beanspruchen, weil er etwas größer sein wird, damit die Nachricht den Raum für die Nachricht begleitet. Schließlich werden wir einfach unsere Hauptschaltflächenkomponente mit der Nachricht senden wiederverwenden . Kommen wir also zu Webflow. Und das Wichtigste zuerst: Drücken Sie immer Strg K und geben Sie den Abschnitt ein. Und eine Sache, die ich erwähnen möchte, ist, dass Sie sehen können, dass der Workflow jetzt gespeichert wird. Und wenn ich hier und da auf Abschnitt C klicke, geht es los. Und es wird uns das Häkchen zeigen. Sie können sehen, dass wir immer noch ungespeicherte Änderungen haben, aber wenn es gespeichert wird , wird diese gespeicherte Änderung angezeigt. Anstatt hier, drücke ich auf Control K und gib div, div, block presenter ein. Und für den Div-Block werde ich einen Abschnitt des Containers hinzufügen , also los geht's. In diesem Container werde ich einen weiteren hinzufügen. Also zuschlagen und los geht's. Es hat jetzt unsere Änderungen gespeichert. Drücken Sie Control K, geben Sie div ein, so. Und diesen nenne ich Forum-Wrapper, z. B. Warm Wrapper, weil er dieses Formular wieder einmal in unser Feld packen wird . Also lass es uns öffnen. Und was Schulden angeht, wählen wir zuerst diesen Bereich aus und nennen ihn Forum. Mal sehen, was wir tun können. Nennen Sie es ein Kontaktformular. Weil vielleicht wirst du verschiedene Foren auf deiner Website haben . Und für diesen Abschnitt nehmen wir noch einmal 200 mit dem oberen Rand. Es wird diesen Inhalt also gut nach innen bringen. Nun, in diesem Inhalt kann ich sehen, vielleicht wo Forum-Wrapper steht, vielleicht wo Forum-Wrapper steht in diesem Container kann ich Strg drücken K und M ist so etwas wie eine Überschrift H2 und suche laut zentriert nach H2. Und hier schreibe ich einfach, kontaktiere uns. Und noch einmal, da es direkt in HTML unter unserem Hauptelement befindet, werde ich den Formular-Wrapper unten positionieren, werde ich den Formular-Wrapper unten positionieren, der die Kontaktadresse oben verschiebt. Für den Forum-Wrapper selbst gebe ich ihm eine obere Marge von 64. Deshalb behalten wir das schöne und einheitliche Erscheinungsbild unseres Designs bei. Im Form Wrapper kann ich auf Control K drücken und das Formular eingeben. Und es wird einfach diesen Formularblock hinzufügen. Wenn ich darauf klicke, wird es eingefügt. Und so sieht es aus. Also, wenn ich das schließe, haben wir den Namen, wir haben die E-Mail-Adresse und wir haben den Button drin. In Form Wrapper haben wir also unseren Formularblock. Dann haben wir das Formularelement selbst. Hier haben wir die Feldbezeichnung. Und das erste, wir werden es z. B. „Ich“ nennen. Ich weiß es nicht. Vollständiger Name. So war es früher. Und in unserem TextField kann ich tun, wenn ich hier klicke, sagen wir den Namen, wir sagen den Typ. Und zum Schluss werde ich für den Platzhalter schreiben, gib deinen vollständigen Namen ein. Und Sie können sehen, dass dieser Text genau hier erscheint. Was das Styling angeht, was ich tun kann, ist für dieses Feldlabel, was ich tun kann, ist dieses zu entfernen. Aber eigentlich nein, schauen wir mal, was wir in XD hatten. Also hier haben wir 16, und das ist offensichtlich 16, das sind 24. Also lass uns das in Webflow machen. Das wird also die untere Polsterung von 16 haben , eine lebendige. Und dieser wird, ich habe auch die untere Polsterung von 16, so. Und unser Textfeld, Lass uns zurück zu XD gehen , wird den Abstand 32 haben. Mal sehen, die Textfeldbeschriftung kann 32 haben, also los geht's. Schließlich sollte dieses untere, aber nein, nicht dieses Textfeld 32 haben. Da haben wir's. Und TextField, dieser sollte also auch 32 haben. Anstelle der E-Mail-Adresse benötige ich hier, ja, lass uns eine E-Mail eingeben und auf das TextFeld klicken , um Platzhalter einzugeben, also gib deine E-Mail-Adresse ein. Und lassen Sie uns jetzt mit einigen Klassen umgehen. Also das Wichtigste zuerst, das wird ein Feldtext sein. Geben wir ihm eine Klasse von Textblock. Also entferne die Klasse und lass uns ihr tatsächlich eine Klasse von Textblock geben . Also ich bin im Qin-Stil, was auch immer ich will, genau hier. Also TextField und Form. Es tut mir leid. Also, was ich hier tun werde, ist, statt Bolt, ich werde unregelmäßig wählen. Und statt Festplattenfarbe könnte ich etwas wie diese Farbe verwenden. Ja, ich denke, das funktioniert gut. Mal sehen, was wir hier hatten. Jetzt hatten wir hier tatsächlich diese graue Farbe, aber nur normal. Gehen wir also zurück zu hier. Also lass uns mit der grauen Farbe gehen, unregelmäßig. Los geht's, und lass uns es einfach auf 16 einstellen. Hier. Da haben wir's. Jetzt haben wir also Lehrbücher und einen Textblock und ein Formular. Also wählen wir das hier aus. Also entferne den Klassen-Textblock und Form war die Kombinationsklasse. Und es hilft, aber nicht dafür, sondern dafür. Entfernen Sie das Textblock-Formular. Gute Arbeit. Also jetzt haben wir das. Und lass uns weitermachen und das stylen. Also im Stil des Textfeldes kann ich diesen Text auswählen. Und mal sehen, wie wir das stylen können. Also vielleicht können wir das anpassen. Nehmen wir an, das Flugzeug erhält eine E-Mail von und Sie können auf all diese zugreifen , sowohl für den Erfolg als auch für den Fehler. Sie können also sehen, wie sich der Erfolg anfühlt, wie die Fehlerfelder aussehen, aber wir werden uns nur auf das Hauptfeld konzentrieren. In Bezug auf ein TextField. Zeige alle Einstellungen gleich hier. Und was die Größe angeht, nehmen wir etwas wie Poppins. Poppins auch mit 16. Und lass uns gleich mit 24 loslegen. Und lassen Sie uns für die Farbe dieses Modells entscheiden. Und dieser. Lass uns mit dunklerer Farbe weitermachen. Ich denke, es wird gut aussehen. Lassen Sie uns die Klasse anstelle von TextField umbenennen und nennen wir sie z. B. Forentextfeld. Da haben wir's. Und aus welchem Grund auch immer , es hat sich nicht geändert. Vielleicht spielt die Opazität dabei eine Rolle. Also, wenn ich schnell auf Vorschau klicke, los geht's. Es funktioniert also, aber aus welchem Grund auch immer, es hat sich hier nicht geändert. Was können wir also innerhalb des Blocks tun? Formularfelder? Wir werden das so anpassen, dass es wie in XD aussieht. Also hier haben wir 16 auf jeder Seite, also passen wir das an. Also für das Pairing im Formular-Textfeld werde ich mich hier für den Abstand von 16 entscheiden. 16 Polster genau hier oder einfach auf dieser Seite. Auf dieser Seite wird es Null sein. Aber aus welchem Grund auch immer, es wird, es wird mir nicht erlauben, das zu tun. Also vielleicht, wenn ich meine Textfeld-Einstellungen auswähle, also Formular-Textfeld. Also lass uns damit weitermachen und lass mich es auf vielleicht auf acht ändern. Und das kann auch bis acht sein. Ich freue mich also, dass das 16 sein kann, das kann 32 sein, also wird es nach unten gedrückt und es ist was die Größe angeht, lass uns mit der Höhe von 50 beginnen. Und jetzt haben wir, was wir brauchen. Und der Text darin sieht aus. Es sieht gut aus. Die Farbe sollte weiß sein, das ist also in Ordnung. Also Forentextfeld, lass uns dieses Formular anwenden. Textfeld. Da haben wir's. Wir haben dasselbe drin und wir haben das Styling und die dazugehörige Begleitung. Lassen Sie uns das jetzt schnell schließen , da wir diese Schaltfläche zum Senden haben. Ich brauche es nicht. Ich drücke Strg K und tippe die Taste. Und drinnen füge ich einfach unseren Hauptbutton hinzu, so. Da haben wir's. Und für unsere Hauptschaltfläche ist eine Schaltfläche auf der rechten Seite, eine Nachricht wie diese senden. Und jetzt, wo das abgeschlossen ist, kann ich ganz einfach ein div Control K vom Typ div in div eingeben. Und dieser Div-Block kann diese beiden Gruppen hosten. Manchmal können sie ein bisschen stur sein. Lege es einfach in den Textblock, hinein. Da haben wir's. Und diesen Def-Block können wir z.B. so ein Namensfeld nennen . Und dieses Namensfeld muss nicht wirklich ein zusätzliches Design haben. Ich denke, das ist in Ordnung. Lassen Sie uns nun eine weitere erstellen. Wählen Sie also das Form Control K aus, um div anzuhängen. Geben Sie es direkt unter unser Namensfeld ein und fügen Sie es hinein. So wie. Was ich tun werde, ist diese E-Mail vielleicht so zu nennen . Ich werde in dieser E-Mail auf Control C, Control V klicken dieser E-Mail auf Control C, Control V Ich werde sie umbenennen, aber zuerst duplizieren Sie die Klasse und benennen Sie sie jetzt in Telefon um. Hier wähle ich diesen aus. Ich gebe hier das Telefon für den Text ein. Das wird lustig. Es wird deine Telefonnummer eingeben. So wie das. Hübsch. Und hier schauen wir mal, für die E-Mail, lass uns das anpassen. Also das ist die E-Mail, das ist in Ordnung. Und das ist der Name, also Name, E-Mail. Und hier haben wir was? Wir haben die Telefonnummer, genau wie das Telefon. Los geht's. Und schließlich, was ich für diesen tun werde, ist Control C zu drücken, Control V. Und diese wird es sein, also duplizieren Sie die Klasse , sodass eine Nachricht wie diese in der Nachricht hier angezeigt wird . Sagen wir so etwas wie eine Nachricht. Hier werden wir die Nachricht laut eingeben. Und anstatt deine Telefonnummer einzugeben, kann ich vielleicht etwas sagen wie deine Nachricht schreiben. Schließlich möchte ich diese Grenze loswerden. Wählen Sie also eine davon aus und klicken Sie hier und dann genau hier, und schon wird jeder einzelne Rand entfernt . Wenn ich also klicke, kannst du sehen, wie es aussieht. Also ich denke, es sieht ganz gut aus. Aber natürlich müssen wir es jetzt in ein Raster legen und es ein bisschen mehr ausrichten. Also, wie können wir das machen? Es ist eigentlich super einfach. Lass uns unseren Foren-Wrapper verwenden , der dieses Mal unser Grid sein wird . Also klicken Sie gleich hier. Und dann brauchen wir z.B. sechs verschiedene Spalten. Sagen wir also 123456. Und sagen wir für die Reihen, wir brauchen so etwas wie, ich weiß nicht, vielleicht fünf Reihen. Also wir haben schon einen hier, also 12345. Und warum brauchen wir das? Es ist ganz einfach, weil wir sie einfach ausgeben werden. Wählen wir also das Namensfeld aus. Mal sehen, was wir tun können. Also Text aus Block. Mal sehen, wie wir die Dosis anpassen können. Ja, ich glaube, was wir brauchen, ist nicht da. Lassen Sie uns das mal zur Schau stellen. Aber ich werde es eigentlich auf dem Formular selbst tun, lassen Sie uns das als unser Raster bezeichnen. Also noch einmal, 23456. Ja, das ist in Ordnung. Und hier sagten wir 12345. Da haben wir's. Also lasst uns nun wählen, Lass uns unser Namensfeld sehen und hier in die Ecke mit diesem Punkt klicken und es einfach überspannen. Um die volle Breite Ihrer Seite einzunehmen. Nehmen Sie dann die E-Mail und spannen Sie sie in drei Spalten auf. Also 123, das werden wir genau hier tun. Da haben wir's. Nimm das Telefon 123 und nimm die Nachricht , übertrage sie bis hierher. Und was die Nachricht angeht, aber ich kann sie drehen, um die Breite von zwei Spalten zu erhalten. Da haben wir's. Und jetzt wähle einfach unseren Button. Und was wir tun können, ist vielleicht den gesamten Abschnitt zu überspannen. Aber eigentlich wissen wir, was wir tun werden, ist vielleicht, es ist nur eine Spalte oder so. Und dann können wir vielleicht gleich hier hingehen und als letztes eingeben, damit es verloren geht, und es vielleicht hier zur Seite positionieren und es vielleicht einfach bis hier überspannen. Da haben wir's. Jetzt haben wir unseren Button. Jetzt müssen wir als letztes einfach die Breite dieses Nachrichtenabschnitts anpassen . Also, wie können wir das machen? Müssen wir die Höhe für das Texteingabefeld anpassen . Gehen wir also einfach zurück zu unserem Nachrichten-Fremdtextfeld. Und ich werde eine Kombiklasse von Nachrichten hinzufügen , weil denk daran, dass es 50 ist, aber hier möchte ich eine B17, z. B. Derek go. Und was ich jetzt tun kann, ist vielleicht, mal sehen. Ich muss sicherstellen, dass mein Text oben steht. Also vielleicht kann ich in diesem Fall mit der Polsterung umgehen. Also für diesen, was ich hier für die Bodenpolsterung tun kann, vielleicht kann ich 112 nehmen. Los geht's, 168. Und sollte ich es für diesen auf Null setzen? Ja, ich denke, das funktioniert ganz gut. Spielen Sie also einfach mit den Füllwerten herum. Spielen Sie mit einem Margenwert c herum, wo Sie sich in Ihrem Design befinden. Wenn ich jetzt auf Vorschau klicke, kannst du den vollständigen Namen sehen und ich klicke hier, um meine Informationen, meine E-Mail-Informationen, abzurufen. Und für die Nachricht kannst du vielleicht etwas eingeben. Hallo Leute. Wie geht's dir? Aber bevor ich es abschicke, muss ich dieses Formular tatsächlich in meinem Designer verbinden , wie es dir bereits erklärt wurde. Dort können Sie die E-Mail Ihres Kunden eingeben, sodass er sie tatsächlich dorthin senden kann , wo Sie möchten. Also an welche E-Mail-Adresse? Ich denke immer noch, dass dieser Knopf vielleicht einfach zu groß angefasst wurde. Wenn ich also darauf klicke und 16 sehe, wenn ich das vielleicht auf acht ändere, sind wir gut. Nein. Nein, ich glaube nicht, dass es so sein wird. Lass es uns einfach so lassen, wie es genau da ist. Ich denke, es wird so funktionieren, wie es ist. Jetzt, wo wir das erstellt haben, weil wir es in unserem gesamten Design wiederverwenden werden. Was wir tun werden, ist genau hier zu klicken, ein neues Symbol zu erstellen und es z. B. Kontaktformular zu nennen . Los geht's , einfach erstellen und jetzt haben wir das Symbol für das Kontakt-Formular. Wir können zum Beispiel zurückkehren. Und jetzt, wenn ich auf Vorschau klicke, ändert sich nichts wirklich, aber wir haben es immer noch da. Wenn ich hier klicke, können Sie auch sehen, dass wir diesen 20-Pixel-Polster in unserem Container immer noch darin haben. Aber wenn ich das jetzt anpasse, muss ich diese Spalten natürlich etwas später anpassen , aber Sie können sehen, dass es bei Responsive recht gut reagiert. Also los geht's. Der nächste Abschnitt, den wir machen werden, ist der Abschnitt mit der Karte. Also ich sehe dich im nächsten Video , in dem wir das angehen werden. 175. Kartenausschnitt: Beschäftigen wir uns jetzt mit der Karte. Und hier sind wir in XD und du kannst den Inhalt einfach hier sehen. Wir werden also diesen linken und rechten Inhalt haben , wie wir es zuvor mit dem oberen Abschnitt gemacht haben. Und dann haben wir diesen Text drin und die Adresse. Denn die Adresse und das Symbol werden dieselben sein, wie wir sie hier erstellt haben. Wenn ich das auswähle, kannst du sehen, dass dies den Stapel von 16 hat, den Abstand zwischen diesen beiden. Und natürlich wird das ein bisschen Abstand von 24 haben , und hier wird es den Abstand von 32 haben, hier 24. Lassen Sie uns also in die PLO eintauchen und mit dem Aufbau dieses Abschnitts beginnen. Schauen wir uns also an, was wir hier tun können, ist zum Körper zu gehen, Strg K zu drücken, Abschnitt einzugeben und zum Designer zurückzukehren, ihm eine Klasse von Abschnitt zu geben. Schönes Control K Div, Div-Block. Und für diesen Abschnitt, weil das das Formular für diesen Abschnitt war, werde ich zu Hoppla, warum nicht. Warte, warte, warte, warte, warte. Ich denke, gib ihm aus irgendeinem Grund eine Abschnittsklasse. Nein, egal. Und ich werde so etwas wie eine Karte eingeben. Da haben wir's. Jetzt wird dieser Def-Block ein Container sein. Und in diesem Container gebe ich ihm ein weiteres Div, nenne es Map Wrapper. Da haben wir's. Und für diesen Abschnitt gebe ich ihm eine Marge, obere Marge von 200. Da ist es, also kann ich es ein bisschen unterscheiden. Jetzt in diesem Map-Wrapper , den ich in eine Flexbox verwandeln werde. Ich werde den Inhalt auf die Seite stellen. also div und diesen Div-Block einsetzen, können wir so etwas wie Karteninhalt oder so etwas nennen . Schauen wir uns also an, wo wir zufrieden sind, wo wir zufrieden sind. Und nenne diesen Map Wrapper einfach. Vielleicht können wir es in We are Rapper umbenennen , weil wir später möglicherweise Karten an verschiedenen Orten auf unserer Website haben. Also lass es einfach so, lebe es so. Stellen Sie also sicher, dass diese beiden zentriert sind. Und was wir hier tun werden , ist einfach eine Map hinzuzufügen, also Control K gibt Map ein. Und hier haben wir eine Karte. Es wird also einfach deine Map hinzufügen. Und weil ich meinen API-Schlüssel bereits eingegeben habe, erhalten Sie Ihren API-Schlüssel indem Sie Ihr Google-Konto erstellen. Wenn Sie noch keine haben, müssen Sie Ihre Kreditkarteninformationen eingeben. Wir werden jetzt gebaut. Google muss nur überprüfen, ob Sie ein Mensch und ein Unternehmen sind. Wenn Sie dies als Ihr eigenes Unternehmen tun, ist es wahrscheinlich ratsam diesen API-Schlüssel zu erstellen, da Sie ihn erneut für Ihre Kunden erstellen werden . Wenn Sie jedoch kein Unternehmen sind, stellen Sie sicher, dass Ihr Kunde dieses Konto erstellt Geben Sie einfach den Google-API-Schlüssel N wird Ihnen für die Karte anzeigen Sie zu dieser Google Cloud weiterleiten. Und wie ich bereits erklärt habe, wenn Sie hier in die Einstellungen gehen, gehen Sie zu den Projekteinstellungen. Kann ich gleich hierher gehen? Und schauen wir uns die Integrationen an. Bitte laden Sie es hoch. Da hast du es. Sie haben Google Optimize und dann haben Sie Google Maps. Sie können also genau hier klicken, wo der Google Maps JavaScript-API-Schlüssel steht . Und Sie erhalten diesen API-Schlüssel, den Sie einfach kopieren und einfügen können. Genau da. Du kannst auf Speichern klicken und es wird dir diese Karte zeigen. Aber noch einmal, es ist am besten, dass entweder Sie, wenn Sie das ständig tun, weil es für Sie sehr einfach sein wird , den API-Schlüssel einfach zu kopieren und in Ihre zukünftigen Projekte einzufügen und ändern Sie einfach den Namen und Ihre Adresse später , wenn Sie sie benötigen. Oder Ihr Kunde, wenn er die Map benötigt , kann er ein Konto erstellen. Es wird für sie kostenlos sein. Sie müssen es nur in die Kreditkarteninformationen eingeben damit Google überprüfen kann , ob es sich um Menschen handelt. Natürlich, wenn sie anfangen, Traffic direkt von dieser Karte zu bekommen. Also nehmen die Leute diese Karte, klicken darauf, gehen zur Karte und gehen zur Navigation, z.B. für das Auto, für den Spaziergang oder was auch immer, dann wird Google darauf navigieren und sehen wie viele Besuche Unternehmen haben und beginnen, ihnen am Ende des Zyklus eine Rechnung zu stellen. Ich denke, es sind ungefähr 200 Besuche oder 300 Besuche kostenlos und dann wird es beginnen, ihnen so eine Rechnung zu stellen. Das ist also unsere Google Map, das ist unser API-Schlüssel. Also, was ich tun werde, ist meinen Container und meine Karte auszuwählen. Da haben wir's. Klicken Sie hier auf Auswählen, weil ich die Adresse eingeben möchte. Lass mich zurück zu XD gehen. Hier habe ich die Adresse in Belgrad, Serbien. Und lass mich zurück zu hier gehen. Natürlich können Sie jede Adresse nehmen, die Sie wollen. Wir haben also diesen einen Moderator und er wird diese Adresse später aktualisieren , wenn Sie tatsächlich live gehen und ihn sich ansehen. Und Sie können das auf Straße, Terrain, Satellitenhybrid einstellen , aber ich lasse es einfach auf der Straße. Also lass uns sehen. Du kannst das so belassen. Sie können hineinzoomen, wenn Sie möchten, aber lassen wir es einfach so als Standard belassen. Was wir hier in diesem Fall tun können, ist, mal sehen, vielleicht können wir die Inhaltsbreite von 40% angeben. So wie das. Wir werden einfach unsere Map verschieben und vielleicht können wir ihr hier einen Spielraum von, mal sehen, 64 geben . Vielleicht. Da haben wir's. Und ich denke, das wird unsere Karte sehr verbessern. Aber hier haben wir in diesem Fall die breiteren Karten, also sind es standardmäßig 683. Also wenn ich hier zu meiner Map gehe, kann ich natürlich die maximale Breite hinzufügen, z. B. ist 683, ungefähr so. Und es wird meinen Inhalt einfach so pushen. Es stellt sich heraus, dass Hightech mit etwa 100% auskommen kann , was 100% meiner Inhalte hier ausmachen wird. Aber da ich keinen Inhalt habe, sollte ich wahrscheinlich anfangen, diesen Inhalt hinzuzufügen. Also lass uns gleich hier klicken und das zurücksetzen , damit wir unsere Karte sehen können. Wo wir also zufrieden sind, werden wir z. B. die H2-Überschriften platzieren. Also Control K geben Sie die Überschrift ein und wählen Sie unser H2. Los geht's und schauen wir mal, was wir haben. Also H2, dark Live. Und für diesen Fall kann ich sehen, vielleicht warum, warum, warum es die Einstellungen nicht beibehält. Ich weiß nicht, warum, was vor sich geht. Also lass uns die Klasse entfernen, alle H2-Überschriften. Es behält das Areal immer noch, aus welchen Gründen auch immer. Ich hoffe also, dass Sie dieses Problem haben. Also H2 und wir wählen einfach das aus, also 32. Und mal sehen, wo wir hier sind. Wir sind also bei 56. Also 32,56, genau hier. Da hast du es. Das wird unsere H2-Überschrift sein. Und lass uns das so stylen, dass es zu dunkel ist. Ja, es nimmt Kurse aus allen H2-Überschriften teil, aber es zeigt mir nicht , dass es wichtig ist. Also lass uns gleich hier klicken, also wo wir sind, sozusagen. Und dann darunter drücken wir Strg K, geben Sie den Textblock geben Sie ihm eine Klasse von Textblöcken, so. Und lassen Sie uns einfach unsere Texte kopieren und hineinlegen. Da haben wir's. Und nun zu den Entfernungen. Mal sehen, was wir für diesen Textblock tun können, was ich tun kann, ist dort einzufügen, wo wir sind. Aus welchem Grund auch immer, es behält den Abstand von 20. Geben wir in diesem Fall tatsächlich einen Abstand von 32 an. Also, aber ändern Sie es einfach so, dass wir uns wie verschuldet fühlen. Und statt 20 Torr nehmen wir 32. Da haben wir's. Also drückt es das nach unten. Und in dieser Hinsicht kann ich Textblock machen, wo wir so sind und der Boden 24, 32 sein sollte. Da hast du es. Denn wenn wir Sie zurück zu meinem Design bringen, können Sie sehen, dass wir hier 24 und hier 32 haben. Gehen wir also zurück zu hier. Das sollten eigentlich 24 sein, tut mir leid. Das sollte 32 sein. Es geht uns jetzt gut. Was ich als Nächstes tun werde, ist, einen Diblock Control K zu setzen , indem ich div, div-Block eintippe. Und die erste wird für die Adresse sein, die Adresse innerhalb dieses Div-Blocks. Was ich tun werde, ist einen anderen Div-Steuerblock einzugeben . Kate war geteilt worden, und das wird der Titel sein, z. B. lass uns sehen, kleiden, so einen Titel. Und in diesem drücken Sie Control K und geben Sie das Bild ein. Für das Bild wähle ich das Pin-Icon, was dann sein wird, natürlich kannst du die Suche verwenden, aber ich möchte dich nicht noch mehr verwirren, das ist wunderschön. Und innerhalb dieses Adresstitels drücke ich Strg K, gib einen Absatz ein und verwende alle Absätze. Mal sehen, aus welchem Grund auch immer, daran hat es nichts geändert. Poppins 16, 24, und diese Farbe sollte aus drei Absätzen bestehen. Also, wie gesagt, aus welchem Grund auch immer, es hat die Schulden nicht geändert. Also lass uns mit dem Hier weitermachen. Also lass uns ein solches Kleid nehmen. Und hier füge ich das Symbol für die Adressklasse hinzu. Da haben wir's. Und Adresstitel. Wir werden die Flexbox hineinlegen und sicherstellen, dass sie zentriert sind. Und stellen Sie sicher, dass Lass uns sehen, was wir hier tun können. Dafür. Aus welchem Grund auch immer , sie sind nicht zentriert. Mal sehen, was wir hier tun können. Es sieht aus wie ein Absatz. Ja, das stimmt. Also geh auf Null. Da haben wir's. Weil es den Absatz hatte, den wir auffüllen. Also, wo ist das Adresssymbol? Geben Sie einfach auf der rechten Seite einen Rand von 16 , weil wir nur unser Design nachahmen wollen. Ich habe diesen Abstand. Wenn ich das auswähle, kannst du sehen, dass der Stapel 16 Pixel hat, also genau wie wir es hier gemacht haben. Also, was ich als Nächstes tun werde, ist diese Adresse zu verwenden. Und tatsächlich haben wir den Titel, also drücken Sie Control K und geben Sie P für den Absatz ein. Und in diesem Absatz versuchen wir alles H1. Da haben wir's. Jetzt hat es ihn behalten und lasst uns einfach in unsere Adresse einen schönen, diesen adressierten Titel einfügen . Mal sehen, was wir hier tun können. Wir haben also einen Abstand von 16, also können wir ihm eine Bodenpolsterung von 16 geben. Also adressierter Titel, unterer Abstand von 16, was unsere Adresse etwas nach unten drücken wird. Wählen Sie dann unsere Adresse und drücken Sie zweimal Control C, Control V, Control V. Hübsch. Und was wir tun können, ist, dass diese mittlere Nummer Telefonnummern sein sollte. Also duplizieren Sie die Telefonnummer der Klasse. Darin sollte der Titel des Klassenforums dupliziert Titel des Klassenforums werden und dieser Text sollte so entfernt werden. Und das sollte doppelt sein. Es sollte also Spaß machen. Hübsch. Lassen Sie uns also weitermachen und anfangen, diese zu ersetzen. Das sollte also Spaß machen. Lass uns das Telefon finden, wo es ist. Da haben wir's. Also hier sollte statt Adresse die Telefonnummer stehen. Und statt Todesfällen sollte es plus 381-123-4567 sein. Also nur eine Zufallszahl. Und zu guter Letzt, für das letzte Mal sollten es Öffnungszeiten sein, duplizieren Sie den Kurs. Öffnungszeiten wie diese. Und innerhalb der Schulden können wir duplizieren. Also vielleicht können wir es so etwas wie Öffnungszeiten, Titel, lebhaft nennen . Und noch einmal, für die Ikone im Inneren, statt eines Kleides, duplizieren. Geben wir ihm die Klasse Uhr, Uhrsymbol, denn das wird dort präsentiert. Lass es uns genau hier finden. Mal sehen, wo es ist. Also Uhrsymbol, los geht's. Und zum Schluss machen wir das. Also Öffnungszeiten. Und hier geben wir etwas wie Montag bis Freitag ein, zwei bis 16:00 Uhr. Ja. Ich denke, das wird gut funktionieren. Jetzt, wo Sie das getan haben, müssen wir den Abstand zwischen ihnen anpassen. Wenn ich also hier klicke, siehst du, dass der Abstand 24 ist, also lass uns jetzt damit umgehen. Die Adresse sollte also einen unteren Rand von 24 haben. Telefonnummer sollte den unteren Rand von 24 haben. Und die Öffnungszeiten sollten gleich bleiben. Wenn ich jetzt meine Map auswähle und sie in Map umbenenne, hoops. Benennen Sie es in Main um, unsere Hauptkarte. Versuch das. Da haben wir's. Und jetzt kann die Höhe geändert werden, um dies auszufüllen, oder sie kann zu 100 Prozent betragen, um den Raum dieses Inhalts auszufüllen. Aber aus welchem Grund auch immer, es hat das nicht ausgefüllt. Ich verstehe nicht warum. Gehen wir also zurück zur Standardeinstellung und lassen Sie sie gelten. Oder wir können zu XD zurückkehren und die Höhe von 507 sehen. Also vielleicht können wir das anpassen. Die Hauptkarte sollte also 507 sein. Da haben wir's. Und jetzt füllt es sich einfach viel schöner aus. Wenn ich also sehr schnell auf Vorschau klicke, ist dies eine generische Kartenvorschauansicht, tatsächliche Karte auf veröffentlichten Websites. Also müssen wir unsere Website veröffentlichen, entweder zweistufige Domain, was diese eine ist, oder zwei benutzerdefinierte Domains, was diese ist um den Standort sehen zu können, aber das ist uns momentan egal . Es wird gut funktionieren, weil wir es bereits in Google und in Webflow eingerichtet haben . Also hier ist alles, wie es sein sollte, alles ist richtig positioniert. Alles funktioniert so, wie wir es wollten. Und hier können wir das auf horizontal oder vertikal einstellen. Wie das aussieht, können Sie später für Responsive sehen. Also funktioniert alles einwandfrei. Das ist also unsere Karte. Das Letzte, was ich tun möchte, ist hierher zurückzukehren, wo Symbole stehen, ein neues Symbol erstellen. Ich nenne es Karte. Erstellen Sie ein Symbol. Los geht's, und jetzt haben wir dieses Symbol. Und los geht's. Eine letzte Sache, die wir meiner Meinung nach tun müssen, ist, unsere Fußzeile zu erstellen. Und ich sehe dich im nächsten Video , wo wir genau das machen werden. 176. Footer: Ordnung, lass uns jetzt weitermachen und diese Fußzeile erstellen und unsere Homepage fertigstellen . Und später in der nächsten Lektion können wir uns mit dieser Seite der CMS-Sammlung befassen, die der Mittelpunkt unserer Seite sein wird. Aber lassen Sie uns zunächst nur mit der Fußzeile selbst umgehen. Was ich also tun kann, ist hier zu Webflow zurückzukehren. Und wir haben gerade unsere Karten erstellt. Wählen wir also unseren Abschnitt mit den Pins vom Typ Control K aus. Und geh zurück zum Designer, gib ihm eine Klasse von Abschnitten wie dieser. In diesem Abschnitt werde ich den Div-Block einfügen , den ich Container als lebendig bezeichnen werde. Und dieser Abschnitt wird Footer sein. Und oben wird es eine Marge von 200 haben. Schönes Durcheinander. Und innerhalb des Containers drücke ich Control K, um div zu öffnen und diesen Footer-Rapper aufzurufen. So wie das. Und in den Footer-Rapper kann ich mein Bild einfügen. Also Steuertaste, Bild. Für mein Bild wähle ich mein Logo, das ist dieses. Geh. Und der Footer Wrapper hat gerade das Bild. Und was ich auch tun kann, ist, die untersten Texte zu setzen, also Control K, P für den Absatz eingeben und alle Absätze erben. Es funktioniert jetzt einwandfrei, was sehr schön ist. Lassen Sie mich den Text kopieren und ihn genau hier positionieren. Und geben wir ihm die Klasse p. Sehen wir uns p Körperfarbe an, p zentriert. Sei zentriert für absatzzentriert. Und ich klicke einfach hier und der Text wird unten zentriert. Aber ich brauche auch diese vier Icons und die Navigation aus der Navbar. Also werde ich ein bisschen schummeln. Öffnen Sie also einfach Ihre Navigationsleiste und suchen Sie Ihren Container. Und sehen wir uns das Navigationsmenü an. Ich kann Control C drücken, um es von hier zu kopieren Ich kann einfach zu meiner Instanz zurückkehren, zurück zu meiner Fußzeile gehen, um dort zu springen und es direkt über dem Absatz selbst einzufügen. Sie können also sehen, vielleicht kann ich darauf zurückkommen und es hier anpassen. Also lass uns sehen. Anstelle des Navigationsmenüs kann ich die umbenannte Klasse in Navigationselemente umbenennen. Da haben wir's. Und ich nehme all diese und positioniere sie vielleicht ganz unten. Lass uns das einfach noch einmal versuchen. Also drücken Sie Control C, gehen Sie zurück zu hier, Control V, es funktioniert nicht. Gehen wir also zurück zu hier und schauen wir uns an, was wir tun können, denn ich versuche immer, mich darin zurechtzufinden. Wir haben also eine Nav-Link-Klasse. Gehen wir also zurück zu hier und ich drücke Strg K, um diesen Text in einen Textlink umzuwandeln . Versuchen wir es jetzt mit Nav-Link. Jetzt blinzeln. Da haben wir's. Und es wird uns einfach den gleichen Text geben wie zuvor. Das erste werden Autos sein. Da haben wir's. Und lassen Sie uns das in einen Div, Div-Block einfügen. Fügen Sie den Text hinein, der als Div-Block bezeichnet wird. Nehmen wir an, Navi verlinkt die Fußzeile. Fußzeile der Links. Da haben wir's. Und lassen Sie uns es noch zweimal duplizieren. Also Control C, Control V, Control V, Los geht's. Dieser Nav-Link sollte eine Marge von 24 haben, ich denke, also lassen Sie uns das einfach sehr schnell überprüfen. Jetzt sind die Artikel mit dem Nav-Link verbunden. Es hat tatsächlich eine Polsterung von 20. Und dieser letzte. Okay? Beschäftigen wir uns also mit Schulden. Wenn ich also zu diesem Nav-Link zurückkehre, geben wir ihm hier tatsächlich die Paarung von 20. Also alle haben ein Paar von 20, nett. Und auch auf der linken Seite. Hübsch. Also brauchen wir das nicht einmal auf der linken Seite. Also lass uns mit Null und dieser Eins gehen, ich gebe ihm einfach eine Kombiklasse aus Last, Last, und es wird die Paarung von Nullen entfernen. Also Autos, wir werden hier Kredite haben. Und schließlich werden wir uns kontaktieren müssen, kontaktieren Sie uns. Da haben wir's. Jetzt, wo wir das haben, positionieren wir es hier. Eine letzte Sache, die ich tun möchte, ist Control K zu drücken und div einzugeben. Und dieses Div werde ich soziale Icons so nennen . Und darin drücke ich Control K und tippe Bild ein. Und dann kann ich es vielleicht sofort kopieren. Also Control C, Control V, Control V, Control V, weil wir wissen, dass wir vier davon haben. Und alle vier sollten eigentlich hierher gehen. Also nein, nicht dieser hat einen Fehler gemacht. Ich sollte das kopieren. Control C control V, Control V, control V. Los geht's. Und ich schalte eine Flexbox ein und auf dem Bild, lass uns das geben, Lass uns Facebook sehen. Und lassen Sie uns sehen, was wir inhaltlich selbst haben. Wir haben 24. Gehen wir also zurück zu hier und geben ihm einen Spielraum von 20, denn das nächste sollte Twitter sein. Und geben wir ihm einen Spielraum von 20 für das nächste sollte YouTube sein , Marge von 24. Und das letzte sollte LinkedIn sein, denke ich. Und es sollte keine Margen haben. Bei dieser Gelegenheit. Für Facebook klicken Sie hier, wählen Sie dann Bild und lassen Sie mich das Facebook-Symbol wählen , das ist, das ist wunderschön. Dann haben wir für diesen Twitter. Wählen wir also Twitter. Für diesen haben wir YouTube. Los geht's. Und schließlich haben wir für diesen LinkedIn. Suchen wir also unser LinkedIn. Los geht's. Jetzt, da wir alle unsere Icons haben, werde ich diese beiden in ein anderes Div legen , damit ich sie gleichmäßig verteilen kann. Also lassen Sie uns es kontrollieren. Ich tippe noch einmal div. Dies wird ein Fußzeileninhalt sein. Und innerhalb dieses Fußzeileninhalts positionieren wir diese beiden wie folgt, Fußzeileninhalts positionieren wir diese beiden wie folgt also stellen Sie sicher, dass sie hier sind. Wählen Sie den Inhalt der Fußzeile aus, schalten Sie den Flux und schalten Sie ihn ein, damit ich sie gleichmäßig verteilen kann , also so. Und soziale Ikonen, was können wir tun, ist, ich denke, dass sie ein bisschen groß sind. Also, aus welchem Grund auch immer, sie haben die maximale Breite. Denn für alle Bilder, also wenn ich Null eintippe, schauen wir mal, sollten Breiten sein. Vielleicht ist es die bessere Option, die Höhe zu haben , weil sie dieselbe Höhe von 24 haben werden. Gehen wir also zurück zu diesem. So wie. Die Höhe sollte also 24 Pixel betragen. Ist es? Stimmt das? Ja, hallo 24. Wählen Sie diesen aus. Die Höhe sollte 24 px betragen. Sie können also einfach in Webflow eingeben, was Sie wollen. Also 24 px innerhalb der Höhe und du kannst sehen, wie sie einfach angepasst werden. Also 24 p x. Los geht's. Und jetzt positionieren wir das in der Mitte, so. Und los geht's. Jetzt sieht es aus wie es sollte. Ich bin zufrieden damit. Und jetzt können wir endlich unsere Fußzeile auswählen, daraus eine Flexbox machen und sicherstellen, dass sie diesmal vertikal ist. Und stellen Sie sicher, dass wir alle unsere Artikel zentrieren. Da haben wir's. Und jetzt, was ich tun kann, vielleicht etwas ausprobieren. Wissen Sie, lassen Sie uns sehen, was wir hier tun können. Vielleicht können wir einige dieser Elemente anpassen. Also lass uns sehen. Vielleicht können wir dem eine Breite von 100% geben. Es funktioniert nicht. Lass uns eigentlich nein, lass uns diesen loswerden. Sagen wir einfach, bleib beim Löschen und beim Bild. Also ja, eigentlich können wir das Raster einbauen, aber bevor wir das tun, muss ich das hier durch den Link ersetzen. Was ich also tun kann, ist hier reinzukommen und die Marke zu verwenden, denn die Marke ist eigentlich unser Logo-Hit Control C. Ich werde mein Bild hier ersetzen, die Marke, die ich gerade genommen habe. Klicken Sie also auf Löschen, denn sobald wir die Marke repariert haben, wird sie zu einem bestimmten Teil der Seite verlinkt. Also genau hier, was ich für meinen Footer Wrapper tun kann, statt diesen Footer-Inhalt, wie ich dir gerade gezeigt habe, was ich tun kann, ist sie nach draußen zu schieben. So wie das hier. Da haben wir's. Und jetzt können wir unser Netz erstellen. Wählen Sie dazu einfach den Footer-Wrapper aus und erstellen Sie unser Raster. Und was ich hier machen werde, ist vielleicht auch. Ja, wir können zwei Spalten haben, aber wir können z. B. vier Zeilen haben. Also zuerst wird das Logo für die gesamte Zeile sein. Diese beiden werden ihre eigene haben, und das wird eine eigene Sorte C3 haben, ich denke, es wird in Ordnung sein. Nimm eine längere Spanne, die gesamte Breite. Aber nein, es ist so, als würde sich die Marke tatsächlich über die gesamte Breite der Säule selbst erstrecken. Stellt sicher, dass es so in der Mitte ist. Dann wird es diesen beiden gut gehen , weil sie aufnehmen, jeder nimmt diese Größe an, aber diese. Sollte sich so nach rechts ausrichten. Und dann haben wir endlich Absatzzentren. Lassen Sie uns hier einfach das Licht umkreisen. Und geben wir ihm einfach die mittlere Absatzfußzeile. Und vielleicht können wir ihm die untere Marge von 64 geben. Schwarzer Tod. Es wird unseren Inhalt also noch weiter vorantreiben. Abschließend möchte ich diesen vielleicht etwas mehr Abstand geben. Also hier haben wir, mal sehen, 64, ich glaube 69, aber lass uns mit 64 weitermachen. Und hier haben wir auch 64. Also lass uns das schnell machen. Also, was ich hier tun kann, ist vielleicht mit der Fußzeile des Markenlogos zu beginnen. Und ich werde in die Navigationsleiste springen. Anstelle einer Marke. Ich nenne es Logo. Nur ein Logo. Okay. Und ich komme genau hierher. Sehen Sie sich diesen Logo-Ordner an, ich gebe ihm den unteren Rand von 64. Hübsch. Und lassen Sie uns sehen, was wir hier tun können. Vielleicht sind entweder soziale Symbole die Fußzeile von Nav-Links, oder noch besser. Wir können mit dem Absatz fortfahren und ihm den oberen Rand von 64 geben, wodurch diese nur unbeaufsichtigt und rückverfolgbar bleiben . Also hier haben wir unsere Fußzeile und los geht's. Es sieht alles wunderbar aus. Es sieht alles so aus, wie wir es beabsichtigen. Eine letzte Sache, die Sie hier tun müssen, ist, diese in Schwebezustände umzuwandeln . Um das zu tun, werde ich es mit Schulden versuchen. Also schweben wir. Alles was ich tun muss, ist die Farbe durch diese zu ersetzen. Aber jetzt ist es nur Ersatz und Inhalt hinter einigen. Lassen Sie uns etwas später darauf eingehen. Aber vorerst lasse ich es einfach so wie es ist. Denn wie Sie mit der Navigationsleiste gesehen haben, können Sie jederzeit zurückkehren. Und hier werde ich ein neues Symbol erstellen und es so Fußzeile nennen. Und los geht's. Eine letzte Sache, die ich tun möchte, ist, diesem Abschnitt eine obere Marge von 20 zu geben . Da haben wir's. Es sieht also toll aus für den Schulanfang. Und los geht's. Jetzt ist unsere gesamte Website fertiggestellt. Homepage ist also fertig. Ich weiß, dass ich viel unterwegs bin, aber ich versuche nur, euch viele Details zu geben , an die ihr euch erinnern könnt, weil es für euch später viel einfacher sein wird, euch zurechtzufinden . Also hier haben wir das Auto geliehen und kontaktieren Sie uns. Hier haben wir das, aus welchem Grund auch immer, es ändert das. Also muss ich zurückgehen und diesen H1 anpassen , weil es mich einfach verrückt macht. alles sieht gut aus. Nur das muss noch einmal angepasst werden. Das sieht gut aus. Das sieht gut aus. Das sieht gut aus. Das sieht gut aus. Da haben wir's. Also müssen wir jeden anpassen und wir müssen diese anpassen. Also lass uns das machen. Lassen Sie uns zunächst diesen auswählen. Wir haben also drei dunkle Karten, Kartenkarten. Da haben wir's. Und wähle diese aus, füge Karte und Karten hinzu. Also, wenn dieser hier Autokarten und dieser blaue hier 160 hat, also 16, und dieses Auto, Auto, sollte es auch 16 haben. Da haben wir's. Jetzt ist das behoben und die Finalisten befassen sich mit diesem. Also H ein Held, aus welchem Grund auch immer, es wechselt zu Poppins, fett 64 Farbe ist dieser. Schauen wir uns einfach den Abstand an. Hier. Es ist 86. Gehen wir also zurück zu unserem Helden. 86 sollte hier sein. Da haben wir's. Und jetzt sieht es aus, wie es sollte. Jetzt sieht es also gut aus. Der Abstand sieht hier und hier gut aus. Und hier. Das ist gut. Das ist gut. Es wird Ihnen erneut angezeigt, sobald es veröffentlicht ist und die Fußzeile so aussieht, wie sie sollte. Also los geht's. Unsere Homepage ist fertig. Wie gesagt, lassen Sie uns zusammenbrechen, indem Sie genau hier klicken. Was wir bisher gemacht haben, ist, dass wir die Homepage von hier aus neu erstellt haben die Homepage von hier aus neu erstellt , weil das Gleiche wie in XD. Sobald wir es entworfen haben, können wir diese Symbole tatsächlich kopieren und auf unseren Seiten einfügen. Und wir können viel zügiger und viel schneller mit der Erstellung beginnen . Also ich sehe dich im nächsten Video, wenn wir hier tatsächlich darüber sprechen werden, nämlich das CMS. Der Einstieg wird extrem kompliziert sein, aber eigentlich ist es überhaupt nicht zu kompliziert, wenn Sie einmal den Dreh raus haben, quasi wie ein Webflow selbst. Also ich sehe dich im nächsten Video und wir beginnen mit dem CMS. 177. CMS-Sammlung erstellen: In diesem Video werden wir über CMS-Sammlungen in Webflow sprechen . Und ich werde Ihnen zeigen, wie Sie einen erstellen, speziell für dieses Projekt, und wie Sie all diese CMS- und CMS-Sammlungselemente in Ihrem Projekt verbinden . Also lass uns anfangen. Und hier sind wir in Webflow und das haben wir bisher. Also, wenn wir unser Gedächtnis ein wenig auffrischen, haben wir jetzt die Navigation, wir haben unseren Button, wir haben diesen Abschnitt mit dem Bild. Wir haben diese Karten genau hier. Dann haben wir das, was wir mit diesen Symbolen an der Seite anbieten. Unsere Vorteile sehen gut aus, und dann haben wir ein Kontaktformular , das funktioniert. Sie können Nachrichten eingeben und Sie können hier eine Schaltfläche zum Senden einer Nachricht haben. Dann haben wir die Karte und ich habe dir gezeigt , wie man die Map darin integriert. Und dann haben wir endlich die Fußzeile unten. Wie gehen wir also vor , die CMS-Sammlung einzubeziehen? Wir werden genau hier klicken, wo CMS-Sammlung steht, klicken Sie hier. Bevor wir also mit all diesen Informationen beginnen, lohnt es sich, uns daran zu erinnern, was wir eigentlich darin aufnehmen sollten. Also hier haben wir unsere XD-Datei und wir sollten eigentlich die Kursseite erstellen. Aber vorher, denn diese drei Karten und diese acht Karten werden alle unserer CMS-Sammlung verbunden. Und das bedeutet im Grunde, dass all diese Daten aus der CMS-Sammlung abgerufen werden. Und wenn ich dir das ganz schnell zeige, wird das benannt, das wird der Preis sein, das wird das Jahr sein. Dies wird sein, wie viele Kilometer das Auto gefahren hat. Es wird all diese Informationen abrufen und der dynamische Inhalt sein und all das in unserer CMS-Sammlung zeigen . Dann erstellen wir diese Seite. Und diese Seite wird eigentlich für die Fahrzeugdetails sein. Aber bevor wir all diese Details eingeben, müssen wir zuerst die CMS-Sammlung erstellen und dann die Elemente auf diese CMS-Sammlung verweisen und sie im Grunde alle miteinander verbinden. Also werden wir tatsächlich mit dieser Seite beginnen und die Informationen von dieser Seite abrufen . Um uns den Einstieg zu erleichtern was wir hier eigentlich brauchen, lassen Sie mich kurz überprüfen, ob ich das angeschlossen habe. Also Superauto, SUV und Limousine. Das sind also die Icons. Wenn ich zu unserem Webflow zurückkehre, gehe sehr schnell zurück zu unseren Artikeln und nur um zu überprüfen, ob wir sie haben. Also ja, SUV, Supersportwagen-Insulin. Wenn wir, wie gesagt, zu meinem CMS zurückkehren , klicken Sie hier. Also zuerst müssen wir die CMS-Sammlung selbst erstellen. Also Sammlungsname, wir werden es Autos nennen, z. B. und dann haben wir hier Sammlungsfelder. Jetzt werden Name und Slug als Basis enthalten sein. Und Sie können sehen, dass die Sammlungs-URL Autos lautet. Sie können also website.com vier Schrägstriche für die Slash-Warenkorb-Seite sehen . Und das werden wir in das Innere aufnehmen. Also zuerst werden wir ein Feld hinzufügen. Und Sie können alle möglichen Felder hinzufügen. Um nicht zu viel Zeit mit dieser Lektion zu verschwenden, können Sie den Mauszeiger auf eines dieser Felder bewegen, um mehr darüber zu erfahren. Und Sie können anhand dieser Lektionen sehen , was einige davon sind. Wir werden Klartexte verwenden, vielleicht ein Rich-Text-Bild und mehrere Bilder werden wir hier verwenden. Sie können jedoch sehen, dass Sie Links, E-Mails, Telefonnummern und Nummern, Datum und Uhrzeit, Auswahlmöglichkeiten und Farboptionen haben können E-Mails, Telefonnummern und Nummern, . Also zum Beispiel ist diese Options-Dropdownliste großartig, wenn Sie mehrere verschiedene Auswahlen oder Kategorien oder ähnliches haben . Fangen wir also mit dem Klartext an. Und ich nenne diesen Textnamen. Und nennen wir es vielleicht Carney. Name des Autos, so etwas. Ich klicke auf Feld speichern. Dann füge ich, mal sehen, ein neues Feld hinzu, Klartext. Ich nenne es Autopreis. Da haben wir's. Klicken Sie auf Feld speichern. Dann wird das nächste Feld, mal sehen, Bild sein. Und das wird ein Autokartenbild sein. Klicken Sie auf Feld speichern. Und ihr seht schon hier auf der rechten Seite, die Vorschau, die gerade gebaut wird. Und wenn ich hier klicke, brauchen wir tatsächlich und was wir erstellen, ist dieses Autokartenbild. So kann es dieses Bild aus der Bildersammlung ziehen , die wir hier erstellen , und es dort zeigen, wo wir es zeigen möchten. Also wieder einmal, wir haben den aktuellen Namen, wir haben den Autopreis und hier haben wir das Auto-Image. Konzentrieren wir uns jetzt auf all diese anderen Details , die wir haben. Gehen wir zurück zu Webflow. Also Fahrzeugkartenbild, was wir als Nächstes tun können, ist ein weiteres Bild hinzuzufügen. Also lass uns mit dem Bild gehen. Und hier nenne ich es z.B. Autotypschild. Und dieses Etikett ist das eigentliche Symbol, das genau hier angezeigt wird. Also hier haben wir das SUV-Symbol. Also klicken wir auf Feld speichern. Darunter können wir nun den Klartext und diesen Typ mit dem Namen Autotyp eingeben. Autotyp, er würde Feld sagen. Darunter können wir dann ein weiteres hinzufügen, es das Produktionsjahr nennen. Er würde sagen, Phil, ich will, dass das Auto produziert wird, füge noch eins hinzu. Und sagen wir Kilometerstand oder Kilometer oder was auch immer, treffen Sie einen anderen. Und das wird getankt sein. Klicken Sie auf Speichern. Und wenn ich Sie zurück zu unserem XD-Dokument nehme, das sind tatsächlich diese. Also Kilometerstand, Feldgetriebe, Motortyp, Türen, Sitze, Garantie. All dies wird also automatisch auf unserer Website aktualisiert. Der letzte war also Kraftstofftyp als das Getriebe, das Getriebe. Und hier kannst du alle möglichen Charaktere haben. Sie können die Anzahl der Zeichen einschränken, wenn dieses Feld erforderlich ist. Es wird also den Stern ähnlich wie diesen platzieren. Und wir klicken einfach auf Feld speichern, weil das ganz einfach sein wird. Motortyp ist der nächste. Ups, tut mir leid. Also einfache Texte und Gin-Art. Da hast du es. Als nächstes werden, mal sehen, Türen sein. Wie viele Türen hat das Auto? Als nächstes werden, mal sehen, Sitze sein. Da hast du es. Feld speichern. nächste ist, mal sehen, Garantie. Und jetzt sind die Schulden beglichen. Was wir als Nächstes tun werden, ist den Rich-Text einzufügen, weil ich die Fahrzeugbeschreibung hinzufügen möchte , die diese ist. Wir sind jetzt mit diesem Abschnitt fertig und wir haben mit diesen Informationen fertig. Sie können also sehen, dass das Autojahr von hier aus beginnen wird , und es auch hier zeigen. Der Kilometerstand wird hier und hier angezeigt. Der aktuelle Name und der Autopreis werden hier und hier sowie hier und hier angezeigt . Und das Autobild wird hier ins Spiel kommen. Und wir haben auch den SUV , den Fahrzeugtyp, und das Symbol, das zum Fahrzeugtyp selbst passt, aufgenommen , den Fahrzeugtyp, . Hier fügen wir einen Rich-Text hinzu und ich nenne diese Fahrzeugbeschreibung für diesen Kurs. Ich werde nur dieselbe Beschreibung und dieselben Daten verwenden, aber natürlich werden Ihre Kunden unterschiedliche Informationen angeben, natürlich basierend auf dem Auto. Lassen Sie uns nun weitermachen und neue Felder hinzufügen. Und Sie können sehen, dass wir 16 von 30 übrig haben. Web for limitiert dich also auf 30. Also lass uns mit Null auf 100 km/h fahren. So schnell wird das Auto diese Geschwindigkeit erreichen. Lassen Sie uns Vokale einbeziehen, z. B. können Sie alle möglichen Informationen einbeziehen. Ich mache einfach mit. Das wird Höchstgeschwindigkeit sein. Und wenn ich Sie zurück zu XD bringe, verwenden wir diese Informationen tatsächlich hier. Also bei der Leistung, Drehmoment, allerlei verschiedene Dinge. letzte war also Höchstgeschwindigkeit. nächste ist Macht. Da hast du es. Klicken Sie auf Speichern bei einem neuen. Sehen wir uns Zylinder an. Und natürlich wird für die Elektroautos einfach so etwas wie ein A schreiben. Also sind es Zylinder. Das ist Drehmoment. Sollte Feld sagen. Bei der neuen. Das wird Höhe sein. Speichern Sie den neuen. Das wird Gewicht sein. Klicken Sie auf Speichern und fügen Sie ein neues hinzu. Das wird verlinkt. Verlinkt. Mal sehen, ob wir es getan haben, richtig, ja, wir haben es getan. Gute Arbeit und füge eine neue hinzu. Das wird Bootspace sein. Startplatz. Mal sehen. Ein neuer. Wir sagen Radstand. Sag Feld. Ich weiß, das ist langweilig, aber das ist im Grunde das, was Sie für Ihre Kunden tun werden. Also legen wir los und der nächste ist das Laden von Gewichten. Und je nachdem, um welches Projekt handelt und woran Sie gerade arbeiten, fügen Sie die verschiedenen Informationen hier und da hinzu. Also lass uns sehen. Wir werden einbeziehen, was das letzte Ladegewicht war. Der nächste Punkt ist die Breite. Also Breite. Dann werden wir die Kraftstofftankkapazität einbeziehen. Und schließlich werden wir vielleicht, vielleicht einige davon reduzieren. Also vielleicht kann ich Gewichte laden, ich kann es loswerden oder so. Ich bin mir nicht ganz sicher , weil ich zwei Felder übrig habe und drei weitere benötige. Wenn Sie also auf Feld hinzufügen klicken, füge ich das Bild hinzu. Und nennen wir es Car Hero. Bild. Klicken Sie auf Speichern. Und wenn wir uns mit XD befassen, wird dieses Bild unser Autoheldenbild sein. Das ist es, was tatsächlich den eigentlichen Leuchtkasten auslösen wird. All diese Bilder werden innerhalb des Leuchtkastens miteinander verbunden, aber das wird sie nur auslösen. Mal sehen, welche Art von Informationen wir loswerden können. Denn wenn ich hierher zurückkehre, muss ich ein weiteres Feld für das Multibild hinzufügen. Nennen wir es also Car Gallery One. Da hast du es. Und Sie können sehen , dass uns die Felder ausgegangen sind, aber wir müssen das Feld immer noch einbeziehen. Also kann ich entweder diese Fahrzeugbeschreibung loswerden oder auf eines dieser Details. Schauen wir uns an, was wir gleich hier loswerden können. Also vielleicht können wir das Ladegewicht loswerden. Lassen Sie uns das loswerden, denn der Kofferraum ist im Grunde das, was das Ladegewicht anzeigt. Also, wie groß dein Stiefelgewicht ist , so viel kannst du hineinlegen. Und natürlich können Sie all diese Informationen später eingeben, wenn Sie möchten. Und wir werden das hinzufügen und Ihr Kunde kann dies für jede einzelne Seite, die er erstellt, manuell hinzufügen. Da wir hier also mit einem kleineren Projekt sprechen , können sie, sobald sie eine Seite hinzugefügt haben, sobald sie eine Seite hinzugefügt haben, manuell hineinspringen und die Seite hinzufügen. Denn wieder einmal sprechen wir über eine kleine Menge Karten. In diesem Fall haben sie nur acht Autos zum Verkauf. Das wird also super einfach für sie sein. Wenn nicht, können Sie das umgehen, indem Sie einfach überprüfen, was wir losgeworden sind, welche Kapazität meiner Meinung nach Ladegewicht war. Also lass mich zurück zu hier gehen. Lassen Sie mich hier auf Speichern klicken und lassen Sie mich das Ladegewicht finden, das ist dieses. Klicken Sie hier und klicken Sie auf Löschen. Da haben wir's. Und jetzt haben wir noch einen übrig. Also hier klicken, Mehrbild, Auto, Galerie auch. Da hast du es. Also, wie das aussehen wird, das wird ein Heldenbild sein, also Bild Nummer eins, dann wird das 234 sein und das wird oder vielleicht fünf und dann 678 sein. Ich muss das aus Layoutgründen tun weil es sich um eine Art Workflow-Fehler handelt. Mein Freund und ich haben das irgendwie beendet. Und meiner Meinung nach ist hier ein Webflow-Guru, weil er das seit Jahren und Jahren macht. Was also in Webflow passiert, ist, dass mir alle acht Bilder angezeigt werden. Vielleicht möchtest du sie verschließen. Es ist nicht wirklich einfach, diese Bilder über einen Leuchtkasten zu verbinden . Wenn also jemand auf eines der Bilder klickt, öffnet sich der Leuchtkasten und alle acht Bilder werden angezeigt. Wenn Sie diese Methode verwenden, ist es daher am besten zu wissen, was zu tun ist. In diesem Fall werden wir also tun, werden wir also tun weil wir für jedes Auto acht Bilder haben. Natürlich kann Ihr Kunde viel mehr Bilder haben. In diesem Fall also Nummer eins , wenn wir uns das hier ansehen, wird das aktuelle Heldenbild dieses sein. Also Bild Nummer eins. Dann für diesen nächsten , der , mal sehen, dieser sein wird . Also Carrier Galerie eins, was wir mit unseren Bildern aufnehmen werden, 234.5. Und dann werden wir tatsächlich noch eine davon hinzufügen und sie verstecken. Es wird immer noch da sein, aber wir werden es verstecken und sie werden in diese Galerie gehen. Die restlichen Bilder werden also für Ihr spezielles Projekt dort gespeichert. Wenn Sie z. B. 40 verschiedene Bilder haben, können Sie die restlichen Bilder einfügen. Also die ersten fünf, das ist Nummer 12345. Also insgesamt fünf Bilder. Und dann legen Sie die restlichen Bilder einfach in diese Autogalerie, verbinden Sie sie alle und sie werden in der Leuchtbox angezeigt. Und das werde ich dir gleich zeigen. Aber im Grunde sind wir hier fertig. Schließlich weiß ich, dass das eine langweilige Lektion war , aber was kannst du tun? Das müssen Sie mit den CMS-Lektionen machen. Denken Sie also daran, wir haben unsere Sammelautos benannt. Wenn ich also auf Sammlung erstellen klicke, siehst du, dass du gerade dabei bist, diese Sammlung zu schließen. Speichern Sie jetzt die Änderungen. Möchten Sie diese Änderungen speichern? Ja, speichern Sie die Änderungen. Und jetzt wurde unsere Sammlung erstellt. Wir haben jedoch keine Artikel. Und du siehst , dass der Webflow intelligent ist , weil ich meine Sammelwagen nenne. Es fordert mich auf, ein neues Auto zu bauen, ein neues Auto zu bauen. Also kann ich das jetzt machen. Ich kann auf Neues Auto klicken und ihm einen Namen geben, sodass ich einfach die Informationen kopieren kann , die ich zuvor erstellt habe. Lassen Sie uns diesen Lamborghini Hurricane geben und Sie können sehen, wie das aussehen wird website.com Slash Cars, Lamborghini, Horeca. Dann haben wir einen benutzerdefinierten Namen. Der Name des Autos wird also Hurricane sein. Der Preis wird in diesem Bild mit einer Karte angegeben. Lassen Sie mich zeigen, wie Bilder aussehen werden. Das ist der Falz, in den du einsteigen wirst. Jeder von ihnen hat offensichtlich all diese Bilder. benötigen wir die Nummer drei Für dieses spezielle Beispiel benötigen wir die Nummer drei. Also ziehen wir das Bild per Drag & Drop in das Autotypetikett, um es per Drag & Drop aus unserem Ordner zu ziehen. Also all die Assets, die Sie zuvor exportiert haben, falls Sie sich erinnern. Also lass uns sehen. Das ist ein Supersportwagen, also Typ S, hier ist das Supercar-Icon. Ich ziehe es einfach per Drag & Drop genau hier ab. Da haben wir's. Lassen Sie uns nun mit den Feldern fortfahren, sodass der Kartentyp ein Superauto ist. Offensichtlich ist es das, was Ihr Kunde jedes Mal erstellen wird. Wenn sie also auf Neue Karte klicken, wie Sie es hier gesehen haben, warten all diese Felder auf sie. Sie müssen nur weitermachen und Informationen eingeben. Und in den meisten Fällen erhalten Sie diese Informationen von Ihrem Kunden. Und ich werde Ihnen in nur einer Sekunde unsere Website zeigen , von der ich die meisten dieser Informationen erhalten habe. Offensichtlich ist all dies öffentlich bekannt und natürlich können Sie es online finden. Aber wenn Sie nicht können, dann gibt es diese Websites, die Ihnen eine große Hilfe sein werden. Also füge einfach etwas Text ein. Und wie gesagt, dieser Text wird für alle Autos, die ich erstellen werde, derselbe sein für alle Autos, die ich erstellen werde, derselbe . Kopieren Sie diese Informationen einfach und fügen Sie sie hier ein. Lass mich das hier öffnen. Also Spitzenleistung, wie gesagt, für Zylinder, Autos, die mit Batterien betrieben werden, haben offensichtlich im Grunde keine Zylinder. Also wirst du z. B. NA eingeben und ich werde das auch etwas später zeigen. Also verlinkt, los geht's. Liter-Fassungsvermögen wird da sein, das Ladegewicht. Hoppla. Also werden wir den Startspeicher als Basis verwenden. Wir haben immer, Hoppla, das habe ich verpasst. Gewicht beim Laden. Also ohne Ladegewicht als Breite. Und schließlich das Fassungsvermögen des Kraftstofftanks. Da haben wir's. Dann, jetzt endlich, kommen wir zu diesem Abschnitt, den wir gerade erstellt haben. Also, was wir hier tun werden ist, wenn ich dich zurück zu XD bringe, was wir haben, ist dieses Bild Nummer eins. Das werden wir also genau hier erstellen. Lassen Sie mich Sie zurück zu meinen Bildern bringen. Und praktischerweise heißen sie alle Hurrikan 123 und so weiter und so weiter. Also hier haben wir den Helden Nummer eins, also ziehe ihn per Drag & Drop hinein. Dann haben wir eine Autogalerie. Wenn ich dich also noch einmal zu XD zurückbringe, haben wir 234.5 abgebildet. Das werden Sie hier einbeziehen. 234.5 werden also hierher gehen und dann die restlichen Bilder werden hierher gehen. Also im Grunde 67,8. Wie gesagt, das wird auf der Seite ausgeblendet, aber es wird trotzdem verbunden sein. Und im Grunde ist es das. Wir haben unser erstes Auto gebaut. Offensichtlich können wir es noch nicht sehen, also müssen wir es verbinden. Wir werden uns später damit befassen, aber lassen Sie mich jetzt auf Erstellen klicken. Und es wird unser erstes Auto bauen. Weil wir acht Autos haben. Ich werde jetzt weggehen, die verbleibenden sieben Autos bauen und dann zu dir zurückkehren. Aber im Grunde werde ich das Gleiche tun , was ich dir hier gezeigt habe. Was wir als Nächstes tun können ist, sagen wir für den Cadillac, vielleicht eskalieren. Du kannst also sehen, diesen Hurrikan nachbauen. Wenn ich auf Neues Auto klicke, wird es immer noch all das haben, all die Felder, die wir erstellt Jetzt muss ich nur meinen Namen angeben und dann meinen Preis angeben, was mein Kunde zur Verfügung gestellt hat. Das Bild der Fahrzeugkarte. Geh einfach zurück zu meinem Ordner hier, finde meine Eskalate. Also werde ich Bild Nummer drei für dieses Beispiel verwenden. Ziehen Sie es hier per Drag & Drop ab und los geht's. Lassen Sie mich darauf zurückkommen und lassen Sie mich verbleibenden Karten erstellen. Ich werde mich bei Ihnen melden , wenn ich das in der nächsten Lektion mache. 178. CMS-Sammlung verwenden: In Ordnung, also hier sind wir. Und ich habe alle acht unserer Autos gebaut. Und wenn ich sie ganz schnell durchblättere , damit du die Reichweite sehen oder gehen kannst. Also genau das gleiche Setup, das ich erwähnt habe , das ist genau dasselbe und es wird genau dasselbe bleiben, wie Sie hier sehen. Wenn wir Sie nur mitnehmen, um das Model X zu testen, z. B. weil es ein Elektroauto ist. Du kannst z.B. bei Gelübden sehen, es hat offensichtlich keine Ventile. Also NaNs für Zylinder weil er nicht nur ein A hat. Also so bin ich damit umgegangen. Und jetzt haben wir wieder acht Autos, die alle mit Informationen gefüllt sind, und Sie haben das mit den Bildern gesehen und Sie haben das mit den Bildern gesehen, die Ihnen zur Verfügung gestellt wurden. Sie können die Bilder einfach einfügen, wie ich bereits erwähnt habe. Lassen Sie uns also schnell denselben McLaren durchgehen, noch einmal, dieselbe Geschichte. Also für das Car Hero-Bild , das Bild Nummer eins eingibt, dann Bilder 234.5, alle sind beschriftet. Und für diese letzte Galerie, die aus Multi-Image 67,8 besteht. Nun, da wir all diese Informationen haben, was können wir dagegen tun? Also klicken wir auf Änderungen speichern. Also hat es gerettet. Wenn ich also zu meiner CMS-Sammlung zurückkehre, können Sie sehen, dass wir all diese Änderungen haben. Aber wenn wir zu, sagen wir Seiten, gehen und dann zu unserer Homepage gehen , weil das die einzige Seite ist, die wir haben. Und was wir hier tun können, ist, dass ich die Informationen hier einfüge. Also hier haben wir diese Autokartenhülle. Und weil es ein einfaches Raster und wenn ich hier klicke, sind die Abstände zwischen ihnen 32. Also werden wir das schnell nachbauen. Was ich also tun muss ist , wo sind meine Elemente? Sie können sehen, dass wir die Sammlungslisten haben. Was ich also tun kann, ist auf die Sammlungsliste zu klicken, sie per Drag & Drop direkt hier direkt unter meiner exklusiven Autosammlung abzulegen, und hier ist sie komplett leer. Ich kann also doppelklicken, um eine Sammlung zu verbinden. Sie können dort doppelklicken, oder Sie können genau hier klicken, wo Quelle steht. Und dieses Dialogfenster wird sich öffnen. Einfach hier klicken. Und mit CMS-Sammlungen haben wir nur Autos. Also schau, was jetzt passiert, wenn ich das mache. Wenn ich auf Autos klicke , werden die Informationen aus all diesen Details abgerufen , die wir hineinziehen. Was ich als Nächstes tun werde, ist, dass ich es einfach dort belasse. Und sagen wir, drinnen kann ich tun, wenn ich das öffne, können Sie sehen, dass wir die Sammlungsliste haben und ich gebe ihr einen Namen, nenne sie Autosammlung, eine Liste, nur damit wir es wissen dass das die Autos darin sind. Und wenn ich drinnen öffne, kannst du sehen, dass wir endlich Sammlungsgegenstände haben. Also innerhalb dieses Sammelgegenstands nehme ich eine dieser Karten, drücke einfach Control C, drücke einfach Control C, springe in den Autosammelgegenstand und drücke Control V. Und du kannst offensichtlich sehen, es wird die Informationen einfügen , die ich darin angegeben habe. Und für all diese sieht es genau gleich aus weil wir ihm immer noch nicht gesagt haben, worauf er zurückgreifen soll. Lass uns ganz nach oben gehen. Und was wir tatsächlich tun können ist für die Sammlungsliste oder sogar für den Container, was wir tun können, mal sehen. für die Autosammelliste Lassen Sie mich für die Autosammelliste dieses Raster erstellen. Wenn ich also hier klicke, kann ich den Abstand von 32 Flüssigkeit einbeziehen , wenn ich eine weitere Spalte hinzufügen kann, und dann werde ich diese Zeile entfernen. Also bleiben uns nur noch drei übrig, wie wir es in der Reihe direkt darunter getan haben. Und weil wir diese nicht brauchen, weil wir die Fahrzeugkarte schon mitgeliefert haben, die schon den Hover-Effekt hat. Sie können sehen, dass es einen Selektor erbt. Wenn ich dort klicke, siehst du, dass es die Fahrzeugkarte ist. Wenn ich also hier auf Vorschau klicke, kannst du sehen, dass meine Hover-Effekte immer noch funktionieren. Im Grunde muss der Discard Cards Wrapper also nicht mehr hier sein. Also lass uns einfach auf Löschen klicken und es loswerden. Und für die Autosammelliste, Rapper, was ich in diesem Fall tun werde, ist, sie zu geben, z. B. ich möchte ihr keinen Unterricht geben. Was ich tun werde, ist, ihm die obere Marge von 64 zu geben. Und es wird es nur ein bisschen nach unten treiben. Also für die Autosammelliste, in diesem Fall, was ich zeigen werde, und füge eine Kombiklasse von hinzu, sagen wir Zuhause. Nur damit wir wissen, dass wir auf der Homepage sind, aber ich kann gehen, gehe zu Einstellungen. Und wenn ich wähle, schauen wir mal. Ich weiß nicht, wir können sie durchfiltern , wir können alles tun. Aber was ich in diesem Fall tun werde, lassen Sie uns sie zuerst verbinden. Wenn Sie also den Artikel auswählen, haben Sie diesen Schalter und Sie können sehen, wie Bilder von Autos angezeigt werden, was aus unserer Sammlung ist. Wenn Sie also genau dort klicken , werden Sie gefragt, welches Feld. Also das Autokartenbild ist das, was wir ziehen werden. Und sofort kann man sehen, dass es mir verschiedene Autos aus meiner Sammlung zeigt , was fantastisch ist. Wenn ich also genau dort auf den H3 Dark klicke, erhalte ich Texte von Autos, wähle ein Feld aus und ich wähle einfach den Namen aus. Sie können also automatisch sehen, dass es weiß, welchen Namen ich verwenden möchte , denn genau das haben wir ihm gesagt. Bei jedem von diesen kann ich z. B. dieses auswählen und Text aus Bildern abrufen. Das wird offensichtlich der Autopreis sein. Los geht's, du kannst sehen, wie es in allen meinen Autos auf echte Preise aktualisiert wird. Dadurch konnte ich es verbinden. Klicken Sie hier, wählen Sie ein Feld aus. Und das wird, mal sehen, mal sehen, mal sehen, schauen wir uns den Autopreis, den Namen, den Typ und das Produktionsjahr an, glaube ich. Ja, Produktion hier. Da haben wir's. Und schließlich wird dieser letzte der Kilometerstand sein. Also lass es uns hier verbinden. Mal sehen, wo wir genau sind, Kilometerstand, los geht's. Jetzt haben wir alle unsere darin enthaltenen Autos ordnungsgemäß mit unserer Sammlungsliste verbunden . Dieser Hover-Effekt funktioniert bei allen. Was wir in diesem Fall also tun können, ist, dass ich diesen Wrapper habe. Ich kann meine Artikel einschränken und z.B. drei Artikel anzeigen und los geht's. Jetzt haben wir unser ursprüngliches Layout, aber Sie können sehen, dass das irgendwie falsch ist. Was ich also tun kann, ist zu klicken und eine neue Sortierreihenfolge hinzuzufügen. Also kann ich entweder alphabetisch oder alphabetisch umkehren , oder ich kann Klartext benennen. Mal sehen, was ich tun kann, oder ich kann einen neuen Filter hinzufügen. Mal sehen, was wir hier tun können. Wie können wir sie bestellen? Vielleicht die Sortierreihenfolge. Los geht's. Also sortierte Reihenfolge, reduzieren wir diese Sortierreihenfolge, gehen wir ganz nach unten. Erstellt vom ältesten zum neuesten, vom neuesten zum ältesten klicken Sie auf Speichern. Das sollte ich tun. Nein. Gehen wir vom ältesten zum neuesten über. Und los geht's. Endlich, endlich, haben wir diese Reihenfolge, die wir hier aufnehmen müssen. Also los geht's. Wir haben Lamborghini Cadillac und Lucid Air. Und wenn ich hierher zurückkehre, haben wir genau hier den gleichen Effekt. Was uns hier fehlt, ist dieser Knopf. Lassen Sie mich einfach die Pin-Taste vom Typ Control K drücken. Hit-Styling für unsere Buttons. Also Haupttaste, Haupttaste. Da haben wir's. Und auf dieser Schaltfläche sollte C stehen. Alle Autos. Alle Autos ansehen. Da hast du es. Und alles, was ich hier tun möchte, ist diesen Abschnitt vielleicht als vertikalen Stapel zu platzieren und meine Elemente vielleicht so zu zentrieren. Und dieser Button wird eine Kombiklasse oder noch besser haben. Ich kann, weil ich den Sammlungslisten-Wrapper bereits verwendet habe. Und wo habe ich das hingestellt? Ich habe hier hinzugefügt. Also Sammlungslisten-Wrapper kann ich hier auch nach Hause hinzufügen. Da hast du es. Weil wir den Rand 64 haben und lassen Sie mich den Rand von 64 unten für diesen Button erstellen . Und wenn ich diese Schaltfläche im XD-Hover auswähle, kannst du sehen, dass wir jetzt 64 haben. Also los geht's. Jetzt wissen Sie, wie Sie Ihre Artikel in Ihrer Sammlungsliste verbinden können. Und innerhalb der Einstellungen können Sie mit all diesen verschiedenen Einstellungen herumspielen. Sie können sogar benutzerdefinierte Attribute wie Name, Wert und ähnliches hinzufügen . Und klicken Sie einfach auf Löschen. Wenn Sie nichts hineinlegen möchten, können Sie Artikel paginieren. Sie werden also hinzufügen, dass die Pfeile diese Punkte für die Paginierung sind. Und Sie können ein Limit anzeigen und anzeigen, wie viele Artikel Sie einschränken möchten. Hier haben wir drei auf der nächsten Seite, die wir erstellen werden, wir werden acht haben. Das werden wir im nächsten Video angehen , denn jetzt ist das abgeschlossen. Klicken wir auf Vorschau. Da haben wir's. Und jetzt bringt es uns nirgendwohin, weil wir zuerst eine Seite erstellen und sie einer bestimmten Sammlung zuweisen müssen, die uns dann an diesen Ort führt. zum Ende dieses Videos Lassen Sie uns zum Ende dieses Videos schnell eine neue Seite erstellen. Erstelle eine neue Seite. Nenn es Autos, das wird diese Seite hier für die Autos sein. Und klicken Sie einfach auf Erstellen. Etwas ist genau hier in der Navigation passiert. Lassen Sie mich also zurück zu meiner Homepage gehen. Lass mich sehen, was passiert. Also, aus welchem Grund auch immer, es positioniert es hier. Also vielleicht ändere ich die Klasse oder so. Lass mich nach dem Container suchen. Ziehe etwas ab, nein. Seite des Containers, Navigationsleiste. Lass uns eine Horizontale wählen. Lass uns gleich hierher gehen. Ich weiß nicht, warum es das getan hat. Lass mich zu meinem Logo gehen. Stellen Sie sicher, dass das zuerst ist. Nav-Gegenstände, stellt sicher, dass das verloren geht, aus welchem Grund auch immer. Lassen Sie mich also zu meiner Instanz zurückkehren und sehen, was hier passiert ist. Weil ich das gerade für meine Navbar gemacht habe. Und Sie können sehen, dass hier und da ein paar Layouts kaputt gegangen sind. Also lass mich sehen, was ich getan habe. Lass es mich, lass es mich tatsächlich herausfinden und ich werde im nächsten Video auf dich zurückkommen. Und diese Dinge passieren, besonders wenn du versuchst, gleichzeitig zu reden und diese Dinge herauszufinden. Im nächsten Video zeige ich Ihnen also, was die eigentliche Lösung war. Aber ich habe gerade eine Kombiklasse hinzugefügt , die unser Layout ein wenig kaputt gemacht hat. Also werde ich dich im nächsten Video sehen. 179. Cars Page Build: In Ordnung, also wie ich bereits erwähnt habe, werde ich Ihnen zeigen, was ich getan habe und was ich falsch gemacht habe. Also, weißt du, wenn so etwas passiert, was zu tun ist. Normalerweise, weil sich diese Klassen gegenseitig erben, weil wir für alle unsere Container einen Klassencontainer verwenden . Genau hier. Ich habe gerade die Flexbox hinzugefügt und alle meine Container sind kaputt gegangen. Was ich hier also tun werde , ist, weil wir diesen Container haben, füge ich einfach eine Kombiklasse von Karten hinzu. Karten. Da haben wir's. Für diese Kombiklasse. Jetzt werde ich die Flexbox vertikal einsetzen und sicherstellen, dass sie genau hier funktioniert. Sie können sehen, wenn ich von oben beginne, wir haben die Navigation, wir haben diesen Abschnitt, diesen Abschnitt. Also funktioniert alles wie es sollte. Sieht gut aus. Das funktioniert gut. Das sieht gut aus. Kontaktformular funktioniert einwandfrei. Alles funktioniert einwandfrei, weil ich es einfach auf den Container selbst gelegt habe und es nicht bemerkt weil ich mit der Aufnahme und allen möglichen Dingen spreche . Deshalb ist das passiert. Jetzt, da diese Homepage endlich fertig ist, können wir, wie ich im vorherigen Video erwähnt habe, zu der Kursseite gehen, die wir gerade erstellt haben. Wenn ich also hier klicke, kannst du sehen, dass der Hintergrund für den Körper erbt. Also, wenn ich genau da klicke und gleich hierher komme, kannst du es sehen, aus welchem Grund auch immer. Die alten Seiten sollten jedoch auf diese hellgraue Farbe, Körperfarbe, aufgetragen werden . Da haben wir's. Lass mich tatsächlich zur Homepage zurückkehren und meinen Körper auswählen, aus welchem Grund auch immer er ihn erstellt hat. Lassen Sie uns diese Klasse entfernen und den Hauptteil der alten Seiten auswählen. Und es wird die Körperfarbe erben, was ich eigentlich will. Also funktioniert hier alles so, wie es sollte. Gehen wir noch einmal zu dieser Kursseite zurück und beginnen wir, die Macht dieser Symbole zu nutzen. Also zuerst muss ich Ihnen zeigen, muss ich Ihnen zeigen was wir hier entwerfen werden. Es wird also ziemlich einfach sein. Der einzige Abschnitt, den wir tatsächlich erstellen werden , ist dieser Abschnitt hier. Also wird es einfach kopiert werden, dieser Text. Und es wird nur den Kreis und das Bild eines Autos darunter haben . Wir werden im Grunde denselben Abschnitt haben aber ohne Einschränkung unserer Artikel. Und es werden all diese Elemente ohne die Schaltfläche angezeigt . Und dann werden wir diese Elemente unten einfach wiederverwenden. Fangen wir also damit an. Also, was ich zuerst tun werde ist, dich hierher zurückbringen zu lassen. Fangen wir mit der Navbar an. Ziehen Sie es hinein und legen Sie es ab. Und lass mich das benutzen, mal sehen, was wir tun werden. Zuerst kontaktieren Sie uns und dann die Karte. Also kann ich auch Körper treffen, Control K drücken und Karte eingeben. Es wird das Kartensymbol angezeigt. Klicken Sie dort, drücken Sie Strg K und geben Sie Fußzeile ein. Und es wird Fußzeilensymbole zeigen. Klicken Sie einfach dort und Sie können sehen, dass es den Abstand erbt , den wir für den oberen Rand festgelegt haben. Es funktioniert also wie jedes andere Design-Tool wie XD, Figma, Sketch oder was auch immer. Wenn Sie Ihre Komponenten einrichten und sie erstellen, wird es Ihnen nur das zeigen, all das. uns zunächst Lassen Sie uns zunächst mit der Erstellung eines Abschnitts beginnen. Wähle deine Körperbeherrschung, Kate, ich wurde geschnitten und gib ihr eine Klasse von Abschnitt. Da haben wir's. Ich werde diesen Abschnitt direkt unter meiner Navigationsleiste positionieren weil er den Text, das Bild und diese beiden Bilder darin enthalten wird . Lassen Sie uns als Nächstes auf Control K klicken und div eingeben. Dieses Div wird unser Container sein. So wie es ist. Und in diesen Container können wir z. B. Control K einbauen, können wir z. B. Control K einbauen um die Überschrift anzuheften. Wir verwenden Überschrift H1, verwenden alle H1-Überschriften. Mal sehen, aus welchem Grund auch immer, das war nicht enthalten. Also lass uns mit Poppins gehen. Eine Bolt 64-Farbe wird diese Farbe haben, eine dunklere Farbe. Und lassen Sie mich nur an die Größe erinnern . Die Körpergröße wird 86 betragen. Da haben wir's. Und ich werde eine Kombiklasse hinzufügen, bei der H1 zentriert ist. Da haben wir's. hier werde ich einfach diese Änderung vornehmen. Klicken Sie einfach, damit es in der Mitte ist. Da hast du es. Und für den Moment füge ich einfach diesen Text ein. Nun, unter diesem Text ist mein Div Control Kate, aber div, dieser Div-Block, ich nenne ihn Hero Car. Heldenkarte. Da haben wir's. Und in dieses Heldenauto werde ich einfach diese beiden Bilder einfügen, also Control K, dieses Bild. Und dieses erste Bild kann das Auto von der Seite zeigen. Da hast du es. Und ich kann alle Texte von Assets verwenden. Da hast du es, weil es Mercedes Benz heißt, glaube ich. Drücken Sie abschließend Control K, geben Sie ein Bild ein und fügen Sie ein neues hinzu. Und dieser wird dieser blaue Kreis sein. Hübsch. Und was wir schließlich für diese beiden tun werden , ist, mal sehen, vielleicht. Vielleicht kann ich daraus eine Flexbox wie diese machen und sicherstellen, dass meine Artikel vertikal zentriert sind. Vielleicht kann ich für die Position dieser, was ich tun kann, vielleicht für das Hero-Auto selbst, direkt hierher gehen, wohingegen die Position dort ist es, und relativ klicken. Und dieses Auto kann absolut sein, z. B. aber ich denke, es ist besser, es zuerst mit diesem Kreis zu machen. Also absolut, los geht's. Und mal sehen, das Auto kann meiner Meinung nach relativ sein. ZB mal sehen. Wir werden es zunächst Cars, Hero, IMG nennen . Da haben wir's. Mal sehen. Was wir hier eigentlich tun können, ist mal sehen. Ja, lassen Sie uns das Auto als relativ bezeichnen. Eigentlich. Anstatt statisch, werde ich es als relativ bezeichnen. Und ich gebe ihm einen Z-Index von fünf. Und diesen Kreis gebe ich einen Z-Index von eins an, vielleicht etwas Ähnliches. Also wird alles schön zentriert im Inneren sein. Nun, was unser Heldenauto angeht, werden wir ihm keine Dimension geben. Mal sehen. Diese Heldenkarte. Geben wir dem einen Rand, einen oberen Rand von vielleicht 64, was uns nur dieses oberen Rand von vielleicht 64, was unverwechselbare, unverwechselbare Layout geben und unseren Inhalt nur ein wenig nach unten drücken wird Layout geben und unseren Inhalt nur . Nun, das ist, lass uns es umbenennen und wir nennen es Cars Hero, BG Circle. Da hast du es. Und hier werden wir es einfach ein bisschen besser auf so etwas zentrieren. Also kann ich es sogar ein bisschen nach oben oder ein bisschen nach unten bewegen . Es hängt wirklich alles davon ab. Und dieses Auto wird ein bisschen herumtanzen , aber mach dir darüber keine Sorgen. Wie Sie sehen, haben wir jetzt unser Layout. Offensichtlich später. Wir werden damit herumspielen und die Größe dieses Kreises reduzieren. Offensichtlich ist es momentan zu groß, aber alles funktioniert wie es sollte, auch auf dieser zweiten Seite, aus welchem Grund auch immer diese Links auf die Seite kamen. Lassen Sie mich das also sehr schnell beheben. Wenn ich auf meine Homepage gehe, klicke hier, gehe zu den Einstellungen des Tablets. Geh rein. Mal sehen, ob ich auf Show klicke. Ja, diese Links haben also kein Pairing. Also jetzt werde ich das Pairing von 20 linken Polstern einbeziehen . Und es wird sie nur ein bisschen bewegen. Und das sollte für das Problem funktionieren, aber genau hier haben wir ein neues Problem. Und lass uns die Nav-Elemente öffnen . Und für die Hintergrundfarbe kann ich vielleicht die Hintergrundfarbe loswerden. Los geht's und wir machen dasselbe für den letzten. Klicken Sie hier, werden Sie es los. Also einfach hier klicken, wo es leer ist. Und jetzt haben wir das Problem behoben. Wenn ich also hier und dann genau hier klicke, funktioniert alles wie es sollte, und jetzt kann es losgehen. Wenn wir zurück zu unserer Kursseite wechseln und das gleich hier testen. Wenn ich es wirklich schnell in der Vorschau sehe, klicken Sie, um es zu öffnen. Sie können jetzt sehen, dass wir diesen Abstand dazwischen haben. Jetzt, da dieser Abschnitt abgeschlossen ist, aber ich kann tatsächlich mit dem nächsten Abschnitt fortfahren, bei dem es sich in unserem Design, wenn Sie sich erinnern, um in unserem Design, diese Autos handelt. Also unsere exklusive Kollektion. Was ich tun kann, ist zum Workflow zurückzukehren. Klicken Sie auf meine Seiten, gehen Sie zur Homepage, und das ist eine großartige Sache an Webflow. Ich kann hier klicken und den gesamten Abschnitt nutzen. Sie können also sehen, aus welchem Grund auch immer ich es einer Klasse von Abschnitten gegeben habe. Also lasst uns diese Klasse umbenennen und sie Sammlung nennen oder sind exklusiv. Ich kann z. B. keine Collusive Collection eingeben . Da haben wir's. Ich werde in diesem Abschnitt einfach Control C drücken. Wechselt zurück zu meiner Kursseite. Wählen Sie My Body Control V und es wird in den Abschnitt unten eingefügt , hier ist es genau hier. Ich kann es einfach hierher ziehen. Und Sie können sehen, dass es den gleichen Abstand wie zuvor beibehalten wird. Aber jetzt drücke ich auf Duplizieren der Klasse und benenne sie dann einfach in Autos um. Weil ich sicher sein möchte , dass es nur hier auf dieser Seite ist. Das ist also die Kursseite und das ist die Homepage. Wenn ich also hier ausgewählt habe, können Sie sehen, ob ich diesen Abschnitt schließe , nur eine exklusive Sammlung, was ich will. Wenn ich also Änderungen vornehme, werden sie nicht auf diese Seite übertragen, sondern bleiben nur auf der Kursseite. Wenn ich das auswähle, möchte ich als Erstes diese Schaltfläche entfernen. Wählen Sie dann den Wrapper für meine Sammlungsliste aus, klicken Sie hier, und dann haben wir das Zuhause hier. Also werde ich die Klasse auch hier duplizieren und ihr einfach einen Namen geben, Autos. Und mal sehen, was wir noch haben. Ich denke, wir haben eine neue Sammlungsliste. tun wir. Also lasst uns das duplizieren und nennen wir es auch hier Autos. Da haben wir's. Und Sammlungsstück. Wir haben nichts, also jetzt funktioniert alles gut. Ja. Also gehe ich auf dem Sammlungslisten-Wrapper zu den Einstellungen und zeige einfach meine acht Artikel. Da haben wir's. Und jetzt zeigt es sich einfach so, wie es sich von vornherein zeigen sollte. Wenn ich also hier auf Vorschau klicke, kannst du sehen, dass wir jetzt die Kursseite haben, also haben wir dieses Bild oben. Ich weiß nicht, warum es ständig auf und ab springt, aber das sollte es nicht. Und hier haben wir das. Also funktioniert alles wie es sollte. Ich finde das einfach toll. Und mal sehen, dafür können wir es vielleicht einschränken. Also für den Container, sehen wir uns hier einen an, ein Auto. Was ich tun kann, ist einige Ränder hinzuzufügen damit ich mit Auto fahren kann, und ich kann hier links und rechts mit Auto fahren. Und das sollte hoffentlich mit dem Abprallen aufhören. Und für das Heldenbild, dieses, kann ich ihm eine maximale Breite von 100 Prozent geben, die es bereits hat. Und ich denke, das ist es. Ich denke, das wird das Problem langfristig lösen. Wie Sie sehen können, sobald sie in den Vorschaumodus wechseln, scrollen Sie nach oben und unten, es repariert sich von selbst. Aber gerade in der Vorschau springt es nach links und rechts. Und wenn ich später klicke, um diese neuen Seiten zu öffnen, wird das Problem erneut auftreten. Aber mit dieser neuen Seite und all diesen verschiedenen Bildern, die wir erstellt haben, und wenn wir über eine neue Seite sprechen, kehren wir zur Startseite zurück. Und hier haben wir unter Seiten wir unsere Autovorlage haben. Dies ist die Seite, dass wir unsere Autovorlage haben. Dies ist die Seite, die wir als Nächstes entwerfen werden, und ich sehe Sie im nächsten Video wenn wir uns damit befassen werden. Und darin werden viele verschiedene Informationen enthalten sein , die wir bereits erstellt haben . Also werde ich dich dort sehen. 180. Autos Vorlage erstellen: Damit wir all diese Informationen , die wir in unser CMS eingegeben haben, aufnehmen können . Wir müssen diese Kursvorlage verwenden, die automatisch erstellt wird. Wenn ich also genau dort klicke, kannst du sehen, dass nichts wirklich passiert. Also, wenn ich den Körper auswähle, lass mich das überprüfen. Es erbt diese Body-All-Page-Tags. Also Körperfarbe, was in Ordnung ist, aber wie Sie sehen können, keine Elemente im Inneren. Lassen Sie mich also auf Control K drücken und Navbar eingeben. Fügen wir unsere Navbar hinzu und lassen Sie uns diese Seite genauso wie zuvor erstellen . Als nächstes drücke ich Control K und tippe das Formular ein, Kontaktiere uns Formularkontrolle K, gib Map und Control K und tippe die Fußzeile ein. Da hast du es. Jetzt haben wir all unsere regulären Elemente wie wir es auf all diesen vorherigen Seiten getan haben, aber wir haben immer noch die Informationen hier. Wenn ich also zu XD zurückkehre, müssen wir diese Menge an Informationen darin aufnehmen . Also lass uns anfangen. Lass uns das einfach machen und lass uns all diese Informationen erstellen. Wenn ich hierher zurückkehre, brauche ich natürlich einen neuen Abschnitt. Und ich werde die Klasse der Sektion einteilen, genauso wie ich es immer tue. Lege es direkt unter meine Navbar. Und in diesem Abschnitt nennen wir es zuerst z.B. Fahrzeugdetails wie diese. Und in diesem Abschnitt sehen wir uns an, was wir tun können, ist, einen Div-, Div-Block einzufügen , ihn Container nennen. Und gib ihm sofort eine andere Klasse von Kartendetails. Container wie dieser. Das ist also ein Container mit den Kartendetails, nur damit wir wissen, was wir tun. Und dann lass uns sehen. Wir können mehr Tauchgänge machen. Also Control K, gib def ein. Diese erste wird Karteninformationen sein. Und das sind die Informationen, die sich auf der linken Seite der Seite befinden werden. Bilder und der gesamte Text unten. Und du kannst es dir hier ansehen. Und schließlich drücken Sie noch einmal Control K und fügen Sie ein weiteres Div hinzu. Und dieses Div nenne ich Car Action Card, das ist das Auto, das sich auf der rechten Seite befindet und einfach oben bleibt und uns dann folgt, während wir nach unten scrollen. Also, was wir hier für den Container tun können, ist dass ich die Flexbox einschalte und meine Horizontale verwende. Und mal sehen, wir können es an die Spitze halten und wir können es vielleicht so positionieren. Für die Fahrzeuginformation selbst muss es dann etwas breit sein. Also lass uns mit 65 Prozent weitermachen. Da haben wir's. Für die Auto-Aktionskarte können wir vielleicht 30% verwenden, so etwas. Und es wird offensichtlich diese fünf Prozent dazwischen haben . Dann möchte ich endlich vielleicht mit einem kleinen Rand hier auf den Container gehen . Vielleicht nehmen Sie etwas wie 40 oben, nur um uns ein wenig von der Navigation abzuheben. Und dann fangen wir doch mal mit der Car Action Card an. Also, was ich zuerst tun kann, schauen wir mal. Schauen wir uns zuerst das Design an. Also hier haben wir dieses Etikett, wir haben Texte, diese Texte und zwei Knöpfe und einen weißen Hintergrund mit einem Eckradius von acht, glaube ich. Ja, los geht's. Lassen Sie mich also zu meinem Design zurückkehren. Wählen wir die Auto-Aktionskarte aus. Fangen wir an, den Inhalt hinein zu legen. Also drücke ich Control K. Aber bevor ich das tue, lassen Sie uns zu hier zurückkehren, wo Bild und Farbverlauf stehen und wo Farbe steht, ich werde eine weiße Farbe wählen. Und ich werde den Eckradius so wählen , dass er acht Pixel beträgt, Y-Wert. Dann drinnen drückte er die Strg-Taste und tippte h3 , ging und wählte h3 genau hier aus. Für dieses Alter von drei Jahren, mal sehen. Was ich tun kann ist, dass ich es geben kann. Sehen wir uns alle h3-Überschriften an. Mal sehen, wie das aussieht. Noch einmal. Also lasst uns das h3c loswerden, was wir dunkel haben. Wieder einmal hat es keinen Stil geerbt. Ich weiß nicht, was passiert ist. Also mach das ganze H3 für diesen weg, Poppins. Ich weiß wirklich nicht, was mit 24 passiert. Und mal sehen, das sollte 40 sein und die Farbe sollte die Farbe des dritten Alters sein. Da haben wir's. Also gebe ich jetzt so etwas wie den Namen des Autos ein. Da hast du es. Ich drücke Control C, Control V. Und bei diesem H drei wird h drei blau sein. Da haben wir's. Wir erben Schulden. Und darunter fügen wir Control K p für den Absatz ein. Lassen Sie uns alle Absätze einfügen. Auch hier hat es das Style-Attribut nicht geerbt. Ich weiß nicht, was passiert, denn jedes Mal, wenn du das tust, erbt es den Stil wie er sollte. Also lass uns mit 16 weitermachen. Und lass uns weitermachen, was können wir hier hingehen? Mal sehen, 26 vielleicht. Also 26. Und in diesem Fall lassen Sie mich einfach diese dunkle Farbe wählen, z. B. so sollte diese sein. Und sagen wir, jetzt zur Abholung verfügbar und Sie können sehen, wie die Karte tatsächlich skaliert. Also, was werden wir in diesem Fall tun, ist, dass wir das jetzt in ein Div packen können. Also drücke Control K. Ich war div und füge das alles in ein Div ein. So wie. Also, dieses Div sollte etwas heißen wie Car Action, Content, Correction Card Content, so etwas. Und es sollte auf dieser Seite eine Innenpolsterung von vielleicht 24 haben . Weil ich es vom linken Bildschirmrand entfernen möchte, ungefähr so. Innerhalb der Schulden kann ich die Taste K drücken und B für die Taste eingeben. Und ich wähle hier meinen Hauptknopf aus. Und diese Haupttaste kann auch eine separate Klasse von Car-Aktionstasten haben . Da haben wir's. Vielleicht kann ich einfach so etwas wie Reserve eingeben . Dieses Auto. Da haben wir's. Ich denke, das wird gut funktionieren. Dann drücke ich Strg C, Strg V , um diese Schaltfläche einzufügen. Ich werde diese Klassen loswerden. Für diese Klasse werde ich sie duplizieren und sie einfach nennen Schauen wir uns Batson Outline an. Für die Gliederung der Schaltflächen haben wir hier dasselbe, aber C, Kreditoptionen. Da haben wir's. Und was wir hier haben, schauen wir mal. Reservieren Sie dieses Auto, damit es die gleiche Breite haben sollte. Also vielleicht kann ich hier 47 Padding haben. Lassen Sie uns das ein wenig auf 47 reduzieren , nur damit wir die Größe dieser beiden Tasten anpassen können. Dieser Schaltflächenumriss sollte, sagen wir, eine weiße Farbe haben , da der Hintergrund weiß ist. Der Text darin sollte, mal sehen, nicht dieser sein, aber vielleicht dieser. Und es sollte einen solchen Grundriss haben. Aber statt schwarz, geben wir ihm diesen Umriss. Und der Eckradius ist immer noch acht, und geben wir ihm eine Polsterung. Mal sehen, wie weit wir sie hier von 24 getrennt haben. Das obere Lager sollte also etwa 24 sein und die untere Polsterung sollte ebenfalls 24 sein. Es gibt uns also nur diesen Platz für unsere Karte unten. Dann können wir diesem Absatz so etwas wie Abholung, P-Pickup geben . Schauen wir uns nun an, was wir für die Entfernungen in unserem Design haben . Wir haben 24 und dann haben wir hier 24. Also lass uns das machen. Also wähle ich einfach hier aus und tippe etwas wie s104 ein. Ich halte die Alt-Taste gedrückt und mache das gleichzeitig. Das sieht also gut aus. Und zum Schluss möchte ich für die Button-Gliederung den Mauszeiger in den Mauszeiger ändern. Innenseite des Covers. Ich werde das noch einmal in Weiß ändern und dann die Farbe meines Textes ändern, dann die Farbe meines Textes ändern vielleicht in diesen h3-Absatz, sagen wir und lassen Sie uns sehen, ändern Sie die Farbe dieser Gliederung auf Alter drei Absatz auch. Lass mich mich verstecken, damit du es ein bisschen besser sehen kannst. So wie das. N wird die ganze Breite erben. Wenn ich also sehr schnell auf Vorschau klicke, kannst du sehen, was wir bisher haben. Also reserviere dieses Auto, mein Schatz. Und wir haben nur C-Optionen. Ja, ich denke, das funktioniert gut. Und anstatt dass ich mit dem Text hier hin und her gehe , kann ich einfach verbinden. Sie erinnern sich also, wie wir diese CMS-Sammlung zuvor erstellt haben , und dies ist die Narbenvorlage. Und hier können Sie sehen, für welches Auto Sie entscheiden. Derzeit sind wir auf einer Lamborghini Hurricane-Seite, aber Sie können das jederzeit ändern. Sie können also Texte aus dem Auswahlfeld für Autos erhalten, und ich werde den Namen auswählen. Da wir uns also auf dem Lamborghini Hurricane befinden, wird dieser Name ins Spiel kommen. Dann wird auch dieser einziehen, wählen Sie den Feldautopreis aus. Und das ist nur die reguläre , die dorthin gehen wird. Nun, da dieser blaue die Polsterung an der Unterseite hat, werde ich ihn loswerden, aber H3 blau und ich nenne ihn Cars, Cars Templates, weil er sich hier befindet. Ich werde es loswerden, weil es diesen Abstand genau hier erbt. Und der Inhalt des Autos. Vielleicht können wir auf dieser Seite etwas Polsterung haben. Also vielleicht können wir etwas wie Acht oder etwas auf der rechten Seite eingeben . Mal sehen. Ja, ich denke, acht werden gut gehen, nur weil sie eine Skalierung kleinerer Größen und nur eine Verringerung der Schulden wollen . Nun, im Grunde ist dieser Autoinhalt fast fertig, aber was wir zusätzlich brauchen, ist, dass wir dieses Etikett brauchen. Lassen Sie uns also ein weiteres Div erstellen. Also drücken Sie Control K und geben Sie def ein. Und stell das hier oben drauf. Und dafür können wir es z.B. Auto oder Etikett nennen. Da haben wir's. Und für das Auto und das Etikett kann ich ihm etwas Breite geben. Also gebe ich 108. Das wird also meine Breite sein und die maximale Breite wird ungefähr 140 sein. Vielleicht. Wir können das später überprüfen und sehen, ob es funktioniert. Für die Hintergrundfarbe. Was wir tun können, ist die Körperfarbe zu wählen. So wie das. Denn wenn ich Sie zu unserem Design mitnehme, können Sie sehen, dass es genau das tut. Hier. Was wir tun werden, ist diese Elemente einzubeziehen. Also zuerst muss ich diese Elemente hineinlegen. Drücken Sie also Control K und geben Sie das Bild ein. Für das Bild möchte ich von Autos fotografiert werden , sagen wir vom Feld. Und sehen wir uns das Autotypetikett an, das brauchen wir. Und in diesem Auto, weil es ein Superauto ist, kann man sehen, dass es sich von diesem Feld aus durchsetzt. Es tut mir leid. Und jetzt muss ich auf dem aktuellen Etikett diesen Absatztext einbeziehen. Was ich also tun kann, ist Control K zu drücken, P einzugeben und mit dem Absatz zu beginnen. Und geben wir ihm einen Absatz. Mal sehen, Lass uns beschriftete Texte sehen. Weil es tatsächlich kleiner ist und wir diese Klasse haben , die einfach genau dort einzieht. Und das kann ich wählen. Mal sehen, gib es dem Texas Super Car. Aber bevor wir das tun, möchte ich es auswählen und Texte von Autos erhalten. Und das wird ein Autotyp sein. Es wird also vom Autotyp selbst ausgehen. Da hast du es. Damit das jetzt aneinander haftet, schalte ich die Flexbox ein. Stellen Sie sicher, dass sie genau hier zentriert sind. Und schauen wir mal, stellen Sie sicher, dass unser Bild keine komische Paarung hat, aber unsere Texte schon. Also lass uns es loswerden. Lass uns mit Null gehen. Jetzt sind sie zentriert und das wird, mal sehen, das Autolabelsymbol sein. Ich verstehe. Und wenn ich es zu unserem Design zurücknehme, können Sie sehen, dass wir zwischen diesen beiden einen Abstand von acht haben . Es wird also einfach den rechten Rand von acht haben. Und zum Schluss wollen wir etwas Polsterung hineinlegen. Was ich also tun kann, ist vielleicht für das Auto ein Etikett hier, ich kann mit 16 auf jeder Seite reinspringen. Ich finde, das sieht gut aus. Aber für die Breiten nehmen wir auch hier 140. Da haben wir's. Ich kann sogar einen Reset machen. Mal sehen, wie das aussieht. Großartig. Okay. Sehen wir uns 24 auf jeder Seite an, genau hier. Also lass uns mit 24 weitermachen. Nochmals meine Alt-Taste gedrückt halten. Da hast du es. Und auf dieser Seite gebe ich 24 ein, gebe ich 24 ein nur damit es mit meinen unten stehenden Inhalten übereinstimmt. Aber hier können Sie sehen , dass wir dieses Problem haben, also müssen wir ihm etwas Breite geben. Also lass uns mit 140 fahren, glaube ich, denn das ist am längsten. Mal sehen, vielleicht etwa zweiunddreißig. Wir können es bis zu einer maximalen Breite von einem Drittel e bis geben, ich denke, es wird gut funktionieren. Und die Breite hier wird , sagen wir 132 sein. Also ich denke, es wird gut werden. Und ich werde mich nicht mit der Größe befassen weil ich diese Paarung bereits hinzugefügt habe, aber ich kann vielleicht ein zusätzliches Verbot von acht hinzufügen. Und das wird mir nur etwas zusätzlichen Platz im Inneren geben . Und schließlich hat dies einen Eckradius von vier, also lassen Sie uns das ganz schnell erledigen. Also hier auf dem aktuellen Etikett scrolle ich nach unten und tippe vier ein und füge die Polsterung hinzu. Also los geht's. Jetzt haben wir unsere Karte. Wenn ich also zwischen diesen Seiten hin- und herwechsle, befinden wir uns hier in einem Lamborghini-Hurrikan. Du kannst z.B. diesen überprüfen und schauen, wie das für den Maclaurin aussieht weil der Text etwas länger ist. Und wenn ich zum Beispiel zu diesem wechsle, kannst du sehen, dass sich alles ändert, auch dieses. Aber ich bin nicht wirklich ein Fan davon, wie das aussieht. Vielleicht können wir es also ändern. Es ist also nicht dasselbe, aber so oder so, es behält den Abstand einfach sehr gut bei. Wir haben also ein aktuelles Label und vielleicht können wir das auf etwas weniger wie 128 anpassen , vielleicht so etwas. Also, wenn wir jetzt zwischen ihnen wechseln, ja, es sieht ein bisschen besser aus. Wenn ich also hier auf Vorschau klicke, kannst du das sogar hier tun und einfach sehen, wie sie alle aussehen. Also werde ich das Video hier beenden , weil wir schon 16 Minuten hinter uns haben. Und wenn wir zurückkommen, werden wir anfangen, uns mit diesem Abschnitt zu befassen , der etwas anspruchsvoller ist als dieser. Also werde ich dich dort sehen. 181. Autos Vorlage bauen Teil 2: Okay, lassen Sie uns dort weitermachen, wo wir aufgehört haben, und uns mit dem schwierigsten Teil dieses Projekts befassen , denn wir müssen diese Seite und diese Elemente jetzt hier erstellen . Und sie werden ziemlich knifflig sein, aber versuche einfach, mir zu folgen. Wenn nicht, können Sie dieses Projekt jederzeit einfach klonen oder öffnen und versuchen, es noch einmal zu tun. Also zuerst, lass uns mit einem Div beginnen. Drücken Sie also Control K und geben Sie div ein. Und dieses Div wird Auto heißen. Autogalerie. Vielleicht Ihre Fahrzeuginformation, sagen wir. Lassen Sie mich mein ursprüngliches Projekt überprüfen und sehen. Also Autogalerie, weil das die Autoinformation ist. Ja. Die Autogalerie. Und in dieser Autogalerie drücke ich auf Control K und gib div ein. Und dieses Div wird Car Hero Image, IMG, heißen. Und was ich innerhalb der Schulden tun kann, ist in meinen Leuchtkasten zu stecken. Drücken Sie also Control K und geben Sie Lightbox ein. Da haben wir's. Mit dem Leuchtkasten. Es ist komplett leer, Sie müssen also Informationen von irgendwoher abrufen , sodass Sie es zuerst einrichten müssen. Also hol Medien von Autos. Und das erste Feld, das ich machen werde, ist, sagen wir, das Autorenbild auszuwählen . Also geh zurück zu hier. Mal sehen, mein Leuchtkasten funktioniert. Und geben wir ihm den Namen Car Hero Lightbox. Bilder. Da hast du es. Und jetzt muss ich tun , wo Bild steht, ich werde es auswählen und mal sehen, wir müssen es so einrichten, dass es Bilder abruft. Holen Sie sich also Bilder von Autos und wählen Sie ein Feld aus, sagen wir Kartenheldenbild. Und weil wir auf Lamborghini Hurricane sind, funktioniert es aber nicht Autokarte, sondern Car Hero Image. Da hast du es. Also Nummer eins. Und jetzt, wo das abgeschlossen ist und wir es fertig haben, müssen wir das, das Etikett, das wir hier gesehen haben, eintragen , dem alle Bilder stehen. Lassen Sie uns also schnell damit umgehen. Also, was ich genau hier im Car Hero-Bild machen werde , ist Strg K zu drücken, def einzugeben und es direkt über meinem Leuchtkasten zu positionieren. Und ich gebe ihm den Namen C. Alle Bilder. Und geben wir ihm eine Polsterung von 12 auf jeder Seite. 121 für jeden Stil, so wie dieser. 12 auf jeder Seite. Lass uns so etwas sehen. Und ich gebe ihm eine Hintergrundfarbe von reinem Weiß sind Schulden. Und was ich da drin machen kann ist, dass du vielleicht die maximale Breite hattest. Maximale Breite von 145, nur damit es nicht ganz zur Seite reicht. Die Höhe wird automatisch sein. Und darin werde ich schnell einen Absatz hinzufügen. Drücken Sie also Strg K und geben Sie P für den Absatz ein. Und ich werde meinen Text eingeben und alle Bilder sehen. Da haben wir's. Und schau, ob das Styling funktioniert. Ja, weil es für alle Absätze erbt , das funktioniert einwandfrei. Nun zu den Bildern von Car Hero, was ich tun kann, mal sehen, ist, dass ich das, mal sehen, platzieren werde . Image eines Autohelden wird also relativ sein. Dieser. So relativ. Und das Innere wird absolut sein. Also lass uns die Position einfach auf absolut ändern. Und stell es einfach in diese rechte Ecke. Nun, was diesen Absatz angeht, denke ich, ja, er behält das bei. Wenn ich also auf Null gehe, sollte es so bleiben, wie es ist. Und hier kann ich endlich ein bisschen mit der Positionierung herumspielen. Also vielleicht kann ich mit einem gehen und vielleicht kann ich mit einem unten oder vielleicht zwei gehen. Mal sehen, wohin uns das führt. Ja, ich denke, zwei funktionieren für diesen Fall ganz gut. Aber wenn ich auf Vorschau klicke, klicke hier. Du kannst sehen, dass wir jetzt nur dieses eine Bild in unserem Leuchtkasten haben , also müssen wir mehr hinzufügen. Und um das zu tun, werden wir genau hier auf diesem Auto und der Galerie zu diesem Autohelden-Bild näher kommen. Da haben wir's. Und in den Fahrzeuginformationen drücke ich auf Control K und tippe Sammlungsliste. Da hast du es. Diese Sammlungsliste wird Cars Gallery One verbunden. Und es wird diese vier Bilder haben, wenn du dich erinnerst. Also, wenn ich hierher gehe und ihm einen Namen gebe, sagen wir Autos, Galerie. Eins. So wie es ist. Gehe zu meinen Einstellungen und stelle sicher, dass ich die Bilder davon erhalte. Die Quelle ist also diese. Also Cars Gallery One, was in Ordnung ist, gehen Sie zurück zu hier, und ich muss es natürlich zuweisen. Also Sammlungsliste, Sammlungsartikel. Hier können Sie sehen, dass wir diese Bilder haben, also haben wir 234.5. Sie sind nicht in der richtigen Reihenfolge. Was wir also sehr schnell tun können, ist mal sehen, mal sehen. Vielleicht können wir uns mit der Sammlungsliste befassen und sie als Flexbox wie diese zeigen. Und vielleicht stellen Sie sicher, dass wir den Raum dazwischen haben. Für hier. Mal sehen, was wir tun können. Sammlung, Liste, Artikel, Auto, Galerie eins. Aus irgendeinem Grund. Es zeigt mir die Bilder nicht. Galerie eins. Da hast du es. Es zeigt mir die Bilder , aber es zeigt mir die Hintergrundbilder. Also ja, ich sollte den Leuchtkasten eigentlich hineinstellen. Also lass uns diesen loswerden. Was ich tun kann, ist das innerhalb des Sammlungsgegenstands zu tun, oder ich drücke Control K, tippe Leuchtkasten ein und stecke den Leuchtkasten hinein. Jetzt können Sie also sehen, dass wir diesen Leuchtkasten so haben. Ich gebe ihm im Grunde den gleichen Namen wie diesem ersten. Also werde ich gleich hierher gehen. Autoheld, Leuchtkastenbilder. Wählen Sie also dieses, Car Hero- oder vielleicht Car Lightbox-Bilder aus. Nun, noch besser , lassen Sie uns Ihnen dieselben Lightbox-Bilder von Car Hero geben. Da haben wir's. Also genau dieselbe Klasse. Und schließlich müssen wir es verbinden. Wenn ich also das Bild öffne und Bilder davon erhalte, sagst du Autogalerie eins. Also dort klicken und los geht's. Jetzt haben wir alle unsere Bilder drin. Nun, eine Sache, an der wir arbeiten sollten , ist ein bisschen Abstand genau hier. Mal sehen, Holen Sie sich Medien von Autos. Autogalerie eins, das ist in Ordnung. Jetzt ist also alles verbunden. Aber das will ich eigentlich nicht. Denn wenn ich jetzt auf Vorschau klicke, siehst du, dass keine Verbindung hergestellt wird, also muss ich es mit anderen Leuchtkästen verbinden. Ich glaube. In Verbindung mit anderen Leuchtkästen hier sollte der Gruppenname Autogalerie oder Essen oder Galerie lauten. Okay, wenn ich auf Vorschau klicke, wird jetzt immer noch diese Kursgalerie angezeigt. Lassen Sie mich tatsächlich sehen, was hier das Problem ist. Also Autogalerie, lass uns das versuchen. Da haben wir's. Jetzt haben wir diese 1.234,5. Alles funktioniert wie es sollte. Du kannst sehen, wie es aussieht. Und was ich jetzt tun kann, glaube ich, ist, stattdessen ein bisschen mit einigen Einstellungen herumzuspielen. Anstatt dass das eine Flexbox ist, kann ich sie vielleicht in ein Grid verwandeln. Erstellen Sie hier vier Spalten und entfernen Sie diese zweite Zeile. Drücken Sie Fertig. Und ich denke, es ist in Ordnung. Also diese Sammlungsliste, mal sehen, Autogalerie eins. Ja, Keras Galerie 1 kann oben einen gewissen Rand haben und der Rand sollte 24 sein. Also lass uns mit 24 weitermachen. Rand. Da haben wir's. Jetzt haben wir also Autogalerie eins. Was wir in diesem Fall tun können ist, es mit einem frechen Duplikat zu versuchen. Also drücke Control C, Control V. Also lass uns das jetzt umbenennen, um diese Klasse zu duplizieren, nenne sie Galerie zu. Und in dieser Galerie auch. Versuchen wir tatsächlich, es mit dem anderen Leuchtkasten zu verbinden. Also Sammlungsliste. Mal sehen, was wir tun können. Können wir es irgendwie verknüpfen? können wir nicht. Mal sehen, was wir sonst noch tun können? Also lass uns das loswerden. Und was ich in diesem Fall tun kann ist einfach eine neue Kollektion hinzuzufügen. Strg K, fange von vorne an. Wenn Sie also eine Sammlung oder Liste wie diese eingeben, sollten wir sie auch mit der Autogalerie verknüpfen. Eigentlich. Und das wird ihm einen Namen geben. Was wir also tun können, ist zu hier zurückzukehren, in diesem Fall zur Autogalerie. Da haben wir's. Und es wird uns das zeigen. Also 67,8. Denken Sie also daran, was wir mit diesem Gegenstand in der Sammlung gemacht Gegenstand in der Sammlung haben, den wir in den Leuchtkasten legen müssen. Also lass uns das gleich hier machen. Also Sammlungsliste, Sammlung, Artikel Control K geben Sie Lightbox ein. habe dir gesagt, dass das schwierig sein wird. Und jetzt müssen wir diese verbinden. Also sollte eine Lightbox mit dieser verbunden werden. Lassen Sie uns es von hier auswählen, ich denke, holen Sie sich auch ein Bild aus der Autogalerie. Da haben wir's. Es zeigt das. Also 5678. Ja. Mal sehen, was wir in diesem Fall tun können. Also ich denke, wir können auf der Sammlungsliste haben, wir können die Raster genauso platzieren wie zuvor, in das Raster einfügen und ihm ein Raster mit drei Spalten Breite geben, vielleicht vier Spalten breit. Es bleibt also dieselbe Dimension, wird es gleich hier entfernt, hier klicken und zu Einstellungen gehen. Und ich muss sicherstellen, dass es mit anderen Leuchtkästen verbunden ist. Box verbindet sich mit anderen Leuchtkästen. Und wie lautete der Name? Schon wieder? Autogalerie. Da haben wir's. Lassen Sie uns das alles schließen. Lass uns hierher gehen. Autogalerie. Da haben wir's. Wenn ich jetzt auf Schnellvorschau klicke, klicke hier. Nein, es ist aus irgendeinem Grund immer noch nicht verlinkt, also versuchen wir es noch einmal. Sie können also keine Artikel sehen, die aus irgendeinem Grund gefunden wurden. Schauen wir uns also den Lightbox-Link in den Einstellungen an. Vielleicht kann ich ihm einen Kurs geben. Mal sehen, dieser Leuchtkasten erhält Medien von der zweiten Autogalerie . Und lass es uns versuchen. Jetzt. Da haben wir's. Also hätte es einfach Medien von bekommen sollen. Wenn ich mich jetzt durch diese Seiten klicke, kannst du sehen, dass wir alle acht Bilder haben. Und als ich sie durchgeschaltet habe, kann man sehen, dass alles wunderbar funktioniert. Ein letzter Schritt ist nun, dass ich versuchen muss , dies zu verbergen. Was ich also tun kann, ist das alles zu schließen, zu meinem Styling zurückzukehren, Kursgalerie-Tool auszuwählen und einfach zu versuchen , diese Elemente auszublenden und zu sehen, ob das funktioniert. Und das tut es. Also 2345678. Es ist also da auf der Seite, es ist einfach nicht sichtbar. Also kann ich hier sogar meine Pfeile benutzen und links und rechts auflisten. Du kannst es in diesem Fall sehen, sodass ich zwischen ihnen wechseln kann. Alles funktioniert wie es sollte. Es ist einfach nicht sichtbar. Hoffentlich sind es 14 Minuten in diesem Video, du merkst, dass ich sogar manchmal meine entworfene Öffnung genau hier habe, aber manchmal funktioniert sogar das nicht richtig. Du musst also kreativ damit sein. Du musst es dir vorstellen, du musst es durcharbeiten. Und manchmal tauchen diese Probleme auf. Aber mehr dieser Probleme, die Sie besser lösen, Designer und Entwickler, werden Sie mit der Zeit bekommen. Ich werde dieses Video hier beenden. Und im nächsten Video werden wir mit den folgenden Informationen fortfahren. Und ich werde zeigen, wie man diese verschiedenen Abschnitte hinzufügt. Und im Grunde wird es sich noch einmal wiederholen. Wir werden es verbinden. Aber bevor wir das tun, lassen Sie uns kurz darauf eingehen. Also lass uns zum Beispiel zu Cadillac eskalieren und du kannst sehen , dass es umgestellt wurde. Wenn ich also hier auf Vorschau klicke, klicke auf Eskalieren. Alles ist so vernetzt, wie es sollte, was schön zu sehen ist, und es erspart uns eine Menge Zeit. Jetzt erstellen wir zum ersten Mal ein Layout für unsere Kunden. Und sobald sie wechseln, können Sie sehen, dass es aktualisiert werden sollte. Ich denke, aus irgendeinem Grund wurde es nicht aktualisiert. Also versuchen wir es mit diesem. Ich zeichne einen Spaziergang. Es wird also hier aktualisiert, aber nicht hier. Es zeigt mir jetzt diese lauten Farben. Wenn ich also zum nächsten wechsle, wird mir vielleicht aufgrund des Updates eine Reichweite oder ein Walk angezeigt . Sie können also sehen, es zeigt mir den Range Rover, vogue. Aber wenn ich zurück zur Vogue gehe und dort auf Vorschau klicke, wird mir jetzt der Range Rover Vogue angezeigt , den ich überhaupt wollte. Es funktioniert also. Es dauert nur ein wenig Zeit , bis es aktualisiert ist, sodass Sie sehen können, dass alles so funktioniert, wie es sollte, wie wir es wollen. Gehen wir zurück zu Lamborghini , denn dort haben wir angefangen. Und wie ich im nächsten Video sagte, werden wir mit dem nächsten Abschnitt beginnen. Also werde ich dich dort sehen. 182. Autos Vorlage bauen Teil 3: Lass uns jetzt dort weitermachen, wo wir aufgehört haben. Und mir wurde gerade klar, dass dies nicht in einem Div ist. Also drücken wir Control K und geben div und drinnen, weil es Car Gallery sein sollte, aber ich habe es einfach draußen platziert, damit es egal ist. Nennen wir es vielleicht Autogalerie oder Main Kalgoorlie oder wie auch immer du dein nennen willst. Und stellen wir es hier hin. Das sollte hier hingehören. Dies sollte höher sein, dies sollte darüber hinausgehen, und alles sollte wie erwartet funktionieren. Schauen wir es uns einfach an. Ja. Also funktioniert alles wie es sollte. Und wir werden uns noch nicht mit Responsive befassen , da dieser Abschnitt den gesamten Abschnitt, die gesamte Breite des Abschnitts einnehmen wird und nur die 12.20 Padding darin haben wird. Wir werden diese Bilder auch verstecken und nur ein Hauptbild haben. Aber wenn Sie klicken, können Sie Ihr Layout natürlich auch hier haben. Sie können auf verschiedenen Seiten sehen, wie es aussieht , da dies nur eine Hauptkomponente ist und auf jedem einzelnen Bildschirm gut angezeigt wird. Gehen wir also zurück zu hier und kehren wir zur Bearbeitung zurück, weil wir den nächsten Abschnitt erstellen müssen , der dieser Übersichtsabschnitt sein wird. Also lass uns gehen und genau das tun. Jetzt, wo wir unsere aktuelle Galerie oben haben, muss ich hier Strg K drücken und ein Div eingeben, das ich Übersicht nenne. So wie das. In der Übersicht werde ich die maximale Höhe von 196 angeben, was der maximalen Höhe dessen entspricht, was wir zuvor erstellt haben. Ich nehme einfach die Farbe von reinem Weiß. Und ich werde den Eckradius von acht haben , glaube ich. Ja. Dann lass uns reingehen und schauen, was wir brauchen. Also brauchen wir das H3 Control K, geben H für den Überschriftstyp in H drei ein. Und es wird endlich von der Topographie übernommen, die wir brauchen, also behalten wir es bei und ich gebe die Übersicht ein. Und dafür werde ich hier eine Kombiklasse hinzufügen, und ich nenne sie z. B. Alter von drei Jahren. Informationen zum Auto. Da haben wir's. Und hier werden wir vielleicht etwas Polsterung oder Rand einfügen. Mal sehen. Lassen Sie uns hier mit einer Marge von Null beginnen. Lassen Sie uns hier mit einer Marge von Null beginnen. Und ich setze die Top-Paarung von 24 ein. Und ich gebe, sagen wir, den linken Rand von 24 an. Das gibt mir diesbezüglich nur ein bisschen Freiraum für den Überblick, was ich tun kann, ist vielleicht mal schauen. Ich kann einfach meine obere Marge von 24 eingeben. Ich werde diesen Abschnitt einfach hier verschieben. Mal sehen, vielleicht, ja, das ist es. Drücken wir also noch einmal Control K , weil wir diese Informationen jetzt eingeben müssen. Also erstelle ein anderes Div, den Block. Und diesen Block nenne ich Car Overview , weil es genau das ist, was er ist. Und das wird unser Netz sein. Aber vorher müssen wir uns mit diesen langweiligen kleinen Abschnitten auseinandersetzen . Wenn ich Sie also hierher zurückbringe, haben wir hier ein Raster aus vier Spalten und zwei Zeilen mit insgesamt acht Elementen. Jedes einzelne Objekt wird sich in einem separaten Div befinden. Und dieses Div wird das tatsächliche sein. Schauen wir uns das an, das ist die Flexbox. Also lass uns anfangen. Ich drücke noch einmal Control K . Es gab Div. Und in diesem Div-Block , den ich hier Produktion nennen werde. Hoppla. Mir war nicht bewusst, dass ich das ändern würde. Gehen wir also zurück zu hier. Also Herstellung von Diblock-Klauseln. Hier. Da haben wir's. Und in dieses Div werde ich das Bildsteuerelement einfügen, das K in das Bild eingibt , sozusagen. Und ich werde mir ein Bild aus einem ausgewählten Feld holen. Und mal sehen, was wir tun können. Eigentlich nein, ich werde kein Bild ziehen , weil wir diese Bilder bereits haben. Das wird also , mal sehen, ein Kalender, ein Symbol wie dieses sein Kalender, ein Symbol wie dieses und lass ihn es sofort aufrufen. Also wähle ein Bild, lass mich mein Kalendersymbol finden, das ist da, das ist los, dieses nebenan. Was wir haben werden, lassen Sie uns sehen, einen Absatz, geben Sie Control K ein PIE-Absatz ein. Und es wird die Absatzeinstellungen enthalten , was großartig ist. Hier. Lassen Sie uns Texte aus einem ausgewählten Feld abrufen, und das wird im Produktionsjahr sein. Mal sehen, Produktionsjahr, Produktion hier. Da haben wir's. Produktion hier. Das sieht toll aus. Schließlich werde ich daraus einen Stapel machen und sicherstellen, dass sie so angeordnet sind und dass mein Absatz auf P gesetzt ist Mal sehen, was ich tun kann. Alle Testberichte vielleicht für P-Autos. Ja, lassen Sie uns eine Überprüfung durchführen und einfach diesen unteren Rand loswerden. Und da hast du es. Jetzt werden sie genau dort hingehen. Und was ich mit diesem machen werde, ist mal sehen, wie viel es hier drin war. Ich glaube, der Abstand war 16. Hübsch. Gehen wir also zurück zu hier und geben einfach 16 für den rechten Rand ein, was das nur hineindrücken wird . Sie sich jetzt keine Sorgen, wir werden es einfach in eine andere Verpackung legen. Also lass uns sehen. Was wir tun können, ist für die Kursübersicht, was ich tun kann, ist ein Raster einzugeben. Lassen Sie uns also mit vier Spalten weitermachen. Wie wir bereits erwähnt haben, Anneliden zwei Rollen, was in Ordnung ist, die haben wir bereits. Wählen Sie also die Produktion hier aus, drücken Sie Control C. Aber vorher lassen Sie mich nur etwas überprüfen. Ich werde es einfach in die Mitte stellen. Und mal sehen, weil es ein Grid-Child ist, aber Flexbox findet, dass es hier nicht so gut aussieht. Ja, ich denke, das ist eigentlich in Ordnung. Also Control C, Control V. Und diese nächste ist was wir so duplizierte Klasse nennen werden. Wir nennen Mileage. Für den Kilometerstand. Dies wird ein doppeltes Klassenmeilensymbol sein und das Bild durch den Kilometerstand ersetzen. Also noch einmal, Sie können die Suche verwenden, wenn Sie möchten. Ich gebe das einfach und verwende für den Text statt der Übersicht den Kilometerstand. Da haben wir's. Drücken Sie nun Control C, Control V. Beim nächsten Schritt duplizieren wir die Klasse. Es wird der Kraftstofftyp sein. Lassen Sie uns sofort hören, wie das laut durch den Kraftstofftyp ersetzen. Und ich werde diese doppelte Klasse für den Kraftstofftyp ICN durch das Kraftstofftypsymbol ersetzen . Und ersetzen Sie es durch das Kraftstofftypsymbol, das das Symbol einer Pumpe ist. Lass mich sehen, wo es ist. Da haben wir's. Großartig. Eine letzte, die ich hinzufügen möchte, ist Steuerung C. Control V auf dieser Leitung ist, wenn ich die Klasse dupliziere, wird sie übertragen. Übertragung. Und lassen Sie uns den Text dafür auswählen. Übertragung, wo sie ist, wo sie ist, wo sie sich auf Übertragungsebene befindet. Und für diesen Fall duplizieren wir das und nennen wir es Übertragungssymbol. Großartig. Und lassen Sie uns einfach das Bild durch die Übertragung ersetzen, die diese ist. Und los geht's. Lassen Sie uns jetzt weitermachen und einen neuen hinzufügen. Control C control V, Control C Control V und Control C, Control V. Lassen Sie uns nun mit diesen beginnen. Lassen Sie uns zunächst diesen duplizieren. Und es wird ein Motortyp sein. Lass uns das duplizieren. Und es werden Türen sein. Dieser wird Sitze sein. Und die letzte wird die Garantie sein. Da hast du es. Lassen Sie uns nun eins nach dem anderen vorgehen und sie hier ersetzen. Das wird also eine Garantie sein. Lassen Sie uns dieses Garantiesymbol ersetzen und es durch das Garantiesymbol ersetzen, das dieser Klasse entspricht. Das nächste sollte, sehen wir uns, äh, Sitze an. Geben Sie also lackierte Sitze ein. Und das sollte es hier ersetzen. Also Seeds, ICN, ersetze das Bild durch den Sitz, der hier ist. Dieser ist Doors. Wählen Sie es also von hier aus. Wenn Sie dies erneut tun, wird eine Verbindung hergestellt und was auch immer Ihr Kunde eine neue Seite erstellt, er verbindet diese Elemente einfach in n, einfach alle funktionieren einwandfrei. Es heißt also Türen. Icon. Für das Symbol, damit es weiß, was wir wollen. Finden Sie das Türsymbol, und hier ist es, genau hier. Und schließlich werden dies die Motortypen sein. Also lass es uns hier ersetzen. Hier, Motortypklassen und lassen Sie uns das ersetzen, brauchten eine Klasse und die ICN-Stufen des Gentyps. Und lassen Sie uns das endlich ersetzen. Und wir werden startklar sein, Motor , der ist dieser. Das ist großartig. Was ich jetzt endlich tun möchte, ist, dass wir diese Übersicht über die Startwagen haben . Was Sie tun können, ist etwas Polsterung einzufügen. Also lassen Sie uns die Paarung von beiden Seiten hinzufügen, etwa 20 hier. Und lassen Sie uns oben und unten einen Rand geben. Schauen wir uns das mal an. Wir haben also schon, wir haben 24 und darunter haben wir 32. Also lass uns das machen. Wenn ich also wieder hier zurückkehre, kann ich zu den Top 24 zurückkehren, zurück nach unten gehen. Oder vielleicht noch besser kann ich hier eine Marge angeben. Also 24, weil ich den Raum draußen haben will und 32, weil ich will, dass er n drückt. Aber aus irgendeinem Grund hat es nicht reingedrückt. Sehen wir uns den Überblick an. Also vielleicht muss ich das auf die Karte selbst schreiben. Also drück hier gleich Null. Und ich kann Sie alle tatsächlich treffen, indem Sie Auto für den unteren Rand eingeben und das sollte das Problem beheben. Auch hier gibt es keine PIN-Bestellung. Normalerweise repariert es automatisch, aber es spielt keine Rolle. Lass uns einfach hier damit umgehen. Also hier gebe ich Null ein, aber für das Pairing nehme ich 32 unten. Und das behebt es jetzt tatsächlich gut. Als letztes möchte ich sicherstellen, dass dieser Abstand korrekt ist. Also, was ich hier tun werde, ist, dass wir 24 haben. Was ich tun kann, ist mein Raster ein wenig zu bearbeiten. Und hier für die Reihen kann ich mit 24 gehen und das wird sie hier ein bisschen hineindrängen. Vielleicht können wir diesen Abstand von 32 haben. Ich denke, das wird sie ganz gut zusammenbringen. Und jetzt habe ich, wir haben, ich glaube, wir haben viel mehr Luft zum Atmen , um all unsere Icons und all unsere Inhalte zu zeigen. Also noch eine letzte Sache, die ich dir hier zeigen möchte, weil ich dieses Video hier abschließen möchte. Und dann fahren wir mit dem nächsten Abschnitt fort. Das ist das im nächsten Video. Wenn ich also zwischen den Refrains wechsle, sagen wir mal, es ist 2021 und es hat so viele Kilometer. Lucy da. Sie können sehen, dass es so viele Kilometer hat, aber es ist 22 Zoll Motortyp ist Batterie. Wir haben zwei Jahre Garantie. Wenn ich das also auf Porsche Cayenne umstelle, haben wir z. B. fünf Türen. Wir haben diesen Kilometerstand, wir haben ein Jahr, alles wird in Echtzeit aktualisiert. Und das ist das pure Schöne an diesen Webflow CMS-Vorlagen denn Sie erstellen eine Vorlage und alle Inhalte, die Sie oder Ihr Kunde erstellt haben, werden automatisch aktualisiert. Kehren wir also zu unserem Hurrikan zurück , denn das haben wir bearbeitet. Und wie gesagt, wir werden genau hier aufhören , denn im nächsten Video werden wir die Fahrzeugbeschreibung erstellen , die direkt unten angezeigt wird. Aber eigentlich, weil das eigentlich ganz einfach ist, lass uns das in diesem Video machen. Drücken Sie also Control K, geben Sie def ein und nennen Sie diese Fahrzeugbeschreibung Beschreibung. Und was ich tun werde, ist hier einfach die weiße Farbe zu verwenden . Nehmen wir acht für den Eckenradius. Und was die Abmessungen angeht, lassen Sie uns sehen, was wir hier tun können, indem wir zunächst 24% des Randes oben angeben. Da haben wir's. Ich klaue einfach diesen Text und füge ihn hier ein. Es werden dieselben Einstellungen wie zuvor beibehalten. Und zum Schluss möchte ich den darin enthaltenen Rich-Text einfügen. Drücken Sie also Control K, geben Sie Text anreichern und stellen Sie sicher, dass Sie ihn von Autos aus verbinden. Und ich wähle eine Fahrzeugbeschreibung und sie wird diese Fahrzeugbeschreibung eingeben. Und zum Schluss nennen wir es, sagen wir mal Fahrzeugbeschreibungstext. Da haben wir's. Ich möchte nur sichergehen , dass ich die Polsterung auf der linken Seite von 24, 24 habe. Und das wird das nur vorantreiben. Und ich kann die obere Polsterung genauso gut hineinlegen wie vielleicht 24. Für die Fahrzeugbeschreibung selbst kann ich unten mit 32 wählen. Da hast du es. Dieser Abschnitt wurde abgeschlossen und es werden die verschiedenen Informationen, die Sie eingegeben haben , aus dem, was Sie dort eingegeben haben, abgerufen. Und weil das so eingerichtet ist, können wir vielleicht reingehen und weitere Änderungen vornehmen. Aber ich denke, hier möchte ich dieses Video eigentlich beenden, denn im nächsten Video werden wir uns mit den Fahrzeugspezifikationen befassen. Und wenn ich das gezeigt habe, müssen wir uns jetzt damit auseinandersetzen und dieses Video war schon 15 Minuten lang, also sehe ich dich im nächsten Video. 183. Autos Vorlage bauen Teil 4: Lassen Sie uns dort weitermachen, wo wir mit der Fahrzeugspezifikation aufgehört haben . Und im Grunde ist es derselbe Abschnitt. Es sind nur diese Gitter im Inneren bevölkert. Lassen Sie mich also zurück zu Webflow gehen. Wählen Sie meine Fahrzeuginformationen aus div Control K, um div gewesen zu sein. Und das wird Fahrzeugspezifikation genannt. Fahrzeugspezifikation, geradeaus, Rand, oben 24, Rand unten 32. Und wir können ihm die Hintergrundfarbe Weiß geben. Und wir können mit einem Eckradius von acht gehen. Dann kann ich reingehen und das immer noch machen und es hier einfügen. Ups, versuchen wir es noch einmal. Da haben wir's. Hier, wo alles Testbericht steht, werde ich es in eine Fahrzeugbeschreibung ändern. Hier unten. Ich gebe Fahrzeuginformationen ein. Entschuldigung, Fahrzeugspezifikation. Da haben wir's. Das war es, was ich wollte. Lass uns weitermachen und das alles schließen , damit es uns nicht stört. Wenn ich das jetzt öffne, muss ich als Nächstes in einen Textblock einfügen. Drücken Sie also Strg K, geben Sie Text ein, Textblock, geben Sie ihm eine Klasse von Textblöcken. Da haben wir's. Und jetzt füge ich die Kombiklasse von vielleicht, ich weiß nicht, Auto, Autos, Vorlagen ein. Da haben wir's. Und ich habe das gemacht, weil ich auf dieser Seite eine Polsterung von 24 hinzufügen kann. Hübsch. Und vielleicht können wir noch ein paar zusätzliche Änderungen am Styling vornehmen . Schauen wir uns an, was wir hier tun können. Vielleicht können wir den Rand oben von 24 hinzufügen , unten von 32. Und weil wir diese Komboklasse haben wird sich das nur auf diese auswirken. Nun darunter drücken Sie Control K, geben Sie def ein, fügen Sie ein neues Div hinzu, das Performance genannt wird. Und diese Leistung wird ein Raster sein, das all unsere Artikel aufnehmen wird. Aber bevor wir anfangen, werde ich zuerst vielleicht auf jeder Seite etwas Polsterung einbauen, vielleicht 24, wie wir es bei dieser getan haben. Also, wenn ich das auswähle, lass mich das überprüfen. Ja, wir haben 20. Sie können das auf 24 erhöhen. Also das ist wunderbar, denn hier haben wir 24 und jetzt funktioniert eigentlich alles so, wie es sollte. Jetzt, wo diese Leistung eingestellt ist, kann ich auf Control K drücken und div eingeben. Und innerhalb dieses Div-Blocks muss ich diesen Text eingeben. Also brauche ich hier nur Textblöcke. Also lass uns sehen. Innerhalb der Performance gebe ich Null bis 100 km/h an, genau wie bei diesem K h. Und innerhalb dessen ich Control K und tippe einen Textblock ein. Und benutze die Klasse Textblock. Und verwenden Sie eine zusätzliche Klasse von, mal sehen, Auto, die Beschreibung der Fahrzeugvorlagen, die Beschreibung Kursvorlage. Denn was ich hier möchte, ist einfach normal zu benutzen, einfach alles ist so, wie es sein sollte. Aber hier sollte es einige Texte einbeziehen. Also mal sehen, vielleicht kann ich es sogar verkleinern. Also vielleicht 16. Dieser von 40 ist zu viel. Lass uns mit 32 weitermachen. Da wir eine Beschreibung der Kursvorlage haben, wird sie problemlos funktionieren und Sie können den Text abrufen. dies zunächst Lassen Sie uns dies zunächst auswählen und 0 bis 100 K M H eingeben Los geht's. Drücken Sie Control C, Control V. Und dann beim nächsten, verbinden Sie einfach das Feld. Also los geht's. Nun zu diesem Thema, was ich tun werde, ist, daraus einen Stapel zu machen, also stelle sicher, dass sie so sind. Also auf jeder Seite verbinden. Und jetzt kann ich meine Leistung auswählen und daraus ein Raster machen. Und was ich tun werde, ist zwei Spalten zu erstellen, was in Ordnung ist. Und hier habe ich drei Reihen. Also füge hier eine zusätzliche Zeile hinzu. Und mal sehen, die Entfernung sollte 32 sein, das sollte 24 sein, denke ich. Drücken Sie Okay und lassen Sie uns einfach zu XD zurückkehren und einfach sehr schnell nachschauen. Das sind also 24 und das ist in Ordnung. Gehen wir zurück zu hier. Also werde ich einfach weitermachen und Control C Control V. Control C Control V drücken . Füllen Sie einfach alle meine Felder sehr schnell damit ich weitermachen und zusätzliche Informationen hinzufügen kann . Was ich hier also tun kann ist, dass es Null bis 100 ist. Lass uns das duplizieren. Das nächste wird quasi Ventile sein. Und lass uns das auswählen und es Vokale nennen. Und entscheide dich für diesen. Und mal sehen, wo sind unsere Ventile? Sie sind, sie sind reizend. Der nächste sollte Höchstgeschwindigkeit haben. Und das Feld selbst sollte Höchstgeschwindigkeit haben. Also duplizieren Sie diesen , Höchstgeschwindigkeit. Und ändere diesen Textblock einfach dort, wo wir sind, auf Höchstgeschwindigkeit . Lass uns laut Top, Top, Top Speed sehen. Dann sollte der nächste darunter Strom sein. Und ich gebe Power ein. Bi tippe sie tatsächlich alle ein, damit ich weiß, was sie sind. Also Zylinder. Und das letzte sollte Torque sein. Also lass uns die Stromversorgung anschließen. Mal sehen, wo wir sind. Macht, Macht, Macht, herrlich. Und das sollten Zylinder sein. Also lasst uns diese Klasse duplizieren. Und das sollten Zylinder sein. Und schließlich sollte das letzte Drehmoment sein. Also duplizieren Sie es. Und lassen Sie uns das einfach so mit dem Drehmoment verbinden. Jetzt ist dieser Abschnitt abgeschlossen. Was ich als Nächstes tun kann, ist, dass wir die Leistung bereit haben. Ich werde mir den Abstand ansehen und die Entfernung ist 32. Also ich kann es vielleicht geben, also wähle die Leistung aus und gib dir den unteren Rand von 32, vielleicht so. Und mal sehen, diese Fahrzeugspezifikation hat den unteren Rand von 32, aber das will ich nicht. Ich möchte, dass die Polsterung hart 32 ist. Es folgt also allem, was ich hier mache. Lass uns diesen Text auswählen, Strg C drücken, Strg V drücken und ihn einfach unter meine Leistung verschieben. Und der nächste sollte Sicherheit sagen, solche Sicherheit. Und im Grunde werde ich aus Sicherheitsgründen dasselbe tun , was ich hier getan habe. Der Unterschied ist, dass ich tatsächlich ein etwas anderes Setup haben werde . Wählen wir also diesen Textblock aus, drücken Sie Control K und geben Sie div ein. Und in diesem Div-Block , den ich Safety Input in 24 auf jeder Seite nennen werde. So wie das. Ich werde daraus ein Raster machen. Aber jetzt wird es zwei Spalten haben, aber 245 verschiedene Zeilen. Also 2345 verschiedene Reihen. Da haben wir's. Jetzt drin und du drückst Control K und tippe def ein. Und dieser erste sollte, mal sehen, Sicherheit in Form sein. Vielleicht kann ich es linke Spalte oder rechte Spalte nennen. Es liegt wirklich ganz bei dir, wie du das machen willst. Aber ich denke, dass das für diesen gut funktionieren wird . Aber ich kann es tun, vielleicht kann ich einfach ein paar Textblöcke einfügen. Ich muss nicht einmal blockieren. Schauen wir uns an, was wir hier tun können. Drücken Sie also Control K und geben Sie den Textblock ein. So wie das. Geben wir ihm den Stil eines Textblocks und geben wir ihm eine Beschreibung der Kursvorlage für eine Kombiklasse. Ja, das funktioniert gut. Lass mich einfach die Texte überprüfen. Was wir genau hier haben. Das ist großartig. Drücken Sie also Control C, Control V, Control V, Control V, v, V, V, V, bis ich meinen gesamten Text eingegeben habe. Und jetzt mache ich weiter und kopiere den Text und füge ihn ein. Nun, dieser Text ist wirklich wichtig weil er all Ihre Elemente widerspiegelt , die Ihr Auto tatsächlich hat. So sieht man z.B. einen adaptiven Bremsassistenten mit Halt und so. Aber weil wir das Content-Management-System nicht dafür verwendet haben, weil offensichtlich einige Autos, insbesondere ältere Autos, vielleicht zwei oder drei verschiedene Sicherheitsmerkmale haben können , während neuere Autos besonders bei diesen Oldtimern, oder sagen wir, Luxusautos, wie in diesem Fall, werden etwa 1.000 verschiedene Funktionen haben. Es ist also wirklich schwierig zu beurteilen was man innerhalb von wo tun kann. Aber in diesem Fall können wir vielleicht unsere Kunden bitten, diese Informationen selbst auszufüllen. In diesem Fall haben wir, wie Sie sehen können, jetzt dieses Raster. Also Sicherheit, wir haben 24 auf jeder Seite, was fantastisch ist, aber als nächstes kann ich Control C drücken, Control V. Bewege das nach unten. Hofft nicht hier, sondern hier. Aus welchem Grund auch immer hat er das nicht getan. Lass uns einen Textblock laut steuern . Und lassen Sie uns das Sicherheitsfeld einfach direkt darüber bewegen. Ich habe also eindeutig einige Fehler mit dem Webflow. Da haben wir's. Sicherheit, als nächstes wird der Fahrerkomfort sein. Was ich zuvor sagen wollte, ist Ihr Kunde diese Informationen möglicherweise nicht bereit hat, damit Sie sie in das CMS aufnehmen können. Vielleicht wäre es die bessere Option für sie diese Informationen später manuell einzugeben, denn wie gesagt, einige Autos haben heutzutage genau die gleichen Systeme wie ABS, wie Feststellbremsen, wie Kameras aber andere Autos nicht. Vielleicht ist es eine kluge Entscheidung, als das für Ihren Kunden zur Verfügung zu stellen und diese Erkenntnisse einfach für sie einzugeben , damit sie manuell innerhalb der Website live sind, reingehen können , Doppelklicken Sie und ersetzen oder entfernen oder bearbeiten Sie einfach Felder aus dem ER-Design, ohne es zu beschädigen. Denn hier werden wir einfach ein Gitter drinnen haben. Es wird also einfach super einfach sein. Lass uns das duplizieren. Das wird der Bequemlichkeit des Fahrers dienen. Und aus dem gleichen Grund liebe ich es einfach, mit Grids zu arbeiten . Sie können also sehen, dass ich nur dasselbe Raster verwende, aber ich ersetze nur den Text durch anderen Text. Lass uns sehen. Und weil wir dafür nur eine Komboklasse verwenden, nämlich die Beschreibung der Fahrzeugvorlage. Es erbt nur diese Comp-Klasse. Und es zeigt uns nur was wir von Anfang an sehen wollen, nämlich die Abstände oben und unten, was genau das ist, was ich eigentlich will. Lass uns mit diesem weitermachen. Lass uns mit diesem weitermachen. Smartphone-Integration. Los geht's und wir haben noch zwei davon. Und schließlich so. Da haben wir's. Jetzt, wo das aus Gründen der Bequemlichkeit des Fahrers abgeschlossen ist, habe ich als Nächstes eine weitere. Drücken Sie also Control C, Control V. Und ich werde versuchen, es direkt unter wissen zu positionieren. Lassen Sie uns versuchen, das auf diese Weise zu tun. Drücken Sie in diesem Fall Control C, Control V. Und ich werde meine Textblöcke direkt darüber positionieren. Das wird aus Sicherheitsgründen sein. Klasse entfernen. Aber entferne das Duplikat. Das wird aus Sicherheitsgründen sein. Und hier gebe ich einfach Sicherheit ein. Und noch einmal zur Sicherheit. Also werden wir diese Klasse duplizieren und die Klasse umbenennen Sicherheit ist bereits vorhanden. Lass uns sehen. Das wird tatsächlich draußen sein. Außenansicht. Und das sollte so extern stehen. Also hier draußen werden wir etwas weniger Gegenstände haben. Also, weil wir hier eine Kombiklasse von Exterior haben, die Klasse, die wir gerade kopiert haben. Ich werde dir auch zeigen , wie man damit umgeht. Doppelklicken Sie hier. Dann doppelklicken Sie hier, Strg C , Strg V. Ich habe den Stern klaut Kinder, die ich auch in meinem Auto habe. Sie geben dir nicht einmal mehr das Reserverad. Sie müssen nur Ihren Reifen reparieren, kaufen oder verkaufen. Im Grunde, wenn du am Ende des Seils feststeckst. Jetzt, wo wir das für den Außenbereich haben, können Sie sehen, dass diese vier fehlen. Also werde ich sie einfach so loswerden. Und jetzt haben wir diese leeren Felder. Da dies also eine eigene Klasse hat, kann ich einfach die Zeilen entfernen. Und deshalb liebe ich es, mit diesen Grids zu arbeiten, einfach super, super einfach zu machen. Und weil der Innenraum genau das Gleiche hat wie dieser, drücke ich Control C Control V und dann Control C Control V genau hier. Bewege es direkt nach unten. Oder verschieben Sie das ganz oben, wo wir wollen. Hier. Wir geben nur das Innere ein. Und wir werden in nur ein paar Sekunden fertig sein. Weil der letzte Abschnitt tatsächlich etwas optimiert werden muss. Es wird nicht so einfach sein wie dieser, aber ich werde einen kleinen Trick zeigen, wie Sie das auch beschleunigen können. Also klicken wir hier, Strg C, Strg V, doppelklicken Sie auf Control V, Control V. Los geht's. Und noch eine letzte Sache , Control V. Jetzt, wo das erledigt ist, werde ich es tatsächlich auswählen weil das unser Interieur ist. Also duplizieren Sie das Klasseninterieur. Sie können es sehen, weil dies das Äußere ist, dies ist das Innere. Es funktioniert ganz gut. Und eine letzte Sache, die ich Ihnen zeigen möchte, ist dies weil wir diese Dimensionen haben , und zwar genau hier. Und wir müssen diese aus dem CMS holen. Wie können wir also mit Schulden umgehen? Lassen Sie uns das alles tatsächlich schließen. Lass mich. Schau dir einfach an, was ich hier gemacht habe. Was ich hier also tun kann, ist, dass ich diese Informationen mitnehmen kann. Mal sehen, das war Leistung. Also kann ich Strg C, Strg V drücken, um diesen Abschnitt einzufügen , und ihn ganz nach unten ziehen. Und ich kann die beiden dann einfach so nach oben bewegen. Dann kann ich mein Lehrbuch Control C Control V verwenden und es einfach so direkt unter mein Interieur einfügen. Und weil das ein bisschen mehr sein wird, werde ich diese Performance verwenden und die Klasse duplizieren und sie Dimensionen nennen. Abmessungen. Und jetzt, weil ich auf jeder Seite vier brauche, außer hier, aber ich brauche immer noch vier. Lass uns einfach weitermachen und hinzufügen , weil wir jetzt bei Dimensionen sind Du kannst hier klicken und einfach eine neue Zeile hinzufügen. Und das wird leer sein, aber darin wird eine Menge drin sein. Also lass uns einfach damit umgehen. Also dieser erste, lass uns ihn duplizieren. Es wird Höhe genannt werden. Dieser wird Gewichte heißen. Dieser. Also lass es uns einfach duplizieren. Es wird Linked heißen. nächste wird Bootspace heißen. Dieser wird Wheelbase heißen. Dieser wird sein, mal sehen, was wir hier tatsächlich entfernt haben. Also Treibstofftank, also eine Umbenennung, Treibstofftank wie dieser. Und lassen Sie uns noch eins kopieren und einfügen. Und dieser letzte unten wird nass sein. Bringen wir das also zurück, wenn die Szene ist, das wird die doppelte Breite haben. Und zum Schluss doppelklicken wir einfach und geben das alles in Höhe ein. Das wird verlinkt. Das wird Radstand sein. Das wird Gewicht sein. Das wird Brightspace sein. Und das wird gefüllte Tankkapazität sein. Und zum Schluss verbinden wir sie einfach. Also dieser, lass uns mit der Breite verbinden. Schauen wir uns also an, wo wir genau hier sind. Ich denke, genau hier, da haben wir es. Das ist die Breite. Dies ist das Fassungsvermögen des Kraftstofftanks, das ist diese. Das wird für den Radstand sein. C wird basieren, die Basis wird dort basieren, wo sie ist. Leistung. Radstand. Großartig. Dies wird für den Bootspace sein. Fangen wir mit dem obersten Startbereich an. Also, aus welchem Grund auch immer, es ersetzt nur ihre Position. Also Länge, Länge stimmt hier. Das wird für die Gewichte sein. Mal sehen, warte, warte, warte, warte, warte, warte, warte. Und schließlich wird das für die Höhe sein, so. Und jetzt ist alles abgeschlossen. Lass mich alles zusammenbrechen. Wenn ich also jetzt auf dieser Seite auf Vorschau klicke, haben wir hier unsere Bilder so, wie wir es erklärt haben, wie wir es mit einigen gemacht haben. Diese Übersicht. Wir haben, wir haben die gleiche Beschreibung, wir haben eine Spezifikation, in der wir Leistung haben. Vielleicht können wir das ein bisschen anpassen , damit wir einen etwas besseren Abstand bekommen. Ich denke, wir haben das , was großartig ist. Wir haben Fahrerkomfort, außen, innen, innen. Und hier sollten endlich Dimensionen stehen. Lassen Sie uns das also sehr schnell beheben. Abmessungen. Und da es sich um eine Kursvorlage aus dem Lehrbuch handelt, werde ich die Farbe in diese Farbe ändern, nur um sie leicht zu unterscheiden, wie Sie es hier sehen. Es passt also ein bisschen mehr zu diesen Titeln oben. Und ich denke, das ist im Grunde, es ist das Letzte, was noch zu tun bleibt diese Karte anzuschließen, um zu folgen. Und wie können wir das machen, ist eigentlich ganz einfach. Sie können also die Auto-Actionkarte auswählen. Und du kannst hier wieder nach oben gehen. Und für die Position wähle ich Sticky. Und du musst ihm sagen, wo soll es haften bleiben? Also werde ich ihm sagen, dass es bei vielleicht 20 bleiben soll. Sie können sehen, dass wir diese Standardoptionen bereits haben. Also sieh dir diese Magie an. Lass mich tatsächlich zu mir selbst finden damit du ein bisschen besser sehen kannst. Also hier haben wir alles funktioniert, alles ist so wie es sein sollte. Aber jetzt, wenn ich anfange zu scrollen und es 20% sind, bleibt es hängen. Und es wird bleiben. Und es wird folgen, was auch immer wir tun. Es folgt ein Jetzt, wo es das Ende erreicht hat, wird der Abschnitt einfach aufhören. Und jetzt, wenn ich anfange zu scrollen, wird alles gut funktionieren. Sie können also sehen, wie einfach das geht. Und ich liebe dieses Feature wirklich. Und wenn wir es z.B. auf Carol Calculate umstellen und wenn ich anfange zu scrollen, sieht man, dass der Effekt schon eingetreten ist. Es scrollt schon durch. Eine letzte Sache, die wir tun müssen , wenn ich Sie zurück zu XD bringe, ist, dass wir dies haben , unsere exklusive Auswahl, und wir müssen es nur einfügen und ich werde es später verbinden. Gehen wir also einfach hier zurück zu unserer Homepage. Pages Home verwendet also genau diesen Abschnitt. Also lass es uns einfach von hier aus nehmen. Exklusive Kollektionen. Drücken Sie also Control C und gehen Sie dann zu unseren Kursvorlagenseiten Control V. Und ich werde es genau hier platzieren. Aber in diesem Fall werde ich diese doppelte Klasse mit exklusiven Auswahlwagen, Vorlagen, umbenennen . Da haben wir es, denn wir müssen hier einige Änderungen vornehmen. Was ich hier machen werde, ist im Container Gehen wir zum Sammlungslisten-Wrapper. Und hier dupliziere ich die Klasse und gebe die Vorlagen für Autos ein. Und hier gehen wir ganz schnell zu den Einstellungen. Hier. Was ich zeigen kann, ist bei eins zu beginnen. Fangen wir um acht an, z. B. dieses Mal oder nicht, fangen wir bei eins an. Aber lassen Sie uns für diesen Fall die Reihenfolge sortieren. Schauen wir uns an, was wir hier tun können. Gehen wir also mit einer zufälligen Reihenfolge vor. Und es sollte gut funktionieren. Warum es das nicht gewählt hat. Gehen wir also mit zufälliger Reihenfolge vor und klicken Sie auf Speichern. Und jetzt, wenn ich auf Vorschau klicke, kannst du sehen, dass wir hier sind, aber wir haben immer noch unseren Lamborghini, was wir nicht sehen wollen. Eigentlich. Was ich hier machen kann, ist ein zufälliges Mischen. Lass uns mit etwas anderem gehen. Vielleicht können wir uns für etwas anderes entscheiden. Du kannst den Namen tragen. Etwas anderes. Vielleicht vom neuesten zum ältesten erstellt. Vielleicht können wir das zeigen. Also lass uns das versuchen. Also, wenn ich hier auf Vorschau klicke und dann zu, sagen wir mal eskalieren. Mal sehen, ob das hilft. Das tut es, aber als ich zu McLaren gewechselt bin, sollte es z. B. jetzt aktualisiert und das verschoben werden. Also vielleicht sollten wir das vielleicht ein bisschen mehr durchforsten. Also müssen wir zeigen, vielleicht ist Filter oder Gleichheit ungleich, vielleicht ist Name nicht gleich. Klicken Sie auf Speichern und geben Sie einen gültigen Wert an. Vielleicht sollte ich das untersuchen, aber ich denke, die ältesten bis neuesten Werke, außer wenn das Auto gezeigt wird. Sie können es also gleich hier sehen. Es funktioniert also. Meiner Meinung nach ist die beste Version diese. Also zufällige Reihenfolge, klicken Sie auf Speichern. Also was auch immer du kannst, es wird zeigen , dass ich hier sogar einen neuen Filter hinzufügen und diesen erstellen und vielleicht unten noch mehr zeigen kann . Also ich weiß nicht, du kannst hier grundsätzlich machen, was du willst, aber alle Autos ansehen ist der Button, den wir in einer der nächsten Lektionen verlinken werden . Aber lassen Sie mich Sie vorerst einfach dabei lassen. Lassen Sie uns zum Schluss noch einmal kurz zusammenfassen, was wir getan haben, denn wir haben bereits 25 Minuten hinter uns, was eine der längsten Lektionen bisher ist. Wir haben weitergemacht und das geschaffen, was funktioniert, geschaffen, was klebt, diese Elemente geschaffen, all diese Elemente. Und schließlich haben wir das geschaffen. Und ich denke, dass diese obere Marge meiner Meinung nach etwas geringer sein sollte . Schauen wir uns also an, was es ursprünglich gemacht hat. Ja. Ich würde einfach gerne in die 200er gehen, also finde ich das in Ordnung. Kontaktiere uns. Also funktioniert alles wie es sollte. Und wie gesagt, wir werden uns etwas später in diesem Kurs mit Responsive befassen etwas später in diesem Kurs mit Responsive und diesen Abstand korrigieren. Nachdem dies abgeschlossen ist, können wir mit den nächsten Seiten fortfahren, die sich mit Krediten befassen, und uns kontaktieren. Und wenn wir diese Seiten fertiggestellt haben, können wir uns vielleicht mit den Antwortproblemen befassen , die wir haben. Und vielleicht können wir uns dann etwas tiefer mit Themen wie diesem befassen und wie können wir das ändern? Es zeigt uns also eine zufällige Reihenfolge, was nicht die Seite ist , auf der wir uns gerade befinden. Ich sehe Sie also im nächsten Video, in dem wir uns Kreditseite befassen werden. Wir sehen uns dort. 184. Autokarten verknüpfen: Bevor wir mit unserer weiteren Arbeit in Webflow weitermachen , müssen wir zunächst all diese Karten, Karten, mit den eigentlichen Seiten verknüpfen . Wenn unser Benutzer also auf eine dieser Karten klickt, wird er tatsächlich zur eigentlichen Seite für das Auto weitergeleitet und mehr über das Auto selbst erfahren. Also hier sind wir in Webflow und wie wir das machen können. Es ist wirklich ganz einfach. Ich habe das absichtlich nicht getan, weil ich Ihnen zeigen wollte , wie diese Korrekturen erreicht werden können. Also hier sind wir in unseren Autokarten, auf unserer Homepage. Wenn ich also hier klicke, kannst du sehen, dass ich keinen Link habe. Sie müssen also alle Ihre Seiten und all Ihre Assets verlinken , wenn Sie möchten, dass sie irgendwohin führen, damit sie Ihre Benutzer irgendwohin führen. Also, wie können wir das in der Fahrzeugkarte selbst machen, ich drücke Strg K und tippe Linkblock ein. Klicken Sie jetzt einfach auf den Linkblock. Es wird es hier ablegen und mach dir darüber keine allzu großen Sorgen. Wir werden die Werte in nur einer Sekunde anhängen. Was ich tun werde, ist es zum Beispiel genau hier zu positionieren und dann meine Fahrzeugkarteninformationen zu verwenden, sie in diesen Linkblock zu legen, und dann das Kartenbild das auch in den Mailingblock zu legen. Und Sie können jetzt sehen, dass das Styling falsch ist. Das haben wir jetzt in unseren Texten unterstrichen , was wir nicht wollen. Wählen Sie also Ihren Link-Blog aus. Geh genau hierher, wo ist es, wo ist die Topographie? Und Sie können sehen, dass die Deklaration standardmäßig gesetzt ist. Einfach hier klicken , wo nichts steht. Und es wird dein ganzes Styling von dort entfernen. Jetzt haben wir also einen Linkblock Nummer vier. Was ich tun werde, ist, sagen wir diese Klasse umzubenennen und sie Auto, Hardlink, Block zu nennen . Und jetzt wird es für alle drei denselben Wert haben für alle drei denselben Wert , weil sie miteinander verbunden sind. Das Letzte, was zu tun ist, es tatsächlich mit etwas zu verbinden. Wenn Sie also Ihren Fahrzeugkarten-Linkblock auswählen, klicken Sie hier und gehen Sie genau hier hin, wo die Sammlungsseite steht. Wenn Sie dort klicken, werden Sie zum aktuellen Auto weitergeleitet. Klicken Sie einfach dort und es öffnet sich die Karte, die Sie tatsächlich ausgewählt haben. Das ist also unser aktuelles Auto. Sie können es so einstellen, dass ein neuer Tab geöffnet wird, wenn Sie möchten, aber das werde ich nicht tun. Und denken wir daran, dass dies ein Karten-Linkblock ist. Was wir also tun müssen, ist es für alle unsere Seiten einzustellen. Aber lassen Sie uns es zunächst testen und sehen, ob es funktioniert. Also funktioniert alles wie es sollte. Dies ist die Eskalation, z. B. wenn ich darauf klicke, werde ich zur Eskalationsseite weitergeleitet, die genau das ist, was ich will. Aber genau hier, wenn ich ganz nach unten scrolle und klicke, kannst du sehen, dass diese nicht funktionieren. Was wir also tun werden, ist , den Vorschaumodus zu verlassen, zu unseren Seiten zurückzukehren, zu Autos zu wechseln, denn dort haben wir alle unsere Autos verbunden. Und wenn ich hier klicke, kannst du sehen, dass wir keinen Link-Bug haben, weil wir ihn auch hier verbinden müssen. Wählen Sie also Ihre Fahrzeugkarte aus, drücken Sie Control K, geben Sie den Linkblock ein, legen Sie ihn hinein und legen Sie dann einfach Ihre Gegenstände hinein. Wählen Sie Ihren Linkblock aus. Und wir werden ihm eine Klasse von Karten geben , Kartenlink-Block. Da haben wir's. Und Sie können sofort sehen, das Styling, das wir zuvor gemacht haben, entfernt wird. Und das einzige, was wir hier noch tun müssen, ist, diese Sammlung zu verbinden. Wählen Sie die Sammlungsseite aus. Also klicken Sie einfach hier, wo Sammlungsseite steht, wählen Sie eine Sammlungsseite, wählen Sie das aktuelle Auto. Und jetzt sind all diese Autos miteinander verbunden. Wenn ich also sehr schnell auf Vorschau klicke und etwas wie Porsche Cayenne auswähle, klicke dort rechts, um die Porsche Cayenne-Seite zu öffnen, aber wir haben immer noch das gleiche Problem hier. Also müssen wir das auch tun. Während wir uns also an einer Kursvorlage befinden, ist es egal, auf welcher Seite. In diesem Fall sind wir wieder auf dem Bosch. Wir müssen das noch einmal machen. Also wenn ich dort klicke, Strg K drücke, Linkblock eintippe und dort ablege. Und bring noch einmal meine Autokarteninformationen hinein und das Bild der Fahrzeugkarte. Sie könnten sich das also einfach wie ein Overlay mit Lincoln-Site vorstellen , Linkblock, Karte, Kartenlinkblock. Da haben wir's. Und es wird dasselbe Styling erben . Wir klicken gleich hier, dann genau hier, wählen die Sammlungsseite, aktuelle Auto und los geht's. Aber jetzt haben wir ein anderes Problem. Also haben wir diese drei. Wenn ich also auf Vorschau klicke, denk daran, dass wir auf dem Porsche Cayenne sind. Diese drei werden also gut funktionieren. Wenn du also genau dort klickst, werde ich dort zu Lucy weitergeleitet. Und es wird aktualisiert. Also gib ihm einfach ein bisschen Zeit. Aber trotzdem haben wir Lucid Air hier. Und wir sind auf Lucy, ihrer Seite, die wir nicht wollen, weil es keinen Sinn ergibt. Wenn ich also genau dort klicke, um den Vorschaumodus zu verlassen und auf meiner Kursvorlagenseite auf den Sammellisten-Wrapper für diese exklusive Autosammlung zu klicken den Sammellisten-Wrapper für . Was ich tun kann, ist hier zu meinen Einstellungen zurückzukehren. Und hier habe ich meine Sortierreihenfolge und ich habe meinen Filter. Also werde ich einen neuen Filter hinzufügen. Und hier werde ich so etwas wie ein Auto einrichten. Und ich werde sein nicht aktuelles Auto wählen . Ich möchte also nicht, dass das etwas ist, was ich mir ansehe. Also sehe ich mir z. B. Lucy dort an. Ich möchte nicht, dass es genau hier , weil ich es mir schon ansehe. Also zeig mir einfach ein anderes Auto. Als ich also auf Speichern geklickt habe, wie Sie sehen können, wurden diese Elemente einfach ausgetauscht. Und jetzt kann ich es tun, ich habe einfach Random Shuffle gewählt. Also kann ich das tun, wenn ich will, oder ich kann weitermachen und etwas anderes wählen. Ich habe dir schon früher gezeigt , wie das geht. Wie Sie sehen können, befinden wir uns jetzt auf einer übersichtlichen Fehlerseite. Also funktioniert alles wie es sollte. Wir haben alle acht Bilder. Diese funktionieren und es bleibt an der Spitze. Wenn ich also ganz nach unten scrolle, können Sie sehen, dass wir unsere exklusive Kollektion haben und jetzt gibt es kein Lucid Air. Also lass es uns testen. Wenn ich auf Cadillac eskalieren klicke, z. B. sind wir nur die Seite eskalieren. Wenn ich also ganz nach unten scrolle, sehen wir keine Eskalation mehr. Und so einfach ist es , dieses Haus ganz einfach zu verbinden. Es ist einzurichten. Und deshalb ist es wichtig. Und wie gesagt, ich habe es bewusst so weggelassen weil ich Ihnen die Macht von Linkblöcken zeigen wollte. Sie können diese Linkblöcke auf Bildern platzieren. Du musst, du kannst ein Bild als Link erstellen. Aber wenn Sie z.B. auf der Kreditseite möchten , haben wir dieses Bild mit drei verschiedenen Bildern. Vielleicht möchtest du das alles als einen einzigen Linkblock zusammenfassen. Sie können also einfach einen Link-Blog als Overlay-Stil verwenden. Es erklärt es bereits hier und es wird Ihre Benutzer irgendwohin führen, wenn sie darauf klicken, oder Sie können andersherum gehen und einfach alle drei Bilder zu separaten Links gestalten. Und deshalb werden Sie die gleichen Ergebnisse erzielen. Es liegt also wirklich alles an Ihnen und dem Layout, das Sie in Ihrem Design erreichen möchten. 185. Darlehensseite: Lassen Sie uns nun weitermachen und eine Kreditseite erstellen. also auf dunklen Seiten Klicken Sie also auf dunklen Seiten hier und geben Sie Kredite ein. Da haben wir's. Klicken Sie auf Erstellen und überprüfen Sie einfach, ob der Körper den Stil, den er hat, geerbt hat. Was wir also tun werden, drücken Sie Control K, geben Navigation ein, Steuerung, K, N geben Sie im Formular ein, Control K geben Sie Karte und Control K geben Sie in die Fußzeile ein. Nachdem Sie das getan haben, können wir im Abschnitt den Typ Body Hit Control K auswählen . Fügen Sie eine Abschnittsklasse hinzu. Verschieben Sie den Abschnitt also direkt unter unsere Navigationsleiste. Und in diesem Abschnitt, wenn Sie Control K verwenden würden, geben Sie def und geben Sie ihm eine Klasse von Containern, wie folgt. Es ist großartig. Und was ich tun kann, ist in diesem Container, ich kann diesen Text eingeben, aber ich werde einfach einen weiteren darin erstellen. Also drücken Sie Control K und geben Sie def ein. Und diesen werde ich einen solchen Einzelhelden-Rapper nennen . Und lassen Sie mich in diesem Hero-Wrapper Control K drücken, Hörüberschrift H1 eingeben und H1 eingeben, das wir bereits erstellt haben und das zentriert ist. Da haben wir's. So wie das. Lassen Sie mich tatsächlich etwas Text kopieren und einfügen . Und dann kann ich eine weitere erstellen, sagen wir, Control K geben Sie div ein. Und dieses Div von gibt ihm einen Namen für Kredite, Heldenbilder. Und ich werde es tatsächlich in ein Raster verwandeln. Aber bevor ich das tue, lassen Sie mich meine Bilder hinzufügen Control K zum Pin-Bild. Und dieses Bild, ich gebe ihm den Audi RS five. Geben wir ihm den Namen Audi S5. Und noch einmal Control K tippe das Bild ein. Und dieses Bild wird Range Rover sein, und das ist dieser. Und nenne es so eine Reichweite über Voc. Und zum Schluss möchte ich daraus ein Raster mit guten Noten machen. Und schließlich kann ich das hier vielleicht auf 24 erhöhen, vielleicht auch nicht. Lassen wir es bei 16 belassen, weil es für diesen dieselbe Konsistenz behalten wird . Was ich tun werde, ist es hier unten rechts auszurichten . Und dieser ist bereits nach unten ausgerichtet. Aber nur um sicherzugehen, und ich finde das gut. Das ist großartig und genau das brauchen wir für diesen speziellen Abschnitt. Und lassen Sie uns ihm eine Klasse von Heldendarlehen geben, und wählen Sie nun den Abschnitt Body Hit Control K Typ gewesen aus. So können wir den neuen Abschnitt hinzufügen. Geben wir ihm eine Klasse von Abschnittspositionen direkt unter diesem Abschnitt. Und das nächste werden wir Überschrift nennen. Kredite sind solche Kredite. Und darin klicken wir auf Turning div geben Container ein. Nehmen wir an, Kredite sind führende Kredite, weil es marktführende Linien gibt. Führende Linien, los geht's. Und darin können wir vielleicht in eine andere Verpackung legen oder so. Mal sehen, was wir tun können. Lass mich ein weiteres Div erstellen, also gib Control K def ein. Und anstatt es als Wrapper zu bezeichnen, nennen wir es marktführende Kredite wie diese. Und darin, aber ich kann es tun, ist auf Control K zu klicken und eine Überschrift einzugeben. Wähle h drei. Und h drei sollte h drei haben. Mal sehen, dunkel. Lass es uns zentrieren. Also zentriert und zentriert es einfach wie TO. Lassen Sie mich den Text kopieren und einfügen. Und für diesen Abschnitt werde ich ihm einen Abstand von vielleicht 200 oder sogar weniger geben . Ich weiß es nicht. Mal sehen, wie es aussieht, wenn es einmal in der Vorschau angezeigt wird. Ja, 200 ist gut, weil es immer noch lesbar sein wird und es von hier aus immer noch eine Szene sein wird. Lass es uns so belassen und lass uns ein anderes erstellen. Also Control D div. Und dieses Div, ich werde Kredite für Sparleistungen wie Schulden nennen . Und darin. Lassen Sie uns den ersten erstellen. Also Control K tippe def in dieses Div ein, was ich, mal sehen, einfache Bequemlichkeit nennen werde . Ich werde das Control K-Bild hinzufügen. Das Bild wird einfach und bequem sein. Lass es uns einfach hier finden. Es ist also diese Ikone. Und unter diesem Symbol werde ich tatsächlich noch einmal die H-Drei platzieren, also Control K, um den Hering anzuheften. Verwenden Sie das Alter von drei, und ja, wir können jedes verwenden. Lassen Sie uns also mit der einfachen Unbequemlichkeit für den Text fortfahren. Und darunter drücke ich noch einmal Control K und tippe p für den Absatz. Und dieser Absatz wird diesen Text haben. Aber für den Absatz nehmen wir P in Grau, nehmen wir P in Grau weil ich ihm ab hier die graue Farbe geben werde . Und schließlich kann ich sie in eine vertikale Flexbox legen und sicherstellen, dass sie so zentriert sind. Was ich auch tun kann, ist vielleicht weil das von links ist, vielleicht kann ich es in diesem Alter von drei Jahren in der Mitte geben , dass wir ganz oben haben. Oder war es Was war es? H3 dunkel zentriert. Okay, also H drei dunkel und dann zentriert. Großartig. Jetzt, wo wir Schulden haben, aber ich kann das vielleicht damit machen, können wir ihr einen Abstand von 24 bis zum Gipfel geben. Drücken wir auf, diesen los zu werden. Und nach oben können wir ihm so eine obere Marge von 24 geben. Und schließlich mit diesem Symbol, das mal sehen wird , einfacher Komfort. Ich bin. Geben wir ihm den unteren Rand von 24, z. B. großartig. Jetzt, wo das abgeschlossen ist, werde ich die Vorteile dieses Darlehens in ein Raster umwandeln , ihm eine weitere Spalte geben, diese Zeile entfernen und vielleicht etwas wie, ich weiß nicht, 24 hier, 32 hinzufügen . Mal sehen, wie das aussieht. Vorerst gut. Also lass es uns schließen. Drücken Sie in diesem Fall Control C, Control V, Control V und bei Krediten, Leistungen, ich gebe ihm nur eine Top-Marge von 64, um es ein wenig aufzupeppen. Jetzt, in dieser, werde ich die Klasse duplizieren und Zahlungsoptionen umbenennen. Und lassen Sie mich den Text tatsächlich kopieren und sehen, ob er dazu passt. Tut. Da haben wir's. Lassen Sie uns das letzte sofort ändern, damit Sie beruhigt sein können. Also duplizieren Sie das Peace of Mind Grid. Und lassen Sie uns das ändern. Doppelte Zahlungen. Icon. Und lassen Sie uns es durch ein Ortsbild ersetzen und es gleich hier finden. Also lass uns sehen, wo es ist. Los geht's. Also Zahlung Icon Grade. Und zum Schluss wollen wir diesen ersetzen. Also duplizieren Sie es einfach und nennen Sie es Seelenfrieden, ICN. Und lass es uns finden und sehen, wo es ist. Es ist der mit dem Schild , der ist dieser. Da haben wir's. Jetzt, wo das abgeschlossen ist, können wir noch mehr mit diesen Einstellungen herumspielen , wenn wir wollen. Aber ich denke, das ist in Ordnung. Aber als nächstes werde ich diesen Abschnitt erstellen , wenn ich ihn zu unserem Design übernehme, das dafür ist. Was wir in diesem Fall also tun können, ist, diesen Abschnitt, den wir auf unserer Homepage haben, zu kopieren , diesen Abschnitt, den wir auf unserer Homepage haben und etwas später mit diesen Positionierungen herumzuspielen . Um uns ein bisschen Zeit zu sparen, kann ich aber zurück zur Homepage gehen. Verwenden Sie diesen Abschnitt. Control C. Dann gehe auf unsere Kreditseite. Wählen Sie unsere Körpersteuerung V aus und positionieren Sie sie hier. Da haben wir's. Anstatt zu wissen, wer wir sind, werde ich diese Klasse jetzt duplizieren und sie Partner nennen. So wie es ist. Was ich hier tun werde, ist das zu duplizieren. Weil Partnerbild, klicken Sie auf das Zahnrad, ersetzen Sie das Bild und suchen Sie das Bild meines Partners. Da haben wir's. Hübsch. Lassen Sie uns zum Schluss einfach den Text nehmen und ihn hier ersetzen. So wie es ist. Und schließlich, was wir haben, ist , wer Erfahrung zwischen Krediten hat? Sie sind du, dein nächster? Da haben wir's. Das ist in Ordnung. Was wir schließlich brauchen, ist, dass wir das vielleicht alleine in ein Div packen müssen . Oder wir können sogar einfach Bilder hineinlegen. Also lass uns das zuerst versuchen und schauen, wie das funktioniert. Oder was wir tun können, ist , das einfach zu tun. Drücken Sie Control K und geben Sie def ein. Und ich werde dieses Bild in ein solches Div einfügen. Nun, dieser Div-Block benötigt eine Höhe von 100% seiner Eltern und er benötigt eine Breite von 60%, glaube ich, war das die Breite des Bildes? Mal sehen. Jetzt liegt die maximale Breite bei 100 Prozent. Also lass uns das machen. maximale Breite beträgt 100%. Aber aus welchem Grund auch immer, es erlaubt mir das einfach nicht. Lass uns diesen Trick noch einmal versuchen. Das werden also, sagen wir, 60% sein. Und lass uns diesen loswerden. Und dieser Inhalt. Anstatt dass wir zufrieden sind, werde ich die Klasse duplizieren und sagen Partner. Inhalt, so. Und ich gebe ihm eine Breite von, sagen wir, 30% oder vielleicht 40%. Ja, ich denke, das wird gut funktionieren , bevor ich weitermache. Lass mich das Haus überprüfen und sehen, ob es hier kaputt geht. Hat es nicht getan. Also lass uns lesen. Gehen wir also zurück zu den Lungen. Und jetzt, wo wir das gemacht haben, werden wir diesen Div-Block verwenden, ihn nennen, umbenennen, ihn Teil Nerven, Bilder nennen. Und für die Positionierung wählen wir einen Verwandten. Und in diesem drücken Sie Control K und geben Sie das Bild ein. Wählen Sie ein Bild. Und ich werde eine davon wählen. Also das 1.1 mehr Zeit, also drücken Sie Control K und geben Sie das Bild ein. Für dieses Bild wähle ich den anderen Partner. Ich hoffe, ich habe nicht exportiert. Da haben wir's. Und lass uns jetzt mit ihnen herumspielen. Das wird also als Leasing sein. Nennen wir es also so. Das wird Santander sein. Und für beide werden wir natürlich die Positionierung festlegen. Also statt der statischen Position werde ich sie auf absolut ändern. Und es wird mir zeigen, dass das Absolute für die Bilder der Partner gilt, und das ist genau das hier. Also wie Leasing tun Sie das Gleiche absolut. Lass uns also mit der Positionierung herumspielen. Also lass uns so etwas sehen. Vielleicht kann ich die Sonnenbräune wagen, ganz oben drauf zu sein. Stimmt. War es so? Ja, war es. Also oben rechts, ns Leasing wird oben sein , unten links. Manchmal geht es also nach oben rechts und das S-Leasing geht nach unten links. Und lass uns einfach mit einigen Einstellungen herumspielen. Also kann Santander hierher gehen, so etwas. Vielleicht. Es kann vielleicht hierher gehen. Also noch einmal diese Bugs mit der Positionierung. Also lass uns dieses Mal mit dem unteren Rand gehen, so. Und lass uns mit der Linken gehen, die so etwas wollen. Lassen Sie uns versuchen, das nachzuahmen. Wir haben also 20 an der Seite und fünf. Lass uns fünf hier machen. Und lass uns hier 20 gehen. Hoppla. Also lass uns jetzt mit zehn gehen. Mal sehen, warum das passiert. Also wenn ich hier klicke und dann hier, los geht's, funktioniert einwandfrei. Wenn Sie auf Vorschau klicken, funktioniert es wieder, sodass alles so aussieht, wie es sollte. Und im Grunde ist das unsere Seite fertig. Sie können sehen, wie einfach es ist, wenn Sie all diese Elemente haben und sie einfach zusammenfassen können. Ich verstehe nicht wirklich, warum das mit diesen Bildern so ist. Ich hüpfe einfach nach links und rechts. Wenn ich hier und dann hier klicke, kannst du sehen, dass es völlig in Ordnung ist. Aber wenn ich dann hoch und runter scrolle und etwas anderes mache, springt es einfach wieder an seinen Platz zurück. Du musst diese Dinge also immer herausfinden. Und das ist im Grunde das Leben eines Entwicklers. Das war's also im Grunde für unsere Kreditseite. Die einzige Seite, die wir noch wirklich gestalten müssen, ist diese Kontaktseite, die ganz einfach zu handhaben sein wird. Füge einfach ein Bild hinzu. Also ich sehe dich im nächsten Video , wo wir das beenden werden. 186. Kontaktseite: Lassen Sie uns nun weitermachen und die letzte Seite erstellen. Also hier klicke ich auf die Neue Seite, gib Kontakt ein und klicke auf Erstellen. Und hier lassen Sie uns noch einmal die Karosserie überprüfen, Körperfarbe, das ist in Ordnung. Also hier, lassen Sie uns dasselbe tun, um das K-type in nav zu steuern. Control K tippt im Formular ein, Control K gibt Map ein, Control K tippt Fußzeile ein. Und eine letzte Sache , die ich hier tun möchte , ist auf Control K zu klicken und div einzugeben. Und nennen wir das Div-Block, sagen wir mal einen Spotter-Showroom wie diesen. Und innerhalb dieses Divs, das eine Breite von 100% haben wird, liegt die maximale Breite bei 100%, weil ich möchte , dass dieses Bild die volle Breitenkontrolle übernimmt. Kate, ich wurde fotografiert. Und lassen Sie uns ein Bild wählen , das dieses sein soll. Da haben wir's. Und ich nenne es einfach ein Spinnen-Showroom-Bild. Und dieses Bild wird 100% des Platzes einnehmen. Und im Grunde war's das für diese Seite, Sie können sehen, wie einfach sie zu erstellen ist. Vielleicht kannst du hier einen Klappentext einfügen, aber ich denke nicht, dass das wirklich notwendig ist. Und ich denke, das ist gut genug für unsere Seite. Im Grunde können wir jetzt weitermachen und mit der Verbindung beginnen. Das sind Links. Also werde ich das Video hier beenden und im nächsten Video zu dir kommen. Wir werden all diese Links verbinden und all diese Schaltflächen verbinden und sie uns tatsächlich irgendwohin führen und nicht nur auf der leeren Seite sein. Also werde ich dich im nächsten Video sehen. 187. Links hinzufügen: In diesem Video werden wir unsere Links erstellen. Wir werden unsere Seiten in der Navigation verlinken und unsere Schaltflächen mit den eigentlichen Seiten verbinden. Also hier bin ich in Webflow, hier bin ich auf der Homepage. Und das ist wirklich super einfach, vor allem, weil wir diese Symbole in Webflow verwenden. Wie ich bereits erwähnt habe, können Sie sehen, dass diese Symbole auf unseren Seiten miteinander verbunden sind, sodass wir sie anpassen und, äh, mit ihnen machen können , was wir wollen. Also hier sind wir bei den Autos und ich werde diesen Nav-Link wählen. Und als ich es hier auswähle, wollte ich mir in den Einstellungen sagen, wohin ich gehen möchte. Also hier werde ich es auf meine Seite bringen. Wähle eine Seite, Autos. Und es kann auf diesem Tab oder einem neuen Tab geöffnet werden, und Sie können verschiedene Payload-Optionen wählen. Also Prefetch, Pre-Render Standard, ich wähle einfach Standard. Sie können hier sogar benutzerdefinierte Attribute verwenden, sodass Sie Ihre Attribute nach Belieben benennen können. Aber ich werde dich damit nicht zu sehr belästigen. Dies bei der Seitenverknüpfung ist sehr nützlich, besonders wenn Sie lange Landingpages haben. Sie können sich einfach vorstellen, dass die Navigation klebrig sein wird, sie die ganze Zeit oben auf der Seite angezeigt. Und es wird, sagen wir, sechs verschiedene Navigationselemente in dieser Navigation haben. Diese ID für In-Page-Links ist also wirklich nützlich, da Sie auf dieser Seite möglicherweise, sagen wir, Referenzen, ein Kontaktformular, eine Galerie, ein Portfolio haben. Sie können all diese Elemente in Ihrer Navigation haben. Wenn Sie also darauf klicken, werden Sie zu diesem Abschnitt Ihrer Website weitergeleitet. Es ist wirklich nützlich und du kannst das auch in XD und in Figma tun . Aber hier ist es wirklich nützlich , denn in Ihren Abschnitten selbst können Sie diesen Abschnitt auswählen und sagen: Das sind wir. Ich nenne nur, ob wir genau hier in der Navigation hätten , wer wir sind, ich würde eine Schreibtischabteilung benennen, ihr eine ID geben, wer wir sind. Und wenn meine Benutzer dann darauf klicken, wer wir hier sind, scrollt die gesamte Website zu diesem bestimmten Abschnitt nach unten. Diese IDs sind also wirklich nützlich , wenn Sie sie verwenden möchten. Aber hier lassen wir es einfach so wie es ist. Also als nächstes haben wir Kredite, also werde ich dasselbe tun. Also Seite und hier kannst du sehen, wir können Spaß haben. Also jemanden direkt per E-Mail anzurufen, um E-Mails direkt über externe E-Mail-Anbieter wie Gmail oder Hotmail zu senden wie Gmail oder Hotmail um zu verschiedenen Abschnitten und Dateien zu verlinken. Wenn Sie eine Datei hochladen möchten, damit Ihre Benutzer diese Datei herunterladen können . Natürlich gibt es dort Dateibeschränkungen. Ich werde die Seite verlassen. Wie ich schon erwähnt habe. Das wird uns zu Krediten führen, dieser Tab. Es wird also in diesem Tab geöffnet. Und lassen Sie uns abschließend dasselbe tun, um uns zu kontaktieren. Gehen wir also zur Seite, wählen Sie Seite. Lass uns mit uns Kontakt aufnehmen. Dieser Tab. Da haben wir's. Jetzt, wo das behoben ist, testen wir es zuerst. Lass uns gleich hier auf Vorschau klicken. Lass uns zu den Autos gehen. Und es wird mich auf meine Kursseite weiterleiten, auf Kredite. Es wird mich zur Seite Kredite weiterleiten und mir wird angezeigt, dass ich aus irgendeinem Grund schlecht wegkommen muss. Los geht's, weil es nicht gespeichert werden konnte, klicken Sie auf Kontaktieren Sie uns. Und es bringt mich zur Kontaktseite Autos. Aber wenn ich zurück nach Hause gehe, wenn ich auf mein Logo klicke, führt es mich nicht weiter, also muss ich es verlinken. Also lass uns zur Seite gehen, Lass uns nach Hause gehen. Gehen wir in den Bearbeitungsmodus. In unserer Navigationsleiste können Sie die Eingabetaste drücken, um sie bearbeiten zu können. Wählen Sie Ihr Logo aus, das ist dieses Ding hier. Und was ich tun möchte, ist dasselbe zu tun. Anstatt einer externen URL möchte ich mich also auf eine Seite verlinken. Ich kann eine Seite auswählen , die die Homepage ist, und Preload wird standardmäßig verwendet. Gehen wir jetzt zurück und testen wir es schnell. Wenn ich also auf Vorschau klicke und zu Krediten gehe und mein Logo auswähle, klicke darauf. Es wird mich hierher bringen. Aber wenn ich wieder zu meinen Lungen gehe, testen wir es in der Fußzeile. Sie können sehen, dass dies immer noch funktioniert. Ich werde versuchen, es zu reparieren. Vielleicht kann ich es als Raster hinzufügen. Auf diese Weise wird es nicht aus der Reihe geraten. Also hier haben wir dasselbe Logo und du kannst sehen, wenn ich mit der Maus darüber fahre, es ändert sich. Der Link verbreitet sich also , weil wir ihn aus unserer Navigation genommen haben. Also wenn ich dort klicke, sollte es mich brauchen, aber das tut es nicht. Schauen wir uns also an, was das Problem ist. Wenn ich also meine Fußzeile und wenn ich meine Logo-Fußzeile auswähle, die externe URL der Auswahl angezeigt. Also bring mich zu Page, bring mich nach Hause. Da haben wir's. Und lass uns das sehen. Also das ist Nab, ein Link. Wenn ich also hier auf Einstellungen klicke, muss ich es immer noch hier bearbeiten. Also lass uns das machen. Das ist Page Cars, das ist Page Loans, und das letzte ist Page Contact Us. Also los geht's. Jetzt haben wir all dies und stellen Sie sicher, dass die Social-Media-Symbole Sie die Social-Media-Symbole auf die gewünschte Einstellung einstellen. Ich lasse es vorerst leer, weil ich nicht denke, dass es notwendig ist, es für diese Seite zu verlinken. Was ich, wie gesagt, tun möchte, ist, dass ich gehen werde, wie Sie jetzt sehen können, es ist behoben, aber wenn ich auf Vorschau klicke , wird nur mit mir herumgespielt. Also werde ich das einfach machen. Also, wer wir sind Rapper statt Flexbox, ich werde das Grid wählen. Nehmen wir an, ich positioniere dieses Raster etwas schmaler, etwa so. Und ich werde die zweite Reihe loswerden , so etwas. Da haben wir's. Und dann drinnen wähle ich das aus. Und lass es uns mit dieser oder dieser Größe versuchen. Lass uns die Breite loswerden. Da haben wir's. Aber jetzt müssen wir auch das anpassen. Inhalt. Werde auch die Breite los. Da haben wir's jetzt funktioniert. Und zum Schluss passen wir dieses Raster an. Wenn ich also hier klicke, um mein Raster anzupassen, passe ich diesen Text einfach so an dass er etwas schmaler als dieses Bild ist. Sie können es also noch weiter anpassen. Und Sie können sehen, dass wir hier den Rand haben , weil Sie auf dieser Seite sehen können , wo das Bild endet. Und da hast du es. Jetzt wird es für uns viel einfacher sein, dies zu tun. Wenn Sie hier im Bearbeitungsraster klicken und sich im Tablet-Modus befinden, können Sie einfach eine weitere Zeile hinzufügen und die Spalte entfernen. Und es wird sich einfach hier ausbreiten und ausdehnen, wie Sie sehen können. Und wir müssen hier nur etwas Abstand hinzufügen und sicherstellen , dass dieser Rand von dieser Seite entfernt wird. Treffe Null. So wie. Und ich kann weitermachen und meine Partnerbilder auswählen und sicherstellen, dass meine Breite 100% beträgt. Da haben wir's. Und jetzt muss ich das nur noch anpassen. Sehen wir uns also an, dieses Partnerbild hat, sagen wir, die Breite beträgt 100 Prozent. Da haben wir's. Und ich wähle einfach diesen aus und passe ihn manuell an. So beruhigend zum Beispiel, und Sie können die Abstände auf der linken und rechten Seite sehen , das ist eine Polsterung, die wir zuvor hinzugefügt haben. Sie können also sehen, wie nützlich das ist, wenn Sie anfangen, mit dem Tablet zu arbeiten. Ich lasse mich ein bisschen mitreißen, aber ich werde das hier nicht zu oft tun. Lassen Sie mich hier nur eine Marge von 64 angeben. Da haben wir's. Und jetzt können Sie sehen, wie das auf einem Tablet aussieht , und auf dem Handy wird es genauso sein. Wir müssen nur einige zusätzliche Änderungen an unseren Bildern vornehmen. Aber wie gesagt, lassen wir uns vorerst nicht zu sehr mitreißen. Dies ist das Video über die Links. Und zu diesen responsiven Designs werden Sie etwas später kommen . Hier haben wir die aktuelle Seite Kredite ist und Sie sehen können , dass sie blau ist . Dies wollten wir unseren Benutzern in erster Linie zeigen , wo sie sich auf der Website selbst befinden. Wenn ich also zurück zu Autos gehe, klicken wir auf Vorschau. Gehen Sie zurück zu den Autos und wählen Sie eines davon aus. Lass uns mit Lamborghini gehen. Sie können sehen, dass wir überhaupt nicht auf den Autos sind , weil dies diese externe Seite ist. Also, wenn ich zurückgehe und so etwas wie Cadillac Escalade sage, dann sind wir vielleicht da. Es zeigt mir das nicht, aber wenn ich auf die Autos klicke und Autos besuche, haben wir jetzt diesen blauen Link und dieselbe Geschichte für den Kontakt. Gehen wir also zurück zur Homepage. Und was ich tun möchte, ist , diese Schaltflächen zu verknüpfen. Dieser Knopf. Bringen wir es irgendwohin. Wenn ich also auf die Seite klicke, eine Seite auswähle, mich zu Autos führe und du kannst einen neuen Tab öffnen, wenn du willst. Ich werde mich im Moment nicht mit neuen Tabs beschäftigen. Wir behalten das hier, sehen uns alle Autos an. Wir werden den Link zu derselben Seite hinterlassen. Also Autos, weil ich möchte, dass sie alle Autos sehen, was wir bieten Vorteile Kontaktieren Sie uns. Und dann müssen Sie das in Ihrem Dashboard anpassen. Sie müssen also anpassen, wohin Sie Links senden und wohin Sie Nachrichten senden. Und so wird es funktionieren. Also, wenn ich dich dort zu den Projekteinstellungen bringe und du hier Formulare zur Benachrichtigung sehen kannst , wer es ist. Sie können dies also in Ihren Namen ändern. Also Etikett festlegen und so weiter. Cent-Formulareinsendungen an derzeit habe ich hier meine eigene E-Mail-Adresse. Wenn Sie dieses Projekt an Ihren Kunden senden, geben Sie natürlich dieses Projekt an Ihren Kunden senden, hier die E-Mail-Adresse Ihres Kunden ein, und daher wird seine Betreffzeile gesendet. Sie können z. B. den Seitennamen für einen Namen sehen , damit sie wissen, woher das Formular stammt. Antworte auf die Adresse. So können Sie benutzerdefinierte Adressen und deren E-Mail-Vorlage eingeben. Sie können Schulden eingeben und das Formular einreichen ist es nicht in der formellen Benachrichtigungs-E-Mail enthalten. Also welches ist es? Und Sie können sogar Rückeroberung einbeziehen. Im Moment ist dies nicht der Fall. Sie können hier klicken, um es zu aktivieren und dann können Sie diese Einstellungen nach Belieben anpassen. Und wie ich bereits erwähnt habe, können Sie hier zusätzliche Formulare integrieren. Lass uns zurück zum Designer kommen und zurück zu Lincoln, weil wir nicht zu viele Elemente haben, also werden wir ziemlich bald fertig sein. Wie ich bereits erwähnt habe, haben wir das bereits getan. Wenn ich also zu den Einstellungen gehe, kannst du sehen, dass wir fluchen werden , was in Ordnung ist. habe ich bereits erklärt. Für die Karte müssen Sie nichts verlinken, denn wenn Sie dort klicken, werden sie zu Google weitergeleitet. Also das ist in Ordnung. Und wenn du hier zu Autos gehst, müssen wir nichts verlinken. Es ist super unkompliziert. In der Lunge. Was wir tun können, ist uns zu kontaktieren. Also dieselbe Geschichte, z. B. nehmen wir an, ich gebe meinen vollständigen Namen, meine E-Mail-Adresse, mein Telefon und die Nachricht ein, hey, ich interessiere mich für deine Lunge und so weiter und so weiter und so weiter. Sie können also auf jeder Seite sehen, warum diese Kontakt-Foren wirklich nützlich sind denn was auch immer der Benutzer tut, es gibt dort das Kontaktformular. Sie können also einfach das Kontaktformular über das senden das Kontaktformular über das was sie gerade tun, was auch immer sie interessiert, in diesem Fall über die Kredite. Also ich bin an deinen Lungen interessiert. Wie funktioniert es? Wer ist dein Partner? Mit wem kann ich sprechen und so weiter und so weiter. So funktioniert das also. Und lass uns zu den Kontaktiere uns gehen. abschließend Kontakt mit uns auf. Wir müssen hier nichts tun. Und das Letzte, was ich für dieses Video machen möchte , ist die Vorlage für Autos, denn hier haben wir drei Buttons. Gehen wir also zuerst zurück, denn wir wissen bereits, was wir tun wollen. Und hier können Sie die Sammlungsseite sehen. Ich möchte nicht, dass es auf die Sammlungsseite geht. Ich wollte es auf die Eisenbahnseite bringen. Und die reguläre Seite wird Autos sein, weil alle Autos anzeigen sie dorthin bringen , um die Liste der Autos zu sehen. Sie können einen neuen Tab öffnen. Sie können dies standardmäßig tun. Und was ich in diesem Fall tun werde , ist einen neuen Tab zu öffnen. Warum möchte ich das tun? Weil ich vielleicht die beiden Autos vergleichen möchte. Nehmen wir an, ich bin interessiert, ihr habt BMW-Modelle, z. B. ich schaue aus einem Winkel. Ich möchte mir alle Autos ansehen, mir ein anderes ansehen und die beiden einfach in zwei Tabs vergleichen. Oder Sie haben genau die gleichen Autos, aber mit einer anderen Farbe. Vielleicht möchte ich Bilder in Lightbox auf beiden Tabs öffnen . Und ich möchte vergleichen, wie das Auto in verschiedenen Farben aussieht. Deshalb ist das nützlich. Hier. Was wir haben, ist dieses Auto reserviert. Was wir jetzt tun können ist, dass wir z. B. entweder zur URL gehen und sie an das Formular senden können, oder wir können zum Abschnitt Seiten gehen und einen Seitenbereich auswählen. Und lass uns vielleicht eine Nachricht sagen, mal sehen, was das macht. Wenn ich also auf Vorschau klicke, reserviere diese Fahrzeugnachricht an, es wird mich dorthin schicken. Aber vielleicht, vielleicht kann ich sie irgendwo hier verlinken. Also lass uns hierher gehen. Gehen wir zum E-Mail-Formular, vielleicht versuchen wir das. Also, wenn ich höre, dass wir dieses Auto reservieren, los geht's. Ich werde zum E-Mail-Formular weitergeleitet, was genau das ist, was ich will. Ich möchte also nicht, dass sie zu viel Zeit verschwenden. Ich will sie, wenn sie interessiert sind, können sie einfach dort klicken. Oder deshalb haben wir in diesem Fall eine gute UX verwendet. Wenn sie hier oben auf der Seite sind und das Auto schnell reservieren möchten, können sie hier klicken. Sie werden dort zum Formular weitergeleitet. Aber wenn sie irgendwo hier in der Nähe sind, folgt ihnen das immer noch. Wenn sie den ganzen Weg hierher scrollen und sagen, weißt du, was, ich möchte hier das Kontaktformular reservieren, damit sie es nicht verpassen können. Es ist eine gute UX, es ist eine gute Design Thinking-Lösung dort. Schließlich wollen wir C, Kreditoptionen. Was ich möchte, ist, sie auf eine solche Kreditseite zu bringen. Und noch einmal, Sie können das in einem neuen Tab öffnen. Warum? Denn vielleicht möchte ich, dass sie alles über diese Kredite lesen, aber auf einem neuen Tab, damit sie das Auto, das sie sich gerade ansehen, und die Kredite, die wir anbieten, vergleichen können das Auto, das sie sich gerade ansehen , vielleicht sind sie mit Santander in diesem Fall oder mit als Leasing, was auch immer der Fall ist. Es ist immer ein guter Denkprozess , ihnen Optionen zu geben. In diesem Fall besteht die Möglichkeit darin, zwei Tabs zu öffnen, damit sie die beiden Optionen vergleichen und herausfinden können , was für sie am besten geeignet ist. Also los geht's. Jetzt, nachdem das abgeschlossen ist, haben wir alles miteinander verknüpft. Alles funktioniert wie es sollte. Also, wenn ich hier auf Vorschau klicke, klicke genau hier. All das funktioniert einwandfrei. Im nächsten Video werden wir über Responsive Design sprechen. Und ich werde Ihnen zeigen, wie Sie einige dieser Designs in Responsive umwandeln können. Und es wird ein ziemlich schnelles Video sein weil wir schon einige Vorbereitungen getroffen haben, aber wenn wir ein paar Pannen haben, werde ich es vielleicht in zwei oder drei Videos aufteilen, nur damit es für euch einfach ist zu folgen. Also ich sehe dich im nächsten Video dem wir uns mit dem Tablet befassen werden. 188. Reaktionsfreudiges Tablet: In Ordnung, lassen Sie uns jetzt mit dem responsiven Design beginnen und fangen wir mit dem Tablet an. Und wir werden uns zuerst mit der Homepage befassen. Und wenn wir dann weitermachen, möchte ich zu den nächsten Seiten übergehen , aber alles wird genau das Gleiche sein. Sie werden nur einige dieser Elemente hier und da anpassen . Und du hast schon im vorherigen Video gesehen , wie super einfach das ist, das ohne weiteres zu tun , lass uns anfangen. also bereits standardmäßig Wir haben also bereits standardmäßig unsere Navigation, die in allen unseren Abschnitten funktioniert, was völlig in Ordnung ist. Was ich hier tun möchte ist genau hier reinzukommen , wo Tablets stehen. Öffne diesen Abschnitt. Und das Wichtigste zuerst: Ich möchte nicht, dass es oben so viel Platz hat. Lassen Sie mich also meinen Bereich öffnen und ihn auf vielleicht 40 Pixel reduzieren. Da haben wir's. Und lass uns den Hero-Wrapper öffnen. Weil wir dieses Flex-Layout aktiviert haben. In diesem Fall wähle ich vertikal. Da haben wir's. Und jetzt muss ich nur noch ein paar Anpassungen vornehmen. Also hier habe ich meinen Helden. Inhalt. Die Breite beträgt 60%. Ich werde es auf 100% setzen, weil auf diese Weise der gesamte verfügbare Platz beansprucht wird, der angeboten wird. Und wenn es um diese Prozentsätze geht, ist es wirklich sehr einfach, sie auswendig zu lernen. Denken Sie einfach darüber nach, wo sich Ihre Inhalte befinden. In diesem Fall befindet sich unser Heldeninhalt innerhalb des Helden-Wrappers, aber dieser Hero of Wrapper befindet sich innerhalb des Containers, und dieser Container hat auf jeder Seite die Paarung von 20 Personen. Wenn ich also den Mauszeiger bewege, können Sie sehen , wo sich das Pairing befindet. Was auch immer es in meinem Behälter ist, es wird nicht breiter sein als diese, diese Breite des Containers -20% Polsterung auf jeder Seite. Es ist also super einfach zu berechnen und zu verstehen. Lass uns jetzt etwas anderes machen. Also hier haben wir die Breite, wir haben die Höhe für unser Heldenbild. Was ich tun werde, ist das runterzudrücken. Was ich tun kann, ist das vielleicht auf, sagen wir hundert, einzustellen . Mal sehen, ob das zu viel ist. Da hast du es. Und ich möchte nicht, dass es zu 100% ist. Ich denke, das wird in Ordnung sein. Was ich hier tun kann, ist, diesen Inhalt vielleicht in den Mittelpunkt zu stellen , weil er auf diese Weise viel einfacher zu skalieren sein wird . Nennen wir es also das Zentrum. Und denken Sie daran, dass alle Änderungen, die Sie an einem Tablet vornehmen, keinen Einfluss auf die Desktop-Größe haben. Wenn es also genau hier geht und auf den Desktop klickt, sieht alles genauso aus. Aber wenn ich das Tablet gewechselt habe, wirkt sich das auf das Tablet aus und ein Telefon wird kleiner. Aber wenn Sie die Desktop-Änderung vornehmen, wird sich das auf alles auswirken. Es kaskadiert also vom Desktop nach unten, nicht umgekehrt in Webflow. Gehen wir also zurück zur Mitte und legen wir einfach unseren Text in die Mitte. Was Sie auch tun können, ist vielleicht eine Flexbox daraus zu machen und sie auf diese Weise in ein Zentrum zu verwandeln. Aber in diesem Fall nennen wir es einfach zentriert. Lassen Sie uns das nun so positionieren, dass es zentriert ist. Weißt du was, wir können das tun, also lass es uns, lass es uns machen, lass es uns tatsächlich machen, lass uns das als Flexbox-Vertikale bezeichnen. Und ich werde einfach alles so in eine Mitte legen. wird es für mich viel einfacher sein Später wird es für mich viel einfacher sein, diese Dinge anzupassen. Schauen wir uns die Telefongröße an und Sie können sehen wie sie mit dem Text skaliert. Und schließlich müssen wir für diese kleinsten Größen die Größe unserer Texte anpassen, aber wir werden in nur einer Sekunde dazu kommen. Beschäftigen wir uns zuerst mit dem Tablet. Für diesen speziellen Abschnitt hier. In gewisser Weise hat es die Arbeit bereits für uns erledigt. Wählen wir in diesem Fall also unseren Wrapper aus, damit wir das Grid haben, damit es weiß, was zu tun ist. Lassen Sie mich es anpassen, weil wir diese beiden Spalten haben. Das ist großartig. Wir müssen nur den Inhalt hier mit dem Bild anpassen . Die maximale Breite beträgt 100 Prozent. Nehmen wir 100% für die Breite und es wird das ausfüllen. Was Sie tun können, ist die Höhe, die Breite oder etwas Ähnliches anzupassen, aber ich denke nicht, dass das notwendig ist. Was ich hier tun kann, ist, dass ich meinen Inhalt auch so ausrichten kann, dass Sie Ihre Artikel in der Mitte ausrichten können, aber ich möchte in diesem Fall nicht, dass Sie das tun. Ich möchte, dass sie sich ausdehnen , um den gesamten Raum auszufüllen. Hier für diesen Text möchte ich vielleicht einen Rand von 64 hinzufügen. Und ich denke, das wird in Ordnung sein. Es ist lesbar, es ist lesbar, es ist in Ordnung. N Als ich anfing zu verkleinern, kannst du sehen, wie sich das anpasst. Wenn ich also hier klicke, wenn ich genau hier klicke, kannst du sehen, wie leicht es folgt und wie es sich leicht anpassen lässt und alles so funktioniert, wie es sollte. Wie. Da. Da haben wir's. Lassen Sie uns nun zu diesem Abschnitt übergehen. Und hier haben wir auch ein Raster für den Sammlungslisten-Wrapper. Also, was ich in diesem Fall tun werde, ist mal sehen. Wir haben tatsächlich die Flexbox, aber das spielt keine Rolle. Aber hier haben wir ein Netz. Lass mich einfach sehen. Ja, auf einer Sammlungsliste selbst. Wenn ich also das Raster anpasse, werde ich hier einige davon loswerden bis ich nur eines habe, und füge hier einfach zwei weitere hinzu. Da haben wir's. Und ich behalte den Knopf, weil ich ihn immer noch brauche. Ich muss immer noch, dass sie dorthin gehen. Und wenn ich hier mit der Skalierung beginne, können Sie sehen, dass es sich automatisch anpasst und in den verbleibenden Platz passt. Und Sie können sehen, dass der Abstand eingehalten wird. Und deshalb liebe ich Grids weil sie super einfach zu handhaben sind. Wenn wir unser Angebot ein wenig einschränken, lassen Sie uns diesen Abschnitt korrigieren. Hier auf dem Container. Wir haben nichts, aber hier auf unserer Verpackung, wir haben tatsächlich eine Flexbox. Drehen wir es also vertikal. Und was ich tun muss, ist mein Bild einzustellen und direkt hier zu den Rändern zu gehen, meinen Rand festlegen, es ist z. B. 64 und mal sehen, was wir mit diesen Texten machen können. Es gibt viele, viele verschiedene Optionen, die Sie hier tun können. Aber was ich hier machen kann, sagen wir, vielleicht kann ich es dehnen oder meine Breite auf 100 Prozent erhöhen. Probiere es aus, so etwas und versuche dann es zu zentrieren oder nicht. Ich weiß es nicht. Vielleicht kann ich, weil sie in der Mitte sind, vielleicht kann ich sie alle vertikal als Flexbox platzieren. Und dann kann ich vielleicht den Inhalt darin zentrieren. Wählen Sie also jeden von ihnen aus. Klicken Sie auf die Flexbox, die den Inhalt vertikal zentriert. Klicken Sie hier, Flexbox vertikal mittig zum Inhalt. Und los geht's. Jetzt haben wir den Inhalt in der Mitte. Und noch einmal, wenn Sie mit der Skalierung beginnen, können Sie sehen, wie es passt und wie es sich gut an die Größe anpasst, die für jeden einzelnen Breakpoint verfügbar ist . Dieses Bild sieht toll aus. Unsere Vorteile, lassen Sie uns jetzt auch darauf eingehen. Ich gehe zu meinen Sozialleistungen. Es wird ein bisschen anders sein. Wenn ich also auf Vertikal drückte, gehen wir eigentlich mit horizontal, weil das für den eigentlichen Bildvorteilen Wrapper war . Mal sehen, was wir hier tun können und welche Vorteile wir haben. Drehen wir das Netz um. Wenn ich es hier anpasse , haben wir drei Spalten und keine Zeilen. Fügen wir also zwei weitere Zeilen hinzu und lassen Sie uns diese Spalten loswerden. Da haben wir's. Jetzt haben wir also den Inhalt im Mittelpunkt. Aber jetzt müssen wir die tatsächliche Größe unseres Containers anpassen. Wenn ich also genau hier drücke und meine Umschalttaste und meinen Aufwärtspfeil gedrückt halte , passt es sich auf, sagen wir mal 800 an. Ich denke, das wird ziemlich gut. Und es ist ziemlich gut. Da hast du es. Dieser Abschnitt ist also abgeschlossen. Und zum Schluss noch für die Kontaktiere uns, denn wieder einmal, das ist das Netz. Denken Sie daran, aber ich kann sofort, was mir viel Zeit sparen wird, sofort auf Bearbeiten zu klicken weil es sich auf meinen Seiten verbreitet. Denken Sie daran, ich kann zu meinem Container und zu meinem Formular-Wrapper gehen. Ich kann meinen Formularblock auswählen. Darin drin. Ich muss mir dieses Formular merken, und hier haben wir dieses Raster. Wenn ich also in meinem Raster auf Bearbeiten klicke , muss ich vielleicht mal sehen. Vielleicht kann ich noch eine Zeile wie diese hinzufügen. Geh wieder raus. Und ich wähle hier meine E-Mail-Adresse aus. Ich werde es überspannen. Das wird das Telefon runterdrücken, das Telefon der anderen Seite verbringen. Und los geht's. Jetzt haben wir jedes dieser Felder, das die gesamte Breite unseres Rasters einnimmt das die gesamte Breite unseres , und die Schaltfläche bleibt gleich. Aber was kannst du mit deinem Button tun? Denken Sie daran , dass wir das richtig rechtfertigen, genau hier. Was ich tun kann, ist zu rechtfertigen, dass es übrig geblieben ist. Und ich kann einfach darauf klicken und es vergrößern. Oder ich kann es in die Mitte stellen, so etwas und es kann die gesamte Breite einnehmen. Ich kann mit der vollen Breite gehen und diesen Button von btn nennen, nur damit wir einen anderen Stil haben. Vielleicht kann ich in diesem Fall die Breite von 100% verwenden. Und ich kann den Text nehmen , der in der Mitte steht. Und es ist in Ordnung, weil wir übrigens in einem Forum haben, das einfach diese Breite annehmen wird. Da haben wir's. Wenn Sie jetzt zu einer beliebigen Größe wechseln, nimmt sie immer noch die gesamte Breite Ihres Bildschirms ein. Und wir müssen zur Instanz zurückkehren, damit wir sehen können, wie das gesamte Formular stattfindet. Sie können also sehen, dass es genau hier abschneidet , weil wir 20 Polster auf jeder Seite haben, was wir eigentlich wollen. Hier funktioniert alles gut. Was wir mit den kleinsten und kleinsten Größen machen können, ist tatsächlich in dieser Größe zuzuschneiden. Beschäftigen wir uns also mit dem Tablet. Und lass uns gleich hierher kommen, wo Karte steht, geh rein. Was ich mit der Karte machen kann. Mal sehen, was wir genau hier auf der Verpackung haben. Wir lassen den Flux den Vertikalflex einschalten. Und was wir tun können, ist , diese drei in ein Raster zu setzen oder sie einfach so zu belassen, vielleicht eins nach dem anderen. Also wo wir zufrieden sind, schauen wir mal, vielleicht kann ich die Breite auf 100 Prozent erhöhen. So wie es ist. Aber weil der Wrapper, mal sehen, bei 100 Prozent ist und der Inhalt drin ist. Ich weiß nicht wirklich, warum es diesen Raum einnimmt. Es hat die 20-Polsterung. Es sollte diese 20-Paarung beibehalten, aber aus irgendeinem Grund tut es das nicht. Lassen Sie uns 2020 auf jeder Seite so sehen, wo wir zufrieden sind , und richten wir es nach links aus. Da haben wir's. Jetzt funktioniert es. Und nun zu dem Text darin, was ich tun kann, ist vielleicht, dass ich ihm diese Klasse von zentriert geben kann , weil ich meinen Titel zentrieren möchte. Springt genau hier, klickt auf die Mitte und zentriert auch diese. Klicken Sie hier. Und dann, wie gesagt, du kannst damit machen, was du willst. Sie können sie in ein Raster legen und dann sicherstellen, dass sie drei Spalten breit sind. Und dann können Sie das Raster anpassen oder Sie können einfach so platzieren, dass sie in beiden Fällen in der Mitte liegen. Was wir hier also tun können ist, mal sehen, vielleicht können wir unseren Inhalt in den Mittelpunkt stellen. Nein, ich muss hier ein neues Div eintragen. Also lass uns das schnell machen. Lassen Sie uns Ihr Textfeld-Steuerelement auswählen . Geben Sie deve ein, sie haben blockiert. Und nennen wir das Formular oder Karte. Informationen zur Karte. Und ich werde dort die Öffnungszeiten eintragen. Komm schon, Telefonnummer und Adresse. Da haben wir's. Dann verwandle diese Karteninformationen in ein Raster. Ich werde drei Spalten haben. Ich werde keine Reihen haben. Da haben wir's. Nun, wie Sie sehen, funktioniert alles wie es sollte und es passt wirklich gut hinein. Und es verpackt sich ganz gut. Und es gibt mir diese Polsterung unten , weil ich keine für meine Map habe, aber ich denke, es funktioniert ganz gut. Also wenn ich es hier umschalte, funktioniert es immer noch, aber nicht auf der kleinsten Größe. Also vielleicht können wir das bei der kleinsten Größe korrigieren. Irgendwo hier fängt es an zu brechen, aber wir werden uns gleich darum kümmern. Aber im Grunde für unsere Map, das ist es im Grunde. Also zurück zur Instanz, das ist jetzt behoben. Und zum Schluss für unsere Fußzeile Lassen Sie uns mit der Fußzeile selbst befassen. Ich denke, dass das auch in dieser Größenordnung ganz gut funktioniert. Selbst in dieser Größenordnung. Vielleicht, vielleicht irgendwo hier in der Nähe. Also, was die Telefongröße angeht, können wir es vielleicht ein bisschen aufteilen. Wählen Sie also die Fußzeile aus und drücken Sie die Eingabetaste. Denken Sie daran, dass dies die Änderung in unserem gesamten Design verbreiten wird . Wechseln wir also zu unserem Footer-Wrapper, da dies ein Raster ist. Wir können auf In Raster bearbeiten klicken. Und was wir hier tun können, ist vielleicht, mal sehen, vielleicht können wir zusätzliche Zeilen wie diese hinzufügen. Und vielleicht können wir eine Spalte loswerden. Da hast du es. Also jetzt haben wir einfach, jetzt haben wir, lass uns zwei Spalten haben , nur um der Sache willen. Was ich als Nächstes tun werde, ist, genau hierher zu kommen und meine sozialen Icons darauf einzustellen. Das wird sich ausbreiten. Passen wir es hier an. Und hier werde ich es in den Mittelpunkt stellen. Verwenden Sie meine sozialen Icons, stellen Sie sicher, dass sie in der Mitte stehen. Da haben wir's. Dies ist standardmäßig in der Mitte. Und was ich tun kann, ist diese Änderungen anzupassen , weil Sie sehen können , dass wir oben und unten bei 64 Margen sind. Meiner Meinung nach zu viel. Also können wir es vielleicht auf vielleicht 32 oder so senken. 33. Lass uns mit 30 auf manuell gehen , weil es mir nicht zuhört. 32. Hübsch. Und hier können wir vielleicht die Fußzeile unserer sozialen Symbole verwenden und diese zusätzliche Änderung vornehmen. Mal sehen. Unsere Links. Ich habe keine Werte. Also hier können wir etwas sagen wie 32, glaube ich, oder 24, vielleicht. Da haben wir's. Schließlich hat eine Logo-Fußzeile aus irgendeinem Grund nur die Polsterung auf der linken Seite Lassen Sie uns das auf Null reduzieren. Und diese Polsterung, mal sehen. Ja, ich denke, das ist in Ordnung. Ich denke, wir lassen es einfach so. Wenn ich also auf meinem Tablet nachsehe, sind sie immer noch so und ich kann auf die niedrigstmögliche Größe herunterscrollen. Wenn ich dann genau hier klicke und anfange zu scrollen, kannst du sehen, dass es dort bleibt und du kannst die verschiedenen Geräte direkt hier auf der Seite sehen . Also lass mich mich verstecken, nur damit du das ein bisschen besser sehen kannst. Also hier sind, wenn ich anfange zu scrollen, sehen Sie einen und drei Kindle Fire Galaxy Note. Wenn wir hier anhalten und anfangen zu scrollen , werden mir neue Geräte angezeigt. Also Kindle Fire Galaxy Tab zu wenn ich anfange aufzusteigen, Surface Pro Tools, Surface Pro. Wenn ich also hierher gehe, kann man alle Arten von iPads und Microsoft Surface sehen. Das sind also all deine Größen. Und das Gleiche gilt für das Telefon. Irgendwo hier kannst du Nintendo Entertainment System sehen. Dies ist iPhone SE, Phi of S und ein früherer iPod touch. Also wirklich, wirklich kleine Geräte. Und wenn es anfängt, nach oben zu kriechen kannst du all diese Diamanten unten rechts hier sehen. Sie können sehen, wie sie erscheinen und mir all diese Werte zeigen. Also wieder einmal, die Tablet-Version ist im Grunde fertig. Wenn ich also hier oben hingehe, funktioniert die Navigation immer noch, weil wir sie vom ersten Tag an behoben haben. Und dieser Hover-Effekt wird sowieso nicht sichtbar sein, da du zuerst deinen Tab verwenden wirst. Hier brauchen wir keinen Hover, aber auch hier wird er nicht sichtbar sein, wird er nicht sichtbar sein da er nicht auf Ihren Finger reagiert. Hier. Was wir tun können ist, weil alles irgendwie ist, ja, lass uns diese Texte einfach da lassen, wo sie sind. Aber vielleicht erweitern Sie diesen Absatz, um den Raum auszufüllen. Also, wie macht man das? Klicken Sie auf Ihren Absatz. Und lass uns mit einer Breite von 100% gehen. Oder wir müssen, glaube ich, aus welchen Gründen auch immer manuell angepasst werden. Also lass uns dorthin gehen. Ja, da hast du es. Manchmal funktioniert es ganz gut. anderen Fällen müssen Sie es manuell anpassen, aber Sie können sehen, wie einfach das ist. Und jetzt, wenn ich anfange zu scrollen, wird dieser Absatz tatsächlich beschnitten und wie Sie sehen können, angepasst, sodass er in den verfügbaren Speicherplatz passt, den ich habe. Aber ich muss es zuerst manuell anpassen, weil es wirklich wichtig ist, dass Ihre Benutzer den Eiszug nicht bekommen, nicht bekommen. Das heißt, wenn es zwei tolle Reihen gibt, werden sie sehr bald richtig müde sein. Eine letzte Sache, die ich hier für den Abstand tun möchte hier für den Abstand tun möchte ist, dass ich nicht denke, dass wir hier zu viel Abstand benötigen . Also hier ist es in Ordnung. Hier, vielleicht ist es in Ordnung. Mal sehen, wie viel wir hier haben. Wir sind also in der Wrapper-Container-Sektion, wir haben 200. Also vielleicht können wir 200 haben, vielleicht 150, so etwas. Und hier in diesem Abschnitt können wir vielleicht auch 150 haben. Nur damit wir unsere Abschnitte ein wenig eingrenzen können . Hier in diesem Abschnitt können wir auch 150 solcher haben. Ich bin momentan kein großer Fan dieses Layouts, aber vielleicht können wir hier dasselbe tun , wie wir es mit unseren Absätzen gemacht haben. Also erweitern Sie einfach die Texte. Etwas wie das hier. Sie sehen, ob der Text zentriert ist, ist es nicht. Das ist also das Problem. Gehen wir also zurück und wählen unseren Textblock aus und ich werde ihm eine separate Klasse geben , was das ist, Angebot, Angebot, das so zentriert ist. Und ich werde es einfach zentrieren. Und hier werde ich mich für das Angebot entscheiden. Stellen Sie sicher, dass es zentriert ist. Da haben wir es, und hier steht das Angebot im Mittelpunkt. Und jetzt, wenn ich anfange, auf diese kleineren Größen zu skalieren , füllt es den verbleibenden Platz aus. Und es wird den Text wirklich gut platzieren. Sie können hier sehen, wie es funktioniert. Eine letzte Sache, die ich tun kann, ist vielleicht, mal sehen, die Softwaregarantie hat keine Breite. Vielleicht kann dieser Textblock also eine Breite von 100 Prozent haben. Mal sehen, ob das funktioniert. Das tut es nicht. Was Sie auch tun können, ist es auf etwas zu begrenzen, das CH heißt, was Charakter ist. Wenn wir uns also für 60 CAH entscheiden, wird es nur erweitert, sodass es nicht funktioniert. Du musst es hier manuell anpassen, aber das spielt keine Rolle. Ich denke, es funktioniert immer noch gut. Was ich vielleicht tun möchte, ist den Abstand hier anzupassen , Sie sehen unten, wir haben 32, bieten Garantie an, wir haben 32. Vielleicht kann ich das anpassen, um meine Lesbarkeit ein wenig zu verbessern, sodass ich mit 40 weitermachen kann. Ich glaube, ich wähle mein Angebot Wartung aus, klicke hier, wähle 40 und biete Kredite an. Es hat keine, aber es hat immer noch viel Platz hier. Leistungen. Alles sieht gut aus. Vielleicht kann ich das Gleiche hier machen, aber ich denke, es ist lesbar. Ich denke, es ist lesbar. Das sieht gut aus. Das sieht gut aus. Vielleicht können wir hier etwas zusätzliches Polster hinzufügen, aber lassen Sie uns mit diesem Spielraum umgehen. Also hier in diesem Abschnitt ist der Rand 150, das ist großartig. Gehen wir zum nächsten Abschnitt über. Margen bis 100. Gehen wir also zu 150 über. Und schließlich das Kontaktformular, wenn ich hineinklicke, lass uns zu 150 gehen und daran denken, dass das für jede Seite angepasst wird. Gehe zur Karte und passe ihre 2150 an. Und schließlich gehe zu meiner Fußzeile, drücke Eingabetaste und stelle das ebenfalls auf 150 ein. Eine letzte Sache, die ich hier tun möchte , ist, dass ich hier zur Karte gehen möchte. Und hier möchte ich diese Anpassung vornehmen und etwas nach unten drücken . Also vielleicht kann ich mit 40 gehen. Da hast du es. Und dieses H2-Dunkel, wer wir zentriert sind oder wo wir zentriert sind, vielleicht kann ich auch mit 40 gehen. Da haben wir's. Jetzt ist das nett und zentriert und wir haben unten nur ein bisschen mehr Luft zum Atmen. Was ich mit zwei Karten machen kann ist, dass ich die Höhe vielleicht auf 450 oder so halten kann , nicht 150, sondern für 50. Da hast du es. Ich denke, auf kleineren Bildschirmgrößen sieht es viel besser aus. Und dann kannst du auch hier runter gehen , vielleicht für 50 geht das nicht wirklich. Das ist alles großartig. Wenn ich also hineinklicke, wähle meine Karte aus, vielleicht 350. Da hast du es. Ich denke , das funktioniert viel besser. Wenn ich auf die kleinstmögliche Größe gehe. Vielleicht kann ich gleich hier mit 250 gehen. Da haben wir's. Und ich finde, das funktioniert ganz gut. Also los geht's. Unser Tablet ist quasi fertig für unsere Homepage. Was wir als Nächstes tun können, ist, dass wir vielleicht zur nächsten Seite für die Autos gehen und das sofort reparieren können. Das funktioniert also im Grunde so, wie es sollte. Ich möchte nur vielleicht die Position dieses Kreises anpassen. Also klicke ich einfach in die Ecke und ziehe es ein bisschen nach unten. Und ich denke, das ist bis jetzt ganz in Ordnung. Ja. Es ist also gut für diese exklusive Kollektion. Was wir tun können, passen wir es an. Also das Wichtigste zuerst für diesen Abschnitt. Was wir im Container haben ist, dass wir keine Paarung haben, was großartig ist. Also lassen wir es einfach so. Wir haben keine Marge. Aber hier für diesen, ich möchte ihn um 01:20 Uhr belassen, vielleicht so etwas oder vielleicht 150, aber nicht, nicht mehr als das. Und schließlich gibt es dafür den Bereich exklusive Sammlungen. Aber denken Sie daran, dass wir dieses Raster in der Autosammelliste haben. Also, was ich tun werde, ist, dass wir acht Autos haben. Ich werde gleich hier zuschlagen. Und statt dieser kann ich sagen, sagen wir Spalten, ich werde diese loswerden und vorerst nur zwei Spalten behalten. Sie können also sehen, dass wir jetzt zwei Spalten haben und ich denke, viele Details bei 768, was großartig ist. Jede Menge Details. Du kannst darauf tippen, du kannst es berühren, du kannst alles tun. Formular „Kontaktiere uns“. Wenn ich reingehe, sind es immer noch 150. Aber hier habe ich den unteren Rand. Vielleicht können wir hier diesen Abschnitt auswählen. Mal sehen, woher die Marge kommt. Sehen wir uns den Wrapper der Autosammelliste an. Hier haben wir die Marge von 64, also lassen Sie uns diese Marge loswerden und auf Null sinken. Und jetzt haben wir den Abstand ganz gut behoben, was meiner Meinung nach ganz gut funktioniert. Und hier können Sie all die Änderungen sehen, die wir vorgenommen haben. Alles funktioniert wie es sollte, auch das Navi. Also das ist gut. Wir müssen hier wirklich nichts machen. Gehen wir jetzt zur Kreditrede und sehen, wie das aussieht. Also, was wir hier tun können, denn denken Sie daran, dass wir diese Autos in einer Startaufstellung hatten. Ich behalte sie einfach so. Ich möchte grundsätzlich bearbeiten. Ich werde sie nicht anfassen. Ich werde sie einfach behalten. Und ich möchte, dass er so skaliert, wie es ist , dass er einem einzelnen Bild ähnelt. Lass es uns einfach so lassen wie es ist. Für den nächsten Abschnitt werde ich das auf 150 einstellen, vielleicht auf einundzwanzig. Weil wir jetzt genug Platz haben, dann werde ich hier reinspringen. Denken Sie daran, dass wir dieses Netz für Kredite und Sozialleistungen haben. Ich werde gleich hier klicken. Ich füge einfach zwei weitere Zeilen wie diese hinzu. Ich werde diese Kolumnen loswerden. Es wird den Inhalt ausfüllen, alles sieht so aus, wie es sollte. Und lassen Sie uns einfach den Abstand ein wenig an den Abstand zwischen den Zeilen anpassen . Fahren wir mit 32 fort. Ich denke, das funktioniert ganz gut und es wird sich bei jeder einzelnen Größe recht gut skalieren lassen. Wie Sie sehen können, wird es diese Informationen ausfüllen. Was wir möglicherweise tun können, ist, dass bei den kleinsten Größen, die Sie sehen können , der Text nach links verschoben wird. Was ich hier also tun kann, ist P grau ausgewählt und eine Kombinationsklasse von zentriert hinzufügen . Da haben wir's. Und ich werde meinen Text einfach so zentrieren. Und ich werde diese Kombiklasse zu all diesen hinzufügen. Wählen Sie also einfach Zentriert hinzufügen. Da haben wir's. Und jetzt, wenn ich mit der Skalierung beginne, können Sie sehen, dass es von der Mitte aus skaliert und nicht nach links ausgerichtet ist, sodass alles wie erwartet und so funktioniert, wie es sollte. Wir haben diesen Abschnitt bereits zuvor gemacht. Vielleicht können wir hier etwas mehr Luft zum Atmen haben etwas mehr Luft zum Atmen weil wir diese Bilder unten haben. Denken Sie also daran, dass wir 64 hinzugefügt haben. Lass uns in diesem Fall mit 80 weitermachen. Ich denke, das ist in Ordnung. Und mal sehen, ob wir hier zusätzliche Pairings haben. Ich glaube nicht, dass wir das tun. Der Wrapper hat also keinen Container, hat keinen. Im unteren Bereich gibt es keine, also ist das in Ordnung. Kontaktiere uns ist in Ordnung. Da haben wir's. Und die letzte Seite, die ich in diesem Video ansprechen möchte , ist Kontakt mit uns. Also lass uns damit umgehen, denn wir sind schon 27 Minuten da. Also um uns zu kontaktieren, hier gibt es wirklich nicht viel zu tun weil alles bereits so eingerichtet ist, wie es sollte. Also hier haben wir ein Showroom-Bild. Sie können die Größe anpassen, wenn Sie möchten, aber ich werde mich hier nicht darum kümmern. Es ist um 01:50 Uhr, also belasse ich es dabei. Wenn ich also die Eingabetaste drücke, siehst du 150. Vielleicht können wir hier die Combo-Klasse hinzufügen und das ein wenig anpassen, aber ich werde mich nicht wirklich darum kümmern. Sie können mit diesem und der Größe eine negative Marge erzielen, aber ich denke nicht, dass es notwendig ist. Ich denke, das sieht ganz richtig aus. Eine letzte Sache, die ich für das Tablet ansprechen möchte , ist, dass wir uns mit dem CMS befassen, mit der Vorlage für Autos. Was wir hier also tun können, ist, dass wir dies tatsächlich als unten positionieren können . Also lass uns das alles so schließen. Wir haben also Autoinformationen und wir haben eine Car Action Card. Und das ist es, was wir zunächst planen. Wenn ich also meinen Container auswähle, können Sie sehen, dass wir eine Flexbox haben. Wenn ich also senkrecht treffe, wird die Karte am Ende ganz nach unten gedrückt. Also was ich tun kann, ist hier mittig zu drücken, oder ich kann es links belassen. Ich kann meine Fahrzeuginformationen und die Breite verwenden. Sie können sehen, dass es 65 Prozent sind. Ich kann mit 100% gehen. Da haben wir es und es wird den verbleibenden Raum füllen . Mein Layout wird konsistent sein, aber jetzt haben wir das Problem mit unserer Karte. Hier. Ich werde auch 100 Prozent eingeben. Es wird diese Informationen ausfüllen. Ich werde diesen Button benutzen. Was ich vielleicht tun kann, ist, ihm vielleicht einen Spielraum von, sagen wir, 40 oder so für diese Tablet-Dimension zu geben. Und ich möchte, dass dieses Layout nach links schaut. Hier brauchen wir, dass die Position statisch ist. Es ist nicht mehr wirklich klebrig, als ob es genau hier war. Sie können also wieder einmal sehen , dass es genau hier bleibt. Es bleibt was wir wollen. Und auf einem Tablet wird dieser Inhalt einfach ganz nach unten gedrückt. Das war gut skaliert, sodass wir uns darüber keine Sorgen machen müssen. Wir haben drei Autos, das ist großartig. Diese Skala, diese Skala, also alles ist so, wie es sollte und so, wie wir es wollen. Eine letzte Sache, die ich tun möchte, ist den Inhalt meiner Autoauktionskarte auszuwählen . Komm gleich her und füge einen Rand von 64 hinzu, z. B. und ich denke nicht den Inhalt, tut mir leid, aber Car Action Card. Komm gleich hier zu den Top 64. Da haben wir's. Und jetzt haben wir diese Trennung. 64 ist vielleicht zu viel. Also lass uns mit 32.32 fahren funktioniert einwandfrei. Ich denke, in diesem speziellen Fall können wir in Bezug auf diese Bilder vielleicht das auswählen. Und mal sehen, denn das ist eine Sammlungsliste. Ich kann zur Sammlungsliste gehen und sie verstecken. Wenn ich jetzt auf Vorschau klicke, schauen wir mal, ob es funktioniert. Das tut es. Es ist also immer noch versteckt, aber es zeigt mir immer noch all diese verschiedenen Bilder. Und ich kann immer noch meine Pfeile nach links und rechts benutzen zwischen all meinen acht Bildern blättern, was ich eigentlich wollte. ihr also alle Bilder seht, wenn ihr dort einen Stopp benutzt, werden sie auf diese Seite weitergeleitet. Also ich denke, das sind fantastische Dinge für unser Layout. Und alles funktioniert super, bis hin zu wirklich kleinen Größen , mit denen Sie sich im nächsten Video befassen werden. Aber im Grunde funktioniert für das Tablet und die meiste Zeit hier im mobilen Portraitmodus im mobilen Portraitmodus alles wie es sollte. Wir werden das einfach etwas später anpassen und es anpassen und all diese Dinge anpassen. Aber im Moment funktioniert alles wie es sollte, einschließlich dieser, außer bei wirklich, wirklich kleinen, kleinen, kleinen Größen, mit denen wir uns gleich befassen werden. Sie können es also gleich hier sehen. Wenn ich also auf einem Desktop bin, haben wir drei Karten. Als ich sofort zu Doublet gewechselt bin, haben wir jetzt nur noch eine Karte und sie funktioniert bis hin zu den kleinstmöglichen Größen. Aber wir werden uns in einem Moment mit ihnen befassen . Also los geht's. Das ist unser Responsive. Alles ist wie erwartet, alles funktioniert wie erwartet. Im nächsten Video können wir uns also vielleicht mit diesen mobilen Portrait- und mobilen Landschaftsgrößen befassen . Weil es einige zusätzliche Breakpoints und einige Tipps gibt , die ich dir für diese Größen geben kann. Aber wir haben den Großteil der Arbeit bereits erledigt, also wird es in Ordnung sein, außer für das mobile Portrait, wenn wir tatsächlich anfangen müssen, einige Änderungen an unseren Schriftgrößen vorzunehmen . Also werde ich dich dort sehen. 189. Reaktionsfreudige mobile Landschaft: Lassen Sie uns jetzt an den responsiven Größen unseres Telefons arbeiten. Also, wenn ich gleich hierher gehe, Tablet haben wir es schon gemacht. Und wenn wir zum Telefon gehen, können wir anfangen, einige dieser Dinge anzupassen. Also innerhalb der Landschaft denke ich, dass das alles gut funktioniert, aber vielleicht, vielleicht kann ich hier anfangen, Änderungen vorzunehmen, aber ich möchte, ich möchte hier einige zusätzliche Änderungen vornehmen. Fangen wir also zuerst damit an. Mal sehen, was wir hier haben. Also vielleicht können wir hier anfangen , einige Änderungen vorzunehmen. Also vielleicht sollte dieser Abschnitt einen kleineren Rand haben. Also lass uns mit 100 gehen. Schau, wie das aussieht. Ich denke, das ist in Ordnung. Also vielleicht können wir einfach alle unsere Abschnitte bei 100 belassen. Der Konsistenz halber. Ich finde das gut. Leistungen. 100, los geht's. Die Größe ist gut und gültig. Kontakt-Formular. Was ich hier tun kann, ist Moderator auf 100 zu springen. Denken Sie daran, dass es sich in unserem gesamten Design ausbreiten wird. Lass uns hier anfangen, gib hier 100 ein, wir haben das schon als Setup. Andrew hat die Größe dieser Map bereits angepasst. Also, wenn ich hier reingehe , gehen wir endlich zu 100. Da gehen wir zurück zum Beispiel. Und ich denke, bis zu einem gewissen Punkt funktioniert hier alles gut, aber das werden wir in der nächsten Größe beheben. Aber im Moment denke ich, dass auf einem Startbildschirm alles gut aussieht , außer hier. Also vielleicht, vielleicht kann ich gleich hier anfangen , einige Änderungen vorzunehmen. Also hier sind wir hier, 1s-zentriert. Und ich kann dir die Kombiklasse geben, sagen wir, Telefon. Hier. Was ich tun kann, ist einige Änderungen vorzunehmen. Also für den H1 kann ich direkt hier anrufen statt 64, vielleicht kann ich mit 56 gehen, sehen, wie das aussieht. Oder vielleicht 48. 48 sieht hier gut aus für dieses Bild. Was ich tun kann, wenn du dich erinnerst, wenn wir bis hierher gehen, wir haben feste Breite und Höhe. Also vielleicht können wir das anpassen. Und lass uns mit der Breite von etwas kleinerem gehen , zum Beispiel für wenn t, so etwas. Und wir können diese beiden manuell anpassen, etwa dieses und das auf etwas Ähnliches. Und dann können wir sie manuell weiter anpassen , sie nach unten verschieben, diese auswählen und sie ein wenig nach oben verschieben, bis sie etwa so aussieht. Da haben wir's. Schließlich kann ich für diesen speziellen Abschnitt tun , anstatt ein Fünftel, lassen Sie uns mit 100 fortfahren. N wird gut funktionieren. Genau wie all diese anderen. Also hier im Telefon, im Telefon oder im Querformat können Sie sehen, wie das aussieht. Das ist großartig, das ist großartig. Lassen Sie uns es auf den kleinsten eingrenzen. Ich finde das gut. Da haben wir's. Das sieht also gut aus. In der größten Telefonlandschaft funktioniert das also selbst dann ganz gut. Wenn ich also auf Vorschau klicke und es einschränke, sieht alles ganz okay aus. Also ich finde das gut. Gehen wir zurück zu hier und passen wir einige dieser anderen Seiten an. Gehen wir also zu Autos und schauen, was wir da haben. Lassen Sie uns zunächst diesen Kreis anpassen. Grenzen Sie es ein wenig ein, um zu sehen , wie das aussieht. Das ist in Ordnung. Lassen wir den Kreis also da belassen, wo er ist. Dieses H1-zentrierte. Sieht gut aus. Schauen wir uns diese exklusive Kollektion an. Zuallererst werden wir für diesen Abschnitt ihn so lassen, wie er ist. Aber für diesen Abschnitt gehen wir zu 100 Sprungseiten unseres von Heilern veröffentlichten Wrappers und unserer Sammlungsliste, weil das unser Raster ist , klicken Sie auf Raster bearbeiten. Und ich werde meine Kolumnen loswerden. Also lass einfach eine Spalte da drüben. Weil das Autos sind. Es sollte alle acht Autos anzeigen. Also lass uns sie einfach zählen. 12345678. Da haben wir's. Das funktioniert also wie ein Zauber. Kontaktiere uns ist gut, weil wir es bereits eingerichtet haben. Das ist gut. Das ist gut. Also jetzt ist diese Seite fertig. Sie können sehen, wie einfach das ist. Gehe zu Krediten. Wie ich bereits erwähnt habe, werde ich das so lassen, wie es ist. Aber hier werde ich diesen Kurs haben. Lass uns schnell auf die Homepage gehen und sehen was wir hier für den H One gemacht haben. Wir haben also das Telefon der Telefonklasse H1 Hero Centered Phone. Also lass uns in die Lunge gehen. Wählen Sie diesen aus. Sehen wir uns H1 zentriert an. Lass mich sehen, was ich hier tun kann. Also lass mich zurück nach Hause gehen. Und fange an, ein bisschen zu erkunden. Hier haben wir also ein zentriertes Telefon, und für das Telefon stellen wir es auf 48,86 ein. In diesem Fall glaube ich nicht, dass wir einen T6 brauchen, also können wir ihn auf vielleicht 56 reduzieren. Jetzt vielleicht 64. Mal sehen. Was wir tun können. Ich weiß es nicht. 70 bis 72 funktionieren einwandfrei. Also 48, 72, das ist großartig. Gehen wir zur Lunge. Und geben wir diesem H einen. Siehst du, es ist schon 38. Mal sehen, vielleicht können wir dir die 48 geben. Das kann 60, 72 sein. Da haben wir's. Ich denke, das wird für diese kleinsten Größen ganz gut funktionieren , bis wir diese Größe erreichen. Also dann werden wir es ändern. Also hier funktioniert es gut. Hier für diese Bilder können wir vielleicht etwas Luft zum Atmen hinzufügen, also vielleicht 40 Pixel, so etwas. Ich denke, das wird für diesen ganz gut funktionieren. Lassen Sie uns es auf 100 senken. Das haben wir schon behoben. Es funktioniert also einfach gut für diesen Abschnitt. Anstelle von 200 nehmen wir 100, was gut wachsen wird. Und hier können wir vielleicht anfangen, diese zu zentrieren. Vielleicht können wir es bei dieser Größe zentrieren, diesen zentrieren und auch unseren Absatz zentrieren. Mal sehen, ob sich das ändert. Ja, Sie können sehen, dass es diese Änderung nicht beeinflusst hat, worüber ich gesprochen habe. Sie können auf dem Tablet sehen, es sich nur auf diesen Bruchpunkt ausgewirkt dass es sich nur auf diesen Bruchpunkt ausgewirkt hat, weil wir zu diesem Zeitpunkt angefangen haben, damit herumzuspielen. Das alles funktioniert also. Nun, sieht toll aus. Wenn wir jetzt zur Kontaktseite gehen. Wir müssen hier wirklich nichts ändern. Alles ist für uns getan. Lassen Sie uns abschließend zur Kursvorlage gehen und sehen, was wir hier tun können. Also hier, belassen wir es einfach bei diesem Stadium. Ich denke, das funktioniert. Okay. Es ist nicht fantastisch, aber es funktioniert. Okay. Sie können sehen, dass es 480 Pixel hat, also werden wir es hier ändern weil es sehr kaputt geht. Also, was wir hier tun werden, ist dass wir das alles vielleicht lassen können. Ja, ich werde alles so lassen, wie es ist, weil es innerhalb eines Rasters ist. Und was ich hier in diesem Fall tun kann, ist vielleicht, vielleicht kann ich das anpassen oder so. Mal sehen, denn das ist in einem Container, der als Inhalt für Autoauktionskarten bezeichnet wird. Vielleicht können wir anfangen, ein bisschen damit herumzuspielen , oder lassen Sie uns sie jetzt einfach auf der kleinsten Größe belassen. Lass es uns einfach so lassen, wie es genau hier ist. Oder vielleicht, vielleicht kann ich das in der Mitte positionieren. Mal sehen, wie es aussieht. Das ist also in einer Mitte und lassen Sie uns daraus eine Flexbox machen. Stellen Sie sicher, dass alles zentriert ist. Und jetzt können Sie das Problem, das wir haben, genau hier sehen. Wenn ich das also in der Mitte positioniere und das in der Mitte, funktioniert es nicht richtig. Was ich also für diesen Button tun kann, ist ich ihm vielleicht eine Breite von 80% geben kann. Sehen wir uns den Text an und zentrieren ihn darin. Verwenden Sie dann diesen Button, geben Sie ihm eine Breite von 80 Prozent und zentrieren Sie den Text darin. Und schau, was ich hier tun kann. Also nein. Mal sehen, ob das behoben ist. Das tut es nicht. Ja, kannst du sehen, was das Problem ist? Ich habe hier einen Rand, also lass uns diesen Rand loswerden. Und jetzt sind sie hier zentriert für das aktuelle Label. Was ich tun kann ist, dass ich hier einen Rand habe, damit ich ihn loswerden kann. Und diese Auto-Action-Karte. Mal sehen, schauen wir mal, was wir hier tun können. Vielleicht kann ich es wissen. Vielleicht kann ich das stellen, sicherstellen, dass mein Inhalt in der Mitte steht. Mal sehen, ob wir auf dieser Seite auf Auto und auf dieser Seite auf Auto setzen , wird der Inhalt in die Mitte verschoben. Aber jetzt möchte ich vielleicht diesen Inhalt anpassen, aber ich fürchte, das wird die Breite sprengen. Also lass es uns einfach da lassen, wo es ist. Und was ich hier tun werde, ist vielleicht ein bisschen mehr hinzuzufügen. Luft zum Atmen. Vielleicht 40 oder 20. Vielleicht auch 20 hier. Mal sehen. 20. Nein, denn das hat 24. Lass uns auch hier mit 24 hingehen. Und hier für ein Margin Top, wir brauchen es nicht wirklich, also denke ich, dass das gut funktionieren wird . Da haben wir's. Und jetzt wollen wir uns endlich mit diesem letzten Abschnitt befassen , der dieser ist, und lassen Sie uns ihn auf 100 anpassen . Und los geht's. Wir haben das Entwerfen und Ändern für die mobile Landschaft abgeschlossen . Im nächsten Video werden wir uns mobilen Portraits befassen. Also werde ich dich dort sehen. 190. Responsive mobile Porträts: In Ordnung, also lassen Sie uns endlich mit dem mobilen Porträt umgehen. Ich bin also auf der Homepage. Ich werde genau dort klicken. Und das Wichtigste zuerst, lassen Sie uns das anpassen. Also hier werde ich die Größe stark reduzieren. Vielleicht 32. Mal sehen, wie das aussieht. Und das können 48 sein. Vielleicht. Das ist in Ordnung. Das ist in Ordnung, das ist in Ordnung, aber das Bild ist nicht in Ordnung. Heldenbild. Was wir in diesem Fall tun können, ist für eine Breite, ich kann meine Umschalttaste und den unteren Pfeil gedrückt halten. Wie Sie sehen, wird sie auf vielleicht 270 eingegrenzt. Ich denke, das wird gut funktionieren. Das können wir verkleinern, wir können sehr viel verkleinern. Und was wir tun können, ist, auf Auto zu klicken und sicherzustellen, dass es genau hier positioniert wird, aber es genau hier anpassen. Da haben wir's. Los geht's und vielleicht passen wir das ein bisschen an irgendwo hier an. Ich denke, das wird gut funktionieren. Wenn ich auch nur auf die kleinstmöglichen Größen skaliere, wirst du es immer noch zumindest ein bisschen sehen können. Vielleicht funktioniert so etwas besser. Wenn ich also zur kleinsten Größe komme, kannst du sehen, wie das aussieht. Also endlich, Heldenbild. Und was wir tun können ist, mal sehen, Höhe ist nichts. Stellen wir die Höhe auf Auto ein. Etwas in der Art. Und ich repariere das jetzt einfach und bringe es ganz runter. Wenn die Breite skaliert, wird die Höhe automatisch skaliert. Das wünsche ich mir für die Größen. Da hast du es. Das ist also eine kleinstmögliche Größe. Das ist unsere größte Größe. Vielleicht können wir sogar mit einer Breite auf so etwas heruntergehen . Da haben wir's. Also gehen wir zur größten Größe über. Mal sehen, was wir tun können. Vielleicht ist das nicht die richtige Lösung. Also für mein Bild werde ich es hier skalieren. Mal sehen. Es hat nur eine Breite. Wenn ich also so zu 100 Prozent gehe, sollte das Problem hoffentlich behoben sein. Oder sogar 80%. Vielleicht können wir uns für Hero Image entscheiden. Vielleicht können wir die Polsterung von, sagen wir zehn Pixeln, einbeziehen . wird also verhindern, dass es nach draußen geht. Da haben wir's. Und ich denke, das hat das Problem ganz gut behoben. Was wir hier tun können ist, dass wir es einfach so lassen können, wie es ist. Wir haben eine Marge von 100, was meiner Meinung nach ziemlich groß ist. Aber es spielt keine Rolle. Wir können es einfach so lassen. In Bezug auf diese Schaltfläche können wir vielleicht einige Höhen bei bestimmten Breiten oder so einstellen. Also lass uns mit einer Mindesthöhe von vielleicht 50 Pixeln gehen , ungefähr so. Es wird also immer die Mindesthöhe von 50 Pixeln beibehalten . Und drinnen werde ich meinen Text zentrieren. Also egal, was vor sich geht, es wird immer so skalieren , so etwas wie das. Es ist also nicht zu klein und nicht zu zwei, verrückt zu voll. Das funktioniert bis auf den Text einwandfrei. Lass es uns so zentrieren. Und wenn Sie mit der Skalierung beginnen, wird alles gut funktionieren. Vielleicht brauchen wir diese Abstände nicht, dass sie so groß sind. Also hier haben wir 64, vielleicht können wir auf 40 runter gehen. Und in Bezug auf den gesamten Abschnitt haben wir 100. Lass es uns einfach so belassen. Ich denke, das funktioniert gut. Das funktioniert bei allen Größen gut, sodass wir nicht wirklich viel tun müssen. Hier. Da hast du es. Dieser Knopf, Mindesthöhe 50. Es wird also das Styling erben, das wir bereits festgelegt haben. Das ist in Ordnung. All das funktioniert gut, die Bilder funktionieren gut. Das funktioniert gut. Denken Sie daran, dies ist ein so kleines Gerät, 240 Pixel. Also das ist wirklich, wirklich, mal sehen, was das ist. Also Nintendo Entertainment System, N E S. Also mal sehen. Vielleicht geh zu so etwas wie einem S. Ja, also das ist das. Das ist das. Dies ist die Größe, für die wir hier entwerfen. Denken Sie also daran, achten Sie nicht zu sehr auf diese extrem kleinen Größen und niemand verwendet sie wirklich. Aber aus welchem Grund auch immer, ob schlecht oder schlimmer, wir können es immer noch anpassen und bei Bedarf Änderungen vornehmen. Was ich genau hier machen möchte, weil das so funktioniert, wie es sollte. Ich möchte das anpassen. Also geh hier in meine Karte und denk daran, dass wir das Raster hinzugefügt haben. Also werde ich dorthin gehen, wo wir Rapper sind, wo wir zufrieden sind, wunderbar. Und hier haben wir unsere Karte in vier Teilen. Ich werde gleich da zuschlagen. Und ich werde es so an drei Zeilen anpassen und nur eine Spalte hinzufügen. Da haben wir's. Nun, die festen Schulden und für die Map rein, für das, was ich tun kann, ist vielleicht eine untere Marge von 40 hinzuzufügen, nur damit ich diesen Text etwas nach unten drücken kann. Wenn ich also ganz nach unten skaliere, funktioniert alles so, wie es sollte. abschließend für die Fußzeile Lassen Sie uns abschließend für die Fußzeile anpassen und auch dort einige Änderungen vornehmen. Was ich tun kann, ist hier die Eingabetaste zu drücken. also auch bei den kleinsten, funktioniert also auch bei den kleinsten, kleinsten Größen. Aber lassen Sie mich einfach diese Links nehmen. Und was ich tun kann, weil sie ein Grid-Kind sind. Ich kann sie hier vielleicht in eine Flexbox verwandeln. Schalten Sie die Vertikale ein und stellen Sie sicher, dass sie zentriert sind. Und jetzt funktioniert das , egal in welcher Größe Sie sind. Alles skaliert wirklich gut so. Egal in welcher Größe Sie sind. Jetzt, wo das funktioniert, können wir zu einer anderen Seite gehen , in diesem Fall Autos. Dies funktioniert wie es sollte, bis auf die kleinstmögliche Größe außer dieser. Was wir in diesem Fall also tun können , ist um 32 zu senken. Und dieser 248. Da haben wir's. Oder vielleicht sogar mehr, aber ich denke nicht , dass es notwendig ist. Lass es uns einfach da lassen, wo es ist. Also diese 32, 32, also erbt sie das einfach. Was wir in diesem Fall tun können, ist den Kreis ein wenig zu senken, aber ich denke nicht, dass das notwendig ist. Ich denke sogar, dass es ein bisschen zu einem Charme beiträgt. So funktioniert alles auch bei den kleinsten Größen, was großartig ist. Form funktioniert super. Das funktioniert super. Außer hier. Mal sehen, wo wir ganz unten hingehen. Was wir tun können, ist , diese Informationen zu zentrieren . Was denkt ihr? Wenn ich also genau hier klicke, da die Adresse und der Inhalt darin zentriert sind, verwende die Telefonnummernspalte genau hier. Zentrieren Sie den Inhalt hinein, kommen Sie genau hierher, zentrieren Sie den Inhalt. Wenn ich jetzt anfange zu skalieren, sieht es irgendwie okay aus , bis auf diesen. Lass es uns jetzt einfach links lassen. Lass es uns einfach links ausgerichtet halten. Ich möchte nicht, dass es in diesem Fall zu hart arbeitet, denn das ist längerer Inhalt, dieser kürzere Inhalt und die Zentrierung davon könnten in diesem Fall etwas komisch aussehen. Lass es uns einfach so belassen, weil es sich gut zusammenfügt. Gehen wir zurück zum Beispiel. Gehen wir zu unserer Kreditseite. Sehen Sie hier, wo wir sind. Ich denke nicht, dass die Änderungen hier notwendig sind, vielleicht können wir das hier auf 30 ändern , bis es bereits bei 32 ist. Also das ist gut. Alles funktioniert so, wie es schon verschuldet sein sollte. Das funktioniert ganz gut. Das funktioniert gut, kontaktieren Sie uns. Alles funktioniert gut, außer diesen beiden. Was wir also tun können, ist, dass wir einige einstellen können Sie können sehen, dass die maximale Breite 100 Prozent beträgt. Was ich also tun kann, ist, sagen wir, eine Mindestbreite von vielleicht 50 Pixeln. Verwenden Sie diesen, eine Mindestbreite von 50 Pixeln, damit die Breite nicht unter 50 Pixel fällt. Und du kannst sehen , wie das aussieht. Also vielleicht sind 50 zu viel. Vielleicht können wir mit 20 Pixeln und 20 Pixeln arbeiten. Etwas in der Art. Mal sehen. Ja, also hier fängt es an, irgendwie auseinanderzufallen. Sie können also iPhone mini, 13 mini sehen. Also darunter irgendwo hier, also 310 Pixel. Was wir also tun können, ist vielleicht die Mindestbreite von zehn Pixeln so anzupassen . Und ich werde das loswerden. Also lass uns hierher gehen. Maximale Breiten. Sagen wir, ich weiß es hier nicht zu 100% oder vielleicht 100 Pixel. Ja, lass uns mit 250 gehen. Das ist eine maximale Breite. Und das ist eine maximale Breite von 250 Pixeln. Hübsch. Wenn ich jetzt anfange zu skalieren, wird es herunterskaliert. Lass uns mit einer Breite von 250 gehen. Das können bis zu 50 Todesfälle sein. Und jetzt, wenn ich anfange zu skalieren, sieht alles gleich aus. Also versuchen wir es mit 150. Schau dir an, was das bei diesen kleinstmöglichen Größen macht. Ja, ich denke, 150 funktioniert besser weil es immer noch das Bild zeigt und positioniert sie dort positioniert, wo wir sie haben wollten. Und statt einer Mindestbreite von zehn Pixeln kann ich eine Mindestbreite von vielleicht 80 Pixeln oder so wählen. Also nur damit es nicht zu klein ist. 80 Pixel, und los geht's. Jetzt ist das abgeschlossen. Das ist in Ordnung. Das ist alles in Ordnung. Wir haben diese Kontaktseite. Lassen Sie uns schnell die Schulden besprechen. Mal sehen, wir müssen hier keine Änderungen vornehmen. Alles ist in Ordnung. Lassen Sie uns abschließend zur Kursvorlage gehen und sehen was wir hier ändern können. Also zuerst müssen wir das anpassen, weil es immer wieder kaputt geht. Was ich in diesem Fall tun kann, denken Sie daran, dass wir auf jedem dieser Hintergründe den unteren Abstand haben , ist, dass ich den Abstand für meine Zeilen anpassen kann , sodass ich entweder 24 oder etwas Ähnliches wählen kann. Also, was ich tun werde, ist, es in zwei Teile zu teilen. Wir werden also 2468 zu zweit haben. Wir werden also vier verschiedene Reihen wie diese haben. Und wir werden zwei verschiedene Spalten wie diese haben. Da haben wir's. Und aus welchem Grund auch immer, das respektierte es nicht. Lassen Sie uns diese Ansicht also beibehalten. Wir haben die Paarung. Sehen wir uns die Fahrzeugübersicht an. Vielleicht können wir das Pairing vorantreiben und sehen, was passiert. Wirklich nicht viel. Also vielleicht versuchen Sie es mit einem gewissen Spielraum. Was wir dann tun können, ist das vielleicht zu erweitern. Vielleicht brauchen wir also eine gewisse Höhe , weil wir auf eine maximale Höhe von 196 begrenzt sind. Was wir tun können, ist etwa 500 oder so zu nehmen und dann zu versuchen, diesen Wert zu erhöhen. Da haben wir's. Also lass uns auch hier mit 32 weitermachen. Wenn ich jetzt anfange zu skalieren, funktioniert es bis hin zu den kleinsten, kleinsten Größen, vielleicht irgendwo hier. Also, was ist das nochmal, diese Nintendo-Sache. Also irgendwo hier funktioniert es immer noch. Also werde ich einfach dieses Layout beibehalten. Ich werde mir darüber keine allzu großen Sorgen machen. Was wir tatsächlich tun können, ist hier drinnen, was uns etwas mehr Luft zum Atmen geben wird, ist, dass ich diesen Abstand auf 24 reduzieren werde. Das wird mir also ermöglichen, dass es selbst bei diesen kleinsten Größen viel näher sein wird , ungefähr so. Wir heißen also, Beschreibung funktioniert gut. Fahrzeugspezifikation nicht. Also lass uns das ändern. Gehen wir also zur Spezifikationsbeschreibung. Das ist gut. Dieses spezielle Kation. Jetzt wollen wir sehen, wo wir sind. Also hier werden wir uns anpassen, weil wir sechs davon haben. Mal sehen, was wir hier tun können. Vielleicht können wir die Breite anpassen, etwa 0,75 FÜR 0,754. Und ich werde das auf 24 reduzieren. Da hast du es. Jetzt sind die Bruchteile dieser Spalten tatsächlich viel schmaler. Sie können also sehen, dass der Inhalt viel besser haften wird. Oder wenn du das nicht sehen willst, kannst du direkt hierher kommen und einfach eine Spalte loswerden und sie wird sie nach unten drücken. Also ich brauche insgesamt sechs davon. Also 123, los geht's. Und dieser eine FR wird, sagen wir, sagen wir, einer FÜR so sein . Und jetzt haben wir das Layout mit voller Inhaltsbreite und wir werden es einfach so belassen. Also werde einfach die zweite Spalte los und bleib aus Sicherheitsgründen einfach bei einer Spalte, dieselbe Geschichte. Schauen wir uns an, was wir tun können. Wir können durch die warme Säule kommen und mal sehen, wie viele wir brauchen. Also brauchen wir 123451 FR. Also 12345, schön, getroffen, fertig. Und weil sein Text einfach sehr gut skalieren wird. Wir werden das Gleiche hier tun. Also sei einfach wirklich schlagfertig. Wirf diesen weg. Bei wie vielen brauchen wir. Lebendig. Fahren Sie mit dem nächsten fort, dem Äußeren. Wirf diesen weg. Füge die neuen auch hier hinzu. Okay. Gehen Sie zum Innenraum über. Dieselbe Geschichte. Stellen Sie also sicher , dass Sie für die Breite bei einem FR sind. Denn auf diese Weise wird alles ganz gut passen und das Gleiche hier tun. Sehen wir uns die Zeilen 123 an. Das ist großartig. Jetzt wird alles viel besser skalieren und hier viel kohärenter und natürlicher aussehen. Schließlich, um das zu verwerfen, was wir haben, auf den wirklich extrem kleinstmöglichen Größen haben wir dies. Schauen wir uns den Text hier an, er ist zentriert, hier ist er zentriert. Was ich also tun kann ist, weil es diese 50 Pixel erbt, ich kann sogar die Combo-Klasse hinzufügen, was ich nicht tun werde, weil ich mit diesem Layout sehr zufrieden bin, wie es aussieht. Ich denke, das ist in Ordnung, denn wer verwendet wirklich etwas unter diesen Größen? So etwas wie dieses iPhone SE Phi von S von früher. Ich glaube nicht, dass jemand etwas Kleines benutzt. Also hier haben wir unsere Sammlung funktioniert einwandfrei, alles funktioniert gut. Und das ist im Grunde alles. Damit ist unser responsives Design fertiggestellt. Und in der nächsten Lektion werden wir tatsächlich mit einigen Animationen beginnen und uns damit befassen. Also werde ich Ihnen zeigen, wie man so vielen Patienten das Herumspielen mit Animationen einbringt. Ich werde erklären, wie Animationen in Webflow funktionieren und worauf Sie achten sollten, wenn Sie diese Animationen in Webflow erstellen . 191. Animationen in Webflow: In diesem Video werden wir uns mit der Animation befassen, aber ich möchte Ihnen nur den kleinen Fehler zeigen , den ich zuvor gemacht habe. Wenn ich es also hier zurück zu Webflow bringe, habe ich zuvor versucht , die Größe dieser Bilder hier zu verringern. Aber was ich tun kann, ist separate Klassen hinzuzufügen und dann die Breite und Höhe hier anzupassen. Das wird dafür sorgen, dass diese Größen konsistent bleiben. Also egal, was ich hier während meines gesamten Designs mache, werde sie konsistent halten. Also lass mich dir das hier zeigen. Also lass uns etwas wie Hiro, Hiro, Key, Image Phone machen, genau hier. Wenn ich also die Breite und Höhe auf vielleicht ein Metronom von 80 Pixeln anpasse , schauen wir uns an, was das macht. Und eine Höhe von 80 Pixeln. Weil ich an dem Telefon bin, sollte es sich nicht bis hierher verbreiten. Sie können also sehen, was es tut. Und die gleiche Geschichte hier. Also, wenn ich dieses loswerden will, den Kurs entfernen und los geht's mit dem Hero-Garantietelefon. Lassen Sie uns nun mit einer Breite von 80 Pixeln und einer Höhe von 80 Pixeln fortfahren. Und es wird sich gut vermehren und die gleiche Konsistenz behalten , die wir uns vorgestellt haben. Hier. Vielleicht kann ich das ein bisschen verschieben, vielleicht ungefähr hier, damit du siehst, wie mühsam das von Zeit zu Zeit wird , wenn du mit diesen Elementen herumspielst. Also ich denke, dass das gut funktioniert. Nun endlich, der springende Punkt dieses Videos ist die Animation in Webflow. Und die Animation kann manchmal sehr komplex sein, muss es aber nicht. Sie können es so einfach machen, wie Sie es möchten. Was wir hier wollen ist, wenn ich zur Animation wechsle, können Sie sehen, dass wir einen Element-Trigger haben und wir den Seitentrigger-basierten Trigger haben den Seitentrigger-basierten Trigger Sie können hier sehen, was er tut. Es löst einfach die gesamte Seite aus, sobald sie geladen ist. Und der Elementauslöser wird das Element selbst auslösen. Also lass uns zu hier wechseln. Und lass mich das hier anheften. So bleibt es konsistent. Also hier haben wir diesen Heldeninhalt. Also, was ich tun werde, ist für den Element-Trigger, ich klicke auf dieses Plus. Und du hast schon einige vorbereitete Animationen und dann hast du einige Animationen , die du selbst vorbereiten musst. Also hier kannst du sehen, wann ich sie drücke und auslöse, du kannst sehen, wie du mit der Maus klickst oder tippe. Was passiert dann? Mauszeiger, was wir im Grunde schon haben , wenn wir mit unserer Schaltfläche den Mauszeiger darüber bewegen, können Sie sehen, was wir haben. Dann müssen Sie die Maus über das Element bewegen. Was passiert also, wenn ich meine Maus bewege? Sie können einstellen und Sie haben Millionen verschiedener Beispiele online. Ich wollte bewusst, dass der Diskurs so einfach wie möglich, aber auch hier komplex wie möglich sein sollte. Aber das ist für jeden einstellbar und ich werde nicht zu viel in Angriff nehmen, aber du kannst zu award.com mit drei W gehen. Also eine www.com. Und Sie können alle möglichen Animationen wie diese sehen . Wenn Sie den Mauszeiger bewegen, haben Sie diese Farbverläufe , die sich im Hintergrund bewegen. Du kannst meinem YouTube-Kanal Alex zum Thema Design folgen, wo ich mich in Zukunft intensiv mit diesen Tutorials befassen werde , weil viele Designer danach fragen, also werden wir nicht zu viel darüber reden es jetzt. Scrollen Sie in die Ansicht. Was passiert also, wenn dieses Element in Sichtweite scrollt? Das werden wir tun. Und was passiert dann beim Scrollen in die Ansicht? Wir haben die Navbar geöffnet. Was passiert dann? Dropdown öffnen Schritt ändern, Änderungsfolie öffnen. Also all diese Dinge. Lassen Sie uns also mit, sagen wir Page Trigger, weitermachen . Mal sehen, was wir da haben. Also bewegt sich die Maus im Darstellungsfenster, während die Seite scrollt, die Seite geladen und die Seite gescrollt wird . Ich klicke hier für den Element-Trigger und gebe Scroll in die Ansicht ein. Und was ich hier tun kann, ist, dass ich die Aktion auswählen kann. Und du kannst sehen , dass ich nur diesen Heldeninhalt auswähle. Meine Aktion wird also Slide sein. Ich werde von links reinrutschen. Mein Offset wird vielleicht etwa acht sein , und die Verzögerung kann um und die Verzögerung kann drei Millisekunden oder so etwas Ähnliches sein. Wenn ich auf Vorschau klicke, kannst du sehen, wie das aussieht. Also 8.3 und ich wähle mein Heldenbild und ich werde genau das Gleiche tun. Scrollen Sie also in die Ansicht. Schiebt statt von links, ich wähle von rechts. Und ich sage so etwas wie acht und vielleicht fünf. Es wird also nur ein kleines bisschen langsamer sein. Sie können also sehen , wie das aussieht. Ich klicke auf Vorschau. Sie können sehen, wie das aussieht. Wenn wir also zurückgehen, lassen Sie uns jetzt mit diesem gesamten Abschnitt befassen. Und was wir tun können, ist , in die Ansicht zu scrollen und eine Aktion auszuwählen. Ich wähle eine Folie aus. Von unten. Da hast du es. Offset. Lass uns mit acht weitermachen und warten. Lass uns dieses Mal mit zehn Millisekunden weitermachen. Wenn ich also auf Vorschau klicke, kannst du sehen, dass es Interview heißt, weil es nur ein kleines bisschen übertrieben war. Lassen Sie uns nun mit diesem Abschnitt befassen , wenn er in Sicht ist. Ich werde das Gleiche tun. Aber vielleicht können wir uns ernähren, also erscheinen und verschwinden. Also vielleicht können wir Offset von acht, Verzögerung von vielleicht zehn einblenden . Und mal sehen, was das macht. Wir müssen also einfach ein - oder ausblenden. Und du kannst auch ändern, wann du aus dir herausscrollst. Wir können auch mit Fade Out, Fade Out Offset von acht und Delay mit zehn beginnen . Schauen wir uns an, was das alles bewirkt. Scrollen wir ganz nach oben. Also hier haben wir das, dann haben wir das. Vielleicht scrollst du in die Ansicht und scrollst aus der Ansicht heraus. Du kannst es nicht einmal sehen, weil es bereits ausgeblendet ist. Das ist also im Grunde das, was ich will. Aber vielleicht können wir diesen Offset auf Null Millisekunden setzen. Und vielleicht können das, ich weiß nicht, 3% oder so etwas sein. Also wenn ich hier irgendwohin gehe, ungefähr hier ein- und ausgeblendet. Sie können diesen Offset also sogar vollständig reduzieren. Geh zurück zu Null und sieh dir an , was das genau macht. Also ich denke, das ist in Ordnung. Und was ich dir zum Schluss zeigen wollte, ist das. So können wir diese Trigger-Einstellungen vornehmen. Dies ist im Grunde so, dass Sie entweder Elemente oder die Klasse in Angriff nehmen können . Damit ich den Kurs in Angriff nehmen kann. Sie können also die exklusive Kollektion sehen, das ist mein Bereich, Abschnitt exklusive Kollektion. Ich werde die gesamte Klasse in Angriff nehmen. Und ich werde diese Animation nicht auf Tablet, Querformat und Porträt laden . Warum? Weil ich möchte, dass die Leute ihre Internetverbindung speichern, vielleicht auf den Tablets. Lassen wir es auf einem Tablet belassen, aber nicht auf Telefon, Querformat und Hochformat, wodurch unsere Website beim Laden nur ein bisschen schneller wird . Sie können dasselbe mit diesem machen. Also kann ich es von hier und hier loswerden. Und für dieses Hauptthema werde ich es tatsächlich drinnen lassen, werde ich es tatsächlich drinnen lassen nur um der Sache willen, was wir hier tun können, ist, vielleicht können wir etwas anderes machen. Wir haben also unser Wrapper-Angebot, dann haben wir Inhalt und wir haben dieses Bild als Erstes, weil wir uns auf einem Desktop befinden. Was wir tun können, ist diesem Bild einen Namen zu geben, damit wir Benennen Sie diese Klasse um und wir können sie unser Angebot IMG nennen, nur damit wir wissen, was es ist. Wir können zur Animation und zum Element-Trigger gehen. Und wir können beim Scrollen in View Action machen. Und dann können wir diese loswerden. Sie können also eine Aktion auswählen, Scroll-Animation abspielen, während Sie in der Ansicht scrollen Scroll-Animation abspielen, während Sie in der Ansicht Animationsgrenzen sind dies, wenn ein Element vollständig unsichtbar ist und wenn ein Element vollständig sichtbar ist. Sie können also sogar die Schulden anpassen. Sie können also Offset hinzufügen, Sie können mit dem Beenden beginnen. Also fängt es an zu beenden. Und du kannst ein bisschen verärgert hinzufügen, vielleicht etwa 20 Prozent, so etwas. Da haben wir's. Was wir tun können ist, dass wir keine Animation haben, also müssen wir eine Animation starten. Das wird also unsere Angebotsanimation oder unsere Angebotsbildanimation sein . Da haben wir's. Bei Null Prozent sagen wir also , sagen wir, Opazität, was ungefähr Null Prozent sein wird . Da haben wir's. Und hier, lass mich mich loswerden , nur damit du sehen kannst, was ich mache. Also reduziere ich hier einfach die Opazität auf 0% und zur Lockerung richte ich zwei Ein- und Aus-Quad ein. Da hast du es. Das ist bei 0%. Wenn ich also die Live-Vorschau aufrufen und zu etwa sechs Prozent übergehe , werde ich die Deckkraft noch einmal stylen. Und es wird bei 100% sein, und das wird rein, raus, quad sein. Sie können also sehen , wie das aussieht. Also, wenn ich anfange zu scrollen, wird es hier sein. Und wenn ich aus dem Weg gehe, wird es komplett verschwinden. Also vielleicht sind sechs Prozent etwas weniger. Lassen Sie uns es also auf vielleicht 20 Prozent reduzieren. Wenn es also anfängt zu scrollen, können Sie sehen, dass es leicht erscheint vielleicht etwa 40 Prozent oder so. Da hast du es. Oder vielleicht sogar bis 80. Mal sehen, was das macht. Nicht viel, also hier ist es bei 100. Also vielleicht können wir noch eine setzen und ihr hier eine Deckkraft von vielleicht 40% geben , ungefähr so. Wenn wir also hier und dann hier anfangen zu scrollen , klicken Sie auf Speichern. Lass uns auf Vorschau klicken und sehen, was das bewirkt. Da haben wir's. Sie können also sehen, dass es wirklich eine Folie ist. Sie können es genau hier unten sehen. Wirklich leichtes Verblassen, so. Und Sie können die Änderungen auch am Fadeout vornehmen. Was ich für diesen speziellen Bereich oder diesen Angebotsinhalt möchte, ist, dass er an seinen Platz kommt. Scrollen Sie also in die Ansicht. Aktion, vielleicht in Sichtweite geraten, verblassen. Offset, vielleicht kann ich es auf fünf setzen und vielleicht zehn Millisekunden verzögern, so etwas. Wenn ich also genau hier klicke, kannst du sehen, wie es erscheint, also ist es nur eine leichte Verzögerung wie diese, also wird es sichtbar. Und wenn Sie aus der Ansicht herausscrollen, können Sie Schicksal tun, das wieder einmal einfach ausgeblendet ist . Und ich möchte nicht, dass es einen Offset macht, also lasst uns es testen und sehen, wie das wie ein Fade-In aussieht. Und wenn es so wird , wie es ausgeht, wird es verblassen. Dieser. Was wir tun können, ist vielleicht, ich weiß nicht, vielleicht können wir weiterhin nicht wie es ist, aber vielleicht kann ich einfach diese Vorteile nutzen , Elemente lösen das Scrollen in Sichtweite aus. Ich kann von unten rutschen. Da haben wir's. Und ich kann vielleicht ein bisschen Offset und ein bisschen Verzögerung bewegen , etwa so. Mal sehen, ob eine große Verzögerung einen Unterschied macht . Ja, tut es. Wie du siehst. Sie können sehen, wie das aussieht. Also, wenn ich noch einmal klicke, los geht's. So eine große Verzögerung beim Eintreten. Also so etwas wie 460. Ich denke, es funktioniert ganz gut. In Bezug auf das Kontaktformular können wir nur die gleichen Elemente aktivieren, damit es sich in unserem gesamten Design verbreitet. Also drücken Sie die Eingabetaste, damit wir es bearbeiten können. Elemente werden ausgelöst, wir werden in die Ansicht scrollen. Und ich kann rutschen und warten. Vielleicht nehmen wir 350 Millisekunden. Da haben wir's. Anstatt von links, gehe ich von unten. Offset, vielleicht fünf, nur damit wir wenigstens etwas haben können. Und lass uns auf Vorschau klicken und schlafen, was wir tun. Also Vorteile. Und du kannst das Formular sehen. Und wir werden dasselbe für diese und unsere Fußzeile tun. Sehen wir uns Map an, Kit geben Sie dieselbe Schriftrolle in die Ansicht ein. Und ich kann so etwas wie Folien von unten nehmen, 400. Und das kann um fünf sein. Da haben wir's. Und ich werde es nicht auf Handy und Portrait zeigen. Da haben wir es, zurück zum Beispiel und ich werde das Gleiche für hier tun. Also klicken Sie auf Ihre Animation und entfernen Sie sie einfach wieder von hier, nur der Geschwindigkeit halber, machen Sie dasselbe für die Fußzeile. Scrollen Sie für den Ordner in die Ansicht. Ohne sie kann ich vielleicht schauen, wir können fliegen, wir können fallen, wir können all diese Dinge tun. Vielleicht verblassen. Lass uns mit 400 gehen. Und das können fünf sein. Einblenden. Da haben wir's. Gehen wir nun zurück zur Instanz. Lass uns, lass uns zurück nach oben gehen. Klicken Sie auf Vorschau. Diese müssen an Ort und Stelle sein. Das funktioniert immer noch gut. Also, wenn ich genau hierher komme, wird das verblassen. Das wird verblassen. Das wird verblassen. Sie können sehen, wie spät diese Abschnitte sind, was wir von Anfang an wollten. Und das ist großartig. Die Homepage ist also fertig. Lass uns zu den Autos gehen. Was wir also für das Auto tun können, ist vielleicht eine etwas andere Animation zu machen. Dieses Element wird also ausgelöst , wenn das Scrollen in die Ansicht eingespeist wird und die Verzögerung ziemlich groß sein wird. Also 600 z. B. in diesem Fall. Und lass uns mit zehn weitermachen. Und dieses Kartenbild wird in die Ansicht gescrollt, kann geschoben und von unten nach oben geschoben werden. Und lass uns mit etwas wie 100ern gehen. Und das können fünf sein. Also lass uns eine Vorschau bekommen. Sie können also sehen , wie das aussieht. Und ich werde es nicht auf diesen beiden zeigen , so etwas. Und Sie können die benutzerdefinierten Aktionen auch direkt hier festlegen, oder Sie können das benutzerdefinierte Easing festlegen. Aber ich denke , das wird gut funktionieren. Also vielleicht können wir das etwas weiter anpassen. Wie Hustensaft. Vielleicht können es fünf sein, nur damit es so ein bisschen schneller ist. Und unsere exklusive Kollektion ist bereits da. Also vielleicht können wir das auch ausblenden. So scrollt der gesamte Abschnitt in die Ansicht oder beim Scrollen des Interviews, Sie können das sogar so einstellen, dass es eine kontinuierliche Interaktion ist , animiert wird, während die Elemente wachsen. Sichtfenster. Ich werde das nicht tun, weil wir acht Elemente haben, also einfach in die Ansicht scrollen wird problemlos funktionieren. wir hier auf Fade und lassen Sie uns mit etwa 400 Millisekunden Fading fortfahren. Da haben wir's. Klicken Sie, und los geht's. Jetzt haben wir diese beiden. Und wir haben Kontakt mit uns aufgenommen. Wir haben das durchweg. Es funktioniert gut. Vielleicht können wir die Fußzeile so einstellen, dass sie etwas langsamer ist, weil sie schneller und nicht langsamer ist. Anstelle von 400, vielleicht 300. Da haben wir's. Jetzt ist das abgeschlossen. Lassen Sie uns nun zu Krediten übergehen. Und was ich mit der Lunge machen möchte, ist dass ich hier drei verschiedene Animationen machen möchte. Also für hier. Aber vorher tut mir das wirklich leid. Gehen wir zurück zu den Autos und passen wir einige davon an. Das, okay. Und das ist für diese beiden. Los geht's und wir haben den Rest repariert. Gehen wir also zu Krediten über. Und hier werde ich in die Ansicht scrollen. Ich sage, Folie auswählen. Von oben. Da haben wir es, ungefähr 100er. Und dann können diese von jeder Seite rutschen. Scrollen Sie also in die Ansicht, Folie von rechts, 300. Und das sollte sein, um Folien von links zu sehen, 300, ungefähr so. Und zum Schluss wollen wir uns mit diesem Abschnitt weiter unten befassen. Scrollen Sie also zuerst in die Ansicht. Ich wähle Schicksal, nicht Rutsche, sondern Schicksal. Und so etwas wie 400. Es wird gut sein und der Offset wird ungefähr fünf sein. Also lass es uns testen. Da haben wir's. Ich denke, das wird in Ordnung sein. Und dann für diese beiden, was wir tun können, denn das ist im Grunde unser letzter Abschnitt. Wir können das vielleicht von Seiten wie dieser von einer Seite entfernen und es dann den Tag ausklingen lassen. Sie sind nicht zu viel Zeitverschwendung und du kannst natürlich mit diesen Elementen herumspielen, wie du willst. Also, während ich in der Ansicht scrolle, werde ich die Aktion festlegen. Und lassen Sie uns zunächst diese loswerden. Und bevor ich das tue, schauen wir mal, ob wir es für diese einrichten. Das haben wir nicht getan. Stellen wir also sicher, dass wir das beheben. Da haben wir's. Und die Texte können gleich bleiben, weil sie nicht zu viel Bandbreite beanspruchen. Also Partnerbilder beim Scrollen in der Ansicht, wählen Sie die Aktion Scroll-Animation abspielen aus. Was wir hier tun können, ist zu glätten, 50 Prozent Bildanimationen angeboten werden. Lass uns ein neues hinzufügen. Das werden also Partner, Animationen, Partner-Bildanimationen wie diese sein. Bei Null Prozent sagen wir also, sagen wir, die Opazität wird bei 0% liegen. Bei neun Prozent wird es eine Opazität von 40% sein. Und hier sind es 13%. Vielleicht können wir die Opazität zur Lockerung bei 100% IN, OUT-Quad haben , wählen Sie diese in unserem Quad aus und wählen Sie diese in, aus. Lassen Sie mich ein wenig vergrößern, auf Vorschau klicken und sehen, was wir bisher haben. Sie können also sehen, dass es nur eine leichte, leichte Lockerung ist. Achte einfach auf diese Ecke deines Bildschirms. Da hast du es. Also ein bisschen Animation und alles funktioniert gut. Und ich möchte diesen Text von der Seite verschieben. Also lass es uns gleich hier einrichten. Sie können hier auf Speichern klicken und dann zu Ihrer Animation zurückkehren. Wenn ich also den Inhalt meines Partners auswähle , werde ich direkt hierher weitergeleitet. Also hier, während du scrollst, können wir das tun, aber ich werde einfach ein Scrollen in die Ansicht verwenden. Und ich sage so etwas wie Slide, weil wir die schon von rechts benutzt haben. Ungefähr hundert50 Millisekunden. Vielleicht. Klicken Sie auf Vorschau. Da haben wir's. Es sieht also gut aus und ich denke, das ist in Ordnung. Und schließlich müssen wir uns noch mit uns in Verbindung setzen. Ich werde hier nichts animieren. Es ist schon für mich erledigt. Aber lassen Sie uns einfach mit der Vorlage für die Seite der Autos umgehen und ich werde hier nicht zu viel tun. Das einzige, was ich hier vielleicht erwähnen kann, ist das. Also zur Animation, weil du dir einfach vorstellen kannst , dass die Leute durch diese Seiten nach links und rechts scrollen und sie deine Animationen ein bisschen satt haben, besonders wenn du sie rücksichtslos in jedem einzelnen Abschnitt zu verwenden. Es kann also von Zeit zu Zeit etwas mühsam sein. Deshalb möchte ich in diesem Abschnitt vielleicht nur diese Karte animieren. Vielleicht nur ein bisschen, aber ich denke auch nicht, dass das notwendig ist. Ich weiß es nicht. Vielleicht kann ich ganzen Abschnitt bearbeiten. Also lass uns sehen. Elemente werden ausgelöst, in die Ansicht scrollen, Aktion, Fade und Verzögerung von vielleicht 50 Millisekunden. Mal sehen, wie das aussieht. Da haben wir's. Also nichts allzu großes. Vielleicht kann ich die 200 Millisekunden oder so anpassen , damit es wie ein Seitenladen aussieht. Und ich denke, das ist wirklich alles, was dazu gehört. Ich möchte, dass es vielleicht sogar animiert wird, aber lass uns, lass es uns machen. Für diesen Abschnitt. Scrollen wir in die Ansicht, oder sagen wir, verblasst, 200 Millisekunden verblassen. Ich denke, das wird gut genug sein. Also, wenn ich auf Vorschau klicke. gleich hierher kommen, können Sie sehen, wie das aussieht . Das ist alles in Ordnung. Da haben wir's. Animationen unserer Website sind fertig. Und natürlich können Sie weitermachen und viel detaillierter damit herumspielen . Was ich nicht erwähnt habe, ist, dass Sie verschiedene Elemente kombinieren können. Mal sehen, ob ich dieses Bild aus irgendeinem Grund animieren möchte dieses Bild aus irgendeinem Grund animieren Ich kann zum Element-Trigger gehen. Und dann kann ich so etwas wie beim Scrollen in die Ansicht sagen , was ich dir schon gezeigt habe. Und dann komm zum Scrollen, platziere die Crawling-Animation. Ich werde diese wie bereits erwähnt loswerden, und dann kann ich hier eine neue Animation hinzufügen. Was ich nicht erwähnt habe, ist, dass Sie all dies gleichzeitig hinzufügen können . Sie können auch filtern und Animationen für Filter Sie können hier klicken und die Animation löschen. Also, wenn du hier hingehst, scrolle ganz nach unten. Lass mich mich verstecken , damit du es sehen kannst. Sie haben diese 2D- und 3D-Transformationen. Was Sie also bei der Dosis tun können ist, wenn ich Ihnen so etwas wie Übergänge zeige, Sie haben diese Opazität. Wenn Sie also den Hover auf die Opazität hinzufügen, haben wir hier also Opazität. Da haben wir's. Aber wenn ich weitermache und diesem Bild einen Hover-Status hinzufüge, kann ich diese Opazität jetzt anpassen und verschieben sodass ich in den Status ohne Status wechseln kann. Mal sehen, wenn ich auf Vorschau klicke, kannst du ein bisschen Opazität sehen, aber natürlich kannst du das anpassen und verschieben und nach Belieben positionieren. Also im Grunde kann ich das bei, sagen wir 275 Millisekunden, so einstellen, dass es ungefähr so ist. Da haben wir's. Und ich kann sogar eine neue Animation hinzufügen. Wenn Sie also zum Hover wechseln, sagen Sie, wechseln Sie zum Nicht-Status, um einen Übergang hinzuzufügen , damit ich dorthin wechseln kann. Aber das brauche ich im Moment nicht wirklich. Und ich werde es einfach los. Was ich Ihnen zeigen wollte, unsere 2D- und 3D-Transformationen. Was Sie also tun können, ist, dass Sie auch beim Hover oder beim Laden die X-Werte ändern können. Also links und rechts, die die Skala über Werte vergrößern werden, die die Höhe und die Z-Werte erhöhen . Du hast dich bewegt, du hast Skalierung, du hast gedreht, du hast Schrägstellung, alles Mögliche . Sie können das also anpassen. Sie haben Ihre Boxschatten für den Hintergrund, um Schatten fallen zu lassen, Sie haben Ihre verschiedenen Filter. Du hast also deine Pleura genau hier. Helligkeit, Kontrast, Farbton, Sättigung, alles Mögliche. Und Sie können einen hinzufügen, der bei bestimmten Frames erscheint , und dann einen weiteren hinzufügen , der bei verschiedenen Frames erscheint. Und schließlich haben Sie diese Hintergrundfilter, die im Grunde dieselben sind wie dieser, aber für Ihren Hintergrund, in diesem Fall nicht für das Bild selbst. Sie können diese also mit den grundlegenden Animationen kombinieren , die ich Ihnen bereits gezeigt habe. Und schließlich können wir den Seitentrigger verwenden. Also lass uns hier zurück nach Hause gehen. Also wird es noch einmal geladen, so. Und dann so. Also Seitentrigger, Seite laden. Und wir können eine Animation starten. Jetzt können Sie die Ladeanimation für Ihre gesamte Ladung anpassen . Es passiert also z. B. nur auf dem Desktop und Sie können eine Animationszeit starten. Die Animationen gibt es nicht. Also kann ich hier klicken und dann kann ich anfangen, das zu animieren. Sagen wir also Home-Page-Animation. Da haben wir's. Und hier kann ich genau hier klicken. Und dann sagen wir, ich weiß es nicht, Texte, Farbe oder Größe oder Ausblenden zeigen etwas oder was auch immer. Ausblenden Zeige, ich kann das Element auswählen, das ich ausblenden möchte. Also sagen wir das hier. Verstecken, einblenden. Und das kann ich als Ausgangszustand festlegen. Und wenn ich jetzt anfange, nach unten zu animieren, also z.B. hier am Ende, kann ich Show-Elemente ausblenden. Ich kann das Element nach der vorherigen Sitzung mit der Delay-Lockerung auswählen . Sie können also Display wählen. Sie können hier alle möglichen Dinge tun. Und Sie können wirklich ausführlich über Animation und Workflow gehen . Sie haben einen großartigen Kurs auf ihrer Webflow Academy auf ihrer Website. Also vielleicht kannst du dir das ansehen und sehen, wie das aussieht. Aber für den Moment lasse ich es einfach so wie es ist. Und ich nenne es einfach einen Tag für diese Animationen, weil wir schon 26 Minuten hinter uns haben und wir wirklich eine weitere Stunde weitermachen können , um über diese Animationen zu sprechen, aber denk dran, was auch immer du erstellen Sie in Ihrer Designsoftware Ihrer Wahl besser. Das ist Adobe XD, Figma, Sketch, was auch immer. Sie können das in Webflow neu erstellen und noch viel mehr hinzufügen. Also Übergänge zwischen Seiten, Hover-Effekte auf Elementen, Animationen auf verschiedenen Elementen, Hintergrundanimationen auf diesen verschiedenen Hintergründen, z. B. hier haben wir diese Kreise. Vielleicht können diese Kreise also animiert werden und sich bewegen, während sie sichtbar sind. Also wenn ich das zeige, kann ich vielleicht diesen als Ausgangszustand auswählen. Und dann, während mein Benutzer auf den Bildschirm schaut, kann dieser animiert werden und diesem Pfad bis hierher folgen und dann zu hier zurückkehren oder so ähnlich. Vielleicht kann dieses Autobild wachsen, schrumpfen und zurückgehen. So können hier in Webflow alle möglichen Animationen erstellt werden . Aber im Grunde wird dieses Video nur die Grundlagen behandeln, wie ich bereits erwähnt habe, weil wir den ganzen Tag hier sein werden. 192. Veröffentlichung und Code: Los geht's, wir haben das Ende dieses Webflow-Builds erreicht. Hoffentlich hattest du viel Spaß. Jetzt ist es an der Zeit, diese Website zu starten und unseren Code zu exportieren. Wie ich bereits erwähnt habe, benötigen Sie dafür den kostenpflichtigen Tarif. Sie können jedoch weiterhin die Webflow-Domain aufrufen, was wir tun werden, aber Sie können keinen Code mit einem kostenlosen Tarif exportieren. Lassen Sie mich Ihnen zeigen , wie das geht. Also, wenn ich genau hier klicke und dich hierher bringe, hast du diese Optionen. Sie haben also diese Option Teilen. Sie können also Ihren Link nur teilen haben und diesen Link kopieren und Gastredakteure einladen, wenn Sie möchten, dass jemand anderes ihn bearbeitet . Dazu benötigen Sie Ihren kostenpflichtigen Tarif. Oder Sie können diesen Link einfach kopieren und mit Ihren Kunden teilen. Das ist also eine großartige Option. Gleiche wie in Ihrer Designsoftware oder Ihrer Wahl. Sie können den Link teilen und Ihre Kunden können sehen, was Sie getan haben. Sie können mit den Animationen herumspielen. Sie können sehen, wie Sie reagiert haben. Und sie werden diese Vorschau gleich hier sehen sodass sie sich sogar durch diese verschiedenen Breakpoints klicken können . Und sie können sehen, dass diese Animation in Echtzeit stattfindet, was für sie großartig ist, um Ihnen Feedback zu geben. Und Sie können sie sogar einladen, mit Ihnen an diesem speziellen Projekt zusammenzuarbeiten. Hier nebenan haben wir einen Exportcode, sodass er keine CMS-Funktionen oder -Inhalte enthält. Sie können Sammlungsinhalte aus dem Sammlungsbereich exportieren . Das ist es, worüber wir gesprochen haben. Sie können bei Webflow hosten, um die Vorteile von CMS voll E-Commerce-Formular besteht aus Suchfunktionen. Aber wenn du dir nur vorstellst, dass wir z.B. für dieses Projekt kein CMS hatten, wir hatten nur statische Seiten und wir wollen so etwas exportieren. So wird der Code aussehen. Sie klicken also einfach hier, wo Sie dieses Codesymbol haben. Du hast dein HTML, du hast dein CSS, du hast dein JS, das für die Animationen ist. Und endlich haben Sie Ihr Vermögen. Es wird also unser gesamtes Vermögen wirklich gut verpacken. Wir haben sie bereits auf einem Desktop, aber Sie benötigen diese Ressourcen, wenn Sie diese Website auf ein anderes Hosting verschieben möchten . Nehmen wir an, ich möchte nicht mit Webflow hosten. Ich möchte mit Hosting Here oder Bluehost hosten, was ich bereits erwähnt habe. diesem Grund benötigen Sie all diese Ressourcen. Was Sie dann bekommen, ist auf Prepare Zip zu klicken. Lassen Sie uns Ihre Dateien in etwa zwei oder 3 Minuten in einen Zip-Ordner Je nach Verarbeitungszeit vorbereiten. Je nach Verarbeitungszeit werden diese Dateien für Sie vorbereitet. Und dann kannst du diese Zip-Datei nehmen und sie direkt in den Stammordner deines Hostings hochladen den Stammordner deines Hostings Das habe ich schon oft gemacht, aber zuletzt für mein Designsystem namens Inception Design System, diese Seite wurde vollständig entworfen und in Webflow vorbereitet, aus Webflow exportiert und einfach auf mein eigenes Hosting hochgeladen. Diese Seite hoste ich nicht im Workflow. Und so super einfach ist das. Im Grunde kannst du den HTML-Code sehen, du kannst innerhalb des Body-Tags genau hier sehen , was wir haben. Wir haben also all diese grundlegenden Tauchgänge. Containere also einen Container-Navbar-Abschnitt, all diese. Wir haben also den Hero-Wrapper, den wir hinzugefügt haben. Sie können den Text direkt hier sehen. Sie können den Break-Textblock Siqueiros zentriert sehen, das ist die Klasse und das ist der Div-Name. Und dann haben wir das in Bezug auf CSS, wir haben diese Ränder, Abschnitte, alle möglichen Dinge. Sie können sich also einfach vorstellen, was wir visuell gemacht haben. Wir müssen das alles in unseren Code eingeben. Deshalb ist Webflow großartig, weil Sie all das hinzufügen können. Sie können also sehen, für die Flexbox, für die ausrichtenden Elemente, für den Rand, Sie haben all das Ding. Und in JS hast du all deine Animationen , die du für die Einführung gemacht hast, für das Laden der Seiten, alles Mögliche. Und hier können Sie sehen, dass Sie diese Workflow-Lizenz haben, aber wenn Sie sie loswerden möchten, müssen Sie diesen Agenturplan bezahlen. Ich denke, 35$ pro Monat oder so, was deinen Code mit einem White-Label versehen wird und der Webflow dort nicht angezeigt wird. Abschließend möchte ich das veröffentlicht zeigen. Sie können also das Veröffentlichungsziel wählen. Sie können wählen, ob Sie auf dem Webflow IO-Link veröffentlichen möchten. Und Sie können schließen, Sie können zu den erweiterten Optionen gehen und SSL aktivieren. Im Grunde genommen , wenn Sie etwas auf Ihrer Website verkaufen, wird Sie etwas auf Ihrer Website verkaufen, nur das sichere Schloss neben Ihrem Browser angezeigt. Verkleinertes HTML, das lediglich den Code darin verkleinert und ihn organisiert und dicht gepackt macht. Css und JS, es wird dasselbe tun. Und Sie können sichere Frame-Header verwenden, die, wenn Sie den Mauszeiger hier drüber bewegen, Ihre Website vor verschiedenen Arten von Clickjacking-Angriffen schützen , indem sie verschiedene Seiten einschränken, die eingebettet werden können. Also nicht jeder kann deine Website in seine Blöcke einbetten, z. B. oder so etwas. Also werde ich das einfach benutzen. Ich werde keine benutzerdefinierte Domain verwenden. Sie können also auf Veröffentlichen klicken, um sie auszuwählen. Domains werden einen Moment dauern und wenn sie fertig sind, wird sie veröffentlicht. Und dann werden Sie erfolgreich veröffentlicht. Und jetzt können wir einige unserer SEO-Einstellungen anpassen. Und wenn ich das mache, arbeite ich normalerweise gerne und passe gleichzeitig die Suchmaschinenoptimierung an. Oder wenn Sie es anpassen, fangen Sie einfach an. Ich würde gerne meine Suchmaschinenoptimierung vorbereiten, aber mit Absicht wollte ich euch nicht verwirren weil sich nicht jeder für SEO interessieren wird. Wenn Sie für sich selbst arbeiten, sind Sie natürlich derjenige, der dafür verantwortlich ist, es sei denn, Ihr Kunde stellt einen SEO-Experten ein. Aber wenn Sie möchten und wissen, wie es geht, können Sie sehr schnell einige grundlegende SEO-Grundlagen erlernen, auch auf YouTube, und dieses Wissen einfach direkt in Ihrem Webflow anwenden . Webseiten. Seo ist natürlich, Suchmaschinenoptimierung ist, wie Sie Ihrer, Google helfen, Ihre Website zu finden, zu indexieren und zu optimieren. Und je besser Sie in der Suchmaschinenoptimierung sind und je besser die Batterie oder die SEO-Kenntnisse sind, desto besser wird die Website Ihres Kunden bei der Suche eingestuft. Im nächsten Video werden wir uns also mit SEO befassen. Und ich werde dir nur einige Grundeinstellungen zeigen , die jeder vornehmen kann. 193. SEO-Optimierung: Okay, lassen Sie mich Ihnen jetzt einige SEO-Einstellungen zeigen , die Sie vornehmen können und die jeder von Inside Buffalo durchführen kann, egal wie erfahren Sie sind oder nicht. Wenn ich also direkt hier auf unsere Website gehe, kann ich genau hier klicken, wo Seiten stehen. Und hier haben Sie diese Seiteneinstellungen bearbeiten. Wenn Sie genau dort klicken, haben Sie das wahrscheinlich bemerkt, als wir diese Seiten erstellt haben, aber das sind nur die Grundeinstellungen der Suchmaschinenoptimierung denn wie Sie Ihren Code schreiben, wirkt sich direkt auf die Suchmaschinenoptimierung aus. Da wir jedoch keinen Code in Webflow schreiben, verwenden wir nur die vorgefertigten Komponenten und wir verwenden nur den Page Builder und diese Struktur, wenn Sie Best Practices verwenden, spielt das natürlich keine Rolle, weil Die besten Praktiken werden Ihnen helfen wenn es um SEO geht. Aber wenn Sie nur Elemente auf einer Seite ohne Struktur blockieren, ohne beispielsweise Abschnitte zu verwenden , weil dieser Abschnitt den Google-Indizes Ihrer Website mitteilt , dass, okay, das ist Abschnitt dieser Seite. In diesem Abschnitt haben wir den Container. Ich weiß also, dass es einige Elemente enthält. In diesem Container haben wir eine Verpackung. Ich weiß also, dass der Wrapper einige Inhalte umhüllt. Und in diesem Wrapper habe ich gesagt, dass ich z. B. Heldeninhalte habe , die ich nicht kenne, also weiß ich, dass das der Held ist , der an die Spitze gehen sollte. Außerdem verwenden wir H1, H2, H3, H4 usw. usw. für die Überschriften. Und wir verwenden bewusst H1 oben auf der Seite, H2 unter drei Jahren darunter. Und dann haben wir Textblöcke für die Textelemente verwendet und für die kleinsten Textelemente haben wir Absätze verwendet. Das ist alles gute Praxis. Weil Google es viel besser haben wird, Ihre Website zu viel besser indexieren und für eine Suche zu optimieren , weil er verstehen wird, was Sie tun, auch für die Bilder, über die wir gesprochen haben, diese Alt-Tags, wenn du deine alten Texte für jedes einzelne Bild optimierst, was du tun solltest. Aber ich habe für diesen Kurs bewusst viel übersprungen , weil wir dafür Stunden und Stunden brauchen werden . Sie sollten dies jedoch für jedes einzelne Bild tun , damit Ihre Bilder in der Bildsuche angezeigt werden. Also jedes einzelne Bild, das du machst, dass du jedes einzelne Symbol hochlädst, jedes einzelne Foto. Stellt sicher, dass Sie immer die Alt-Texte verwenden und immer den beschreibenden Text verwenden, falls dies je nach Bild erforderlich ist , wie ich es erklärt habe. Also, was wir hier haben, wenn wir ganz nach unten gehen, haben wir ganz nach oben sortiert. Wir haben eine Homepage, sodass wir einen Passwortschutz haben können, was wir nicht tun werden, da wir ihn bei einem Lageplan nicht benötigen. Sie können also einen Lageplan hinzufügen, um Schulden abzuladen. Also SEO-Einstellungen, was wir hier tun können , ist, wie das Suchergebnis aussieht. Also Titel-Tag, Titel der Seite. Dies ist der optimale Titel der Seite. Also, was ich hier machen kann, nennt man das als Salon. Und hier können Sie sehen, wie es bei Google aussieht, auf der Suche, eine Spinne, exklusive Autos. Und dann Meta Description. Beschreiben Sie die Seite. Die optimale Beschreibungslänge beträgt 155 bis 300 Zeichen. Also exklusiver Autohaus, exklusives Autohaus. Lass uns das einfach reparieren. Exklusives Autohaus im Zentrum von Belgrad. Wir wissen also, dass wir uns direkt über die Meta-Beschreibung verbinden können . Wir können die Karte verbinden, da wir bereits über Google Maps eine Verbindung hergestellt haben. So wird es wieder wissen, uns zu posten und uns den Leuten, die in der Gegend von Belgrad oder im Vermessungsgebiet sind, mehr zu zeigen den Leuten, die in der Gegend von Belgrad oder im Vermessungsgebiet sind, mehr zu . Der Titel eines offenen Diagramms ist nun etwas, wenn Sie Ihre Website in sozialen Medien wie Facebook, Twitter, LinkedIn, Pinterest teilen Ihre Website . Was Sie also tun können, ist dasselbe wie das SEO-Titel-Tag, genau wie die Meta-Beschreibung irgendwo. Und jemand, der deine Seite in den sozialen Medien teilt, es wird genau so sein wie diese. Und Sie können eine offene Bild-URL, Open Graph-Bild-URL, hinzufügen , die Sie hochladen sollten. Öffnen Sie Graph, wenn Sie möchten, dass Ihre Website in sozialen Medien geteilt wird. Gehen Sie also einfach auf diese Website und laden das Bild in diesen Dimensionen Ihrer Website hoch, Sie können einfach einen Screenshot hochladen, z. B. und dieser Screenshot ist, wenn Sie etwas teilen, sagen wir auf Facebook Geschichten oder Facebook-Post, was auch immer das Bild ist, das es von der Website abruft, das ist dieses Bild. Und Sie können diese Seite aus den Suchergebnissen der Website ausschließen. Und du kannst Suchtitel sagen, gleich, gleich, gleich. Und dann endlich benutzerdefinierter Code. Wenn Sie einen benutzerdefinierten Code in das Head-Tag vor dem Body-Tag eingeben müssen. Du kannst das gleich hier tun. Normalerweise machst du das für einige Skripte wie zum Beispiel Google Pixel, wenn du es z.B. selbst machst. Aber hier haben wir eine direkte Integration, also wird sie von selbst auftauchen. Oder wenn Sie einen externen Chat haben, z. B. dann werden Sie Schulden machen. Sie befinden sich normalerweise innerhalb der Kopfmarke. Wenn Sie vielleicht so etwas wie Google Analytics verwenden oder etwas Ähnliches. Also, was ich tun werde, ist das einfach zu kopieren. Und er würde sagen, genau hier. Dann wo Autos, Elternordner steht, wir wissen, wie es ist, ich werde das hier verwenden. Auf dem Titelschild steht Autos. Also lass uns sehen. Kuhautos. Ja. Mal sehen. Titel-Tag. Ist es das was du oben auf der Seite siehst? Also vielleicht können wir so etwas wie Spinnenautos nehmen, geparkte Autos. Das ist also die eigentliche URL, website.com Forward Slash Cars. Aber wir zeigen vielleicht einfach so etwas wie ein Spinnenauto. All das wird also unangetastet bleiben , sodass wir die Schulden nicht ändern werden. Dann könnten wir in die Lunge gehen. Und was die Kredite angeht, kann ich hier das Gleiche bekommen. Aber vielleicht können wir das einfach ändern. Also exklusives Autohaus im Zentrum von Belgrad. Vielleicht können wir so etwas wie besten exklusiven Autokredite im Zentrum von Belgrad , weil es um Kredite geht. Wir können also über eine Spinne sprechen, über Autokredite. Los geht's, klicken Sie auf Speichern. Und kontaktieren Sie uns endlich. Was wir tun können, ist zu Pages zurückzukehren. Klicken Sie hier, kontaktieren Sie uns. Was wir tun können, ist Kontakt als Teil von Autos. Da haben wir's. Die Meta-Beschreibung stellt sicher, dass es dasselbe ist. Sie Kontakt mit uns auf und fahren Sie noch heute Ihr Traumauto. Vielleicht so etwas. Sie können also sehen, wie einfach das ist. Und jeder kann das tun, aber es hilft wirklich, Google indexiert deine Bilder, hilft wirklich bei der Suche nach n, weil dieses Bild als Spinnen-Showroom bezeichnet wird, wie du hier sehen kannst. Darüber haben wir gesprochen, und darauf können Sie sogar hinweisen. Nehmen Sie also Kontakt mit uns auf. Vielleicht können wir das ein bisschen anpassen. Also nimm Kontakt mit uns auf und besuche vielleicht unseren Showroom, um dein Traumauto oder ähnliches zu fahren , nur um das Bild und die Meta-Beschreibung selbst weiter zu verbinden . Und hier haben wir, dass wir das schaffen können. Also können wir mit dem Titel-Tag weitermachen. Vielleicht. Ich weiß nicht, verwende das Sammlungsfeld nach Bedarf. Vielleicht können wir also ein Namensfeld hinzufügen. Los geht's, Meta-Beschreibung. Wir können vielleicht Slug hinzufügen, das ist diese orange Reihe oder Vogue. Da hast du es. Oder Sie können zusätzliche Felder hinzufügen. Also schauen wir uns vielleicht an, vielleicht auch den Namen. Und wir brauchen keine Schnecken, also lasst uns das loswerden. Wir können einen Namen hinzufügen. Also werde ich unser Voc zeichnen. Da hast du es. Und vielleicht können wir Slash hier haben oder so etwas. Ein Spinnenauto als Teil von Autos oder Spot-Exklusivautos oder so. Wir wollen also nicht, dass es zu groß ist. Entdecke exklusive Autos. Wenn es sich also ändert, weil es jetzt Ranger oder Walk ist, wenn es später wechselt wird Lamborghini Hurricane immer noch exklusive Autos haben, aber nur einen Lamborghini Hurricane davor. Und der Name unten, es wird auch optimiert. Verwenden Sie die Open Graph-Einstellungen. Gleiche, das Gleiche. Das ist dasselbe, dasselbe, dasselbe. Das ist dasselbe, was ich erwähnt habe. Da hast du es also. Sie können sehen, wie super einfach das war. Nur diese wenigen Dinge haben uns wirklich geholfen die Suchmaschinenoptimierung für unsere Seite zu optimieren. Und das ist im Grunde alles. Das ist alles was du tun kannst. In nur ein paar Minuten. Sie können sehen, dass ich nur 8 Minuten gebraucht habe, um so etwas auf einer wirklich grundlegenden Ebene zu erreichen. Aber Sie können wirklich eingehend darauf eingehen. Wenn es um Allgemeines geht, würde ich empfehlen, wie bereits erwähnt, das Fab-Icon hochzuladen den Webclip hochzuladen. Sie können die Zeitzone festlegen, stellen Sie sicher, dass Sie genau das tun. Dann haben wir das Hosting. Wenn du direkt hier bleiben möchtest, musst du den Plan kaufen. Wie bereits erwähnt, haben wir die Redakteure. Also, wer Ihr Redakteur sein wird, kann bearbeiten und veröffentlichen. Dann haben wir Abrechnung, wir haben SEO, also können wir das anpassen. Also Indexierung, ich möchte nicht, dass es indexiert wird , da dies im Grunde die Übungswebsite ist. Ich möchte also nicht, dass es in den Suchergebnissen angezeigt wird . Seitenverzeichnis. Sie sollten eine Sitemap hinzufügen, wenn Sie nicht wissen, wie das geht. Das ist sehr einfach. Es gibt Websites da draußen. Sie können einfach zu Ihrer Designdatei gehen und alle Ihre Seiten sehen oder einfach zu hier zur Website zurückkehren. Sie haben im Grunde ein Zuhause, Sie haben Autos, Sie haben Kredite, kontaktieren Sie uns und Sie haben nur eine Seite. Das ist also alles, was Sie in Ihrer Sitemap tun müssen , die Überprüfung der Google-Website. Sie können also zur Google Search Console gehen, dort Ihr Konto erstellen und dieses als Ihr Eigentum beanspruchen. Und du wirst diese Bestätigungs-ID erhalten , füge sie hier ein. Diese beiden werden im Hintergrund miteinander sprechen . Und Sie haben diese kanonische Tag-URL. Mehr darüber erfährst du hier. Nur diese wenigen Änderungen werden Ihre Website weiter vergrößern. Dann haben wir die Formulare, wie ich bereits erwähnt habe. Achten Sie darauf, dass Sie dort die E-Mail Ihres Kunden angeben und nicht Ihre eigenen E-Mail-Schriftarten. Wir haben die Google-Schriften bereits gemacht, das ist also in Ordnung. Backups eignen sich hervorragend für Integrationen und benutzerdefinierten Code. Also im Grunde ist das alles, was dazu gehört. Wir haben das, also ist es veröffentlicht. Lass uns veröffentlichen, um die Domains auszuwählen. Und los geht's, es wird die erfolgreich veröffentlichte Website veröffentlichen , klicken Sie auf Schließen. Und wenn ich zu meinem Designer zurückkehre, kann ich sehen, wie das aussieht. Und jetzt können Sie auf meinem Profil diese Website sehen und sie klonen. Weil ich es für euch kolonial machen werde. Ich denke, vielleicht nicht, weil wir diese Bilder haben. Vielleicht ist es nicht die beste Option, dies zu tun, weil Sie den Inhalt dieses Kurses haben. Vielleicht in der Zukunft. Lassen Sie mich wissen wenn Sie möchten, dass ich das tue, schreiben Sie mir eine E-Mail und lassen Sie mich wissen , ob ich diese komplett leere Datei erstellen soll , damit Sie Ihre eigenen Bilder hinzufügen und diese Datei dann klonen können . Weil ich mir nicht wirklich sicher bin, weil jeder aus der gesamten Web-Community das klonen kann. Und wir haben diese Lizenzrechte an diesen Bildern. Das ist also der einzige Grund, warum ich wollte, ich mache das gerne. Aber im Grunde ist es das. Sie können sehen, wie einfach diese Suchmaschinenoptimierung ist. Auf Anfängerniveau. Offensichtlich haben Sie SEO-Agenturen , die sich hauptberuflich damit befassen. Sie optimieren für Keywords und dann verwenden Sie diese Keywords in Ihren Texten. Deshalb wirst du all diese Dinge optimieren. Also achte einfach darauf. Aber was Sie als Designer tun können, als UX-Designer, ist, sich einfach mit diesen grundlegenden SEO-Techniken zu beschäftigen und ich denke, am Ende des Tages wird es Ihnen gut gehen. 194. ABSCHNITT 17 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es offensichtlich, an meiner Seite zu bauen und zu versuchen, das zu schaffen, was wir zuvor entworfen haben. Wenn Sie jetzt in Webflow Probleme haben, werde ich einen Link zur Colonial-Datei bereitstellen , sodass Sie sie einfach Köln und in Ihrem Projekt verwenden und sie einfach auseinanderreißen und sehen können, was ich verwendet habe erstellt, falls Sie zu irgendeinem Zeitpunkt verwirrt sind. Aber, und das ist ein großes Aber , das ich erwähnen möchte. Versuche immer sicherzustellen , dass du mitmachst, denn wie ich bereits im Designbereich dieses Kurses erwähnt habe , ist dies der beste Weg für dich, um zu lernen, ob du nur fertige Dateien verwendest, wenn wir tausche einfach die Bilder aus, geh da rein und nenne es dein eigenes. Du wirst niemals Design lernen. Weise wirst du nie lernen, Entwicklung zu entwickeln. Und es ist immer der beste Weg und immer der beste Ansatz , um ihn zu verfolgen. Wenn du irgendwo nicht weiterkommst, wenn du einen Fehler machst, achte darauf, dass du dir diese Lektionen immer etwas langsamer ansiehst. Einige dieser Spieler haben diese Option. Wenn nicht, dann kannst du es beenden, du kannst es zurückspulen, du kannst es dir mehrmals ansehen. Und schließlich, falls du einfach keine Antwort hast, mach dir keine Sorgen, du kannst dich jederzeit an mich wenden und ich bin immer da, um dir bei jeder dieser Lektionen aus dem Kurs zu helfen . 195. ABSCHNITT 18 Fallstudien: Studien sind ein wichtiger Teil Ihres Portfolios, da Sie Ihren Kunden nicht wirklich das endgültige Bild und das Endergebnis zeigen möchten . Du willst ihnen den Prozess zeigen. Das nennt man die Fallstudie. Was ist das Problem, das Sie während dieses Projekts tatsächlich gelöst haben? Was ist der Ansatz, den Sie für dieses Projekt tatsächlich gewählt haben? Haben Sie mit der Recherche begonnen , die Sie mit Wireframes begonnen haben? Hast du mit deiner Lieblingssoftware deiner Wahl angefangen? Hast du mit Bildern angefangen? Was war Ihr Prozess während dieses Projekts? Weil wir Manager und Designexperten einstellen , die Designhilfe suchen und Designer einstellen. Das ist es, was sie an Ihrem Prozess interessiert, nicht an Ihren fertigen Ergebnissen, denn jeder Designer, Altair, kann ein schönes Design kreieren aber gleichzeitig funktional ist. Warum haben Sie diese Entscheidungen eigentlich getroffen? Warum hast du das getan und nicht das? Dafür gibt es Fallstudien. Sie sind also unglaublich wichtig. 196. Was ist eine Fallstudie: Eine Fallstudie ist nichts weiter als eine lange Präsentation Ihrer Arbeit. Ihre Arbeit kann Ihre Designarbeit sein, oder es kann unser Produkt sein, um sie zu erstellen. Und auf diesen Teil werden wir etwas später in diesem Kurs eingehen. Aber in jeder Hinsicht ist es nur eine Präsentation Ihrer Arbeit. Nun, warum? Langform und was ist der Unterschied zwischen Langform und Kurzform? Nun, es ist eine Kurzform. Die Präsentation ist etwas, das Sie jeden Tag auf Dribble sehen. Und Websites wie Dribble sind im Grunde nur ein Screenshot des Teils Ihrer Arbeit, sodass es sich um einen Header-Bereich Ihrer Website handeln kann , z. B. oder ein Modellbild Ihrer App, das bereits abgeschlossen. Nun, die Fallstudie ist eine lange Präsentation, die man normalerweise auf Beacons sieht. Es ist eine Fallstudie, weil sie Ihren Benutzern und Zuschauern dieser Fallstudie hilft , Ihren Prozess zu untersuchen, Ihre Schritte zu untersuchen und zu untersuchen, wie Sie dieses Endergebnis erzielen, das z. B. Produktdesign oder App ist Design, Webdesign oder so etwas. Es ist nicht ausschließlich auf das UX-Design der Benutzeroberfläche beschränkt. Es kann auch hervorragend zum Branding verwendet werden. Es kann großartig im Logo-Design sein, wenn es nur die Länge hat. Es wird je nach Projekt variieren. Wenn Sie z. B. gerade erst entworfen wurden wird ein Logo nur etwas kürzer sein , weil es nicht zu viele Schritte beim Entwerfen eines Logos gibt. Wenn Sie im UX-Design der Benutzeroberfläche z. B. eine Website mit 20 verschiedenen Seiten entwerfen, sind alle responsiv und Sie müssen Wireframes in Papierform erstellen. Wireframes in Ihrer Lieblingssoftware werden natürlich variieren und Sie werden viel mehr Schritte haben als z. B. beim Logo-Design. Das ist also im Grunde eine Fallstudie auf den Punkt gebracht. Und in den nächsten Lektionen dieses Kurses werden wir untersuchen, was Sie in Ihre Fallstudie einbeziehen sollten. Was sind einige Schritte, die Sie unternehmen sollten, und einige großartige Präsentationsbeispiele, um Ihnen den Einstieg in Ihre Fallstudien zu erleichtern. 197. Elemente einbeziehen: Es gibt viele verschiedene Elemente, die Sie in Ihre Fallstudien einbeziehen können. Und in meinen mehr als 15 Jahren in diesem Geschäft habe ich festgestellt, dass einige Elemente besser funktionieren als andere, weil einige Elemente wirklich dazu beigetragen haben, eine Geschichte darüber zu erzählen, wie sich dieses Design im Laufe des Prozesses entwickelt überfälliger Erstellungsprozess und/oder der Prozess , an dem Sie an diesem speziellen Projekt und einigen anderen gearbeitet diesem speziellen Projekt und haben, lenken Ihre Zuschauer wirklich davon ab, zur Sache zu kommen. Denn der Sinn einer Fallstudie besteht darin, potenzielle Zuschauer anzuziehen , die zu Kunden werden können. Hoffentlich, wenn Sie danach suchen oder wenn Sie es einfach Ihren Kollegen zeigen möchten , damit sie Ihren Prozess verstehen und wissen, wie Sie zu diesen Endergebnissen gekommen sind. In diesem Video werden wir einige wichtige Elemente besprechen, die meiner Meinung nach aufgenommen werden sollten, weil ich sehe, dass diese Elemente in einigen großartigen Präsentationen, die ich online gefunden habe, ständig in die Höhe treiben. Also hier haben wir diese kurze kleine Einführung und einige wichtige Elemente, die Sie in Ihre Fallstudie aufnehmen können. Auch hier wird es je nach Branche variieren , je nachdem, in welcher Nische Sie sich befinden. Denn nicht alle Branchen werden diese Elemente benötigen und nicht alle Fallstudien werden diese Elemente benötigen. Wenn das Projekt kürzer ist, z. B. wenn das Projekt länger ist. Also, was Sie als Erstes tun müssen, ist Texte einzufügen und zu beschreiben, was jeder Abschnitt und jedes Element tut. Überfordern Sie also nicht Ihre Zuschauer, sondern geben Sie genügend Informationen über das Projekt. Wenn Sie also z. B. eine Website entworfen haben, gehen Sie nicht auf zu viele Details ein. Zum Beispiel bin ich eines Morgens aufgewacht und dann hat sich der Kunde bei mir gemeldet. Niemand will das hören. bringt es auf den Punkt. Seien Sie kurz, prägnant, aber seien Sie präzise Bezug auf die Elemente, die Sie mit Ihrem Text zu beschreiben versuchen. Lassen Sie die Bilder hier die wichtigste Geschichte erzählen. Aber der Text ist nur dazu da, die mündliche Idee, das mündliche Design, Ihre mündliche Präsentation zu verinnerlichen. Es ist also nur da, damit Ihre Bilder für Sie funktionieren. Sprich also die Sprache deines Publikums und sei nicht zu technisch. Was ich damit meine ist, wer ist Ihre Zielgruppe? Sind Ihre Zielgruppen Designer? Dann kannst du so sprechen , als ob ich Responsive Resize in Adobe XD verwendet habe, und ich verwende verschiedene Grafikkartengrößen und ähnliches. Aber wenn Sie versuchen, Kunden zu gewinnen , als die Sprache zu sprechen die sie verstehen, weil sie wahrscheinlich gar nicht wissen, was Adobe XD ist. Vielleicht sollten Sie es in Ihrem Projekt nicht prominent als Schuld erwähnen . Natürlich sollten Sie es in Ihrer Fallstudie einige Male erwähnen . Achten Sie darauf, dass Sie sich an das halten, was Ihre Kunden verstehen. Also, wenn es sich z. B. um eine Beauty-Firma handelt, dann stellen Sie sicher, dass Sie über Beauty-Produkte sprechen, über den Prozess, um zu diesem speziellen Design zu gelangen. Verwenden Sie die Sprache, die sie verstehen werden , wenn dies die Zielgruppe ist , auf die Sie abzielen. Wenn das von Art Directors gesehen werden soll, kennen sie sich natürlich mit Adobe XD und all diesen Tools aus, aber seien Sie auch nicht zu technisch aber seien Sie auch nicht zu technisch , was die Texte angeht, die Sie hier zu erzählen versuchen. Also noch einmal, wenn Sie in einer Schönheitsbranche tätig sind, stellen Sie sicher, dass Sie dieses Gleichgewicht halten. Beschreiben Sie also, welche Tools Sie verwenden und beschreiben Sie auch, in welcher Nische Sie sich befinden. Beschreiben Sie den Prozess, in dem Sie sich befinden, und verwenden Sie einige Fachjargons innerhalb dieser speziellen Nische, aber übertreiben Sie es nicht und komplizieren Sie die Dinge nicht zu sehr. Auch hier sind Texte nur dazu da, Ihren Bildern zu helfen und eine bessere Geschichte zu erzählen. Als nächstes haben wir Bilder. Verwenden Sie also, wie ich bereits erwähnt habe, Bilder, um Ihre Texte zu ergänzen. Bilder sollten mit der Geschichte, die Sie erzählen, verbunden sein. Eine Nachrichtenbildsprache, die Ihrer Geschichte hilft, nicht irgendein Bild. Und wenn du sie selbst nehmen kannst. Was ich damit meine ist, wenn Sie z. B. in einem Autogeschäft tätig sind und über Autos sprechen, nicht nur das Bild eines Berges gezeigt haben. Denn was ist der Sinn dieses Bildes? Es hilft nicht, diese Geschichte zu erzählen. Es hilft nicht, die Idee dieses bestimmten Designs zu verkaufen . Also benutze es nicht. Verwenden Sie Bilder, die gut zu Ihren Präsentationen passen und die Sinn machen. Wie ich hier schon sagte, mach alle Bilder, wenn du kannst. Jeder hat eines davon, sodass Sie einfach Ihr Telefon benutzen und ein Bild von Ihrem Prozess machen können , wie Sie an diesem Projekt arbeiten, z. B. über die Erstellung von Papier-Wireframes. Oder du nimmst dein Handy und gibst es jemandem, du weißt schon, z.B. deinem Familienmitglied oder deinem besten Freund oder so. Oder du kannst es sogar selbst machen. Wenn Sie nicht möchten, dass Ihnen jemand hilft, können Sie Ihr Telefon einfach hinter sich positionieren. ZB mach ein Foto, so etwas. Also über die Schulter, wenn Sie z. B. an Ihrem Computer arbeiten oder auf dieser Seite. Oder wenn Sie sich die Vorschau dieses Designs ansehen, können Sie Ihr Telefon einfach so zeigen Sie das Telefon in der Hand halten und das Design zeigen. Es wird wirklich helfen, eine Geschichte zu erzählen , weil es Ihren Zielkunden und Ihrer Zielgruppe zeigt Ihren Zielkunden und Ihrer Zielgruppe , dass Ihnen dieses Projekt wirklich wichtig ist. Dass Sie wirklich viel Gedanken und Mühe in dieses Projekt gesteckt haben. Und dass Sie wirklich auf Details für unsere Direktoren achten , insbesondere, die Designer einstellen möchten. Dies wird für ihre Entscheidungen von entscheidender Bedeutung sein , da sie sofort erkennen können , dass Sie der Designer sind , der auf diese kleinen Details achtet. Und es wird sich auf lange Sicht wirklich auszahlen. Achten Sie also nur auf kleine Details wie diese. Aber noch einmal, übertreib es nicht. Machen Sie nicht einfach zufällig Fotos von sich selbst und fügen Sie sie einfach in Ihre Fallstudie ein. Es hilft nicht, eine Geschichte zu erzählen, aber ein paar Bilder hier und da werden Ihnen wirklich helfen, die Idee dieses bestimmten Designs zu verkaufen. Als nächstes haben wir einen Styleguide und ein Designsystem. Zeigen Sie also Ihren Styleguide oder Designsystem, um zu zeigen , dass Sie organisiert und strukturiert sind. Auch hier ist dies für unsere Direktoren äußerst wichtig, aber auch für unsere Kunden, da sie sehen können, wie all diese Elemente im fertigen Design zusammenkommen, das am besten präsentiert wird wichtige Elemente, die du verwendest, aber übertreibe es nicht. Platziere die Farbverläufe , um dein Bild abzuschneiden unten, falls es zu lang ist. Dies ist besonders wichtig für sehr lange Projekte und wirklich lange Fallstudien, da Sie in Ihren Styleguides InDesign-Systemen in vielen Fällen Hunderte verschiedener Elemente haben können aber nicht alle Elemente sind wichtig. ZB kannst du Farben anzeigen, du hast Schriften verwendet, vielleicht einige Buttons, vielleicht ein paar Foren, Elemente, größere Sachen wie das. Und dann führe einfach einen Lichtverlauf ein , der einfach das Designsystem unterstützt während deine Zuschauer nach unten scrollen. Sie überfordern sie also nicht, denn auch hier Styleguide und Designsystem nicht das Endergebnis, sondern nur ein Tool, das Ihnen helfen wird , zum Endergebnis zu gelangen, was natürlich sein sollte ganz unten in deinem Styleguide. Aber darüber werden wir etwas später in diesem Kurs sprechen . Verwenden Sie abschließend die Farben aus Ihrem Projekt und Styleguide auch in Ihrer Präsentation, damit das Branding auf den Punkt gebracht wird. Was ich damit meine, ist zum Beispiel wenn deine Hauptfarben Blau und Grau sind, verwende nicht einfach Rosa, weil Rosa in deinem Design nie gezeigt wird, nie in deinem Prozess. Warum sollten Sie sie also in Ihre Präsentation aufnehmen? Achten Sie darauf, Farben aus Ihrem Styleguide und Designsystem zu verwenden . Wenn Sie einen haben, wenn Sie keinen Styleguide oder kein Designsystem haben, ist Ihr Projekt zu klein, es wird einfach auf einer Landingpage bearbeitet. Unabhängig davon empfehle ich Ihnen wirklich, mit Styleguides und Designsystemen zu beginnen da diese für die zukünftige Entwicklung dieses bestimmten Produkts äußerst wichtig sind . Wenn Sie sie jedoch nicht haben, stellen Sie sicher, dass Sie die Farben verwenden, die Sie in Ihrem Design und in Ihrer Präsentation verwenden. Denn auf diese Weise wird das Branding auf den Punkt gebracht. Sie wären erstaunt, wie oft ich das in Online-Präsentationen sehe, besonders wenn ich nach Designern suche , die mir bei meinen Projekten helfen können. Also ich sehe das die ganze Zeit. Achten Sie darauf, diesen Fehler nicht zu wiederholen, denn für unsere Direktoren zeigt dies erneut , dass Sie auf kleine Details achten. Als nächstes haben wir Papier-Wireframes, also stellen Sie sie in einer Problembeschreibung vor. Herausforderung in den Konzeptphasen Ihres Studiums. Wir werden etwas später in diesem Kurs über Phasen sprechen . Aber im Grunde bedeutet das, dass Sie Ihre Fallstudie schrittweise präsentieren müssen. Also der Anfang ist genau hier oben und das Ende ist genau hier unten. Benutzer müssen also ganz nach unten scrollen um zu diesem Endergebnis zu gelangen, im Grunde eine Fortschrittsmethode. Die Benutzer machen also Fortschritte, während sie nach unten scrollen, und sie beginnen in den sehr schwierigen Phasen dieses Projekts für die Ideenfindung, vielleicht einige Texte auf leeren Seiten und Papier-Wireframes, weil sie Bei provide frames dreht sich alles um Ihre Ideen. Zeigen Sie also Bilder der Schöpfung sowie gescannte Bilder mit einem Drucker oder Ihrem Telefon. Was ich damit meine, ist das, was ich zuvor erklärt habe, wenn jemand anderes ein Foto von Ihnen macht, wie Sie dieses Drahtmodell erstellen, können Sie das selbst machen. Sie können einfach einen Stift und ein Papier verwenden und ein solches Formular verwenden. Ich mache einfach ein Foto von dir, wie du das Wireframe erstellst. Noch einmal, übertreibe es nicht, aber stelle sicher, dass du hier und da einige davon einfügst, nur um eine bessere Geschichte zu erzählen und deinen Zuschauern das mündliche Konzept zu verkaufen. Geben Sie genügend Details an, um die Geschichte, die Sie erzählen, zu ergänzen, aber überfordern Sie Ihr Publikum nicht. Das ist genau das, was ich gesagt habe. Und stellen Sie sicher, dass Sie mit all diesen Abschnitten moderat umgehen. Wenn wir uns also den Styleguide und das Designsystem ansehen, ich habe es mit dem Farbverlauf erwähnt, meine ich dasselbe für Papier-Wireframes, z. B. können Sie einen Bildstreifen verwenden , der horizontal sein wird oder können es zur Seite schalten, nur um diese Papier-Wireframes anzuzeigen und Ihren Prozess zu zeigen. Und natürlich kannst du hier und da ein paar Bilder von dir machen , wie du diese Papier-Wireframes erstellt hast. Als Nächstes haben wir ein Wireframe Zeigen Sie sie also in den Konzepten und Testteilen Ihrer Fallstudie. Noch einmal, darauf kommen wir etwas später zurück. Und natürlich kannst du jederzeit zu diesen Lektionen zurückkehren und sie ein bisschen mehr studieren. Präsentieren Sie sie perspektivisch, in Bildern und in Mockups als Bild . Auch hier können Sie Ihr Wireframe aus Adobe XD einfach als Bild speichern . Sie können es in 3D perspektivisch betrachten, z. B. Sie können es in Bildern zeigen. Also, wie ich schon erwähnt habe, du kannst es zeigen. Jemand, der ein Foto von Ihnen macht, z. B. von hier oder von der Seite oder Wireframe auf Ihrem Telefon, z. B. dieses Nehmen wir an, Sie verwenden Wireframe im Prototypenmodus von Adobe XD zum Beispiel und schließlich können Sie in Mockups das Modell eines Desktop-Geräts, Laptop-Geräts oder Telefongeräts verwenden , egal was Sie tun, und diese Weise ein Modell Ihres Wireframes präsentieren. Wenn Sie einige Bildschirme gestalten können, sind sie Teil Ihres Designs anklickbar und in Ihre Präsentation eingebettet. Egal welches Tool Sie verwenden, Sie können dies tun. Aber weil ich XD verwende, ist es nativ in XD Sie können einfach den Teil Ihres Prototyps teilen, sodass Sie z. B. eine einzige Zeichenfläche teilen können, und dann können Sie ihn in Ihre Website einbetten , wenn Sie habe diese Funktion oder falls nicht, kannst du es einfach in Beacons tun. Denn Begins lässt sich gut in Adobe XD integrieren , weil es Teil der Adobe-Familie ist. Es ist ein Adobe-Produkt, das Beacons ist. Sie können also einfach diesen Link von Ihrem Adobe XD verwenden und ihn dann in Ihre Beacons-Präsentation einbetten . Und dann können die Leute darauf klicken und sich dann zurechtfinden. Es. Stellt sicher, dass es eine Geschichte erzählt und Ihren Text, Ihre Bilder, Ihr Papier, Wireframes und andere Elemente ergänzt . Das gilt also für alles, was ich zuvor erwähnt habe. Überwältigen Sie Ihre Zuschauer also nicht mit Dutzenden dieser Wireframes, denn denken Sie daran, dass dies nicht das Endergebnis ist. Dies ist nur ein Teil Ihres Beitrags zum Endergebnis. Fertiges UI-Design. Da haben wir's. Stellen Sie also sicher, dass Sie es in der Test - und Ergebnisphase Ihrer Fallstudie zeigen . Damit meine ich, dass Sie Ihren Benutzern zeigen können , dass es getestet wird. Wenn Sie also Benutzer im Raum haben, können Sie z. B. weitermachen und Fotos von Personen machen, die Ihr Design auf dem Telefon oder auf dem Laptop oder Desktop-Geräten verwenden Ihr Design auf dem Telefon oder auf dem , was auch immer. Und Sie können es in der Ergebnisphase zeigen, die normalerweise die letzte Phase Ihrer Fallstudie ist. Also wie es am Ende aussieht, wie es aussieht wie ein fertiges Produkt, vielleicht ist Ihre App oder Website schon gestartet. Dann kannst du einen Link angeben, damit die Leute ihn sehen können. Während Ihrer gesamten Fallstudie. Sie lernen, wie Sie es geschaffen haben und wie Sie dabei Probleme lösen. Und jetzt gibt es einen Live-Link, über den Leute darauf zugreifen können , wenn Sie an einem privaten Projekt arbeiten. Du hast also nicht vor, es zu programmieren, du hast nicht vor, es live zu machen, dann ist das alles in Ordnung. Sie können es in anklickbaren Prototypen, 3D-Modellen und Bildern präsentieren, wie ich bereits für all diese anderen Elemente erwähnt habe . Sie können auch einige Videos von Untätigkeit Ihres Bildschirms aufnehmen und diese an unsere Fallstudie anhängen. Nochmals, wenn Sie Adobe XD verwenden, können Sie einfach einen Prototyp aufnehmen und das Video als Präsentation von Cans oder auf Ihre Website hochladen . Du kannst das Video also einfach darin einbetten und die Leute können darauf klicken und du kannst ihnen dann z.B. deine Navigationsstruktur oder Navigation zwischen zwei oder drei Bildschirmen oder so etwas Ähnliches zeigen Navigationsstruktur oder Navigation zwischen zwei oder . Dies ist das Endergebnis Ihrer Arbeit. Stellen Sie also sicher, dass sich Ihr UI-Design von Ihrer Präsentation abhebt. Das ist das Verkaufsargument. Dies ist der Endpunkt Ihrer Fallstudie. Die Leute scrollen also ganz nach unten um Ihr fertiges UI-Design zu sehen, um das fertige Produkt zu sehen. Stellen Sie also sicher, dass es stärker hervorsticht als andere Teile Ihrer Fallstudie. Denn wieder einmal, dies ist der Teil, Ihnen als Designer wirklich verkauft und der die Fallstudie und Ihren Prozess als Designer wirklich bestimmt. Stellen Sie also sicher, dass es auffällt. Schließlich müssen wir noch andere Elemente berücksichtigen. Je nach Nische sind Sie also unabhängig von dem Projekt, an dem Sie arbeiten. Diese Elemente funktionieren möglicherweise und funktionieren möglicherweise nicht. Achten Sie also darauf, beim oralen Styling Ihres Produkts vorsichtig zu sein und die gesamte Nische zu berücksichtigen, in der sich Ihr Kunde befindet. Mockups, 2D und 3D in verschiedenen Stufen. Also, was ist 2D? Was ist 3D? Offensichtlich ist 2D das und das. 3d ist das und das zum Beispiel sodass Sie jeden beliebigen Winkel Ihrer Mockups und auch außerhalb Ihrer Designs verwenden können . Adobe XD verfügt über diese 3D-Funktionen, sodass Sie Ihre Zeichenfläche verwenden und in 3D erstellen können. Und Sie können das Bild als solches PNG speichern und es dann in Ihre Präsentation hochladen , wenn Sie anklickbare Prototypen haben möchten . Also habe ich erwähnt, dass Sie, wenn Sie in XD arbeiten, einfach das Prototyp-Think-Video einbetten sollten. Sie können es also noch einmal machen, eine Bildschirmaufnahme im Walk-Through-Stil , auf der Sie ein Telefon halten oder hinter dem Laptop stehen. Also den Walk-Through-Stil habe ich erwähnt. Sie können einfach in XD auf Aufnahme klicken, wenn Sie es verwenden. Und diese anderen Stile sind z.B. dass jemand anderes sein Handy nehmen und es einfach so über deine Schulter legen kann , z. B. dann verwendest du hier dein Design auf deinem Gerät , damit du es starten kannst anklickbarer Prototyp am Ende des Projekts, und dann kannst du ihn einfach auf deinem Handy verwenden und jemand anderes kann dich aufnehmen. Und natürlich können Sie dasselbe auf Ihrem Laptop oder Desktop-Gerät tun. Elemente im Hintergrund. Das ist es, was es heißt, BG-Elemente, nur um es ein bisschen kürzer zu halten, helfen bei visuellen Interessen und als Leitfaden für Ihre Fallstudie. Das hängt natürlich von Ihrem Projekt ab. Wenn Sie also Blätter haben, z. B. wenn Sie in einer naturnahen Umgebung und einem Unternehmen arbeiten , können Sie Blätter als Hintergrundelemente verwenden. Sie können Blumen verwenden, Sie können verschiedene grafische Elemente und geometrische Elemente verwenden verschiedene grafische Elemente , z. B. Kreise und Quadrate und Dreiecke, und einige verschiedene grafische Elemente, z. B. Diamanten . Und schließlich können Sie Symbole verwenden, um all diesen Hintergrundelementen gut zu entsprechen. Noch einmal, übertreib es nicht. Diese sind, sie helfen nur dabei, die Interessen der Zuschauer aufrechtzuerhalten und sie dazu zu bringen, ein bisschen weiter zu scrollen. Verläufe und Unschärfen, wenn sie zum Projektstil passen, aber übertreiben Sie es nicht, weil ich in der gesamten Fallstudie oft Farbverläufe sehe in der gesamten Fallstudie oft Farbverläufe und es Ihren Augen wirklich weh tut. Es langweilt dich wirklich nach einer Weile und vergiss nicht, viele Menschen da draußen sind sehbehindert. Es wird für ihre Augen also wirklich schwierig sein , diese Farbverläufe zu erkennen. Und im Grunde, um deine Farbverläufe von deinem Design zu unterscheiden , besonders wenn sie farbenblind sind, solche Sachen. Achten Sie also darauf, an einigen Stellen Farbverläufe und Unschärfen zu verwenden , um Ihr Design ein wenig aufzupeppen. Wir haben Sticker und Emojis. Die Verwendung hängt natürlich vom Nährstoffprojekt ab. Nehmen wir an, Sie arbeiten an einem Projekt für eine Bank. Natürlich wirst du keine Sticker oder Emojis hinzufügen. Oder vielleicht ist die Bank für ein jüngeres Publikum gedacht und genau das versuchen sie anzusprechen. Vielleicht könnten in diesen Fällen Aufkleber und Emojis Sinn machen. Verwenden Sie also einfach Ihren gesunden Menschenverstand Bezug auf das, was Sie zu schaffen versuchen. Dies sind also nur einige der Elemente, die ich im Laufe der Jahre gerne in meinen Fallstudien verwende. Und ich habe festgestellt , dass einige der großen Unternehmen und Designer die ganze Zeit nutzen, um ihre Designpräsentation zu ergänzen und eine bessere Geschichte zu erzählen. Sie können einige davon verwenden. Sie können sie alle verwenden, aber was auch immer Sie verwenden, stellen Sie sicher, dass es Ihnen hilft, eine Geschichte zu erzählen, und stellen Sie sicher, dass es zu Ihrer Marke und Ihrer Nische passt. Denn sonst klebt es einfach Elemente zusammen und macht es den Menschen schwerer zu verstehen. Und natürlich, wenn Sie versuchen, anhand Ihrer Fallstudie einen Job zu bekommen , werden Art Directors und Mitarbeiter aus der Personalabteilung einfach weggedrängt , weil sie Hunderte von Designern sehen täglich und sie können wirklich erkennen, wem diese kleinen Veränderungen gut sind und wem nicht. Sie also nur darauf, auf diese zu achten. 198. Case erstellen: Im letzten Video haben wir darüber gesprochen, welche Elemente Sie in Ihre Fallstudie aufnehmen sollten, aber wie strukturieren Sie sie, um sie leichter zu verstehen und leichter zu verwenden? Darum geht es in diesem Video. Wir haben also eine Struktur für Ihre Fallstudie erstellt. Organisieren Sie Ihre Fallstudien so, dass sie einfacher zu verstehen und zu verstehen da es wirklich keinen Sinn , diese Elemente einfach auf einer Seite zu platzieren. Sie müssen wirklich eine kohärente Struktur haben , die Sinn macht und Ihren Zuschauern zeigt, dass Sie dieser Fallstudie wirklich Aufmerksamkeit schenken und Ihrer Designarbeit insgesamt wirklich Aufmerksamkeit schenken. Projekt, Intro und Brief sollten meiner Erfahrung nach und meiner Meinung also wirklich an erster Stelle stehen. Und oben auf der Seite, vielleicht in Ihrer Präsentation, sollten Sie so etwas wie ein Titelbild haben, vielleicht das Endergebnis, das Ergebnis Ihres Projekts und dieser Fallstudie präsentiert . Wenn es eine mobile App gibt, solltest du vielleicht ein schönes 3D-Modell mit einem Titel daneben positionieren , nur um der Geschichte zu zeigen und zu erzählen, was das eigentlich ist. Und vielleicht ein Einzeiler darüber, was die App oder Website tatsächlich tut. Darunter fallen meiner Meinung nach und nach meiner Erfahrung Probleme direkt in das Design. Kurz. Beschreiben Sie, worum es bei dem Projekt geht, aber halten Sie es kurz und bündig. Geben Sie nicht zu viele Informationen preis, falls Sie unter eine Vertraulichkeitsvereinbarung fallen. Was ich damit zum Beispiel meine ist, wenn Sie für ein Automobilunternehmen arbeiten, sagen Sie nicht einfach, dass das Automobilunternehmen z. B. 1954 gegründet wurde, und beschreiben Sie dann die Details der Gründungsgeschichte. Das interessiert niemanden. Sie können dieses Detail erwähnen. Also zum Beispiel Unternehmen, die 1954 gegründet wurden, sagen wir, sie haben 20.000 Mitarbeiter. Also verstehst du, was ich meine? Seien Sie einfach kurz und prägnant und bewegen Sie die Geschichte weiter denn niemand hat die Zeit, alles darüber zu lesen Sie können einfach auf die betreffende Website gehen , an der Sie gearbeitet haben, z. B. alles über ihre Geschichte lesen oder wenn es sich um ein bekanntes Unternehmen handelt, können sie einfach zu Wikipedia gehen wenn sie wirklich daran interessiert sind mehr über das Unternehmen selbst zu erfahren. Bei Ihrem Projekt geht es nicht um das Unternehmen selbst. Es geht um die Produkte, die sie verkaufen, um eine Dienstleistung, die sie anbieten, oder um die guten Taten, die sie tun, wenn sie gemeinnützig sind oder etwas Ähnliches. also noch einmal darauf, es in Ihrem Design kurz zu halten. Kurz, geben Sie einfach das Wesentliche an, damit Ihr Publikum informiert ist, und erzählen Sie Ihnen anhand Ihrer Fallstudie eine Geschichte. Was ich damit meine, habe ich im vorherigen Video erwähnt. Ein Kompliment zu Ihren Texten mit Ihren Bildern und was ich mit NDAs meine, erwähnen Sie keine persönlichen Daten von Mitarbeitern. ZB John ist der Regisseur hier wohnt in diesen drei dazu ist seine Telefonnummer. Offensichtlich ist das idiotisch. das auch nicht. Erwähne nicht ihre persönlichen Daten. So kannst du zum Beispiel Gründer erwähnen, wenn sie deiner Meinung sind, und normalerweise werden sie das tun, weil es gute PR ist, aber erwähne andere Mitarbeiter nicht wenn sie damit nicht zufrieden sind. Nennen Sie niemals ihre persönlichen Daten wie Telefonnummern, E-Mail-Adressen, Facebook-Seiten, LinkedIn-Seiten, tun Sie nichts davon. Wollen diese Leute das tun. Sie werden es auf ihrer eigenen Website tun, aber machen nicht den gleichen Fehler wie so viele Designer da draußen, was ich gesehen habe, als sie dies in Ihre Fallstudie aufgenommen haben, auch keine Gewinne erwähnen, wenn sie es nicht tun will es. Denn das wird ihrer Konkurrenz wirklich zeigen, wie es ihnen geht, und es wird in diesem Fall wirklich gegen ihren Vorteil wirken. Sie können also z. B. so etwas sagen, als ob sie im letzten Quartal um 20% gestiegen sind, aber tun Sie es nicht. Zum Beispiel verdienen sie im letzten Quartal 20.000$ mehr als zuvor, weil das ihrer Konkurrenz in Bezug auf diese vertraulichen Informationen wirklich zeigen wird . Also achte einfach auf solche Dinge. Seien Sie noch einmal kurz und kommen Sie zur Sache. Als nächstes sind wir da. Problem, das du verkauft hast. Was ist das Hauptproblem, mit dem Sie bei diesem Projekt konfrontiert waren , und wie haben Sie es gelöst? Die Gestaltung der Website ist nicht das Hauptproblem. Es ist ein Problem und es ist ein Job , den Sie angenommen haben und der entworfen wurde, den Sie geschaffen haben. Sie haben also dieses Website-Design erstellt, aber welches Problem hat diese Website? Also z. B. wenn sie unser Produkt Beach haben und Konversionen nicht all das sind. Nun ja. Das ist das Problem, das du zu lösen versuchst. Zum Beispiel, wenn das Bild des Produkts nicht zu groß ist und die potenziellen Käufer nicht verstehen, worum es bei dem Produkt geht. Vielleicht vergrößern Sie das Bild. Er positionierte die Knöpfe hier und da und erhöhte dann die Konversion längerfristig, z. B. den nächsten sechs Monaten um 20 Prozent. also das Problem, das du löst. Das sollte der zentrale Punkt sein, den Sie in Ihrer Fallstudie erwähnen, denn es zeigt Ihren zukünftigen Arbeitgebern erneut , dass Sie sich wirklich um kleine, kleine Dinge wie diese kümmern , was tatsächlich zu einem großen Problem werden wird , wenn es nicht rechtzeitig gelöst wird. Sag nicht, wie du eine App erstellst, sondern welches Problem du damit hattest und wie deine App es gelöst hat. Das ist genau das, was ich erwähnt habe. Also zum Beispiel, wenn wir sagen, bleiben wir bei der Produktseite. Wenn es nicht gut funktioniert, reagiert es nicht. Nehmen wir an, auf dem Desktop, Handy, tut mir leid, auf dem Desktop und auf Laptops und Doublets, sagen wir, jetzt kaufen, Schaltfläche funktioniert einwandfrei, aber auf Mobilgeräten geht sie verloren. Also vielleicht erhöhst du die Conversion in den nächsten drei Monaten um, sagen wir mal, zehn Prozent, indem du den Button einfach klebrig machst und das machst, es ist so, dann fängt es einfach an zu krabbeln wenn Benutzer beginnen, über einen bestimmten Punkt hinaus zu scrollen. Das ist also das Problem, das Sie lösen und Sie erhöhen die Konversionsrate um zehn Prozent. Dies ist nur eines der Beispiele. Natürlich wird jedes einzelne Projekt da draußen andere Probleme haben , die Sie als Designer lösen müssen. Das ist nur einer von ihnen. Als nächstes haben wir Herausforderungen, mit denen Sie konfrontiert waren. Gab es eine besondere Herausforderung, mit der Sie bei der Erstellung Ihres Designs konfrontiert waren? Herausforderungen können kurze Fristen, Benutzerprobleme, Entwicklung neuer Ideen, langwieriges Testen, Implementieren und ähnliches sein. Seien Sie kurz und lassen Sie Ihre Fallstudie eine Geschichte erzählen, aber geben Sie genügend Hintergrundinformationen, damit die Zuschauer verstehen können worüber Sie sprechen, ohne zu viele Details preiszugeben. Nehmen wir an, dass Benutzer, nachdem Sie erste Konzepte erstellt haben, Probleme damit Benutzer, nachdem Sie erste Konzepte erstellt haben, Probleme damit der App zurechtzufinden. Herausforderung, vor der Sie standen, besteht also darin, die Navigation zu vereinfachen. Sie haben es den Benutzern also leichter gemacht, das zu verstehen und schneller dorthin zu gelangen, wo sie hin müssen. Das ist also nur eine der Herausforderungen, z. B. Entwicklung neuer Ideen in diesem Fall, sagen wir, sagen wir, dass Sie selten originelle Konzepte erstellt haben und den Benutzern gefallen haben. Aber Gründer hatten z. B. diese neue Idee und sie glauben wirklich, dass sie sie im Moment brauchen. Sie müssen es also sehr schnell entwickeln und in bestehende Designs und bestehende Konzepte einführen bestehende Designs und bestehende , die Ihren Benutzern bereits gefallen haben. Das ist also nur eines von Millionen verschiedener Beispiele. Stellen Sie also sicher, dass Sie Ihr Gesicht herausfordern, aber noch einmal, seien Sie kurz. sie nicht mit Ihren Zuschauern an, mit diesem Teil Ihrer Fallstudie. Als Nächstes haben wir Konzepte, die Sie erstellt haben. Konzepte sind also keine fertigen Produkte, sondern Ideen und Versionen Ihres Designs. Konzepte können Papier-Wireframes sein. Sie können Wireframes sein. Noch einmal, was ich im vorherigen Video erwähnt habe, Sie können ihnen auf Ihrem Handy zeigen, wenn Sie sie verwenden. Sie können Ihren Benutzern zeigen, die sie verwenden was ich auch im vorherigen Video erwähnt habe. Dies können Papier-Wireframes, Wireframes, UI-Konzepte sein, aber auch beängstigende Konzepte sowie UI-Tests und Benutzertests. sind also all die Dinge , die Sie in die von Ihnen erstellten Konzepte einbeziehen können , und Sie können diese Konzepte in Ihrer Fallstudie verteilen. Was ich in einem früheren Video erwähnt habe und worauf wir in den nächsten Videos über die Gesamtstruktur eingehen werden. Zeige sie auf interessante Weise, aber tu es nicht. Dafür ist das Ergebniskapitel gedacht. Auch hier sind Konzepte nicht die fertigen Produkte. Es sind nur Ideen, die Sie umgesetzt haben. Zum Beispiel ist Paper Wireframe nicht das fertige Produkt, aber das Ergebnis schon. Achten Sie also noch einmal darauf, es nicht mit den Konzepten zu übertreiben und das Ergebnis am Ende deutlich zu zeigen denn am Ende des Tages kommt es auf das Ergebnis an was all die Wochen und Monate des Entwerfens, Testens und Arbeitens daran Sie zum Ergebnis dieses Projekts geführt haben . Stellen Sie also sicher, dass es hervorgehoben wird. Am Ende Ihrer Fallstudie haben wir Benutzertests, also direkt über das Testen Ihrer Benutzer und geben Ihnen Wissen darüber, was Sie gefunden haben wie sie mit Ihrem Konzept umgehen. Welche Antwort haben sie dir gegeben? Wie wurde Ihre Benutzertestgruppe aufgeteilt? welchem Alter gab es? Was ist ihr Beruf und so weiter. Zeige Bilder deiner Konzepte. Das Konzept wird neben dem Text getestet , um Ihren Zuschauern eine bessere Perspektive zu bieten. Was ich damit meine ist, dass Sie z. B. alle möglichen Grafiken erstellen können. So können Sie z. B. Grafiken von weiblichen Benutzern im Vergleich zu männlichen Benutzern anzeigen , wie viele Stunden sie mit Testen verbringen. Sie fanden, dass Option eins besser war als Option zwei, z. B. und Sie können all diese Dinge neben Ihrem Text in Form von Bildern, in Form von Grafiken und Grafiken anzeigen neben Ihrem Text in Form von Bildern, in Form von Grafiken und Grafiken und in die Form von Ikonen. Sie können all diese Elemente kombinieren, um wirklich zu helfen, eine Geschichte über Benutzertests und Abeba darüber zu erzählen , wie Sie all diese Probleme lösen , indem Sie Ihre Benutzer verwenden, die Ihnen beim Testen Ihrer Konzepte geholfen haben kommen Sie zum Ergebnis und zur fertigen Idee. Wenn Sie noch nie Benutzertests durchgeführt haben, empfehle ich Ihnen wirklich damit zu beginnen, es zu lernen, da es Ihnen wirklich helfen wird, das Ergebnis Ihrer möglichen Lösung zu verbessern Ihrer möglichen Lösung für die AP-Website, wo auch immer Sie sind. Aber Usertesting ist genau das. Es wird nur getestet, wenn die App oder Website live ist. Dann kommen die echten Benutzer ins Spiel. Diese Tests helfen Ihnen also wirklich , vor dem Start zu verstehen , wie Ihre Benutzer mit Ihrem Design interagieren werden . Wir haben das Ergebnis entworfen, oder? Etwa, wie lange es gedauert hat, wie viele Stunden Sie mit Iterationen verbracht haben, die Sie durchgemacht haben und so weiter. Hier benötigen Sie Text, zumindest weil das Design für sich sprechen wird, aber einige wichtige Informationen und Meilensteine aus Ihrem Projekt enthält . Was ich damit meine ist, dass ich zum Beispiel sechs Monate gebraucht habe, um das Projekt abzuschließen. In diesen sechs Monaten hatten wir z. B. 20 verschiedene Benutzertests durchgeführt, 40 verschiedene Wireframes. Wir haben 100 verschiedene Papier-Wireframes. Ich habe, ich weiß nicht, 200 Tassen Kaffee getrunken und solche Sachen. Stellen Sie also sicher, dass Sie all diese Informationen angeben, da sie Ihnen helfen werden , die Geschichte an Ihre zukünftigen Arbeitgeber und zukünftigen Nutzer zu verkaufen . Sie können die Teststunden, die Anzahl der durchgeführten Tests, wie gesagt, angeben , um zu diesem Design zu gelangen, sowie einige abschließende Gedanken und Teamkollegen werden Ihnen bei diesem Projekt helfen , wenn waren irgendwelche. Wenn Sie also Teamkollegen hatten mit Ihnen an diesem speziellen Projekt gearbeitet haben, stellen Sie sicher, dass Sie sie erwähnen. Wenn sie ihre Bilder nicht zeigen wollen. Wir kommen noch einmal zu dieser NDA- und Datenschutz-Sache zurück . Dann habe ich einfach ihre Namen erwähnt und du kannst jederzeit ihre Beacons-Profile hinterlassen. Du kannst die Dribble-Profile, das LinkedIn-Profil, solche Sachen verlassen . Und wenn Sie der wichtigste Teil dieses Teams sind, z. B. wenn Sie ein Teamgründer sind, wenn Sie der CEO Ihres eigenen Unternehmens sind, dann stellen Sie sicher, dass Sie sich prominenter zeigen als all diese anderen Leute weil Leute, die Sie z. B. als Agentur einstellen, sehen wollen, wer der Hauptmann oder die Hauptfrau in diesem Unternehmen ist . Sie werden also sehen wollen, wer hinter dieser Operation steckt. Und wenn du dich irgendwie über diese Leute stellst, nicht wie hier, ich bin so und diese Leute nicht so. Nein. Aber wenn diese Leute so sind, stellen Sie sicher, dass Sie sich so verhalten oder sich einfach über ihnen positionieren , nur um es Ihren zukünftigen Mitarbeitern zu zeigen. Ja, ich bin die Person, die diese Show leitet und du solltest mich kontaktieren, um z.B. über dein zukünftiges Projekt zu sprechen. Das ist also nur meine Struktur. Das ist die Struktur, die ich im Laufe der Jahre gefunden habe, nicht nur für mich selbst, sondern auch für viele Leute in der Branche, insbesondere für große Marken und große Designer. Also noch einmal, nicht alle Elemente dieser Struktur werden bei jedem einzelnen Projekt die ganze Zeit funktionieren . Aber die meisten dieser Elemente werden einwandfrei funktionieren. Stellen Sie also sicher, dass Sie sie erkunden und mit Bedacht einsetzen. Denn auch hier sind sie nur da, um Ihnen zu helfen, eine Geschichte zu erzählen und nur um Ihnen zu helfen, sich die mündliche Meinung zu Ihrem Projekt, Ihrem Arbeitsablauf und von Ihnen als Designer zu bilden die mündliche Meinung zu Ihrem Projekt, sich die mündliche Meinung zu Ihrem Projekt, Ihrem Arbeitsablauf und von Fallstudie York, wenn Sie alle Ihre Elemente so strukturiert haben , dass Benutzer ihnen leicht folgen können. 199. Fantastische Case: In diesem Video zeige ich einige tolle Wochenendbeispiele , die online zu finden sind. Am Wochenende gibt es Tausende verschiedener Beispiele, vor allem, damit Sie sie durchstöbern und sich auch einige andere Websites ansehen können . Du kannst dir persönliche Websites der YouTuber ansehen, die du bewunderst , um nach ihren Fallstudien zu suchen und zu verstehen, wie sie sie machen. Und stellen Sie sicher, dass keine einzelne Fallstudie den anderen Fallstudien identisch ist. Nicht einmal vom selben Designer, denn jede einzelne Fallstudie erzählt eine andere Geschichte. Es erzählt verschiedene Teile dieses Endprojekts und zeigt wirklich ein anderes Design. Also hier sind nur einige der neueren, die ich gefunden habe. Aber natürlich kannst du direkt hier springen und z. B. nach UI, UX Case Study suchen und es wird Tausende verschiedener Fallstudien ausspucken . Und natürlich kannst du sie durchstöbern und sehen, wie sie erstellt werden. Was wir hier haben, ist dieses Carsharing-App-Konzept, und das habe ich im vorherigen Video erwähnt. Stellen Sie sicher, dass Sie ein Titelbild hinzufügen, damit Ihre Benutzer es nur gut verstehen. Und natürlich kannst du in die Zukunft in UI UX wechseln, und dann wird dir die beste Arbeit auf Behance gezeigt , die vom Wochenendteam unterrichtet wird. Also noch einmal, im Konzept der Cost-Sharing-App können Sie sehen, dass Sie uns 2021 jede Papierzeit schulden und wer sie entworfen hat und jemand. Wir beginnen also mit einem Bild von einem Auto und ich werde nicht auf zu viele Details eingehen, da dieses Video 3 Stunden lang sein wird . Ich werde einfach zwischen ihnen springen, aber achten Sie einfach darauf, all diese Elemente zu beachten , die wir zuvor in diesem Kurs erwähnt haben . Das Projekt. Was war das Ziel des Projekts? Benutzerfluss? Also, wie Nutzer durch Ihre App, Farben und Schriften fließen werden. Sie haben also nicht das Designsystem, das ich erwähnt habe. Sie haben diese Farben und Schriften, was auch in Ordnung ist. Sie zeigen Ihren potenziellen Mitarbeitern nur , wie Sie es geschaffen haben. Wir haben Prototypen und Bildschirme, sodass sie direkt auf Wireframes auf dem Gerät umgestiegen sind. Was wir hier haben, ist eine Art Video. Wir haben also einen Ladebildschirm. Das habe ich erwähnt. Wir haben den Anmeldebildschirm, also die gesamte Navigation genau hier. Und Sie können sofort sehen, dass das wirklich wie ein Wireframe aussieht. Und ich denke, das ist ihr fertiges Produkt, aber Sie können dies natürlich auch in Wireframe-Phasen tun . Und wir haben das fertige Produkt hier, wie Sie sehen. Das war also doch das Wireframe. Wir haben also das fertige Produkt und wir haben diese Modelle perspektivisch, was ich erwähnt habe, wir haben diese Dunkelmodus-Modelle und am Ende haben wir Panzer. So kannst du dein Instagram Dribble auf Telegram oder was auch immer du willst, direkt hier, auf deiner persönlichen Website, verlinken auf Telegram oder was auch immer du willst, direkt hier, . Und natürlich sollten Sie diesen Designern Ihre Anerkennung aussprechen , sobald Sie ganz nach unten scrollen. Und das habe ich über dich, deine Teamkollegen oder was auch immer du am Ende einbeziehen möchtest, erwähnt deine Teamkollegen oder was auch immer du am Ende einbeziehen möchtest, . Sie können das also im Namen tun, natürlich auch auf Ihrer eigenen Website. Wir haben Gabel, also Entwicklung einer Anwendung für gesunde Lebensmittel. Und ich kann all diese im PDF verlinken und sogar unser Testament. Sie können also das PDF überprüfen, das dieser Klasse beigefügt ist, und Sie können einfach auf diese Links klicken, um diese Präsentation zuzugreifen, sodass Sie sie nicht durchsuchen müssen. Sie können sich sofort selbst davon überzeugen und dann einfach zu den Profilen dieser Ersteller springen. Und natürlich können Sie sehen, dass sie in jedem ihrer Profile noch viel mehr haben . Also genau die eine Abkürzung für dich. Was wir also wieder haben sind diese Modelle in der Perspektive, worum geht es bei dem Projekt, was sind die Ziele? So können Sie den Arbeitsumfang sehen. Was genau hat dieser Designer gemacht? Finden Sie die optimale Lösung? Also haben sie mit der Konkurrenz nachgeforscht. Wir haben unseren Flow also genau hier. Also von der Idee über die Erstellung von Hypothesen bis hin zur Prototypenentwicklung in der Forschung. Keiner dieser Schritte ist für Sie als Designer wichtig , da diese Schritte von Projekt zu Projekt ändern werden. Manchmal wird also eine Hypothese aufgestellt, manchmal nicht. Manchmal wirst du Nachforschungen anstellen müssen. In anderen Fällen haben Kunden für Sie recherchiert, Prototypen entwickelt und erneut das Designsystem erforscht. Also nicht alle davon sind es, ist das, was Sie einbeziehen müssen. Auch hier werden sie von Projekt zu Projekt unterschiedlich sein , Prototyping zur Überprüfung von Hypothesen. haben wir also genau hier. Wir haben hier 3D-Modelle. Also nur hier und da ein Gewürz. Was ich zuvor erwähnt habe, überwältigt Ihre Zuschauer nicht. Wir haben das fertige Produkt hier mit all diesen Hintergrundelementen, Hintergrundbildern. Sie können also den Spritzer Milch und all diese Pflanzen hier im Vordergrund sehen , wir können eine Person sehen, die das Modell hält. Also all diese genannten Elemente, die ich zuvor in früheren Lektionen erwähnt habe. Wir haben diese 3D-Modelle und all diese Elemente springen nach draußen, um zu zeigen, dass es mehr Elemente auf diesen Seiten gibt . Wir haben Bilder, die gut mit dem Text übereinstimmen. So können Sie Statistiken und Profile sowie zusätzlichen Verkaufstrichter sehen . So können Sie all diese Details sehen. Cashback bis zu 20 Prozent. All diese kleinen Details helfen also dabei, potenziellen Zuschauern eine Geschichte zu verkaufen. Klicken Sie noch einmal auf Wertschätzung, weil wir das wirklich schätzen. Wir haben eine Ausleihseite für Studio, Webdesign und Webentwicklung. Und Sie können diese beiden Designer sehen. Das habe ich also erwähnt. Wenn Sie ein Studio betreiben, können Sie mehrere Besitzer haben. Auf deiner Beacons-Seite. Website wurde mit Tilda- und Code-Modifikation sowie Konkurrenzanalyse erstellt , und wir können diese nette Struktur sehen. Also Einführungsleistungen, Arbeitsdienste, laufende Arbeit. Über uns. Also all das, wir haben Typografie genau hier. Ich werde etwas schneller scrollen, weil du sehen kannst, wie lang diese Website ist. Wir haben diese fantastisch aussehende Animation. Und ich würde zu diesen Mockups sagen , dass sie eine wirklich großartige Idee sind , weil sie es nicht tun. Das Alter ist nur ein einfacher Bildschirm. Es wird kein bestimmter Teil angezeigt. Und das sehe ich die ganze Zeit. Designer verwenden iPhones, die Generationen älter sind. Das habe ich auch für meine Produkte gemacht. Und das wirst du in einem zukünftigen Video sehen. Stellen Sie jedoch sicher, dass Sie, wenn Sie diese Mockups verwenden, um Modelle zu verwenden , die gesichtslos sind Im Grunde können Sie nicht erkennen, um welches Gerät es sich handelt, welche Größe es sich handelt. Und es wird immer auf Kurs bleiben. Und im Grunde, weil es die Elemente eines bestimmten Geräts nicht anzeigt. Wenn wir ganz nach unten scrollen, sehen Sie weitere Beispiele. Sie können sehen, wie es auf einem Telefon und auf einem Desktop aussieht . Englische und russische Versionen, wir können das Raster hier sehen, was natürlich eine wichtige Scrolling-Animation ist, was fantastisch ist. Sie können sehen, wie diese Elemente auch aus den ersten Tablets herausspringen , auf denen die Seite angezeigt wird. Und danke fürs Zuschauen. Also hier hast du Wertschätzung. Wir haben Autohändler-Websites, die in Zukunft in XD und in Zukunft in UI UX angezeigt werden. Schauen Sie sich das noch einmal an und Sie können mehrere Besitzer sehen. Wir haben also vier Leute hier. Also Autohändler-Websites für Mercedes Benz, Zusammenfassung der Ukraine. Deshalb wollten sie eine neue und effizientere Website erstellen , um die alten zu ersetzen. Also ausgezeichneter Brief und zeige das mündliche Problem, das sie haben. Die vorherige Website basierte auf dem offiziellen Benz-Template , was zu einer geringen Benutzerfreundlichkeit für Konversionsraten und dem Fehlen der erforderlichen Funktionen führte. Das ist also das Problem, das Sie sofort oben lösen. Deshalb habe ich gesagt, verschwende nicht zu viel Zeit, komm einfach zur Sache. Warum sollte man die alte Website neu gestalten? Das ist also das Problem, das sie Projektziele gelöst haben. Also kannst du weitermachen. Ich werde die Links noch einmal im PDF belassen , damit Sie alles über diese Details lesen können. Wir können schöne Bilder sehen und erleben wie es ist, hinter dem Steuer zu sitzen. Das sind also die Probleme, die sie gelöst haben. Also wann möchtest du eine Probefahrt vereinbaren, z.B. einfach laufen oder fahren, wie einfach ist es, sie auf deinem Handy zu buchen . Noch einmal, Bilder als Kompliment zu dem, wovon Sie sprechen. Einfache Einrichtung der Testfahrt. Sie können also sehen, dass sie in diesem Fall an jüngere Menschen vermarkten . Suche filtert also, wie sie das lösen. Und wir können noch ein bisschen weiter nach unten scrollen. Automatische Zahlungen, nur API, Darlehen direkt an die Kunden. Sie können diese nette Animation all dieser verschiedenen Bildschirme vom PDF-Katalog bis zum Online-Shop sehen. Dies ist auch das Problem, da die meisten von ihnen, insbesondere ältere Autohersteller, also alle Autohersteller dort Ihre PDF-Kataloge senden und Sie dann auf die Links in der PDF-Kessel , um in den Online-Shop zu gelangen, was in der heutigen Zeit lächerlich ist, starten Sie einfach zuerst einen Online-Shop. Sie wären jedoch erstaunt, wie viele dieser älteren Unternehmen dies immer noch tun. Volle Kontrollmerkmale und Funktionen. Sie können das Raster sofort sehen. Details wie Ränder, Dachrinnen, Spalten usw., Schriften und Farben. Wir haben genau hier diese nette Präsentation, die sich auf die Marke bezieht, was ich bereits erwähnt habe. Sie sehen hier keine gelbe Farbe, z. B. weil Gelb in den ursprünglichen Schriften und Farben nirgends zu sehen ist in den ursprünglichen Schriften und Farben Verwenden Sie es also nicht auch hier. Ich weiß es zu schätzen. Und schließlich haben wir dieses Mother Care, das in einer UI UX vorgestellt wird. Also der größte Integrator digitaler Lösungen in Moskau. Wir können also genau hier Farben sehen. Sie haben benutzt. Er ist ein britischer Einzelhändler , der sich auf Mutterschaftsprodukte im Allgemeinen für Kinder unter acht Jahren spezialisiert hat. Das ist es. Sie müssen nicht auf zu viele Details darüber eingehen, was sie tun. Wenn die Leute wirklich erfahren möchten, was sie tun, können sie auf den Link klicken und auch auf das Unternehmen zugreifen. Wir haben also einen Online-Shop, wie er im gesamten globalen Geschäft aussieht Es gibt jetzt über 100 Geschäfte für die Region, was großartig ist. Also App und ich mögen diese kleinen Textschnipsel wirklich. Design der Anwendung ist in einem leichten und modernen Stil gehalten, was wirklich zur Geltung kommt, das zeigt es den Projektleitern und Art Directors auf Anhieb. Aber jemand, der sucht, der wahrscheinlich in dieser Nische ist, wird nicht wissen, was der moderne Enlight-Stil ist. Sie mögen einfach den Overlook, aber sie wissen nicht , welcher Stil das ist. Und das hilft ihnen wirklich. Wenn sie Sie für ein solches Projekt kontaktieren, können sie auf diese Texte verweisen. Beispiel möchte ich wirklich, dass du diese App für mich in einem aufgehellten, modernen Stil erstellst , wie du es für diese Marke getan hast. Es hilft also wirklich, Ihren Benutzern eine Geschichte zu erzählen , und hilft später wirklich bei der Konversation. Wir haben hier also Icons. Vielleicht wird jemand nicht wissen , dass dies keine Illustrationen sind. Dies sind Icons in 3D. Es ist wirklich einfach zu lesen und zu verstehen. Wir haben Second Screen Web, viel Luft und eine klare Seitenstruktur. Auch hier hilft Text, eine Geschichte zu verkaufen, und diese Hintergrundelemente wie diese Farbe hier und diese Zahlen hier helfen auch wirklich dabei, eine Geschichte zu erzählen. Mir haben diese Texte, Schnipsel, sehr gut gefallen. Ich denke, sie machen einen wirklich guten Job. Also dunkle Version mit dunklem Hintergrund, mit den dunklen Mockups drinnen, man kann die Abstände sehen, wie gut sie funktionieren. Also ich denke, das sind ungefähr 300 Pixel oder so, vielleicht sogar ein bisschen mehr im Abstand. Und Sie können in all diesen Hintergrunddetails konsistente Abstände sehen . Achte auf die Farben. Die Farben, die sie verwenden, sind in der gesamten Präsentation zu finden. Es gibt wirklich keine Außenseiter-Farben. Sie können sehen, wie dies außerhalb des Mockups passiert. Noch einmal, das ist wirklich ein Kompliment, nun, wovon du sprichst. Ich mag diese Farben sehr. Mir gefällt sehr, wie sie eine Geschichte erzählen und wie die Bildschirme miteinander verbunden sind. Also vielleicht fangen wir von hier an, dann werden wir hören, dann werden wir von dort hören, wir werden hören. Also ich mag dieses Projektteam im Walkthrough-Stil sehr. Das habe ich erwähnt. Sie können sich also als Projektleiter hier ganz oben haben. Also Leiter UX. Und dann kannst du alle deine Teamkollegen unter dir auflisten . Wenn Sie es wieder einmal sind, sollten Sie das Hauptmerkmal und das wichtigste Mitglied dieses Teams zu schätzen wissen. Und Sie können den größten Integrator digitaler Lösungen in Moskau sehen , was für unseren Slogan, für Ihr Unternehmen großartig ist. Dies sind also noch einmal nur einige meiner Beispiele , die ich erst kürzlich gefunden habe. Aber wie ich bereits erwähnt habe, gibt es am Wochenende Millionen verschiedener Beispiele. Vor allem auch hier mag ich Beacons für Fallstudien sehr, weil sie dir wirklich helfen, all diese Details zu verstehen , die wir in diesem Kurs erwähnt haben. Und hoffentlich haben Sie in diesen Beispielen wieder einmal Beispiele gesehen, die hier gezeigt werden , werden im PDF verlinkt. Sie können einfach auf diese Links in einem PDF klicken und darauf zugreifen. Gehen Sie einfach noch einmal mit mir dieses Video über das, was wir in diesem Kurs erwähnt haben , um Ihnen wirklich zu helfen verstehe all diese Elemente , die du einbeziehen musst. Vergewissern Sie sich noch einmal, dass Sie es verstehen. Auch hier ist eine große Fallstudie anders. Jedes Projekt ist anders, also nicht alle Projekte, und ich hoffe, Sie haben in diesem Video gesehen, sind alles Fallstudien, aber alle sind völlig unterschiedliche Theorien, verschiedene Elemente, es gibt unterschiedliche Abstände. Sie verwenden ein unterschiedliches Tempo, sie verwenden verschiedene Farben und Schriften und Ikonographie und solche Dinge. Also noch einmal, sie verwenden alle dieselbe Struktur der Elemente, die ich erwähnt habe, aber sie folgen nicht alle genau derselben Struktur. Sie gehen auf unterschiedliche Weise vor, aber sie helfen dabei, eine Geschichte zu erzählen was das Endziel hier ist, Ihren Benutzern und Ihren Zuschauern zu helfen , zu verstehen, welche Rolle Sie dabei gespielt haben Projekt und welche Schritte haben Sie unternommen, um zum Endergebnis zu gelangen. 200. Contents schreiben: Wenn Sie den Text schreiben, der in Ihre Fallstudien aufgenommen werden soll, achten Sie darauf, dass Sie in einer Sprache schreiben , die Ihre Benutzer verstehen werden. Noch einmal, was wir zu dem zurückkommen , was ich zu Beginn dieses Kurses gesagt habe. Verwenden Sie nicht die Sprache, die zu kompliziert ist und Ihre Zielgruppe nicht anspricht. Achte darauf, mit ihnen wie mit einem Freund zu sprechen. Wenn das der Ton ist, für den Sie sich entscheiden möchten. Wenn das ein eher korporativer Ton ist, ernsterer Ton, ist das in Ordnung. Aber wenn das Ihre Benutzer sind, wenn Ihre Benutzer verstehen, was Sie in der sehr einfachen Sprache sagen, spielt es keine Rolle, ob das wirklich lässig oder professionell ist. Am Ende kommt es , dass sie verstehen, was du ihnen sagen willst. Also, wenn ich Sie ganz schnell zu diesem Beispiel zurückbringe , das ich im vorherigen Video erwähnt habe. Sie können diesen Text also sehen. Richten Sie also eine personalisierte Empfehlung ein, um die besten Produktangebote zu bieten. Wie Sie sehen können, wird hier nichts erwähnt. Also habe ich z. B. XD verwendet, um zwei Stapel zu erstellen, um sicherzustellen , dass der rechte Button größer ist, und einfach zu viele komplizierte, unnötige Details zu besprechen. Was sie sagten, ist eine persönliche Empfehlung, um die besten Produktangebote zu unterbreiten. Sie also bei der Erstellung Ihres Textes auf Details wie diese Mischung, Achten Sie also bei der Erstellung Ihres Textes auf Details wie diese Mischung, um kurz und prägnant zu sein, auf den Punkt zu kommen und Ihr Design einfach für sich sprechen zu lassen. Das ist der springende Punkt der Fallstudie von Designern ist, Ihr Design zur Schau zu stellen, nicht Ihre Schreibfähigkeiten oder Ihre Präsentationsfähigkeiten unter Beweis zu stellen, die im Laufe der Jahre von arbeiten. Sie werden also nicht gleich zu Beginn in der Lage sein, Präsentationen auf so hohem Niveau wie diese zu erstellen Präsentationen auf so hohem Niveau . Aber mit der Zeit, mit der Übung , mit Projekten, wirst du besser darin sein. Und dann kommst du auf das Niveau dieser Vorträge, das ich dir zuvor gezeigt habe, z. B. ein noch höheres Niveau. Sie am Ende dieses Videos noch einmal darauf, es kurz zu halten. Stellen Sie sicher, dass Sie in einer Sprache sprechen Ihre Benutzer und Ihre Zuschauer verstehen werden. Stellen Sie also sicher, dass Sie es gezielt ansprechen und den Zuschauern und Benutzern sprechen, die es verstehen und die Ihre Zielgruppe sind, weil Sie versuchen, eingestellt zu werden Ihre Zielgruppe sind, weil Sie oder Sie versuchen, sich zu präsentieren an Ihre Designer-Kollegen, die Ihre Zielgruppe sind, und sprechen Sie dann in dieser Sprache. 201. Tipps zur Präsentation: In dieser Lektion gebe ich Ihnen einige Präsentationstipps, je nachdem was Sie präsentieren. Also lass uns sofort springen. Dies ist eines unserer Produkte. Es heißt Wire Flow, Flow Charts und Sie finden es in einem Web Donor-Dotnet. Ich werde den Link im PDF belassen und Sie können darauf zugreifen. Und natürlich kannst du alle meine Kurse, all meine digitalen Produkte in meiner Mitgliedschaft bekommen. Ich werde auch den Link dazu hinterlassen. Wenn du interessiert bist. Du kannst auf ihren Joint klicken und erhältst dann Zugriff auf alles, was ich je erstellt habe. Also hier haben wir Waffelkarten, was nur eines unserer Produkte ist. Und ich wollte das zeigen, weil es ein bisschen anders ist als Ihre klassische Fallstudie. Dies ist trotzdem die Fallstudie, aber es ist eine Fallstudie für ein digitales Produkt. Es macht also die andere Geschichte. Es zeigt nicht wirklich all diese Details. Wir haben also 200 Bildschirme, 200 Elemente, zwei Papiere und wir haben helle und dunkle Versionen. Sie haben hier also kleine Textschnipsel , aber ich versuche, genau hier zu zeigen, also helle und dunkle Versionen. Und ich zeige das hier, also versuche ich nur, auch das Gesamtprodukt zu verkaufen. Wenn wir also hier nach unten scrollen, sehen Sie genau hier die Schaltfläche Jetzt kaufen, sodass Sie sofort kaufen können. Aber ich versuche, die mündliche Geschichte des Produkts selbst zu verkaufen . Also helle und dunkle Versionen, wenn wir nach unten scrollen, haben wir adaptive Komponenten. Komponenten, die ineinandergreifen, miteinander interagieren und Orte, Elemente verändern. Also, was ist enthalten? Ich versuche zu zeigen, dass es 400 Komponenten im Web und auf Mobilgeräten in drei Dateiformaten gibt. Photoshop, Sketch und XD sind also perfekte Komponenten, super organisierte Ebenen kostenlose Google Fonts to Paper Layouts, Video-Tutorial enthalten, um Ihnen den Einstieg zu erleichtern. Allein dieser hat uns geholfen, Dutzende von Exemplaren dieses Produkts zu verkaufen , weil viele dieser anfänglichen Designer nicht wirklich wissen, wofür es gedacht ist. Ich weiß nicht wirklich, wofür ich es verwenden soll, dann kaufe es. Und als sie sich das Video-Tutorial angesehen haben, sind sie einfach umgehauen. Ich habe im Laufe der Jahre viele verschiedene E-Mails darüber erhalten , wie Video-Tutorials meinen Käufern wirklich helfen, zu verstehen, wie sie meine Produkte verwenden UX Ihres Projekts verbessern können. Aus diesem Grund werden Sie diese Flussdiagramme verwenden. Durch die Erstellung von Flussdiagrammen und die vorausschauende Planung können Sie in den späteren Phasen des Projekts viel Zeit sparen den späteren Phasen des , sowohl für Sie als auch für Ihre Kunden, wodurch die Zeit reduziert wird, die Sie für Wireframes und später für UI. Es erklärt also sofort, wofür das Projekt, wofür das Produkt gedacht ist . Und es hilft wirklich, Geschichten zu verkaufen , weil Sie sehen können, wie all diese verschiedenen Elemente kombiniert werden , um diese Bildschirme zu erstellen. Es hilft Benutzern also wirklich zu verstehen wie sie dieses Produkt verwenden können , wenn sie es kaufen. Organisierter Schichtaufbau. Also teile ich all diese Screenshots hier. Und wenn Sie das nicht richtig sehen, kann ich viel näher hineinzoomen. Sie können also Photoshop sehen, Sie können Skizzen sehen und Sie können x D sehen, genau hier. Sie können diese organisierte Dateistruktur sehen. Also Flussdiagramme beliebiger Komplexität. Sie können also all diese Flussdiagramme auf unterschiedliche Weise kombinieren und verbinden . Bereit für den Druck. Also zeige ich nur eine US-Buchstabengröße und einen A4-Druck, sodass Sie diese vier Diagramme ausdrucken können, wenn Sie sie Ihren Kunden oder Ihren Teamkollegen persönlich zeigen müssen . Unbegrenzte Variationen. Also zeige ich hier nur ein paar verschiedene Varianten, damit du sie kombinieren kannst, wie du willst. Und dann zeige ich dieses Symbol, biete Laptop an, und ich zeige Web Elements, Light, das sind diese Lichtelemente, 200 Lichtelemente für Website-Flussdiagramme. Und ich beginne mit der Kategorie der Header. Sie können also sehen, wie Text in diesem Fall wirklich dazu beiträgt, die mündliche Geschichte und das Produkt zu mobilisieren, indem Sie ihn mit Bildern kombinieren. Also das habe ich gesagt. Ich sage nicht eine Web Elements-Folie. Also ich sage hier zum Beispiel nicht, sie haben alle einen weißen Hintergrund, damit sich Ihre Elemente von der Masse abheben. Weil es Ihren sehbehinderten Benutzern helfen wird Ihren sehbehinderten Benutzern das Produkt besser zu verstehen. Ich sehe nichts davon. Fab Elements beleuchtet 200 Lichtelemente für das Flussdiagramm von Websites, sodass Benutzer verstehen können, Oh, das ist nicht für Mobilgeräte, dies ist für Websites und Kategorien für Header. Sie können Inhalte, Slider, Futures-Portfolio usw. sehen. Und wenn wir noch weiter nach unten scrollen, haben wir mobile Elemente leicht, sodass Benutzer es dann erkennen können, okay, das ist also auch für Mobilgeräte. Fantastisch. Also ich habe 200 hier, 200 da, großartig. Wir haben also Kategorien für die Anmeldung und so weiter. Und dann, wenn sie ganz nach unten scrollen. Wie Sie sehen, ist die Präsentation extrem lang, da es Dutzende verschiedener Elemente gibt. Web Elements dunkel. Also, okay, ich kann also Hell und Dunkel kombinieren oder ich kann sofort hell oder dunkel verwenden. Fantastisch. So muss ich später keine Zeit verlieren, um diese hellen oder dunklen Elemente zu erstellen. Was ist überhaupt der Sinn dieser Präsentation? Es ist etwas langsamer zu laden, weil es riesig ist. Kannst du sehen, wie lange ich scrolle? Und das habe ich dir in den Lektionen zuvor zu sagen versucht . Drucken Sie Ihre Webflussdiagramme aus und zeigen Sie sie Ihrem Team oder Ihren Kunden und erarbeiten Sie mit ihnen das Layout. Und Sie können dieses Bild direkt hier in den Flussdiagrammen sehen. Gedruckte Notizen werden gemacht. Die Zusammenarbeit findet genau hier statt, oder Sie können Ihre mobilen Flussdiagramme ausdrucken und sie einem Team zeigen oder Kunden werden das Layout mit ihnen ausgearbeitet. Also hier haben wir ein Handy, wir haben dasselbe, wir haben die Band, wir haben all diese Details. Und ich fuhr fort und schloss diese Bilder. Zuerst kombiniere ich meine Flussdiagramme, ich drucke sie aus. Ich habe mir die Zeit genommen, einige dieser Änderungen vorzunehmen, einige dieser Skizzen anzufertigen. Und dann habe ich mir die Zeit genommen, all diese Elemente anzuordnen und ein Bild zu machen, denn das hilft wirklich, meinen Benutzern und potenziellen Käufern dieser Produkte eine Geschichte zu erzählen meinen Benutzern und potenziellen Käufern dieser Produkte eine Geschichte zu . Weil es ihnen wirklich hilft, ein bisschen besser zu verstehen , wie sie diese verwenden können. Zum vollständigen Hineinzoomen. Du kannst sehen, wie es runter geht, wische nach oben. Du kannst sehen, tu es nicht, also geh nicht her. Und Sie können all diese Elemente in diesen beiden Flussdiagrammen sehen . Und zum Schluss, was ich dir am Ende zeigen wollte, ist das. Scrollen Sie hier einfach ein bisschen nach oben. Kann Love by Web Donut lesen um Ihnen bei der Erstellung süßer Designs zu helfen. Also nur ein kleiner Slogan unten. Und auf meiner Website können Sie sehen, dass wir mehrere verschiedene Produkte aus derselben Kategorie haben mehrere verschiedene Produkte aus derselben Kategorie und klicken Sie auf Weitere Produkte anzeigen, um sich all diese anderen Produkte aus derselben Kategorie anzusehen oder verschiedene Kategorien. Aber wenn ich mein erstes Scrollen starte, kannst du sehen, wie lange dauern wird , bis ich ganz oben bin. Es ist also extrem lang und es wird nicht in Echtzeit geladen, aber Sie können sich ein Bild machen. Ich werde den Link, wie gesagt, im PDF belassen, damit Sie auf dieses Produkt zugreifen können, nur um es zu erkunden diese Präsentation zu sehen. Aber das ist die Fallstudie. Eine Fallstudie kann jedoch darin bestehen, sich selbst als Designer zu verkaufen, Ihre Dienstleistung oder Ihr Produkt zu verkaufen. Dies ist die Produktfallstudie. In diesem Fall, und das habe ich natürlich für alle unsere Produkte getan. Es wird also von Produkt zu Produkt ein bisschen anders sein von Produkt zu Produkt ein bisschen anders je nachdem, wie groß es ist, was es tut, was seine Zielgruppe ist und solche Dinge. Aber der Sinn dieses Videos ist es, Ihnen zu helfen, zu verstehen, dass die Fallstudie wirklich dazu da ist , Ihnen zu helfen, etwas zu verkaufen. Ob das Sie selbst als Designer sind, jemand anderes Sie anstellt, ob das ein Produkt wie in diesem Fall ist, ob es sich um ob das ein Produkt wie in diesem Fall ist, eine Dienstleistung handelt, die Sie anbieten, wie das Design von Websites, App-Design und solche Sachen. Stellen Sie immer sicher, dass Sie mit Ihren Benutzern sprechen, mit Ihren Zuschauern sprechen und ihnen wirklich helfen, zu verstehen, worum es geht. In Ihrer Fallstudie kann es, wie ich bereits mehrfach erwähnt habe, um den Service, das Produkt oder um Sie selbst gehen. Sie verkaufen sich also als Designer, der dieses Paket mitbringt. Stellen Sie also sicher, dass Sie sich darum kümmern. Achtet darauf, eine Geschichte zu erzählen und darauf zu achten , dass sie so einfach wie möglich zu verstehen ist. Denn nicht jeder, unsere Designer, nicht jeder ist Experte und nicht alle Kunden sind gleich. Einige Kunden werden es verstehen. Ja. Okay. Ich weiß, was Adobe XD ist, z. B. was unsere Stacks sind, was Ebenen sind, aber andere Kunden werden nichts darüber wissen. Die Mehrheit der Kunden da draußen besitzt nicht einmal einen Computer, ob Sie es glauben oder nicht. Sie erledigen also ihre ganze Arbeit auf ihrem Handy oder Tablet. Und die Desktop-App, die auf Desktop-Computern verfügbar ist, wird ihnen nicht bekannt vorkommen da sie überhaupt keinen Desktop-Computer haben. Stellen Sie also sicher , dass Sie all diese Dinge beachten und Ihre Fallstudie wird wie verrückt konvertieren. 202. ABSCHNITT 18 AUFGABE: Ihre Aufgabe für diesen Abschnitt ist es, eines Ihrer Designs zu verwenden, nur nicht aus diesem Kurs, da in diesem Fall jeder Designs aus dieser Klasse erstellen wird . Deshalb fordere ich Sie dringend auf, Ihr eigenes individuelles Design zu erstellen und nur in Ihrer Fallstudie zu präsentieren Wenn Sie keine Website haben, ist das völlig in Ordnung. Wie ich gerade erwähnt habe, können Sie Beacons verwenden. Es ist ein fantastisches Tool, um diese langen Foren-Fallstudien zu erstellen , und Sie können sie veröffentlichen, damit alle anderen sie sehen können. Sobald Sie sich tatsächlich an Kunden wenden oder möchten, dass Kunden angesprochen werden, können Sie sie auf die Fallstudie hinweisen und ihnen einfach Ihre Denkweise und Ihre Art, verschiedene Probleme zu lösen, zeigen . 203. ABSCHNITT 19 Einen Job finden: In diesem letzten Abschnitt des Kurses werden wir über verschiedene Orte sprechen, an denen Sie einen UI-UX-Job finden können, und über verschiedene Plattformen, die Sie dafür verwenden können. Also lass uns anfangen. 204. Freiberufliche VS: Wenn Sie nach einem Job suchen, müssen Sie zunächst die Unterschiede zwischen der Arbeit als Freelancer und der Arbeit in einer Agentur verstehen . Wenn Sie in einer Agentur arbeiten, haben die Mitarbeiter dieser Agentur natürlich eine in einer Agentur arbeiten, haben die Mitarbeiter dieser spezielle Stelle, um Sie zu finden, was zu tun ist, um neue tägliche Aufgaben zu finden, um Ihnen Ihr monatliches Gehalt zu zahlen und um alle Kosten zu decken, die Sie möglicherweise haben, z. B. Essen, Stromrechnung, Internetrechnung und vieles mehr. Außerdem wirst du an den meisten dieser Orte deine eigene Ausrüstung bekommen. Wenn Sie keinen eigenen Computer haben, z. B. Sie dort einen bekommen, sobald Sie tatsächlich anfangen arbeiten, im Gegensatz zu dem, was Sie gerade als Freelancer haben, werden Sie anfangen, ihn zu benutzen. Aber wenn Sie als Freelancer arbeiten, haben Sie natürlich viel mehr Freiheit zu arbeiten, wo immer Sie wollen, zu tun, was Sie wollen. Und zweitens, z. B. wenn es besser für deinen Zeitplan und für dein Leben funktioniert , weil nicht jeder gleich ist. Sie können entweder morgens oder abends arbeiten , da manche Menschen, insbesondere Menschen mit Familien, abends gerne mehr arbeiten, weil ihnen das zusätzliche Freiraum gibt weil die Kinder z.B. eingeschlafen werden müssen oder man abends viel mehr Freizeit hat als am Tag. Andere Leute arbeiten gerne sehr, sehr früh am Morgen haben ihre Aufgaben zu dieser Zeit erledigt , weil es ihnen passt. In dieser Hinsicht ist also jeder anders. Aber egal, wofür Sie sich entscheiden, wofür Sie sich entscheiden, es liegt wirklich an Ihnen. Eine Sache, an die Sie sich erinnern und die Sie aus diesem Kurs mitnehmen sollten , ist, dass Sie beides können. Sie können bei einer Agentur angestellt werden und gleichzeitig als Freelancer arbeiten. Oder du kannst als Freelancer beginnen und dann zur Agentur wechseln oder umgekehrt. Oder wie gesagt, Sie können beide gleichzeitig arbeiten. Es liegt wirklich an Ihnen, auch in Bezug auf den Anstieg der aktuellen Ereignisse in den letzten Jahren. Und auf der ganzen Welt gibt es viel mehr Stellen im Home-Office, und immer mehr Bierfirmen wechseln zu Telearbeit , weil sie festgestellt haben , dass ihre Ausgaben viel niedriger sind . weil sie nicht das gesamte Unternehmen in der gesamten Belegschaft des Gebäudes halten müssen. Sie müssen nicht für riesige Gebäude bezahlen, riesige Offiziere in all diesen Rechnungen. Also für eine große Anzahl von Unternehmen und es wird hier von Jahr zu Jahr wachsen. Für Sie als Arbeitnehmer ist es in beiden Fällen viel vorteilhafter , remote zu arbeiten. Also, entweder du arbeitest für eine Agentur oder als Freelancer, es besteht eine gute Chance , dass du entweder eine freiberufliche oder eine Vollzeitstelle findest , die du entfernen kannst. 205. Designwettbewerbe: Eine gute Option, insbesondere für Anfänger, ist die Teilnahme an Designwettbewerben. Und diese Kontexte können entweder für kleine Unternehmen oder für große globale Marken gelten. Und es gibt einen klaren Unterschied zwischen den beiden. Und in diesem Video zeige ich Ihnen einige Websites, auf denen Sie versuchen können diesen Wettbewerben teilzunehmen und Ihr Selbstvertrauen als Designer zu stärken. Entwickeln Sie Ihre Fähigkeiten im Gespräch mit den Kunden, verstehen Sie die Aufgabenstellung als Designer und bauen Sie auch Ihr Portfolio als Designer auf. Denken Sie daran, dass ich die Links in einem PDF für alles hinterlassen werde , worüber in diesem Abschnitt des Kurses gesprochen wird. Schauen Sie sich unbedingt diese PDF-Assembly an. Klicken Sie auf diese Links, damit Sie problemlos auf all diese Websites zugreifen und sie selbst ausprobieren können. Die erste Website, die wir hier haben , ist 99 designs.com. Es ist seit Jahren eine bekannte Website. Und das funktioniert so, dass Sie einfach die Wettbewerbe durchstöbern können und es funktioniert fast genauso. Schauen wir uns also z. B. Wettbewerbe an und finden wir heraus, dass alle Kategorien Web- und App-Design sein können, und alle Unterkategorien können Webseiten-Design oder WordPress-Designer oder ähnliches sein. Und du kannst es gleich hier sehen, also das ist der Preis, du bekommst, wenn du diesen Wettbewerb gewinnst. So viel Zeit haben Sie , um an diesem Kontext teilzunehmen, und so viele Designs gibt es bereits in diesem Kontext. Ein Tipp, den ich Ihnen nicht nur zu 99 Designs, sondern zu Websites dieser Art geben kann , ist, wenn Sie Kunden suchen können, die Feedback geben, von Kunden, die kein Feedback geben, warten Sie normalerweise bis zur letzten Minute. weil sie offensichtlich mit ihrer Arbeit beschäftigt und dann einfach zufälliges Feedback geben. willst du nicht. Sie möchten Kunden, die aktiv suchen und Feedback geben. Und sobald du einen dieser Wettbewerbe gewonnen hast, wirst du mit ihnen darüber sprechen, ihre Website auf Webflow zu erstellen ihre Website auf Webflow und ihnen zu zeigen, wie sie sie auf Webflow hosten können. Alles, worüber wir im Kurs bisher gesprochen haben. Aber was hier entscheidend ist , ist, dass Sie sie mit Ihrem Design überzeugen und dann zu Webflow wechseln, was Sie natürlich später für die Schulden in Rechnung stellen werden . zusätzlicher Service, aber 900 Designs, schauen Sie sich das unbedingt an. gibt es verschiedene Kategorien und genau hier mit den Unterkategorien, die Sie sogar nach Branchen auswählen können, können Sie Filter direkt hier anzeigen. Also all diese Dinge, also sieh es dir an, erstelle dein Konto. Und das Gleiche gilt für die Design-Crowd, eine Website, die nur ein bisschen weniger bekannt ist als 99 Designs, aber trotzdem kann man dort auch einige Kunden finden. Das Wichtigste, woran Sie sich bei 99 Designs und Design Crowd erinnern sollten 99 Designs und Design Crowd ist, dass diese für kleinere Kontexte bestimmt sind, aber das bedeutet, dass dies normalerweise die Unternehmen sind , bei denen die Preise z. Ich weiß nicht, 1.500 bis 1.000$, so etwas, was toll klingt. Sie können aber auch einige andere Unternehmen und einige andere Wettbewerbe für große globale Marken finden einige andere Unternehmen und , z. B. wenn Sie Websites wie Your Water aufrufen, was eigentlich die Marketinginnovationsplattform ist. Und du kannst alles über die Community in den Projekten und so etwas sehen . Was sie also tun, ist, diese Wettbewerbe für große globale Marken zu veranstalten. Sie können sich also wie Coca-Cola, Deutsche Bank, Mealer, Henkel, all diese Marken ansehen. Im Grunde funktioniert es, wenn Sie es erkunden, verbinden, damit Sie das Projekt erstellen können, dann können Sie es erstellen und auswerten. So funktioniert es eigentlich für Marken, aber für Sie werden das Projekt darin bestehen, sich hier für ein kostenloses Konto anzumelden. Sie erhalten die Projekte per E-Mail und dann können Sie an diesen Projekten teilnehmen . Ähnlich wie bei der Nonane Design - und Design-Crowd, aber auf Ihrem Wasser und Talenthaus, das ist die nächste Website, die ich dir zeigen wollte. Das können wirklich große Marken sein. So habe ich z. B. vor ein paar Monaten die E-Mail für eine Kampagne erhalten , die Mercedes-Benz, glaube ich, mit Talent House gemacht hat . Und sie wählten 50 verschiedene Designer aus, um ihnen Preise zu geben, von etwa 2.000€ bis hin die von etwa 2.000€ bis hin zu 10.000€ oder so etwas reichten. Und ich denke, der Hauptpreis war sogar ein Auto. Das kann also riesig sein, nicht nur wegen des Geldes, nicht nur wegen des Preises selbst, sondern auch wegen der Verbindungen, die Sie mit diesen Marken herstellen können. Und stellen Sie sich vor, Sie arbeiten mit einer Marke zusammen, sagen wir Mamas kleine Bäckerei oder was auch immer, und Mercedes Benz, welche ist besser in Ihr Portfolio aufzunehmen? Denk einfach darüber nach. Denken Sie also nicht nur über den unmittelbaren Preis nach, sondern auch über die Auswirkungen, die dieser Wettbewerb später auf Ihre Karriere haben wird sondern auch über die Auswirkungen, die dieser Wettbewerb später auf Ihre Karriere haben wird. Also noch einmal, dein Wasser- und Talenthaus, ich werde die Links in einem PDF hinterlassen. Schau sie dir unbedingt an. Sie können den Slip hier sehen. Schauen wir uns also ein kreatives Briefing an. Sie können den Pfau also genau hier sehen. Unwirkliche Engine. Das ist für einen der Filme, glaube ich. Ja. Sie können hier also alle möglichen Marken sehen. Bundesweit, Building Security, Absolut Vodka, eine große Marke. Noch einmal Downton Abbey, die Fernsehsendung, Seinfeld. also alle möglichen großen Marken sind also alle möglichen großen Marken hier und sie haben einen ordentlichen kreativen Slip. Natürlich können Sie die Aufforderung zur Einreichung von Einreichungen sehen. Sie können ihren Auswahlzeitraum einreichen. Das ist der Fall, wenn der Kunde dies bereits für CLEA ausgewählt hat, z. B. bereits die Gewinnerbeiträge ausgewählt und dann entweder in die Finalrunde geht oder einfach den Finalselektor auswählt, endgültige Auswahl, und machen Sie sie einfach alle Gewinner und geben Sie ihnen alle Preise. Schauen Sie es sich also unbedingt an. Wie gesagt, haben Sie Geduld mit diesen Websites denn die meiste Zeit werden Sie nichts gewinnen. Aber es mag so aussehen, aber du wirst tatsächlich eine Menge Erfahrung und eine Menge Soft Skills gewinnen Erfahrung und eine Menge , die du sonst nirgendwo lernen wirst. Sie müssen sich mit Kunden auseinandersetzen , damit Sie diese Soft Skills verstehen und sie in Ihrer zukünftigen Arbeit anwenden können . 206. Gig: Eine weitere Option, die für Sie funktionieren könnte, sind Gig-Plattformen. Und diese Plattformen sind im Grunde nur kleinere Projekte auf diesen Plattformen, auf die verschiedene Designer gebissen haben. Das bekannteste ist Upwork. Und Sie haben wahrscheinlich von Upwork gehört. Hier erstellen Sie Ihr Portfolio und können all diese Vorschläge Ihren Kunden vorlegen. So findest du Design und Kreativität. Wir können uns Arbeit suchen und Sie können hier sogar Ihre Fähigkeiten verbessern. Im Grunde funktioniert es also so, dass ein Kunde Beiträge oder ein Design-Briefing und verschiedene Designer im Grunde genommen für diesen Auftrag und für diesen Job bieten. Wie Sie das gewinnen können , ist, andere Online-Tutorials und Blogs zu erkunden andere Online-Tutorials und , denn das ist reine Kunst. Wie Sie es angehen können, um besser mit anderen Kunden vergleichbar zu sein , z. B. und mit anderen Designern. Daher kann ich Upwork nur wärmstens empfehlen, vor allem, wenn du gerade erst anfängst und wenn du es machst , es irgendwie wie ein Schneeball macht. Wenn Sie gerade erst anfangen, wird es schwierig sein, einen Kunden zu finden. Aber wenn Sie den Kunden finden, wird er oder sie Ihnen eine Bewertung hinterlassen. Diese Bewertung wird Ihnen helfen, später mehr Kunden zu gewinnen , sodass sie einfach in Kraft tritt. Gib nicht auf. Wenn Sie nicht sofort einen Job bekommen, reichen Sie einfach weiter ein, versuchen Sie es weiter und achten Sie darauf, alle Regeln und Richtlinien zu befolgen. Weil ich so viele Horrorgeschichten gehört habe in denen die Banddesigner versucht haben das System auszutricksen und Leute zu zwingen, ihnen Jobs und solche Dinge zu geben. Also tu das nicht. Achten Sie darauf, die Regeln so genau wie möglich zu befolgen. Daher werden Sie den Job viel schneller bekommen. nächste Plattform ist Freelancer , der genau das Gleiche tut. Stellen Sie also sicher, dass Sie genau hier klicken, um nach Jobs zu suchen. Und wie gesagt, ich werde den Link im PDF hinterlassen, Leute pro Stunde, genau dieselbe Geschichte. Stellen Sie also sicher, dass Sie alle drei erkunden und herausfinden, welcher für Sie geeignet ist. Vielleicht kannst du alle drei ausprobieren und sehen, wo du den Job bekommen kannst. Sie können hier die Interface-Designer sehen. Sie suchen also immer nach Leuten, die das tun. Und Sie können Webentwickler sehen und sie sogar Workflow-Jobs auf allen drei Plattformen finden . Und schließlich, was ich Ihnen zeigen möchte, ist von oben nach unten. Top-down ist ein bisschen anders, weil es eine dieser Bietsplattformen ist, aber das liegt nicht daran, dass sie das Überprüfungsverfahren haben. Und Sie können sehen, dass die drei besten freiberuflichen Talente der Welt auf dieser Plattform sind, weil sie bei ihrem Auswahl- und Einstellungsprozess sehr streng vorgehen, sobald Sie tatsächlich in die Top, Top, Top-Team. Sozusagen, sie werden dir ständig Jobs geben. Es liegt also an Ihnen, sich diese Jobs zu schnappen , sobald sie verfügbar sind. Und du kannst hier sogar als Webentwickler arbeiten, aber ich werde etwas später einige dedizierte Webseiten zeigen . Aber im Grunde funktioniert es so, dass Sie diesen Einstellungsprozess überstehen. Wenn du es durchmachst, wirst du Teil eines Teams sein, sozusagen eines virtuellen Teams. Und deshalb werden Sie viel mehr dieser Stellenangebote und Stellenangebote bekommen . Also gebe ich dir drei verschiedene Plattformen und Top Towel, also achte darauf, das auszuwählen, was für dich am besten geeignet ist. Wieder einmal, gleiche Breite, die Designwettbewerbe lassen sich nicht entmutigen, schnell daran teilzunehmen. Sie müssen all dies ausprobieren , bis Sie Ihre erste Position bekommen. Diese erste Position bringt dir deine zweite Position, dritte Position. Und dann wird es für Sie viel, viel schneller sein , Ihre zusätzlichen Jobs und Ihre nächsten Jobs zu bekommen , weil Sie all diese Erfahrung und all diesen Track auf diesen Plattformen haben werden . 207. Digitale Nomaden: Ein digitaler Nomade zu sein ist großartig, weil du arbeiten kannst, wo immer du willst, und du kannst leben, wo immer du willst der Welt leben und gleichzeitig arbeiten. Das ist es, worum es auf diesen Websites geht. Das ist es, worum es bei diesen Positionen geht. Denn die Zahl ist von Anfang an, dass Sie nicht an Ihr Haus gebunden sind, z.B. Sie können immer noch bei Ihnen sein und Sie können trotzdem an Ihrem Arbeitsplatz wohnen, diese Jobs. Aber ich versuche dir nur zu sagen , dass das hier der springende Punkt ist. Es geht ihnen gut, wenn jemand fern ist. Sie können also z. B. in Indien leben und für ein amerikanisches Unternehmen arbeiten, umgekehrt. Es spielt also keine Rolle, wo auf der Welt Sie sich befinden, Sie können in einem dieser Jobs arbeiten. Dies sind also nur drei der Websites, und Sie können viele davon bei Google finden Suchen Sie einfach nach Jobs für digitale Nomaden. Und der erste ist Digital Nomad Dot World Slash Job. So können Sie freiberufliche, Vollzeit-, Teilzeit- und befristete Vertragsarbeit finden . Also alle möglichen Dinge. Sie haben sogar Einsteiger , was in Ordnung ist. Sie können sehen, dass die meisten von ihnen remote sind , wo USA stehen, z. B. weil es eine Vollzeitbeschäftigung ist, aber vielleicht können Sie sogar versuchen , diesen Job aus der Ferne zu bekommen , wenn Sie mit ihnen verhandeln, das ist temporär, zB schlage ein, sagen wir ein Projekt oder etwas Ähnliches vor. Als nächstes haben wir Remote-Jobs und das sind funktionierende nomad.com Slash Jobs. Sie können hier also alle möglichen Jobs finden und Sie können sehen, dass Design genau hier ist, also können Sie das ******. Wenn ich also das Design überprüfen könnte, Sie UX-Designer, UI, Designer, Grafikdesigner und alle möglichen verschiedenen Jobs sehen . Dann haben wir Remote-Jobs für digitale Nomaden auf ok.com. Und Sie können nach Standort I suchen, wo sich Ihre Kunden auf der Welt befinden, sogar nach Gehalt Sie können das Gehalt direkt hier finden. Also 70 Ewigkeit, welche Vorteile auch immer, welche Vorteile sie haben. Das ist also eine großartige Website dafür. Und Sie können hier alle möglichen Ergebnisse finden. Aber lassen Sie uns, sagen wir, nach Entwicklerdesign suchen . Da haben wir's. Und wie Sie sehen können, hier alle möglichen Designjobs. Wir haben also Testingenieur, Stackingenieur, Designentwickler oder UI-UX oder alle möglichen verschiedenen Positionen. Schauen Sie sich unbedingt diese Website an und erinnern Sie sich an dieselbe Geschichte mit all diesen vorherigen Lektionen, einschließlich dieser. Wenn eine Sache fehlschlägt, versuchen Sie es mit einer anderen und dann mit einer anderen und sehen Sie, wohin Sie es bringen wird. Wenn Sie eher einen Remote-Job als einen Designwettbewerb bekommen , großartig, Sie können diesen Remote-Job in Ihr Portfolio aufnehmen, umgekehrt, es funktioniert genauso. Also vielleicht bekommst du drei Jobs gleichzeitig. Wer weiß das schon? Du musst nur konsequent sein, du musst hartnäckig sein, und am Ende des Tages wirst du diesen Job bekommen. 208. Designplattformen: Designplattformen können eine großartige Möglichkeit für Sie sein, einen Job zu finden. Und nicht nur der Job, sondern auch einige Freunde, die im selben Boot sitzen wie du, du kannst dich mit anderen Designern verbinden , du kannst gerne arbeiten, du kannst ihnen Nachrichten schicken. Du kannst tolle Ressourcen austauschen, die du online gefunden hast, z. B. Online-Kurse wie diesen, wink, wink oder du kannst deine Lieblingsbücher über UX-Design austauschen , vielleicht ein paar Tipps und Tricks zu mit bestimmten Kundentypen arbeiten. Es ist also eine großartige Möglichkeit, Ihr Netzwerk aufzubauen und sich mit anderen Designern zu verbinden , während Sie zu Hause bleiben. Ich werde drei meiner Lieblings-Websites zeigen und du kannst natürlich auch andere da draußen erkunden und finden. Die erste ist also Beacons und Behance ist eine der ältesten Websites, die es gibt. Es ist großartig, denn am Wochenende können Sie Ihr eigenes Portfolio aufbauen. Wenn Sie keine eigene persönliche Website haben, können Sie sie am Wochenende erstellen Das ist fantastisch, weil Sie diese Langform-Präsentationen erstellen können diese Langform-Präsentationen erstellen , die sich hervorragend für Fallstudien eignen. Und Sie können Ihre Kunden jederzeit auf diese Fallstudien hinweisen und sie könnten alle möglichen Details sehen , über die wir im Abschnitt Fallstudien dieses Kurses gesprochen haben . Außerdem ist es großartig, denn wie gesagt, Sie können sich mit der Community verbinden. Du kannst die Community erkunden und dich von ihr inspirieren lassen und du kannst auch lernen, weil sie großartig sind und sie haben genau hier diesen Livestream-Tab , den ich manchmal live mit ihnen streame, besonders mit Adobe XD und andere Adobe-Apps. Aber Sie können hier ganz einfach einen Job finden. Sie können also direkt hier oben zu Jobs gehen. Erstellen Sie natürlich Ihr Profil, dann können Sie freiberufliche Vollzeit- und Kreative einstellen und Sie können Jobs auch für später speichern. Also, wie macht man das, sagen wir freiberuflich. Und Sie können es direkt hier sehen, sodass Sie alle möglichen Kategorienfelder durchsuchen können. Oder ich kann z. B. durch UI UX filtern und Sie können UI UX überall, überall sehen. Und all diese sind freiberuflich tätig. Sie können sehen, dass wir 56 verschiedene freiberufliche Stellen haben. Wenn Sie sich bewerben möchten, bewerben Sie sich direkt bis zum Wochenende. Stellen Sie also sicher, dass Sie Ihr Profil haben, um sicherzustellen, dass Sie Ihre Arbeit veröffentlichen , die Sie zuvor gemacht haben. Und das war's auf Dribble. Es wird ein bisschen anders sein denn wenn du Arbeit suchst, ist deine Jobbörse kostenlos, aber für freiberufliche Projekte musst du ein Pro-Konto haben. Joe Board sieht also so aus. Wenn du also hierher gehst, kannst du filtern. Nehmen wir an, Sie sind ein Designer. Sagen wir UX, sagen wir Webdesign, klicken Sie auf Filter. Und es wird dir überall zeigen. Und Sie können sich durch einen Vollzeit-Freelance-Vertrag durchklicken und sich für remote öffnen. Und Sie können sehen, dass einige von ihnen fernsteuerfreundlich sind, z. B. dieser, dieser, dieser. So können Sie während Ihrer Zeit bei Freelance alle möglichen Stellen finden . Was Sie sofort sehen können, ist das Budget. Also einige davon, lassen Sie uns sie anhand der Benutzeroberfläche und des UX-Webdesigns filtern , genauso wie wir es zuvor getan haben. Ergebnisse filtern. Mal sehen, was wir haben. Wir haben heute also 16 neue Projekte veröffentlicht. Sie haben also viele neue Projekte, aber auch hier muss man für diesen speziellen Service Dribble bezahlen. Sie können also alle möglichen Positionen sehen und es ist großartig weil Sie das Budget sehen können. Sie werden das also auf die Weise angehen , die ich bereits zuvor erwähnt habe. Sie können ihnen also einen Designservice für dieses spezielle Budget anbieten und ihnen dann Webflow als Upselling anbieten. Du kannst ihnen jemanden sagen wie: Okay, wir werden dieses Design erstellen, was in Ordnung ist, aber du hast keinen Entwickler. Vielleicht kann ich das für Sie in Webflow entwickeln, es wird großartig für Sie sein, weil es einfach zu aktualisieren sein wird, es wird einfach zu verwalten sein, neue Informationen hinzuzufügen und einfach auszutauschen sein. Sie müssen sich nicht mit Plugins befassen, sondern mit Updates, allen möglichen Dingen. Und im Inneren ist Hosting enthalten. Es wird ziemlich einfach sein. Meiner Meinung nach Upsell, vor allem für kleine Unternehmen , die nicht wissen, was Sie tun. Und zu guter Letzt ist das eine unterhaltsame finale Webseite, die neu gestaltet ist. Und auf Designer News haben sie diese Jobbereiche. Sie können dort rechts klicken und nach Designentwicklung, Vollzeit- oder Teilzeitpraktikum, freiberuflich, ferngesteuert, oder Sie können sogar freiberuflich, ferngesteuert, oder Sie können sogar eine Zuordnung eingeben, wenn Sie Standort sein möchten. spezifisch. Und schließlich können Sie all dies in einem neuen Tab öffnen, aber Sie müssen Ihr Portfolio vorbereitet haben. Dies ist im Grunde ein Blog, also kannst du auf Geschichten klicken und verschiedene Arten von Geschichten lesen, dich mit anderen Designern verbinden, wie ich bereits erwähnt habe, aber sie haben diesen Jobbereich und den Podcast-Bereich. Sie können sich also durchklicken und es auf diese verschiedenen Stellen anwenden . Also los geht's. Gleiche Geschichte wie bei all diesen vorherigen, die ich dir in diesem Kurs bereits gezeigt habe. Stellen Sie sicher, dass Sie es testen, stellen Sie sicher, dass die Mischung dauerhaft konsistent ist, ein Portfolio in der richtigen Reihenfolge hat und sich einfach weiter bewerben. Einer von ihnen wird dir den Job besorgen. Sie können das noch verdoppeln, oder Sie können sogar noch weiter gehen und alle gleichzeitig ausprobieren. Es liegt schon an dir , deine Zeit zu erhöhen, aber achte darauf, dass du nicht aufgibst. Stellen Sie sicher, dass Sie sich konzentrieren , ausdauernd bleiben, und am Ende des Tages werden Sie einen Job bekommen. 209. Webflow: Abgesehen von diesen Methoden, über die wir bereits gesprochen haben, können Sie, wenn Sie ein Design erstellen und dann , auf zusätzlich einen Workflow-Service anbieten, spezielle Websites aufrufen denen Sie Webflow-Jobs finden können. Sie können zu Webflow gehen und sich als zertifizierter Webflow-Entwickler bewerben . Sie werden sagen, schicken Sie Ihnen auf diese Weise Leads und dann können Sie leicht einen Job finden. Sie können sich bei verschiedenen Agenturen bewerben. Sie können zu LinkedIn gehen, ein Profil erstellen und dort Ihr komplettes Webportfolio hinzufügen, z. B. zum Bereich der kostenlosen Webflow-Website, über den wir im Webflow-Teil dieses Kurses gesprochen haben . Und dann können Sie darauf hinweisen, dass Sie als Ihr Portfolio auf diese Weise Leads und Stellenangebote erhalten. Aber in dieser Lektion wollte ich nur zwei zusätzliche Websites zeigen, wollte ich nur zwei zusätzliche Websites zeigen denen Sie ganz einfach Workflow-Jobs finden können. Erstens: Wir werden keinen Code haben. So funktioniert es, wenn du es hier aufträgst und dann kam es mir vor wie ein oberes Handtuch. Sie werden dir ständig Jobs schicken. Sie müssen also verschiedene Tests durchlaufen , bei denen sie Ihr Wissen über Webflow testen können. Und du musst dein Profil ausfüllen, du musst ihnen ein Portfolio zeigen. Deshalb habe ich gesagt, dass Sie die kostenlosen Beiträge von Webflow, die Sie erstellt haben, in Ihrem Webflow-Profil anhängen kostenlosen Beiträge von Webflow, die Sie erstellt haben, in und in Ihr Portfolio aufnehmen können. Du kannst ihnen deine Erfahrung zeigen. Basierend auf deiner Erfahrung wirst du bezahlt. Gleiche Geschichte wie all diese verschiedenen Websites. Und schließlich haben wir Float oder Remote IO. Also eine Jobbörse Nummer eins für die Suche nach Webflow-Jobs und die Einstellung von Talenten. Sie können also direkt hier nach Standort, Beruf, Firmentyp und Erfahrung suchen . Also Einstiegsjob, z. B. um Designer hochzuladen. Da haben wir's. Nun, das Öl pro Designer-Entwickler überall. Also alle möglichen Jobpositionen. Ich denke, das ist eine fantastische Website. Ich werde einen Link dazu in einem PDF hinterlassen. Stellen Sie sicher, dass Sie es testen, probieren Sie es unbedingt aus. Und noch einmal, dieselbe Geschichte. Ich wiederhole mich in all diesen verschiedenen Lektionen, aber achte darauf, beharrlich zu sein. Wenn du diesen nicht bekommst, kriegst du den nächsten. also immer weiter, versuchen Sie immer, die Schritte zu wiederholen, die Sie getan haben, als Sie einen Job bekommen haben, und versuchen Sie, ein wenig innovativ zu sein , wenn Sie Ihren nächsten Job finden. Und stellen Sie sicher, dass Sie diese Webflow-Websites mit Design-Websites kombinieren diese Webflow-Websites mit Design-Websites und stellen Sie sicher, dass Sie Webflow-Upsells anbieten und sehen Sie, was für Sie besser funktioniert. Ist es nur Webflow, das Design anzupassen , wenn Sie entscheiden dass es viel einfacher sein wird, all Ihre Bemühungen in einem Korb zu konzentrieren , z. B. aber vorher müssen Sie alles ausprobieren noch einmal. 210. Portfolio: Eine letzte Sache an Jobs ist Ihr Portfolio, denn Ihr Portfolio wird Ihnen Ihren nächsten Job bescheren. Es ist also wirklich wichtig , einen guten zu haben. Und in dieser kurzen Lektion möchte ich Ihnen nur ein paar Tipps und Hinweise geben , wie Sie mit Ihrem Portfolio umgehen. Als Erstes sollten Sie sich also darauf konzentrieren , wenn Sie jemanden einstellen würden, wonach Sie bei dieser Person suchen würden. Also zum Beispiel, wenn wir in diesem Kurs die Website über Autos erstellen würden und sagen wir, dass alles, was Sie tun, ist Websites über Autos zu erstellen. Das wird also ein großartiges Portfolio für Sie sein , um sich für eine Stelle für ein Website-Design über Autos zu bewerben eine Stelle für ein Website-Design . Du siehst, wo ich hingehe. Sobald Sie also eine Nische gefunden haben, sobald Sie Ihr Portfolio auf eine bestimmte Weise organisiert haben , wird es für Sie viel einfacher sein, eine Stelle zu finden, aber stellen Sie sicher, dass Sie sich bewerben. Nehmen wir an, in diesem Fall bleiben wir bei diesem Szenario. Wenn du nur mit Autos mit Breite und über Autos mit Automarken arbeitest , wirst du dich für verschiedene Automarken bewerben und nicht für Visagisten und nicht für Musikkünstler und solche Sachen. Sie werden einfach all Ihre Bemühungen auf diese eine Nische konzentrieren . Sie können das später jederzeit ändern, aber besonders wenn Sie anfangen, ist es viel besser, wenn Sie all Ihre Bemühungen auf eine Nische oder eine Branche konzentrieren können , denn dieser Weg wird um es Ihnen viel einfacher zu machen, Ihr Portfolio zu erstellen, alle Ihre nächsten Leads anzusprechen und Ihr Verkaufsgespräch zu gestalten, z. B. um alle Ihre Dokumente gleich zu organisieren. Verträge, wie Angebote, Vorlagen, wie Design-Briefs. All diese Dinge, über die wir in diesem Kurs gesprochen haben werden für Sie viel besser und viel einfacher zu erledigen sein. Wenn Sie sich also nur auf eine Branche oder eine Art von Nische konzentrieren , können Sie auch mit lokalen Kunden zusammenarbeiten, die globale Kunden sind. Es ist nicht wirklich wichtig. Du musst immer dein Portfolio haben. Zum Schluss noch eine letzte Sache, die ich dir geben kann. Ein letzter Tipp, den ich Ihnen zu Ihrem Portfolio geben kann , ist, immer Ihr Bild darin zu haben. Weil die Leute dich gerne sehen. Die Leute arbeiten gerne mit Menschen und nicht mit irgendwelchen Marken oder Computern. Sie wollen sehen, wer du bist. Stellen Sie sicher, dass Sie es in Ihr Portfolio aufnehmen. Stellen Sie sicher, dass Sie einige Dinge angeben, die an Ihnen anders sind. Bist du laut oder leise? Magst du dunkle Dinge? mag leichte Dinge, wie ich es nicht weiß, auffällige Klamotten , die gerne im Dunkeln sitzen oder Witze , gerne Filme schauen machen, gerne Filme schauen, gerne Fahrrad fahren tausend Katzen haben. Was unterscheidet dich von all den anderen Designern da draußen? Es kann sehr klein sein, es kann sehr groß sein. Es spielt keine Rolle. Stell nur sicher, dass du das reingibst. Es wird Sie humanisieren anstatt dass Kunden Sie als Maschine betrachten. Denken Sie daran, dass diese Leute Tausende verschiedene Portfolios durchsuchen. Man muss sich also von der Masse abheben um ihre Aufmerksamkeit zu erregen und um engagiert zu werden. Stellen Sie also sicher, dass Sie genau das tun. Und schließlich, wenn Sie Ihre Arbeit formatieren, achten Sie darauf, von oben zu beginnen und ganz nach unten zu gehen, wie wir im Abschnitt UX-Fallstudien erwähnt haben. Achte darauf, dass du immer oben anfängst. Welches Problem Sie ganz unten in Ihrer Präsentation gelöst haben ganz unten in Ihrer , wird das Endergebnis sein. Abschließend möchte ich Ihnen für diesen Kurs viel Glück bei Ihrer Arbeit wünschen. Jagen. Achte darauf, niemals aufzugeben. Stellen Sie sicher, dass Sie hartnäckig sind, stellen Sie sicher, dass Sie konsistent sind. Es wird schwierig werden. Sie werden die ganze Zeit mit Ablehnungen konfrontiert sein, aber machen Sie es einfach weiter und Sie werden früher als später Ihren Traumjob finden. Vielen Dank, dass Sie sich diese Lektion und diesen Teil des Kurses angesehen haben. Und noch einmal viel Glück bei deiner Arbeit. Jagen. 211. Schlussfolgerung des Kurses und nächste Schritte: Da haben wir's. Wir erreichen das Ende dieses Kurses. Vielen Dank fürs Zuschauen. Und ich hoffe wirklich, dass Sie etwas Neues lernen, dass Sie einige dieser Erkenntnisse in Ihren Designprozess umsetzen werden. Und ich wünsche Ihnen wirklich viel Glück bei der Arbeitssuche. Wenn Sie noch keins haben, wenn Sie bereits den Wunsch haben , ein Muster zu finden oder dieses zu verbessern , indem Sie einige dieser Techniken verwenden , die Sie lernen werden. Denken Sie daran, falls Sie während dieses Kurses oder nach dem Anschauen dieses Kurses nicht weiterkommen , können Sie sich jederzeit bei mir erkundigen. Sie können mich jederzeit per E-Mail erreichen, z. B. oder über diese Website. Ich bin immer da, um dir zu helfen, und das tue ich gerne. Stellen Sie sicher, dass Sie einige dieser Methoden befolgen. Wenn sie nicht zu Ihnen passen, können Sie sie bis zu einem späteren Zeitpunkt überspringen. Wenn Sie eine Stelle in einem Unternehmen bekommen, sollten Sie immer untersuchen, wie deren Prozess aussieht, da all diese Unternehmen unterschiedliche Prozesse haben . Wenn Sie als Solo-Freelancer arbeiten, wird jeder Kunde etwas anders sein. Und wenn Sie mit diesen Plattformen arbeiten, wird jede Plattform etwas anders sein. Also versuche einfach zu verstehen, was für dich funktioniert , denn das ist hier das Wichtigste. Wenn Sie nicht gerne mit Moodboards arbeiten , verwenden Sie sie nicht. Wenn Sie nicht gerne mit Papier-Wireframes arbeiten , verwenden Sie sie nicht. Sorgen Sie sich nicht zu sehr für einen dieser Schritte auf dem Weg. Sie alle sind wichtige Schritte des Designprozesses. Aber wenn Sie unterwegs feststellen , dass einige davon für Sie nicht funktionieren, verwenden Sie sie einfach nicht. Machen Sie sich mit keinem davon zu viel Mühe. Denn wenn es bei dir nicht funktioniert, dann benutze es nicht. Nochmals vielen Dank, dass Sie sich diesen Kurs Schauen Sie unbedingt auf meinem YouTube-Kanal nach, dem Alex on Design ist. Ich werde es auch irgendwo in diesem Kurs verlinken. Ich erstelle ständig UX-Tutorials für Benutzeroberflächen. Ich erstelle ständig viele dieser verschiedenen Kurse und bin immer da, um dir weiterzuhelfen. Ich habe auch eine Facebook-Gruppe, also stellen Sie sicher, dass Sie dieser beitreten, wenn Sie Ihre Arbeit zusammen mit Ihren Kommilitonen dort posten möchten zusammen mit Ihren Kommilitonen dort damit sie Ihre Arbeit sehen können. Oder wenn du einfach mal wieder ein schnelles Feedback von mir bekommen möchtest. Und zum Schluss vielen Dank fürs Zuschauen. Und ich wünsche Ihnen wirklich viel Glück bei allem, was Sie im UX-Bereich tun. Pass auf dich auf.