Gestalten deiner ersten Website in Adobe Xd

1. Willkommen beim Kurs: Sagen Sie mir, möchten Sie lernen, wie Sie eine Website mit Adobe XD entwerfen und prototypisieren können? Nun, wenn du hier bist, würdest du es eindeutig tun. Und ich wollte mich bei Ihnen bedanken, dass Sie sich für diesen Kurs entschieden haben. Hey, ich bin David und hier lernen Sie, wie Sie Ihre erste Website mit Adobe XD entwerfen und prototypisieren. Und wenn Sie völlig neu in diesem Thema sind, lassen Sie mich Ihnen einfach sagen, dass Sie mit XD eine interaktive Website gestalten können, damit Sie Ihren Kunden nicht nur zeigen können , wie die Website aussehen würde, sondern auch wie es würde funktionieren. Und das Beste daran ist , dass XD mit einer kostenlosen Version geliefert wird, die wir in diesem Kurs verwenden werden. Es gibt also wirklich keine Entschuldigung, es wenigstens nicht auszuprobieren. Also habe ich diesen Kurs in zwei Hauptteile geteilt. Im ersten erfahren Sie alles, was Sie wissen müssen, um mit der Software loszulegen. So lernen Sie Dinge wie die Verwendung der Benutzeroberfläche, Erstellen von Dateien, die Verwendung der Tools, Plugins und Assets. Was sind die Unterschiede zwischen Design und Prototyping und nur realen Aspekten der Web-Typografie, Best Practices im Webdesign. Und im zweiten Teil werden wir die Ärmel hochkrempeln und uns die Hände schmutzig machen und eine Website entwerfen und prototypisieren. Und wir werden einen Desktop- und eine mobile Version einer Website für Freelancers für Webdesign erstellen. Und dabei werden wir tiefer darauf eingehen, Elemente hinzuzufügen und zu verwenden, die Sie am ehesten in echten Webdesign-Projekten verwenden werden. Also Dinge wie mobile Menüs, Schieberegler, Testimonials, Portfolios und vieles mehr. Und wenn das erledigt ist, lernen Sie, wie Sie Ihr Design entweder mit einem Kunden oder mit anderen Stakeholdern speichern und teilen Ihr Design entweder mit einem Kunden oder mit können. Der Kurs führt Sie also Schritt für Schritt vom Erlernen der Grundlagen der Verwendung von XD über das Entwerfen und Prototyping einer Website bis hin zum Speichern und Teilen. Wenn Sie also Webdesign-Freelancer werden möchten oder vielleicht einen Job in einer Webdesign-Agentur finden möchten. Adobe XD zu lernen ist wirklich ein Muss. Also springe direkt rein und ich hoffe wirklich, dich drinnen zu sehen. 2. Das findest du in diesem Kurs: Adobe XD ist eine äußerst beliebte Software, mit der Sie professionelle interaktive UI-Layouts entwerfen können . Wenn Sie einen Job als Webdesigner oder Designer für mobile Apps möchten oder wenn Sie Design-Freelancer werden möchten, ist XD definitiv eines der Programme, die Sie kennenlernen müssen, wissen Sie, Werfen Sie nur einen Blick auf Stellenangebote für Designer oder Designprojekte, die Freelancer zur Verfügung stehen. Viele von ihnen erwarten das Wissen von Adobe XD. Natürlich gibt es Alternativen. Aber wenn Sie bereits Programme wie Photoshop, Illustrator, InDesign verwenden , ist das Hinzufügen, Verlassen Sie Ihr Skill-Portfolio irgendwie natürlich. Ich möchte also, dass dieser Kurs Ihnen hilft, so schnell wie möglich Weblayouts zu erstellen. Ich möchte, dass Sie letztendlich ein unabhängiger Webdesigner und XD-Benutzer werden. Deshalb habe ich das in zwei Hauptteile geteilt. Zuerst lernen Sie also die Hauptkonzepte wie das, was x ist und wie man es herunterlädt. Außerdem lernen Sie das Programm kennen , indem Sie den Startbildschirm, den Arbeitsbereich erkunden und den Unterschied zwischen Design und Prototyping verstehen . Sie werden auch verstehen, wie Sie neue Dateien erstellen, Zeichenflächen verwalten und die Tools. Und Sie werden sich auch mit Plugins und Säuren vertraut machen. Sobald wir das alles wissen, werden wir mit der Erstellung des Designs fortfahren. Und in diesem zweiten Teil des Kurses lernen Sie, wie Sie Farb- und Design-Inspirationen für Ihre Projekte finden . So entwerfen und prototypisieren Sie dann ein Web-Layout und speichern und teilen Sie Ihr endgültiges Design. Wir werden Schritt für Schritt von der Installation und Nutzung der grundlegenden Funktionen von XD über das Entwerfen und Prototyping bis hin zur Fertigstellung Ihres Projekts weitergehen von der Installation und Nutzung der grundlegenden Funktionen von XD über das Entwerfen und . Und am Ende dieses Handbuchs sollten Sie in der Lage sein, Web-Layouts in Adobe XD selbstständig zu entwerfen und zu prototypisieren. 3. Was ist Adobe Xd?: erfahrenen Design von Adobe, kurz Adobe XD, können Sie interaktive digitale Designs wie Websites und mobile Apps entwerfen und prototypisieren interaktive digitale Designs wie . Wir sind also zurück am Tag, um die Funktionalität zu erhalten , die es Ihren Kunden und Entwicklern ermöglicht , die Interaktivität zu sehen, die Sie für das Design entwickelt haben, müssen Sie eine App verwenden, um Design und noch ein Prototyp. Zum Beispiel wie Marvel App. Mit Adobe XD. Sie können alles in einer einzigen App machen. Aber es gibt auch noch eine Sache, die Sie hier tun können. Nachdem Sie Ihr Projekt entworfen und prototypisiert haben, können Sie es mit Kunden und Entwicklern teilen. Und die Freigabefunktion InDesign beschränkt sich nicht nur auf das Speichern und das anschließende Senden der Datei. Es verfügt aber auch über eine leistungsstarke Funktion zum Generieren von Code, die benötigt wird, um die Funktionalität Ihres Designs neu zu erstellen. Und dies kann Entwicklern sehr helfen, Ihr Design auf einem Webserver zum Leben zu erwecken. Kurz gesagt, XD können Sie Ihre Projekte wie Websites oder mobile Apps gestalten . Prototypieren Sie Ihr Design, was bedeutet, dass Sie Ihren Designelementen verschiedene Effekte und Funktionalitäten hinzufügen können verschiedene Effekte und Funktionalitäten . Und Sie können Ihre Projekte auch mit automatisch generiertem Code teilen , der in der Web- und App-Entwicklung verwendet wird . Da x D von Adobe stammt, arbeitet es gut mit anderen Programmen in der Creative Cloud Suite zusammen, insbesondere mit Photoshop, Illustrator und After Effects. Wenn Ihnen diese Design-Tools also nicht ausreichen, können Sie andere Softwareteile verwenden, um Ihre Assets zu entwerfen und sie dann auf XD auszudrucken. Normalerweise entwerfen Sie also ein Logo oder benutzerdefinierte grafische Elemente wie Symbole oder Illustrationen. In Illustrator bearbeiten Sie die Fotos in Photoshop oder vielleicht in Lightroom und fügen sie dann Ihrem XD-Projekt hinzu, um einen neuen Prototyp zu erstellen und ihn mit Entwicklern und Kunden zu teilen. Natürlich bedeutet das nicht, dass Sie Ihr Layout von Anfang bis Ende nur mit XD gestalten können . Ich bin sicher, dass du das kannst. Wenn zum Beispiel alle Kundenvermögen bereits an Sie geliefert wurden, können Sie einfach direkt in XD springen und mit der Gestaltung des Layouts mit den bereitgestellten Tools beginnen , über die wir übrigens werde ein bisschen später mehr reden. Und wenn Sie andere Programme aus der Creative Cloud Suite verwendet haben , insbesondere Illustrator und Photoshop. Einige Aspekte der Verwendung von XD werden für Sie viel einfacher zu verstehen sein. Zum Beispiel ist das Layout der Benutzerschnittstellen ähnlich. Das Konzept der Kunsttafeln, spezifische Optionen für die Tools, die Tools selbst usw. Wenn dies jedoch Ihre erste Begegnung mit Adobe-Software ist , sich keine Sorgen, wir werden es übernehmen nett und langsam. Sie werden sich also mit XD vertraut machen und hoffentlich in der Lage sein, das Programm selbstständig zu nutzen. Es lohnt sich also auf jeden Fall, Adobe XD auszuprobieren, besonders seit Ende 2021. nur das Programm ausprobieren , Sie können nicht nur das Programm ausprobieren , sondern auch die kostenlose und fast ungeschnittene Starterversion herunterladen und installieren , über die wir als nächstes sprechen werden. 4. Die Starter: Seit Ende 2021 wird Adobe XD mit einem kostenlosen Starter-Tarif geliefert. Werfen wir einen kurzen Blick darauf, worum es geht. Der Starter-Plan ermöglicht es Ihnen , alles zu tun, was Sie können. In der Premium-Version. Dies bedeutet, dass es keine Beschränkungen für die Anzahl der Dateien gibt , die Sie erstellen können. Die Tools, die Sie innerhalb des Programms verwenden können, die Plugins-Bibliothek und alle anderen verfügbaren Erweiterungen, die Tools und Optionen für das Prototyping und das Speichern und Exportieren Ihrer Projekte als Images. Es scheint also, als würdest du alles bekommen, was du brauchst, oder? Aber es muss einen Haken geben. Und natürlich gibt es eine oder mehrere. Selbst im Startplan sind die Freigabe-Funktionalitäten eingeschränkt. Es ist nicht so, dass Sie Ihre Projekte nicht teilen können oder dass die freigegebene Datei in irgendeiner Weise beeinträchtigt ist. Sie können jedoch immer nur eine Datei teilen. Darüber hinaus können Sie Ihre Entwürfe nur bis zu zweimal in PDF exportieren . Die Dokumenthistorie ist auf nur zehn Tage begrenzt, Gegensatz zu drei Tagen im bezahlten Plan. Sie haben Zugriff auf nur grundlegende Adobe-Schriftarten. Und Ihr Cloud-Speicher ist auf zwei Gigabyte begrenzt. Wenn Sie also in einem Team von Designern, Entwicklern und Projektmanagern arbeiten , bearbeiten Sie höchstwahrscheinlich viele verschiedene Projekte gleichzeitig. Dies bedeutet, dass nur eine Datei innerhalb eines Teams geteilt wird , eine große Einschränkung darstellt. Wenn Sie jedoch gerade als Webdesigner anfangen oder einen Job als einen Job finden möchten, können Sie XD einfach mit dem Standardplan lernen. Und das sind großartige Neuigkeiten, insbesondere wenn man bedenkt, dass die wenn man bedenkt, dass die Produkte von Adobe ein Industriestandard sind und nicht billig sind. Alles in allem können Sie also eine Software erlernen, die auf dem Arbeitsmarkt sehr gefragt ist und Sie sie frei nutzen können. Nehmen wir an , Sie sind einer der Personen, die Sie lernen möchten, oder probieren Sie einfach Adobe XD aus. Sie denken darüber nach, Grafikdesigner, Freiberufler zu werden . Oder Sie denken darüber nach, einen Job als Grafikdesigner zu finden . Und du willst nur sehen, ob X d etwas für dich ist. Für diese Zwecke wird der Starterplan mehr als genug für Sie sein. Und in diesem Kurs werden wir das benutzen. Lassen Sie uns jetzt sehen, wie Sie es herunterladen und installieren können. 5. So lädst du Adobe Xd herunter.: Weißt du, ich muss sagen, dass es nicht so einfach ist zur Download-Seite von x, dem Starterplan, zu gelangen. Die Website von Adobe bemüht sich wirklich, Sie entweder dazu zu bringen , die Testversion oder die Vollversion zu erhalten, aber das ist nichts, was wir nicht bewältigen können. Der beste Weg, um die Download-Seite zu finden, ist einfach Googeln des Adobe XD Starter-Plans. Sie können auf den ersten Link klicken, der angezeigt und Sie werden zur Adobe-Site weitergeleitet. Dort sehen Sie eine blaue Linkschaltfläche mit der Aufschrift „get XD“, die beim Anklicken versucht, einen Download-Link zu öffnen. Wenn Sie den Creative Cloud Desktop bereits installiert haben, versucht Ihr System, die Datei mit dieser App zu öffnen. Wenn nicht, werden Sie möglicherweise aufgefordert, es herunterzuladen, obwohl ich raten würde, es trotzdem zu installieren. Sie können wie zuvor Google Creative Cloud Desktop App und klicken Sie einfach auf das erste Suchergebnis auf der sich öffnenden Seite Klicken Sie einfach auf die Schaltfläche Creative Cloud Link herunterladen und den Download der Prozess wird beginnen. Sobald die App installiert ist, müssen Sie sich anmelden oder anmelden , wenn Sie kein Adobe-Konto haben. Und im nächsten können Sie XD über den Creative Cloud-Desktop installieren über den Creative Cloud-Desktop oder einfach diesem direkten Download-Link folgen, nicht wie Sie XD wählen , wird installiert und einsatzbereit sein. Ich denke, der einfachste Weg dieser ganzen Sache wäre, zuerst ihre Creative Cloud Desktop App zu installieren und dann einfach XD zu installieren. Auf diese Weise vermeiden Sie den Ärger, irgendwo nach dem direkten Link und der Seite von Adobe zu suchen irgendwo nach dem direkten Link und der und versehentlich die Uhr zu installieren, Sie wirklich nicht wollten. 6. Der Home-Bildschirm: Wenn Sie XD öffnen, sehen Sie zuerst den Startbildschirm , der im Allgemeinen in zwei Haupträume unterteilt ist. Auf der linken Seite sehen Sie einige hilfreiche Links, mit denen Sie bestimmte Aufgaben ausführen können. Und je nachdem, auf welchen Link Sie links klicken, ändert sich der Bereich auf der rechten Seite und ermöglicht es Ihnen, Ihre Dateien zu steuern. Werfen wir also einfach einen Blick auf diese Links. Also haben wir zuerst eine neue Akte bekommen. Dies ist diese große blaue Schaltfläche, die Taylor, wenn Sie darauf klicken, eine neue Datei mit einer Standard-Kunsttafel erstellen . Dann haben wir den offenen Link bekommen , der es ermöglicht, einen Photoshop wie eine PSD-Datei zu öffnen, und Illustrator , eine KI-Datei, eine Skizzendatei oder eine XD-Datei. Wir haben auch den Home-Link, dem Sie zum Startbildschirm zurückkehren können. Wir haben auch den Learn-Link, Sie im Grunde genommen zu Adobes offiziellen XD-Leitfaden führt. Als Nächstes finden Sie auf der Registerkarte „Dateien“ Ihre Dateien. Und hier finden Sie alle Ihre zuvor erstellten Dateien. Wenn Sie also einfach auf einen von ihnen klicken , wird dieser Phi geöffnet. Wenn Sie die Datei jedoch mit dem kleinen Feld in der oberen linken Ecke auswählen , können Sie eine der Steueroptionen verwenden , die oben rechts angezeigt wird. Hier können Sie Ihre ausgewählten Dateien umbenennen, löschen und verschieben. Und wenn oben rechts keine Datei ausgewählt ist, sehen Sie eine Option zum Erstellen eines neuen Ordners, in den Sie Ihre Dateien verschieben können. Also wird auf eine geklickt, Sie sehen das Dialogfeld Neuen Ordner erstellen. Nennen Sie also einfach Ihren Ordner und klicken Sie auf Speichern. Sobald der neue Ordner erstellt wurde, können Sie die Dateien auswählen, die Sie einlegen möchten , und klicken Sie einfach auf Verschieben zu Link, die Sie in der oberen rechten Ecke sehen werden. Dadurch wird ein neues Fenster geöffnet, in dem Sie einfach auf Verschieben klicken können, um die Dateien zu verschieben. Oder Sie können schnell einen neuen Ordner über den Link erstellen , den Sie in der unteren linken Ecke finden. Als Nächstes wurden wir mit dir geteilt. Wenn also jemand eine Datei mit Ihnen teilt, wird sie hier angezeigt. Wir haben auch Links verwaltet. Wenn Sie also auf diesen Link klicken, werden Sie zu Ihrem Adobe-Konto weitergeleitet. Genauer gesagt für einen Abschnitt, in dem die von Ihnen geteilten Schriftarten sichtbar sind. Und unter dieser gelöschten Registerkarte werden die Dateien, die Sie entfernt haben, hier gespeichert. Nur für den Fall, dass Sie Ihre Meinung ändern und sie wieder zum Leben erwecken möchten, und sie wieder zum Leben erwecken möchten, wählen Sie dazu einfach die Datei aus und es wird die Möglichkeit haben, sie wiederherzustellen oder zu löschen. Unter den Zeichenflächenvorgaben können Sie eine der vordefinierten Dateien mit Art-Board-Voreinstellungen auswählen . Wenn Sie auf einen von ihnen klicken, erhalten Sie eine Datei mit der Standard-Kunsttafel. Wenn Sie jedoch auf einen kleinen grauen Pfeil auf der rechten Seite klicken , sehen Sie eine Liste anderer verfügbarer Zeichenflächen. Alternativ können Sie die benutzerdefinierte Voreinstellung auswählen und einfach die Werte für Breite und Höhe unten eingeben. Und in letzter Zeit werden Sie alle Dateien sehen, an denen Sie kürzlich gearbeitet haben. Klicken Sie einfach auf einen, um es zu öffnen. Wie Sie sehen können, wurde dieser Startbildschirm erheblich optimiert damit Sie an Ihren Dateien arbeiten und sie freigeben können, ohne zu viel darüber nachzudenken. Wenn Sie nur so verstehen , dass das, was Sie links klicken, Effekte, die Sie rechts sehen. Arbeit mit diesem Bildschirm wird sehr, sehr einfach und intuitiv. 7. Der Arbeitsbereich: Werfen wir jetzt einen Blick auf XD ist Workspace. Schließlich ist dies der Ort, an dem Sie die meiste Zeit mit dem Programm verbringen werden . Also, wenn Sie zuvor wie jede andere Designsoftware verwendet haben, insbesondere die neueste Designsoftware von Adobe. x verstehen, könnte dieser Workspace etwas einfacher für Sie sein. Es ist sehr logisch in zwei Hauptteile unterteilt und stark stromlinienförmig, vielleicht manchmal etwas übervereinfacht nach meinem Geschmack. Aber alles macht den Designprozess zu einem Server, der nicht so reibungslos wie möglich ist. Oben hast du also das Hauptmenü. Und hier finden Sie alle Hauptbefehle , die in zwei Registerkarten wie Datei, hinzugefügt, Objekt, Plugins, Ansicht, Fenster und Hilfe getrennt sind . Und natürlich entsprechen ihre Namen mit was Sie finden könnten, wenn Sie sie anklicken. Natürlich sind wir in der Mitte zum Hauptarbeitsbereich für das Design gekommen , das ist der erste Arbeitsbereich, den Sie sehen werden, sobald Sie eine neue Datei starten. Und natürlich sind alle Ihre Design-Tools da. Aber natürlich haben wir auch den Prototyp-Workspace. In diesem Workspace können Sie die interaktiven Optionen hinzufügen und steuern, die Sie Ihren Designelementen zuweisen können. Und wir haben auch den gemeinsamen Arbeitsbereich. Und hier finden Sie alle Tools und Optionen, die für die gemeinsame Nutzung Ihres Projekts unerlässlich sind. Wir hören auch, wie in der oberen rechten Ecke, dass Sie diese Vorschau auf einer Geräteoption sehen können. Und Sie können ein mobiles Gerät mit Ihrem Computer verbinden. Und dann können Sie mit dieser Funktion eine Vorschau Ihres Designs anzeigen. Jetzt haben wir auch diese Vorschau in der XD-Button, Sie Ihr Design mit zusätzlicher Interaktivität in der Vorschau anzeigen können. Ihr Projekt wird sich so verhalten, als wäre es live in einem Webbrowser angesehen worden. Und auf der rechten Seite sehen Sie wie kontextbezogene Optionen und Einstellungen, die als Eigenschafteninspektor bezeichnet werden. Dieser Schmerz ändert sich also jedes Mal, wenn Sie ein anderes Gestaltungselement, ein anderes Werkzeug oder einen anderen Arbeitsbereich auswählen . Es gibt Ihnen also nur die Optionen und Einstellungen, die dem Element oder dem von Ihnen ausgewählten Werkzeug entsprechen. Natürlich haben Sie in der Mitte Ihre Zeichenfläche und alles, was darauf ist, wird in der endgültigen Datei gerendert. Alles, was draußen fällt, wird nicht sichtbar sein, sobald Sie Ihre Datei exportieren und alles, was sich außerhalb Ihrer Zeichenfläche befindet, Sie können es einfach als Ihre Kritzeleien sehen , so etwas. Die Zeichenfläche liegt grundsätzlich auf einer Pasteboard. Es ist im Grunde ein Ort, an dem Sie Ihre Designelemente wie Ihre Bilder, Ihre, Ihre Symbole oder Illustrationen aufbewahren würden Ihre Designelemente wie Ihre Bilder, Ihre, , vielleicht einige Textstücke, solche Dinge. Hier ganz unten links haben Sie Ihren Plugins-Manager. Und hier können Sie alle Ihre Plugins verwalten , über die wir übrigens später sprechen werden. Wenn wir dann eine Ebene nach oben gehen, haben wir unsere Schichten. Und natürlich sehen Sie hier alle Ihre Elemente wie Zeichenflächen, Gruppen, Designelemente, all diese Dinge. Wir haben auch genau hier , dass Vermögenswerte dokumentiert werden. Und hier können Sie Farben, Charakterstile, Komponenten und Videos hinzufügen und verwalten . Und natürlich haben wir unsere Tools genau hier. Es gibt jedoch einige Tools , die hier nicht sichtbar sind, die Sie jedoch mit Tastenkombinationen zugreifen können. Und wieder werden wir später darüber sprechen. Kennenlernen des Arbeitsbereichs ist daher unerlässlich für einen schnellen und produktiven Designprozess. Ich ermutige Sie, mindestens ein wenig Zeit damit zu verbringen , nur um sich mit den wichtigsten Aspekten von x, diesem Arbeitsbereich, vertraut zu machen. 8. Design vs. Prototyping in Xd: Wenn Sie in einem Team von Designern und Entwicklern arbeiten oder einfach nicht alleine mit Ihren Kunden arbeiten, ist es sehr wichtig, Ihnen vorstellen zu können , wie Sie möchten Ihr Design mit dem benutzer. Und das Entwerfen, Anwenden dieser Interaktionen wird als Prototyping bezeichnet. Kurz gesagt, wenn Sie visuelle Elemente Ihres Projekts hinzufügen, entwerfen Sie und fügen Interaktionen zwischen diesen Elementen oder vor allem zwischen dem Benutzer und die Design-Elemente. Sie erstellen Prototyping und Adobe XD gibt Ihnen die Möglichkeit beides zu tun. Verwenden des Design-Workspace. Sie können Ihrem Projekt visuelle Elemente hinzufügen. Und mit dem Prototyp-Workspace können Sie vorstellen, wie Sie sich die Interaktionen zwischen dem Benutzer und Ihrem Designer vorgestellt haben. Und dies kann natürlich sehr dazu beitragen Ihre Ideen an Personen weiterzugeben, die Ihr Projekt entwickeln, oder einfach an den Kunden, wenn Sie dieses Projekt selbst entwickeln. Daher ist das Prototyping aus UX Sicht sehr wichtig. Ich meine, denk darüber nach. Sie als Designer sind nicht nur dafür verantwortlich, nicht nur dafür verantwortlich Ihr Projekt aussehen wird, sondern auch dafür verantwortlich, wie Ihr Projekt in der realen Welt funktionieren wird. Deshalb ist es eine gute Idee zu überlegen, was passiert, wenn jemand auf eine Schaltfläche klickt, einen auf einen Link führt oder die Seite nach unten oder bis zu X scrollt Prototyping-Tools helfen Ihnen bei Visualisierung all dieser Ereignisse, einschließlich Hover-Status, Übergänge, Klicks und mehr. Und das wiederum lassen wir Ihnen von anderen Feedback darüber geben , wie sich die Projekte verhalten sollen. Und es kann eine großartige Zeitersparnis sein. Jetzt haben wir in XD die Möglichkeit, in einer Software zu entwerfen und einen Prototyp zu erstellen. Während wir unser Projekt entwerfen, werden wir auch, während wir gehen und die Interaktivitätsmerkmale dazu beitragen. Nun, wie ein Wiseman sagte, beginnt eine Reise von tausend Meilen mit einem einzigen Schritt. Und unsere Designreise beginnt mit dem Erstellen einer neuen Datei. Also lasst uns das als Nächstes machen. 9. Eine neue Datei erstellen: Alles, was wir von nun an tun werden ermöglicht es uns, mit der Gestaltung unserer Website zu beginnen. Werfen wir einen Blick darauf, wie man neue Dateien in XD erstellt. Zuerst. Sie können es tun, wie wir es bereits vom Startbildschirm aus wissen. Und du hast im Grunde drei Möglichkeiten, das zu tun. Sie können also auf die Schaltfläche Neue Datei klicken und dadurch schnell ein Standarddokument mit einer Standard-Kunsttafel erstellen . Sie könnten eine der vordefinierten Kunsttafeln verwenden, um eine neue Datei mit diesem bestimmten Karton zu erstellen. Oder Sie können einfach benutzerdefinierte Werte für Breite und Höhe eingeben , um ein Dokument mit einer benutzerdefinierten Zeichenfläche zu erstellen. Welche Option Sie auch wählen, Sie sehen eine neue Datei auf Ihrem Bildschirm. Und lass mich dir hier nur ein Wort der Vorsicht geben. Wenn Sie nur eine Datei erstellen und aus irgendeinem Grund entscheiden, sie zu schließen, beenden Sie das Programm. Sie kehren nicht zum Startbildschirm zurück. Stattdessen müssen Sie XD neu starten. Wenn Sie also an einer Datei arbeiten, möchten Sie schließen, Es ist besser, zuerst auf die Home-Schaltfläche in der oberen linken Ecke zu klicken . Erstellen Sie dann eine neue Datei und schließen Sie erst dann die vorherige Datei. Auf diese Weise können Sie das Programm am Laufen halten und aus der Datei abbrechen. Du brauchst es nicht mehr. Der schnellste Weg zum Speichern Ihrer Datei verwendet, um eine Tastaturkombination aus Steuerelement plus S zu drücken. Wenn Sie dies zum ersten Mal tun, wird ein Dialogfeld angezeigt, in dem Sie aufgefordert werden, Ihre Datei so zu benennen wird in der Creative Cloud gespeichert. Sie sehen den gleichen Dialog wenn wir den Befehl Speichern unter auslösen indem Sie Strg plus Shift plus S Tastenkombination drücken plus S Tastenkombination oder die entsprechende Menüoption verwenden, Sie finden unter dem Menü „Datei“. Und so gespeicherte Dateien werden in der Creative Cloud gespeichert. Sie könnten Ihre Dateien jedoch auf Ihrer lokalen Festplatte speichern. Um dies zu tun, sollten Sie die Menüoption Als lokales Dokument speichern wählen . Oder Sie könnten die Tastenkombination aus Control plus Shift plus Alt plus S verwenden Control plus Shift plus Alt plus S Möglicherweise sehen Sie eine Meldung, die Ihnen mitteilt , dass Sie Ihre Datei lokal speichern , Sie einige der Optionen, die Sie normalerweise bekommen würden. Und das ist in Ordnung, klicken Sie einfach auf Weiter und Sie können Ihre Datei speichern oder eine Datei , die Sie lokal gespeichert haben, wird auf der Registerkarte Ihre Dateien auf dem Startbildschirm nicht sichtbar sein . Es wird jedoch auf der Registerkarte „Zuletzt“ sichtbar sein. Übrigens können Sie Ihre Datei auch schnell in Creative Cloud speichern indem Sie oben im Dokumentfenster auf den Namen Ihrer Datei klicken. Also los gehst du. So können Sie Dateien in XD erstellen und speichern. Wie Sie bemerkt haben, sind alle mit Kunsttafeln ausgestattet, die für die Gestaltung bestimmter Bildschirme sehr wichtig sind . Deshalb ist es wichtig zu verstehen, wie Zeichenflächen hinzugefügt und verwaltet werden, die wir uns übrigens als nächstes ansehen werden . 10. Zeichenflächen verwalten: Jetzt ist es unerlässlich, zu verstehen, wie man mit Zeichenflächen arbeitet , für einen schnellen und reibungslosen Designprozess. In XD wird jedes Dokument mindestens eine Kunsttafel haben. Obwohl Sie meistens mehr als nur einen erstellen möchten . Dein Kunstbrett-Werkzeug. Wir haben einen Standardnamen basierend auf seiner Größe. Sie können es jedoch ändern, indem Sie entweder auf den obigen Namen doppelklicken und einfach einen neuen Namen eingeben oder ihn im Ebenenbedienfeld umbenennen. Da wir also für das Web entwerfen werden, muss unsere Art Board groß genug sein, um moderne, vertikal lange Layouts unterzubringen. Und standardmäßig wird dieses Zitat, das in XD erstellte unquote-Art-Board bei 1920 Pixel mal 1080 Pixel liegen, was nicht ausreicht. Wir können es natürlich ein bisschen länger schaffen. So können wir im Eigenschafteninspektor einfach eine neue Größe eingeben oder einfach die Zeichenfläche am unteren Griff greifen und nach unten ziehen. Das Besondere an der Verwaltung Größe der Artboards ist, dass Sie, sobald Sie einige Designelemente hinzugefügt haben, sobald Sie einige Designelemente hinzugefügt haben, nicht auf die Zeichenflächeneigenschaften zugreifen können, indem Sie das Zeichenflächenwerkzeug aktivieren. Wenn Sie irgendwo im Dokumentfenster damit klicken, fügen Sie einfach eine neue Kunsttafel hinzu. Um zu den Zeichenflächenoptionen zu gelangen, verwenden Sie das Auswahlwerkzeug und klicken Sie auf den Zeichenflächen-Sname oder einfach nicht im Ebenenbedienfeld ausgewählt. Da wir uns mit dem Thema des Hinzufügens neuer Kunsttafeln beschäftigen, können wir das so machen. Wir können eine vorhandene Art Board duplizieren, indem Sie die Strg- oder Befehlstaste drücken , wenn Sie sich auf einer Mac plus d Tastaturkombination befinden. Und das wird dazu führen, dass die neue Zeichenfläche neben der vorherigen sitzt . Bei ausgewähltem Zeichenflächen-Werkzeug. Wir können auch auf eine beliebige Stelle in der Zwischenablage klicken , um eine neue Zeichenfläche hinzuzufügen. Und die Größe dieser neuen Kunsttafel hängt ab, welche Vorlage Sie im Eigenschaftenbereich auswählen. Am anderen Ende der Schaffung von Kunsttafeln, Verbündeten, löschen sie, um dies etwas poetisch zu setzen. Und das ist so einfach wie einfach ein ungerade Wort auszuwählen und entweder die Löschtaste oder die Rücktaste auf Ihrer Tastatur auszublenden. Alternativ können Sie im Ebenenbedienfeld mit der rechten Maustaste auf einen Zeichenbrett-Snamen klicken. Und wählen Sie aus dem Kontextmenü einfach Löschen aus. Wie Sie sehen können, sind Kunsttafeln ein wesentlicher Bestandteil des Designprozesses hier in XD, jedes neue Dokument wird mit einem geliefert, aber Sie können es jederzeit vollständig hinzufügen , ändern und entfernen. 11. EBENEN: Das Konzept der Ebenen ist in der Welt der Designsoftware so verbreitet. Das ist wirklich schwer vorstellbar ein Programm, das es zumindest in irgendeiner Form nicht implementieren würde . Und natürlich ist es die gleiche Geschichte mit XD. Das Ebenenbedienfeld sollte standardmäßig aktiviert sein. Wenn Sie es jedoch in Ihrem Workspace sehen können, können Sie es aktivieren, indem Sie auf das Symbol für kleine Ebenen in der unteren linken Ecke klicken. finden Sie auch einen Menüpunkt, der als Layer bezeichnet wird Im Menü Ansicht finden Sie auch einen Menüpunkt, der als Layer bezeichnet wird. Es gibt auch eine praktische kleine Verknüpfung von Control oder Command. Plus. Wenn Sie sich das Ebenenbedienfeld ansehen, werden Sie feststellen, dass Ihre Zeichenflächen die oberste Ebene Ihrer Assets-Organisation sind. Sobald Sie also auf einen von ihnen klicken, werden Ihre Objekte aufgedeckt. Und jedes Objekt, das Sie erstellen, erhält einen generischen Namen. Aufgrund seiner Beschaffenheit. Ich bin in einem Objekt, das mit dem Rechteckwerkzeug erstellt wurde , wird als Rechteck bezeichnet. Und das mit dem Ellipsenwerkzeug erstellte Objekt wird Ellipse genannt usw. Es ist immer eine gute Idee. Ich meine, es ist eine großartige Produktionspraxis, Ihre Objekte umzubenennen , damit Sie eine spätere Phase des Entwurfsprozesses hinzufügen können. Erkennen Sie ganz einfach bestimmte Elemente in Ihrem Projekt. Eine weitere gute Produktionspraxis besteht darin , ähnliche Elemente zu gruppieren und die Gruppe dann so umzubenennen, dass ihre Namen angeben, was darin enthalten ist. Sie können ein Objekt oder eine Gruppe umbenennen , indem Sie entweder auf den Namen eines bestimmten Elements doppelklicken oder mit der rechten Maustaste klicken und Umbenennen auswählen. Und natürlich können Sie eine Ebene einfach löschen, indem Sie entweder eine der Entf- oder Rücktaste auf Ihrer Tastatur drücken der Entf- oder Rücktaste auf Ihrer Tastatur oder indem Sie mit der rechten Maustaste klicken und die Löschoption auswählen. Sie können ein Element auch duplizieren indem Sie die Option „Duplizieren“ aus dem Kontextmenü wählen. Indem Sie also mit der rechten Maustaste auf dieses Element klicken oder die Tastaturkombination Steuerung oder Befehl plus d verwenden. Im Ebenenbedienfeld können Sie alle Ihre Kunsttafeln, Gruppen und Elemente verwalten . Umgang mit ihnen ist ein sehr wichtiger Teil des Entwurfsprozesses. Es ist also eine gute Idee, sich mit dem Panel vertraut zu machen. Vor allem, wenn wir mit der Gestaltung unseres Projekts beginnen, werden wir uns sehr, sehr oft auf das Panel beziehen. 12. Werkzeuge – Übersicht: Schauen wir uns nun schnell die Tools an, die Sie in Adobe XD zur Verfügung haben . Jetzt werden wir sie noch nicht im Detail durchgehen. Wir werden es tun, sobald wir mit dem Designprozess beginnen, aber wir werden schnell herausfinden, was Sie damit machen können. Das Werkzeugbedienfeld befindet sich auf der linken Seite des Arbeitsbereichs. Wie wir bereits kurz erwähnt haben, wird jedes Tool so benannt , dass es leicht ist, einfach zu erraten, was es tut. Also haben wir zuerst das Auswahl-Tool bekommen. Um ein Objekt zu verschieben. Zuerst musst du es auswählen. Und du kannst es mit dem Auswahlwerkzeug machen. Aber das macht immer noch viel mehr als das. Es ist nicht die schnellste Möglichkeit, die Größe und das Drehen Ihrer Objekte zu ändern. Bewegen Sie dazu einfach Cursor in die Nähe der ausgewählten Objekte, Ankerpunkte, klicken und ziehen Sie, um mit der Transformation zu beginnen. Und mit diesem Tool können Sie auch die Rundheit der Kurven ändern. In einem ausgewählten Objekt. Sie werden kleine runde Marker sehen. Klicken Sie also auf einen von ihnen und ziehen Sie, um alle Ecken gleichzeitig zu runden. Sie können auch auf Alt oder Option klicken und drücken und ziehen, um nur die ausgewählte Ecke zu runden. Darüber hinaus können Sie mit dem Auswahlwerkzeug die Abstände zwischen Objekten steuern und überprüfen. Sie müssen lediglich die betreffenden Objekte auswählen und dann die Alt-Optionstaste drücken um Hilfslinien und Messungen anzuzeigen, die darauf hinweisen, dass die Abstände zwischen den ausgewählten Objekten und der Kunsttafel angezeigt werden. Als nächstes bekamen wir das Rechteck - und das Ellipse-Tool. Und ich spreche zusammen von ihnen weil sie im Grunde auf die gleiche Weise arbeiten. Natürlich können Sie mit dem Rechteckwerkzeug Rechtecke erstellen, und das Ellipsenwerkzeug, Ellipsen, über die Art und Weise, wie Sie diese Formen erstellen können, ist im Grunde gleich. Wenn Sie einfach die Umschalttaste gedrückt halten, erstellen Sie eine alte perfekte Ellipse oder im Grunde Quadrate. Wenn Sie die Alt-Taste gedrückt halten, beginnen Sie damit, naja, die Transformation der Erstellung vom Mittelpunkt aus. Als Nächstes haben wir das Polygonwerkzeug bekommen. Und Sie können dieselben Tastaturmodifikatoren verwenden, um Dreiecke, Quadrate, Fünfecke usw. zu erstellen. Der Hauptunterschied besteht darin, dass Sie die Pfeiltasten nach oben oder unten drücken können , um die Anzahl der Seiten zu erhöhen oder zu verringern. Mit dem Polygon-Werkzeug können Sie auch Sternformen erstellen. Um also eine Polygonform in ein Geschäft zu verwandeln, müssen Sie auf den Stern klicken und ziehen, den Rachel in der oberen rechten Ecke des Shapes behandelt wird. Ziehen Sie es also nach innen und ändern Sie die Anzahl der Seiten. Als nächstes haben wir das Line-Tool. Wenn Sie also einfach klicken und ziehen, erstellen Sie eine gerade Linie. Und wenn Sie die Umschalttaste gedrückt halten, erstellen Sie eine Linie in Schritten von 45 Grad. Wenn Sie die Alt-Taste gedrückt halten, starten Sie den Erstellungsprozess erneut vom Mittelpunkt aus. Als Nächstes haben wir das Stiftwerkzeug bekommen. Und das Feder-Werkzeug wie die berühmte Schlacht. Es ist eines dieser Tools, die Sie kennen, Sie müssen es wirklich verwenden, um seine Vorteile zu verstehen. Es ist Lernen, es mag ein bisschen schwierig sein, aber es gibt einige Dinge, die wir tun oder verstehen können , um diesen gesamten Lernprozess ein bisschen zu erleichtern. Hier in XD können Sie es entweder aktivieren, indem Sie auf das Symbol im Werkzeugbedienfeld klicken oder einfach die P-Taste auf Ihrer Tastatur drücken. Um Ihnen die Dinge einfach zu machen, denken Sie daran, dass Sie anklicken können , um verbundene gerade Linien zu erstellen. Sie können klicken und ziehen , um Kurven zu erstellen. Sie können klicken und dann klicken und ziehen. Um gerade Linien mit Kurven zu kombinieren. Sie können das Stiftwerkzeug verwenden, wenn Sie benutzerdefinierte Formen benötigen, mit denen Sie mit keinem anderen der verfügbaren Werkzeuge erstellen können . Als Nächstes haben wir das Texttool. Und natürlich ist der Umgang mit Text eine der Schlüsselfähigkeiten. Sie benötigen, wenn Sie an Ihren Entwürfen arbeiten. Und es gibt im Grunde zwei Möglichkeiten, wie dieses Tool funktioniert. Sie können also zuerst klicken, um eine einzelne Textzeile oder ein einzelnes Wort hinzuzufügen . Und dieser Weg funktioniert am besten, wenn Sie nur einen Logo-Text, einen Link oder einen ähnlichen künstlerischen Text hinzufügen möchten. Sie können auch klicken und ziehen , um ein Textfeld zu erstellen. Wenn Sie also Textabsätze benötigen, ist dies die beste Option. Leider können wir in XD kein Textfeld erstellen und einfach eine Option verwenden, können wir in XD kein Textfeld erstellen und einfach eine die es uns ermöglicht, das Feld mit etwas Dummy-Text zu füllen, wie etwa einem Lorem Ipsum-Text. Stattdessen müssten wir dafür ein Plugin verwenden, aber wir werden später darüber sprechen. Sobald unser künstlerischer Text festgelegt ist, können Sie ihn natürlich noch anpassen. Sie können einfach nach innen doppelklicken, um einen neuen Text einzugeben. Oder Sie können auch den unteren Griff ziehen , um die Größe dieses Textes schnell zu ändern. Wenn Sie die Ziehpunkte des Absatztextes ziehen, ändern Sie die Größe des Textfeldes nicht den Text selbst. Der Umgang mit der Eingabe von x D mit dem Textwerkzeug ist nur eine Spitze des Eisbergs. Wir werden uns das Thema viel genauer ansehen. Sobald wir zur Entwurfsphase dieses Kurses gekommen sind, haben wir auch das Artboard Tool und wie wir bereits wissen, wird jedes neue Dokument, das Sie erstellen, mit einer Zeichenfläche geliefert. Leider können Sie nicht definieren, wie viele Zeichenflächen Sie beim Erstellen einer neuen Datei wünschen, aber Sie können sie später mit dem Zeichenflächenwerkzeug hinzufügen und natürlich entfernen . Und vielleicht fragen Sie sich, warum Sie mehr Zeichenflächen in einem Dokument benötigen würden . Nun, in XD können Artboards Erlebnisse und Bildschirme simulieren. Ein Erlebnis wäre also , dass Ihr Design auf eine Kunsttafel gelegt ein Mobiltelefon oder ein Tablet simuliert. Und ein Bildschirm wäre eine Instanz Ihres Layouts innerhalb desselben Designs, z. B. eine Blog-Unterseite, eine Über uns Seite usw. Und Sie können all diese mit Zeichenflächen assimilieren. Der einfachste Weg, eine Kunsttafel hinzuzufügen, besteht darin mit dem Zeichenflächen-Tool an eine beliebige Stelle in Ihrer Zwischenwand zu klicken . Und wenn Sie über das vorhandene Order Board klicken, wird dort das neue hinzugefügt. Wenn Sie rechts klicken, erscheint die neue Zeichenfläche auf der rechten Seite und so weiter. Und dann sehen Sie im Eigenschafteninspektor alle verfügbaren Voreinstellungen denen Sie Ihre neue Zeichenfläche erstellen können. Wählen Sie also einfach eine aus und klicken Sie dann auf eine beliebige Stelle in Ihrem Dokument, um eine auf dieser Voreinstellung basierende Kunsttafel zu erstellen . Wie Sie bereits wissen, können Sie schnell einen Zugriff auf Ihre Kunsttafeln im Ebenenbedienfeld sehen . Und alle von ihnen werden generische Namen bekommen , die dort geändert werden können. Außerdem, wenn Sie ein kleines Kunsttafel-ähnliches Symbol links neben dem Artboard sname drücken . Sie werden darauf weitergeleitet und können dort Ihre Designelemente hinzufügen. Als nächstes haben wir das Zoom-Tool bekommen. Und mit diesem Tool können Sie einen bestimmten Bereich vergrößern oder verkleinern. Wenn dieses Werkzeug aktiv ist, klicken Sie einfach einmal, um zu vergrößern, Alt, Klicken Sie einmal, um zu verkleinern, oder klicken und ziehen Sie, um einen Bereich anzugeben, den Sie vergrößern möchten. Da es sich um das Zoomen handelt, sind hier ein paar praktische Verknüpfungen, die Sie möglicherweise verwenden möchten. Wenn Sie also die Tastaturkombination Control plus 0 verwenden, passen Sie alle Ihre Kunsttafeln auf den Bildschirm. Und wenn Sie Strg plus eins drücken, stellen Sie die Zoomstufe auf 100 ein. Wenn Sie Control plus zwei Tastaturkombination verwenden, stellen Sie die Zoomstufe auf 200 ein. Und wenn Sie Strg plus drei Tastaturkombination drücken, stellen Sie die Zoomstufe nicht auf 300 ein, sondern vergrößert und zentriert sich auf ein ausgewähltes Objekt. Wenn Sie übrigens schnell, aber vorübergehend zum Zoomwerkzeug wechseln möchten , halten Sie die Strg- oder Befehlstaste gedrückt wenn Sie sich auf einem Mac plus Leertaste befinden. Auf diese Weise können Sie einen ausgewählten Bereich vergrößern . Und wenn Sie die Alt - oder Wahltaste hinzufügen, können Sie herauszoomen. Nicht alle verfügbaren Tools werden im Werkzeugbedienfeld angezeigt. Zum Beispiel das Handwerkzeug. Wenn Sie die Leertaste gedrückt halten, aktivieren Sie sie. Und wenn Sie dann klicken und ziehen, können Sie den Workspace verschieben. Und es gibt auch das Pipettenwerkzeug, dem Sie von überall in Ihrem Arbeitsbereich einen Farbwert abholen können. Und das einzige, woran Sie sich erinnern müssen , ist, dass Sie, bevor Sie es aktivieren können, einige andere Objekte ausgewählt haben müssen. Denn wenn Sie den IQ nicht drücken, wird die Pipette nicht initialisiert. Kurz gesagt können Sie mit dem Pipettenwerkzeug dem ausgewählten Objekt schnell eine benutzerdefinierte Farbe hinzufügen . Dies ist jedoch nicht die einzige Möglichkeit, das Pipettenwerkzeug zu verwenden. Immer wenn Sie ein Objekt im Eigenschafteninspektor ausgewählt haben , sehen Sie kleine Pipettensymbole zu den Füll- und Rahmenoptionen. Und klicken Sie einfach auf das Symbol und Sie können alle Farben probieren, die Sie mögen. Die Tools in Adobe XD sind sehr einfach zu bedienen. Was Sie bekommen, ist im Grunde das, was in einem typischen Designszenario wichtig ist . Und diese Vereinfachung bedeutet , dass Sie, wenn Sie erweiterte Operationen wie Join-Pfade oder Objekte ausführen möchten , den Eigenschafteninspektor oder die Plugins verwenden müssen , über die wir sprechen werden als Nächstes. 13. Plug-ins hinzufügen und verwalten: Wenn Sie mit dem Konzept der Plugins nicht vertraut sind, müssen Sie Folgendes wissen. Plugins sind also im Grunde kleine Apps, die die Standardfunktionalität von XD erweitern. Sie können sie installieren, deaktivieren oder deinstallieren. Natürlich machen sie Ihr Designleben so viel einfacher. So können Sie zum Beispiel kostenlose oder kostenpflichtige Archivbilder zu Ihrem Projekt hinzufügen . Sie können UI-Elemente wie Symbole, Schaltflächen, Schieberegler, Textstücke und all diese Dinge hinzufügen. Sie können sogar ganze Blockvorlagen hinzufügen. Über mich Seite ist Homepages. Und Sie können benutzerdefinierte Assets wie Illustrationen hinzufügen. Sie können Farbinspirationen finden, HTML- und CSS-Code generieren und vieles mehr, um die Plugins zu verwalten XD verwendet die Creative Cloud-Desktop-App. Sobald Sie also die Plugins ausgewählt haben und dann nach Plugins oder verwalteten Plugins oder verwalteten Plugins durchsuchen. Sie werden sehen, dass diese App auftaucht. Wenn Sie diese App auf diese Weise öffnen, wird sie im Wesentlichen zu einem Plug-in-Browser. Beachten Sie also, dass Sie standardmäßig Plugins für alle Programme sehen. Aber Sie können die XD-Markierung auf der linken Seite ankreuzen. Sie werden also nur die Plugins sehen, die nur für diese App erstellt wurden. Und auf der rechten Seite sehen Sie alle verfügbaren Plugins. Klicken Sie einfach darauf, um das Plug-In schnell zu installieren. Und wenn Sie sich nicht sicher sind, was dieses spezifische Plugin macht, können Sie einfach irgendwo im Auto klicken um weitere Details dazu zu sehen. Sobald das Plugin installiert ist, es sowohl im Plugins-Menü als auch im Plugins-Bedienfeld sichtbar . Sobald Sie also nicht mehr brauchen oder einfach, gefällt Ihnen dieses spezifische Plugin nicht. Sie können es entweder deaktivieren oder deinstallieren. zu tun, gehen Sie zurück zu Ihrem Plugins-Browser. Nur um das Plugin zu finden, das Sie nicht mehr benötigen, und klicken Sie einfach auf das Symbol für kleine drei Punkte unten, und Sie erhalten die Optionen, dieses Plugin entweder zu deaktivieren oder zu löschen. Plugins sind eine großartige Möglichkeit, die Funktionen von XD zu erweitern. Und mit der Zeit werden Sie definitiv diejenigen finden, die Ihnen am besten gefallen werden und die, die Sie fast bei jedem Designprojekt benötigen . 14. Plug-ins, die du in deinen Designs am ehesten verwenden kannst: Nun, ich habe bereits erwähnt, dass Plugins es dir ermöglichen, XD-Fähigkeiten auf vielfältige Weise zu erweitern. Werfen wir nun einen kurzen Blick auf diejenigen, die ich empfehlen würde , um uns zumindest vertraut zu machen. Übrigens alle Plugins , die ich erwähnen werde. Jetzt können Sie sie einfach kostenlos herunterladen. Sie sind alle kostenlos. Sie können sie aus dem x installieren, dieses Plugin, also Repository. Der erste ist also Icon's for Design. Und mit diesem können Sie Ihren Layouts verschiedene Symbole hinzufügen. Und ich muss sagen, ich kann mir kein Webdesign-Projekt vorstellen , bei dem Sie Icons verwenden müssten, insbesondere für Social-Media-Links, solche Dinge. Es ist also oft ein bisschen mühsam, den richtigen Symbolen zu suchen und sie dann dem Layout hinzuzufügen. Und hier kommt dieses Plugin ins Spiel. Um nach Symbolen zu suchen, geben Sie einfach ein beliebiges Keyword ein. Und Sie sehen eine Liste übereinstimmender Diagonalen aus verschiedenen kostenlosen Icons, Repositorys. Und sobald Sie gefunden haben, wonach Sie gesucht haben, klicken Sie einfach darauf und Sie sehen dass das Symbol auf Ihrer Kunsttafel auftaucht. Und natürlich sind alle diese Symbole editierbar, sodass Sie Farbe, Größe, Rotation usw. ändern können . Das nächste heißt also das schnelle Modell. Und Sie können damit schnell Layouts mit einem einzigen Design-Element oder sogar einer ganzen Vorlagen erstellen. Zuerst musst du einfach ein Thema für dein Modell auswählen. Sobald Sie das getan haben, sehen Sie drei separate Bibliotheken. Das erste ist also Elemente , die wie Symbole, Schaltflächen, Beschriftungen und solche Dinge enthalten. Der nächste heißt Assets mit den Illustrationen, Diagrammen und Formen. Und der letzte heißt Templates. Und dieser enthält wie Hold-Designs für einzelne Seiten wie die Homepage, die Blogseite, die Über uns Seite oder die Kontaktseite. Was Sie hier also nur tun müssen, ist einfach auf ein Asset zu klicken , um es auf Ihre Kunsttafel zu legen. Auf diese Weise können Sie ganz einfach Abschnitte in Ihrem Layout erstellen, aber auch Seiten speichern und weiter halten, um schnell zu visualisieren, wie Ihr Design aussehen könnte. Nun, dieses Plugin ist auch eine fantastische Möglichkeit, Ihre Wireframes zu erstellen, die mit dem Konzept der Wireframes nicht vertraut sind. Sie sind genau wie sehr schematische Darstellungen Ihrer Layoutelemente. Und sie lassen Sie einfach das Design visualisieren und dem Kunden auf sehr, sehr, sehr vereinfachte Weise präsentiert werden. Um sich zuerst auf Benutzerflüsse zu konzentrieren, anstatt auf Farben, Schriftarten, Bilder usw. Jetzt würde ich vorschlagen, Vorlagen aus dem minimalen Thema zu verwenden. Sie sind von Farben befreit. Sie sehen sehr stromlinienförmig aus. Ich brauche ziemlich elegant. So kann Ihr Kunde Ihre Vision wie die gesamte UX verstehen . Es ist also wichtiger , das zu verstehen als die künstlerischen Elemente Ihres Designs. Und das Hinzufügen wie ganze Vorlagen bedeutet natürlich nicht, dass Sie sie nicht auf irgendeine Weise ändern können , die Sie möchten. Sie können immer noch verschiedene Assets hinzufügen oder die Elemente entfernen , die Sie nicht benötigen. Ich denke nur, dass das Hinzufügen ganzer Vorlagen Ihnen helfen wird , das gesamte Konzept des Wireframings zu verstehen und den Prozess des Aufbaus dieser schematischen Benutzerströme einfach viel schneller und einfacher. Das nächste Plugin, das ich wirklich mag, heißt UI Faces. Fast jede Geschäftsseite hat einen Abschnitt, in dem sie einige Teammitglieder oder einige Testimonials präsentieren . Diese Abschnitte werden normalerweise mit Karten geliefert , die ein Foto und eine kurze Beschreibung enthalten. Und dieses Plugin eignet sich absolut hervorragend Generieren und Hinzufügen von Avatar-Fotos in diesen Situationen. Die Funktionsweise ist extrem einfach. Zuerst müssen Sie also eine Form keine Gruppe erstellen und diese auswählen. Und das wird wie ein Container für das Bild sein. Wählen Sie dann einfach aus , welches Repository Sie verwenden möchten, und klicken Sie auf Zufallsprinzip anwenden, wenn Sie nur an einer Mock-up-Version Ihres Designs arbeiten. Dadurch wird ein Bild aus der Repository-Datenbank abgerufen und direkt in Ihr Layout eingefügt. Und Sie müssen nicht einmal die Größe ändern oder anpassen. Das Plugin erledigt das ganze schwere Heben für Sie. Natürlich sind Sie nicht nur auf einige zufällige Fotos beschränkt . Manchmal, wenn Sie ein Foto einer Frau hinzufügen möchten, werden Sie zufällig auf ein Foto eines Mannes und umgekehrt. Und das könnte ein Problem sein. Aus diesem Grund können Sie die Option Fotos auswählen verwenden um ein Bild, das Ihnen gefällt, aus einem neuen Fenster auszuwählen , das angezeigt wird. Im neuen Fenster sehen Sie viele zufällige Porträtfotos. Leider können Sie das Repository, aus dem die Bilder abgerufen werden, nicht ändern . Wenn Ihnen also keine der von Ihnen gesehenen gefällt, müssten Sie zurückgehen und eine andere Bildquelle auswählen. Wenn Ihnen jedoch ein bestimmtes Foto gefällt und Sie es hinzufügen möchten, einfach aus und drücken Sie Übernehmen. Und dieses Foto wird dem ausgewählten Image-Container hinzugefügt . Der nächste heißt Lorem Ipsum, was ein sehr generischer Name für ein sehr generisches Plugin ist. Und ich muss sagen, dass das Hinzufügen Dummy-Steuer in einem typischen Designszenario so häufig ist . Ich bin wirklich ziemlich überrascht. Es ist wirklich schwer zu glauben, dass wir in XD keine nativen Funktionen dafür haben. Deshalb müssen wir ein Plugin wie Lorem Ipsum verwenden . Es funktioniert ähnlich wie UI Faces wie in. Sie müssen zuerst ein Rechteck auswählen , um einen zufälligen Text hinzufügen zu können. Und sobald Sie das getan haben, können Sie ein Stück Lorem ipsum hinzufügen oder ein neues Fenster öffnen, indem Sie mit Platzhaltertext füllen auswählen. Und die Editiertexte werden vollständig anpassbar sein. Sie können die Größe, die Farbe der Schriftfamilie, die Zeilenhöhe usw. ändern . Daher heißt der nächste Pexels und ermöglicht es Ihnen, das Paxos.com-Repository nach kostenlosen Archivbildern zu durchsuchen . Und es ist eine der beliebtesten Websites, auf der Sie finden können. Jetzt sind wir wirklich hochwertige und kostenlose Fotos zu grundsätzlich jedem Thema. Sobald das Plugin installiert ist, können Sie einfach Ihr Keyword eingeben, eine Form auswählen oder ein Bild hinzufügen und dann einfach auf das ausgewählte Bild klicken, um es hinzuzufügen. Und wie bei den UI-Flächen funktioniert diese von Ihnen ausgewählte Form im Grunde als Bildrahmen, der das hinzugefügte Bild einschränkt. Der nächste heißt also OnDraw. Und es ist absolut eines meiner Lieblings-Plug-Ins, denn das Android selbst, dieses Repository, ermöglicht es Ihnen, nach benutzerdefinierten, professionell aussehenden Illustrationen zu suchen. Und in vielen modernen Designs werden Sie in den Heldenabschnitten benutzerdefinierte Illustrationen über unsere Sektionen und fast jeden anderen Abschnitt bemerken Heldenabschnitten benutzerdefinierte Illustrationen über . Ich denke, dass diese Illustrationen viel Persönlichkeit zu Web-Layouts haben. Und die hier zu findenden Illustrationen sind kostenlos und sogar zuordnungsfrei. Und Sie können sie in Ihren persönlichen und kommerziellen Projekten verwenden. Alles, was Sie hier tun müssen, ist natürlich ein Keyword einzugeben , wenn Sie nach etwas Bestimmtem suchen . Klicken Sie dann einfach auf eine der Illustrationen, um sie in Ihre Zwischenablage herunterzuladen. Es wird nicht direkt zu Ihrer Kunsttafel hinzugefügt, sobald Sie auf diese Illustration geklickt haben. Aber wenn es heruntergeladen wurde und es sich in Ihrer Zwischenablage befindet, und dann können Sie es einfach überall in Ihre Kunsttafel einfügen. Darüber hinaus können Sie eine Primärfarbe auswählen , die der Illustration dem Farbschema Ihres Layouts entspricht . Dies sind die gebräuchlichsten Plugins, die Sie in X D verwenden möchten . Sicherlich gibt es noch viel mehr zur Auswahl, aber es liegt an Ihnen zu erforschen und zu entscheiden , welche Sie benötigen und welche Sie benötigen wird überspringen. Diejenigen, die ich Ihnen hier gezeigt habe, werden Ihnen definitiv helfen, benutzerdefinierte Assets wie Bilder, Symbole und Texte hinzuzufügen , die jedes Layoutdesign unerlässlich sind. 15. So verwendest du die Document: Wir haben bereits über die Verwendung von Layern und Plugins in XD gesprochen und in der unteren linken Ecke des Hauptfensters finden Sie auch Bibliotheken. In diesen befinden sich Ihr Dokumentenvermögen. Und hier drin finden Sie die Wasserhähne für fehlende Schriften. Wenn es einige Schriftarten gibt, Schriftarten in Ihrem Dokument durcheinander gebracht. Sie sehen die Namen Ihrer Schriftarten, die nicht auf Ihrem System installiert sind, aber im Dokument verwendet werden. Hier finden Sie auch die Farben mit Farbcodes, die in Ihrem Dokument verwendet werden. Dann haben Sie Zeichenstile mit Schriftfamilien in bestimmten Farben und Größen. Sie sehen Komponenten mit den Abschnitten Ihres Layouts. Und wir finden auch Videos , die Videos enthalten, die in Ihrem Dokument verwendet werden. Wenn Sie mit der rechten Maustaste auf jedes dieser Assets klicken, wird ein etwas anders aussehendes Kontextmenü angezeigt , mit dem Sie verschiedene Aktionen ausführen können. Wenn Sie beispielsweise auf das Asset für fehlende Schriftarten klicken, finden Sie eine Option „ Schrift ersetzen“, mit der Sie Gelder ersetzen können , die in Ihrem Dokument fehlen. Natürlich kannst du es mit einer anderen Schriftart machen. Und sobald Sie das tun, Registerkarte „Schriftarten“ werden die Registerkarte „Schriftarten“ aus den Dokument-Assets verschwinden. Sie sehen auch ein Highlight auf Canvas, dem Sie die spezifischen Assets in Ihrem Dokument schnell finden können. Sie finden auch eine Auftragsfüllfarbe oder wenden Sie eine Rahmenfarbe an. Wenn Sie mit der rechten Maustaste auf eine klicken, eine Farbe, die Ihren Dokument-Assets hinzugefügt wurde. Und so können Sie diese Farbe einfach als Rahmen oder Füllung zu einem ausgewählten Element hinzufügen . Und natürlich können wir hier mehr Standardoptionen wie Umbenennen, Löschen oder einfach Gruppieren ausführen . Was Sie zu diesem Zeitpunkt wirklich über Document Assets wissen müssen , ist, dass dieses Panel eine großartige Möglichkeit ist , Ihr Projekt und alles, was Sie darin haben, einfach zu organisieren . Manchmal, besonders wenn Sie ein Design erstellen , das viele verschiedene Seiten, Farben, Schriftarten und Komponenten erfordert , kann es etwas schwierig werden, schnell und effektiv zu arbeiten . Wissen Sie, es wird schwierig sein, alle Vermögenswerte zu kontrollieren , die Sie in Ihrem Dokument haben. Und das Dokument-Assets-Panel wird Ihnen definitiv dabei helfen Ihr Projekt so konsistent wie möglich zu halten. 16. Schnelle Einführung in Designsysteme in Xd: Designsysteme sind eine großartige Möglichkeit , Ihr Design nicht nur in allen Teilen konsistent zu gestalten , sondern helfen auch anderen Teammitgliedern dabei, die Layouts logisch zu halten. Und sie können sehr aufwendig sein und mit einer umfangreichen Dokumentation über jeden Aspekt jedes Designstücks geliefert mit einer umfangreichen Dokumentation über jeden Aspekt jedes Designstücks das Sie auch in Zukunft entwerfen könnten. Aber für unsere Zwecke halten wir die Dinge einfach. Um Ihre eigenen Designsysteme zu bauen, können Sie diese Tools verwenden und die Designelemente speichern. Sie können die Dokument-Assets verwenden. In einem typischen Designsystem hätten Sie die Primär - und Sekundärfarben. Sie hätten die Typografie für Überschriften und den Haupttext. Und Sie hätten auch verschiedene Komponenten wie Schaltflächen, Listen, Icons usw. Also habe ich schnell ein einfaches, einfaches und sehr einfaches Designsystem zusammengestellt , das diese Elemente enthält. Dann könntest du natürlich so viele Elemente hinzufügen , wie du möchtest. Der Hauptzweck dieser Übung besteht jedoch darin, dass Sie verstehen , was ich ein System entwerfe und wie die Document Assets verwenden können, um es zu verwalten. Was ich hier gemacht habe, ist, dass ich zuerst ein paar einfache Rechtecke hinzugefügt habe und sie mit Farben gefüllt habe, die ich in meinem Projekt verwende. Dann habe ich einige Typografie-Elemente wie Überschriften und Textkörper hinzugefügt . Natürlich benutze ich die Schriftart, die ich normalerweise in meinem Projekt verwenden würde . Und schließlich habe ich mit Hilfe des Quick Mock-up-Plug-Ins einige Komponenten wie Labels und Buttons hinzugefügt. Sobald die Designelemente fertig sind, können Sie sie Ihren Dokument-Assets hinzufügen, und der Vorgang ist sehr einfach. Alles, was Sie tun müssen, ist die Elemente auszuwählen , die Sie den Dokument-Assets hinzufügen möchten. Und dann klicke auf das kleine Plus-Symbol neben dem Tab-Namen. Zum Beispiel Farben, Charakterstile , Komponenten, Videos usw. Und das Bedienfeld „ Dokument-Assets“ wird letztendlich mit den Elementen gefüllt, die Sie in Ihrem Design wiederverwenden können. Wenn wir also zum Designteil dieses Kurses übergehen, erstellen wir Gestaltungselemente für unser Layout. Und während wir gehen, fügen wir die Farben, Typografie und andere Elemente hinzu, die wir im Bedienfeld „ Dokument-Assets“ behalten werden . Designsysteme sind ein großartiges Ende. In den meisten Fällen ist es wichtig Ihr Design während aller seiner Iterationen und in allen Schritten konsistent zu halten . Sie müssen nicht wie sehr aufwendig sein, aber sie sollten zumindest die Informationen über die Farben und Schriftarten enthalten , die Sie in Ihrem Projekt verwenden. Es wird Ihnen einfach helfen, beim Erstellen Ihrer Layouts viel Zeit zu sparen . 17. So wählst du die richtigen Farben für deine Designs aus: Die Wahl des richtigen Farbschemas für Ihr nächstes Webdesign ist wohl zusammen mit der Topographie das wichtigste zu erstellen. Die Farben, die Sie wählen, werden das erste sein, was die Aufmerksamkeit des Besuchers auf sich zieht. Und wenn richtig gewählt. Und sie werden ihre Augen einfach nicht verletzen lassen. Und sie werden ihre Finger nicht schnell danach suchen lassen. Bring mich hier raus. Riesiger Knopf. Es gibt eine ganze Theorie hinter der Bedeutung von Farben, aber ich glaube nicht, dass es an dieser Stelle etwas Wesentliches ist, das man besprechen muss. Meiner Meinung nach, die einzige Faustregel , die Sie seiner angemessen folgen sollten. Alles, was Sie wirklich tun müssen, ist daran zu denken, dass die von Ihnen gewählte Farbe für die Art des Dienstes oder des Geschäfts geeignet ist , das Sie entwerfen. Und dann denk darüber nach. Würde David Rosa oder Gelb auf einem Standort für Anwälte gut aussehen , sind Architekten und dunkle Grüns sind großartig Schuss die Freundlichkeit oder Energie eines Kindergartens oder Vergnügungsparks. Wenn Sie sich also nicht für eine clevere und riskante Marketingstrategie entscheiden, ist die Antwort ein offensichtlicher Hinweis. So angemessen ist eine Sache. Aber was ist mit der Suche nach einem Farbschema für Ihr Design? Das funktioniert einfach. Zum Glück könnte man in der heutigen Zeit völlig farbig, ignorant sein und trotzdem wunderschöne Farbpaletten haben. Stellen Sie sich ein Szenario vor, in dem Sie einen Kunden haben , der eine Website benötigt, und er oder sie Ihnen sagt , dass gebranntes Orange jetzt die Farbe seiner Wahl ist , sie lieben es einfach. Es ist eine einfache Farbe zu koppeln. Aber Sie könnten damit beginnen, das Farbrad zu greifen und überprüfen, welcher Kontrast in den Farben Orange ist. Und im Gegensatz dazu meine ich, auf der gegenüberliegenden Seite des Farbrads zu sitzen. In diesem Fall können Sie sehen, dass Veilchen, Blau und Grün, die dunkleren Grüns, eine schöne Basis für Ihre Farbpalette wären. Aber es kann noch einfacher sein. Sie können einfach Google gebrannte orangefarbene Farbpalette und sehen Sie einfach die Bildergebnisse, die Sie erhalten. Und vertrau mir, du wirst viel bekommen. Sobald Sie etwas gefunden haben, das Ihnen gefällt, können Sie das Bild einfach kopieren und in XD bringen. Und jetzt können Sie die Farben abprobieren und zu den Dokument-Assets hinzufügen. Also lasst uns das jetzt machen. Sobald diese Farbpalette sie eingefügt hat, können wir ein Rechteck erstellen dessen Breite mehr oder weniger mit einer Farbe, einem Farbfeld, übereinstimmt. Und jetzt könnten wir das Rechteck ein paar Mal kopieren und einfügen, nur um die Anzahl der Formen der Anzahl der Farben in der Palette gleich zu machen . Aber es gibt einen besseren Weg. Wir könnten dafür einfach das Wiederholungsraster verwenden. Und diese Funktion ermöglicht es Ihnen, ein Raster aus mehreren Instanzen des ausgewählten Objekts zu erstellen . Um ein Raster zu erstellen, wählen Sie einfach das Rechteck und klicken Sie dann auf die Option Raster wiederholen. Ziehen wir dann einfach den rechten Griff, um eine weitere Anastomose des Rechtecks zu erzeugen. Wenn Sie den Cursor dann an eine beliebige Stelle zwischen den Rechtecken platzieren, können Sie den Abstand zwischen den Objekten steuern. Sobald alles fertig ist, drücken Sie einfach die Gruppierungsrastertaste aufheben, die Sie sehen, dass Sie das Wiederholraster ersetzen. Und jetzt können wir jedes Rechteck greifen, die I-Taste auf der Tastatur drücken, um das Pipettenwerkzeug zu initialisieren und alle Farben zu testen, die Sie den Dokument-Assets hinzufügen können. Ich denke, dies ist der einfachste Weg, zuerst die richtige Farbpalette für Ihr Projekt zu finden und sie dann in Ihre Dokumentensäuren umzuwandeln. Wenn Sie jedoch mehr benutzerdefinierte Paletten erstellen möchten, gibt es so viele Orte und Tools, die Sie verwenden können , und wir werden als nächstes darüber sprechen. 18. 5 Tools, um die richtigen Farben für deine Layouts zu finden: Sie wissen, was das Web ist, schwärmen und mit Tools, die Ihnen helfen, die richtigen Farben für Ihr nächstes Design zu finden. Und einige von ihnen sind hilfreich. Einige von ihnen sind verwirrender als hilfreich. Also hier ist die Liste der Tools, von denen ich denke, dass sie einfach funktionieren. Der erste, der jetzt auf unserer Liste steht, sind Kühler. Für mich sagt Cooler, entscheide dich zu gehen, wann immer ich eine interessante automatisch generierte Farbpalette brauche. Und es ist das erste Tool , das Sie oben rechts im Menü Extras auswählen können . Um eine Palette zu generieren, drücken Sie einfach die Leertaste und jedes Mal erhalten Sie ein völlig anderes Ergebnis. Wenn Ihnen jedoch eine einzelne Farbe gefällt und Sie sie verwenden möchten, können Sie den Hex-Code kopieren. Wenn Sie jedoch eine ganze Palette um sie herum generieren möchten, sperren Sie sie einfach, indem Sie ein kleines Vorhängeschloss-Symbol drücken. Sie werden sehen, sobald Sie den Mauszeiger über ein bestimmtes Farbmuster bewegen. Sobald es gesperrt ist, können Sie die Leertaste erneut drücken , um nur die nicht ausgewählten Farben zu ändern. Und natürlich werden sie mit dem übereinstimmen, den Sie gewählt haben, dem, den Sie verschlossen halten. Wenn Ihnen die Farbpalette gefällt, können Sie sie exportieren, indem oben rechts auf die Schaltfläche Exportieren klicken. Und dies wird einen neuen Dialog mit einer Vielzahl von Exportformaten eröffnen . Eine davon ist Adobes eigene ASE, die für Adobe Swatch Exchange steht , mit der Sie Musterpaletten importieren können. Und leider unterstützt XD diese Funktionalität nicht. Ich würde also nur empfehlen, den Gaumen als Bild zu exportieren und eine Musterbibliotheken in XD zu erstellen. Wenn Sie das Bild als Exportmethode auswählen, wird ein anderes Fenster angezeigt Sie aufgefordert werden, einen Namen für Ihre neue Palette anzugeben. Es wird im Wesentlichen zu Ihrem Dateiname für Bilder. Sobald Sie es auf Ihrem Computer gespeichert haben, können Sie das Bild später mit den Farbpaletten in Ihre XD-Projekte importieren . Der Kurs kommt mit einigen großartigen Tools zur Farbauswahl. Von ihnen. Ich glaube, ich mochte die Entdeckungspaletten am meisten. Hier drin finden Sie viele fertige Farbpaletten, um sich inspirieren zu lassen. Sie können eine Palette auch finden, indem nach einem bestimmten Farbnamen, Hexadezimalcode oder sogar einem Thema suchen. Kühler, die Kohle könnten wirklich der einzige Ort sein, den Sie besuchen müssten , um alles zu bekommen, was Sie brauchen. In Bezug auf die Erzeugung von Farbpaletten oder Einzelfarben oder Farbfeldern oder Farbverläufen usw. Aber natürlich gibt es auch andere Quellen, die einen Besuch wert sind . Einer von ihnen heißt Color Dot. Und das macht echt Spaß. Sie können schnell ein Farbschema mit Ihrer Maus oder Ihrem Touchpad erstellen . Ziehen Sie hier einfach nach links oder rechts, um den Farbton zu ändern , und ziehen Sie nach oben oder unten , um die Leichtigkeit zu ändern. Und Sie können auch nach oben oder unten scrollen , um die Sättigung zu ändern. Wenn Sie also mit der Farbe zufrieden sind, klicken Sie auf, um sie zu speichern und wiederholen Sie den Vorgang mit einer anderen Farbe. Und das Tool zeigt Ihnen nur die Farben, die gut zu den Farben passen, die Sie zuvor gewählt haben. Und natürlich können Sie den Vorgang so oft wiederholen , wie Sie möchten. In Bezug auf den Export in Ihren Farben ist es am besten, Ihren Bildschirm zu speichern und ihn dann in Ihr XD-Projekt zu kopieren , da dieses Tool nicht mit dem Export in Funktionen wie colors.com geliefert wird. Der nächste heißt schmackhaft. Und hier kannst du deine eigene Farbe wählen oder einfach auf den Button „Abneigen“ klicken. Also wählt das Programm diese Farbe für dich aus. Und wenn es Ihnen gefällt, klicken Sie auf die Schaltfläche Gefällt mir und sehen Sie, ob die nächste Farbe Angenommen, die vorherige Farbe Ihrem Geschmack entspricht. Natürlich können Sie auch eine bestimmte Farbe entfernen, um die gesamte Palette zu verkleinern. Die nächste ist also nicht wirklich eine ähnliche Web-App, aber es ist ein XD-Plugin und es heißt Farben im Umfang. Es ist wirklich ein fantastisches kleines Tool, das Hilfe und Informationen, die Sie hier finden, im Grunde von unschätzbarem Wert sind. Sie können beispielsweise die Bibliothek der vorgefertigten Farbpaletten durchsuchen . Sie könnten die KI auch Farbpaletten für Sie generieren lassen . Sie können die Zugänglichkeit der Farbe überprüfen , die Sie auswählen. Sie können auch Farbverläufe und Farbverlaufsschattierungen erzeugen. Sie können auch Farbpaletten hinzufügen von einigen der weltweit führenden Marken verwendet werden. Was Sie hier tun können, ist, dass Sie auf eine bestimmte Funktionalität klicken und dann einfach Farben hinzufügen können . Oder Sie können einige zusätzliche Informationen überprüfen, die zur Verfügung gestellt werden. Wenn Sie beispielsweise eine Farbpalette hinzufügen möchten, klicken Sie auf die Option Farbpaletten, und Sie sehen viele vordefinierte Farbpaletten. So können wir einfach eine Palette kopieren oder einfach auf ein kleines Plus-Symbol oben rechts klicken ein kleines Plus-Symbol , um den Gaumen zur Kunsttafel hinzuzufügen. Sie könnten auch einfach auf diese Palette bearbeiten klicken , um Säuren zu färben. Und diese Palette wird natürlich zu Ihren Dokument-Assets hinzugefügt. Farben im Sport sind also ein fantastisches Plugin. So fügen Sie Farbpaletten hinzu und erstellen Sie sie. In einer kleinen App erhältst du unzählige Optionen und Helfer. Der letzte auf unserer Liste sind also Kanada-Farben. Und ich denke, du hast wahrscheinlich von Canva gehört, aber hast du ihre Farbwerkzeuge benutzt? Sie können hier wirklich Farbpaletten erstellen und anzeigen. Sie können auch die Bedeutung jeder gewählten Farbe entdecken. Jetzt sind all diese farbigen Erzeugungstools nur sie verlagern, bescheidene Darstellung einer Ära der Farbressourcen, die Sie online finden können. Die meisten von ihnen werden ziemlich auf die gleiche Weise funktionieren. Wenn du also nur deine Favoriten findest, bleib einfach bei ihnen. Das ist wirklich alles, was du brauchst. 19. So wählst du die richtige Schrift für deine Websites aus: Jetzt, da Sie wissen, wie Sie die richtigen Farben für Ihre Designer auswählen , ist es an der Zeit zu lernen, wie Sie die besten Schriftarten für sie auswählen. Bevor wir jedoch anfangen, gibt es eine wichtige Sache zu wissen, den Unterschied zwischen einer Schrift und einer Schriftart. Viele Leute benutzen diese Begriffe also austauschbar, was falsch ist. Und der Unterschied ist eigentlich sehr einfach zu verstehen. Eine Schrift ist eine Familie spezifischer Gewichte und Stile. Zum Beispiel Input Surf. Und sie fanden heraus, dass es sich um eine bestimmte Instanz der Schrift handelt. Zum Beispiel dient Input Medium. Nun, das ist einfach, nicht wahr? Das Ganze wird etwas komplizierter , wenn Sie versuchen, die Typ-Gesichter zu klassifizieren. Aber glücklicherweise gibt es nur vier Hauptvarianten von Schriften. Die erste ist also Serifen, die Schriften sind und Buchstaben mit diesen winzigen kleinen Ornamenten enthalten. Wie Laura Libre, Baskerville oder einfach nur alte Times New Roman. Es gibt auch serifenlose Schriften, die Buchstaben ohne diese Ornamente enthalten, zum Beispiel Open Sans, Roboto oder Montserrat. Wir haben auch Plattenserif mit Serifen, die wirklich fett und dick sind, wie Platte oder Roboto Slab. Und es gibt auch Skript-Schriften, die einfach keiner Handschrift ähneln wie Grad, Paris, Yen oder America's Sek. Dies sind also die Hauptkategorien von Schriften. Aber es gibt auch eine andere , die sich in gewisser Weise auf sie alle bezieht. Und ich spreche davon , Typ-Gesichter anzuzeigen. Einer der größten Fehler, die Designer machen, ist jedoch , dass sie Display-Schriften für lange Textpassagen verwenden. Während sie speziell für Überschriften und vielleicht Unterüberschriften bestimmt sind . Für zu viele Designer verwenden diese Schriften für den Haupttext, was ihn im Wesentlichen lesbar macht. Das ist nicht das, was Sie sich für Ihre Entwürfe wünschen sollten. Jetzt fragst du dich wahrscheinlich, okay, aber welche Schriftarten sollte ich verwenden? Alles, was wir einfach versuchen könnten, die besten Eigenschaften von Schriften zu finden , die Ihnen helfen sollten, die richtige Schrift für den Job zu finden. Der erste wird Lesbarkeit sein. Ich meine, wähle einfach die Schrift , die einfach lesbar ist. Ihre Website muss sehr spezifische Informationen mitteilen . Natürlich, es sei denn, es ist nur ein Kunstprojekt. Die Leute müssen also in der Lage sein, Ihre Nachricht zu lesen , und Sie möchten es ihnen nicht schwer machen. Der einfachste Test besteht darin, die Schrift nur auf etwa zehn Punkte zu verkleinern und prüfen, ob Sie sie unterscheiden können , die Einzelbuchstaben, zum Beispiel Kleinbuchstaben e aus einem Kleinbuchstaben c. auch ziemlich oft das, das Kapital Ich könnte wie Kleinbuchstaben aussehen l. Allgemein, offenere Zeichen werden in kleineren Größen besser sichtbar sein. Und wenn ja, werden sie natürlich auch in größeren Größen sichtbar sein. Zum Beispiel in Überschriften. Jetzt können Sie für die Überschriften entweder die Anzeigeschriften oder die Textschriftarten verwenden . Obwohl sowohl Serifs als auch Sans Serifs und sogar Skripte gut funktionieren. Es geht hier mehr um Ihre Designwahl als um eine perfekt lesbare Schriftart zu finden. Jetzt sind Überschriften normalerweise ziemlich groß. Sie sollten also keine Probleme mit der Lesbarkeit haben. Und nochmal, bitte verwenden Sie keine Anzeigeschriften für den Textkörper. Längere Textpassagen benötigen eine Schrift, die in erster Linie lesbar ist. Und zweitens passt gut zu Ihren Überschriften und Designzielen. Einige Leute versuchten zu argumentieren, dass zum Lesen von Bildschirmen serifenlose Schriften besser sind und Serifenschriften besser für das Lesen außerhalb des Bildschirms geeignet sind, wie Bücher oder Broschüren. Und ich glaube nicht, dass es so einfach ist. Ich meine, wenn eine Schrift als lesbar bezeichnet werden kann, bedeutet das, dass sie gut für Bildschirme und Seiten ist. Serif oder serifenlos. Wenn es leicht zu lesen ist, können Sie es überall verwenden, wo Sie möchten, und Ihre Wahl basiert wirklich auf der Ästhetik, die Sie sich wünschen. Haben Sie einen Sattel, der alle Arten von Gesichtern gibt , die Sie verwenden können , und seien Sie absolut sicher, dass Sie die richtige Wahl getroffen haben. Nun, raten Sie, aber die Methode, die Sie lernen werden, kommt mit einer etwas effektiven Falle. Nehmen wir an, dass Sie für Ihr Design eine der Google Fonts verwenden möchten. Und sobald Sie sich entscheiden, ob Sie Serifen, Serifen oder Skripte wünschen , können Sie Ihre Suche nach Beliebtheit verfeinern rechts die beliebtesten auswählen. Dadurch werden die Schriften nach der Anzahl der Downloads ausgehend vom höchsten Wert sortiert . Die beliebtesten Schriften werden die ersten auf der Liste sein. Einige von ihnen wie Letzteres, Open Sans oder Widerlegung, wurden von Google in Auftrag gegeben und von erfahrenen, wie gut etablierten Designern erstellt . Sie können also sicher sein, dass diese Gesichter einfach gut sind. Wenn diese Schriften die beliebtesten sind, sollten sie die besten sein, oder? Nun, sie könnten schlecht sein. Sie können auch stark überbeansprucht werden. Nehmen Sie Lobster und Lobster Two zum Beispiel ist eine wirklich coole Schrift, aber sie wurde so oft verwendet , dass sie als New Comic Sans Switch bezeichnet wurde. Gleichzeitig ist ein Hinweis auf seinen Erfolg. Und der Grund dafür ist natürlich nicht auf Google-Schriftarten beschränkt. Sie können auch Adobe-Schriftarten besuchen, in denen Sie Schriften von Adobe selbst, aber auch von vielen Designern und Gießereien finden. Sie können also auf den Namen der Schrift klicken. Du siehst gerne alle verfügbaren Varianten. Um es also zu x dy hinzuzufügen, klicke oben rechts auf Schrift aktivieren. Und letztendlich werden Sie sehen, dass diese Schriftarten in XD zu Ihrer Fontsbibliothek hinzugefügt werden. Dies sind also die Grundlagen guter Typografie, die Sie in Ihren eigenen Entwürfen anwenden können. Aber was ist, wenn Sie eine vollständige Topographie neu sind und nicht wissen , welche Schriftart oder Schriftart es sich handelt. Geh gut zusammen. Es gibt zwei Quellen, die ich am häufigsten verwende wenn ich Zweifel habe oder nur etwas Inspiration brauche. Und der erste heißt Font Pair.co. Und hier finden Sie Schriftpaarungen, Schrift-Inspirationen und viele Beispiele für verschiedene Font-Benutzer. Die Schriften, die Sie hier finden, können direkt heruntergeladen werden. Sie können sich aber auch die Seiten der Erstellung von Schriften ansehen Seiten der Erstellung von Schriften , um ein bisschen mehr über sie zu erfahren. Die andere Quelle, die ich verwende, heißt type woof.com. Und diese Seite hat viele großartige Ressourcen und Schriftklassifizierungen, wie zum Beispiel Serifenlose Schriften, Top-Serifenschriftarten , Top-Adobe-Schriftarten für Google-Schriftarten usw. usw. wie zum Beispiel Serifenlose Schriften, Top-Serifenschriftarten, Top-Adobe-Schriftarten für Google-Schriftarten usw. die Schrift, die Sie für sein Gut gewählt haben, können Sie einfach type of.com konsultieren. Ich denke also, dass wir ziemlich viel darüber berichtet haben, die richtigen Schriften für Ihre Projekte zu finden. Jetzt wissen Sie die Unterscheidung zwischen serifenloser Schrift als Skript - und Plattenserifenschriftarten. Sie kennen den Unterschied zwischen Anzeige- und Textschriftarten. Sie wissen, wo Sie Schriftarten für Ihre Projekte finden können, und Sie wissen, wohin Sie gehen müssen, wenn Sie jemals Zweifel an Ihrer Schriftauswahl haben. so gute Typografie ist eines der Schlüsselelemente eines erfolgreichen Website-Layouts. Es gibt jedoch einige andere Elemente , die ein gutes Design erzeugen oder brechen können. Lasst uns als nächstes über sie sprechen. 20. Bewährte Techniken des modernen Webdesigns: Mit jedem neuen Web-Layout, das Sie erstellen, werden Ihre Fähigkeiten besser. Wir werden schneller kreieren. Sie werden in einige gesunde Gewohnheiten geraten. Aber es gibt einige Dinge, die Sie von Anfang an in Ihrem Workflow verwenden könnten . Und ich spreche von den Best Practices des Webdesigns. also zunächst daran, die Erfahrung zu rationalisieren. Rationalisierung Ihres Designs für die beste Benutzererfahrung sollte die Faustregel Ihres Projekts sein. Nicht nur für Webdesign-Projekte in dieser Angelegenheit. Das klingt vielleicht hart, aber die meisten Leute, die eine von Ihnen entworfene Website besuchen werden nicht alle schönen Farben und Schriftarten sehen , die Sie verwenden. Wir werden aufgrund eines bestimmten Dienstes, den die Website bietet, besuchen . Wenn der Benutzer also nicht schnell bekommen kann, was er will, wird er woanders hingehen. Und wirklich ein Albtraum der Unternehmen in Bezug auf ihre Websites ist die hohe Absprungrate, was bedeutet, dass Benutzer ihre Eizellen sehr schnell verlassen und nicht wie erwartet damit interagieren. Deshalb ist es so wichtig alle unnötigen Elemente und Daten auf leicht verständliche Weise darzustellen. Was bedeutet das alles in der Praxis? Nun, es ist zum Beispiel eine gute Idee, Text zu minimieren. Erstellen Sie also kurze Absätze, wie zwei oder drei Sätze, die sowohl auf Desktop - als auch auf mobilen Geräten leicht zu lesen sind. Versuchen Sie auch, nicht mehr als drei bis fünf Farben und vielleicht zwei zusätzliche für Hover-Status zu verwenden mehr als drei bis fünf Farben . Und vermeiden Sie auf jeden Fall Unordnung. Denken Sie also daran, jeden Abschnitt zu einer Idee zu machen und versuchen Sie, die Anzahl der Call-to-Actions auf einen pro Abschnitt zu minimieren . Einfachheit ist also der Schlüssel zur Senkung der Absprungraten. Ein einfaches Design ist einfacher zu entwickeln und benötigt weniger Ressourcen, um das Gerät des Benutzers zu laden. Als Nächstes haben wir Konsistenz. Sobald Sie Ihre Schriftarten und Farben gefunden haben, bleiben Sie einfach bei ihnen. Es gibt nichts Unprofessionelleres als Schaltflächen und Texte, die auf verschiedenen Seiten Ihrer Website unterschiedliche Farben haben . Daher empfiehlt es sich, die Dokument-Assets zu verwenden , um Ihre Textstile, Farben, Komponenten und Schriftarten an einem Ort zu halten . Wir haben auch eine visuelle Hierarchie, und diese ist eng mit dem Begriff der Benutzerfreundlichkeit verbunden. Wenn wir zustimmen, dass das Hauptziel unseres Designs darin besteht, die Benutzer zu ermutigen eine bestimmte Aktion auf der Website durchzuführen. Wir müssen es ihnen leicht machen. So können wir dies zum Beispiel tun, indem wir Farben richtig verwenden, variable Schriftgewichte positionieren, leicht anklickbare Tasten hinzufügen usw. Sie sollten sich auch an die mobile Freundlichkeit erinnern. Die meisten Designer behaupten, dass sie dies beim Erstellen ihrer Layouts zuerst mit Blick auf Desktop-Versionen tun. Ich mache es selbst so. Ich denke, es ist einfach einfacher, so zu arbeiten, anstatt zuerst die mobile Version der Benutzeroberfläche zu erstellen. Das bedeutet jedoch nicht, dass Sie die reaktionsschnellen Versionen Ihres Designs vernachlässigen sollten . Was heutzutage der größte Teil des Webverkehrs von mobilen Geräten kommt , ist ein absoluter Meister, wenn man bedenkt, wie Ihr Design auf Smartphones und Tablets aussehen wird . Und ein Mensch kümmert sich sogar darum , den mobilen ersten Ansatz zu verfolgen, was bedeutet, zuerst die mobile Version der Website zu entwerfen und dann die Desktop-Version darüber zu erstellen. Was würde ein Design mobil freundlich machen? Da also die Kosten für mobile Daten in vielen Teilen der Welt immer noch ein Problem darstellen. Versuchen Sie, Ihr Design auf Mobilgeräten leicht zu machen. Dies bedeutet, dass Ihre Website möglicherweise nicht so viele Bilder oder Videos benötigt. Einer wird auf einem Smartphone angezeigt. Vielleicht ist der Schieberegler auf einem kleineren Gerät nicht so cool und effektiv wie auf einem größeren Bildschirm. Möglicherweise benötigen Sie sie auch mehr Leerzeichen oder größere Lücken zwischen Elementen. Sie sind also einfach einfacher zu tippen. Und auch der Text benötigt möglicherweise einige Anpassungen in Bezug auf Größe, Positionierung und vielleicht Zeilenhöhe. Dies sind also die Dinge, die Sie beachten müssen, wenn Sie Ihr Design mobil freundlich gestalten. Wir haben also auch Zugänglichkeit, die eng mit der gesamten Erfahrung verbunden ist. Die Benutzer erhalten es von Ihrer Website. Und wenn Sie Ihren Web-Lead unter Berücksichtigung der Barrierefreiheit entwerfen , müssen Sie ihn, ich meine, das Layout für alle Benutzer zugänglich machen . Wenn Sie tiefer auf das Thema eingehen möchten, sollten Sie die Richtlinien für die Barrierefreiheit von Webinhalten von Google verwenden. Sie können jedoch die folgenden vier allgemeinen Richtlinien verwenden die folgenden vier allgemeinen Richtlinien , um dieses Thema zu verstehen. Eine barrierefreie Website wäre also zuerst wahrnehmbar. Benutzer müssen also in der Lage sein, Ihre Inhalte anhand eines ihrer Sätze wahrzunehmen . Personen mit Sehbehinderung können beispielsweise Probleme mit den erforderlichen Feldern in Ihrem Kontaktformular haben den erforderlichen Feldern in , wenn sie nur mit einem roten Rand gekennzeichnet sind . So etwas wie ein Sternchen und ein Stück Texte wie erforderlich sollten hinzugefügt werden. Außerdem müssen Benutzer in der Lage sein, die Benutzeroberfläche in irgendeiner Weise zu betreiben. Zum Beispiel, indem Sie auf die Schaltflächen klicken, Video mit einigen bereitgestellten Steuerelementen anhalten oder anhalten. Verwenden Sie mindestens zwei Formen von Navigationssystemen, wie vielleicht Top-Navs, Fotolinks oder sogar Brotkrumen. Außerdem muss der Inhalt für die Nutzer verständlich sein. So sollten beispielsweise der Menüstil und die Positionierung zwischen verschiedenen Seiten oder Ansichten der Seite konsistent sein . Außerdem muss die Site robust sein, was einfach bedeutet, dass die Zeichen mit aktuellen Browsern, aber auch mit ihren zukünftigen Versionen kompatibel sein sollten . Aber das ist eher eine Herausforderung für die Webentwicklung. Und es gibt bestimmte Konventionen bei der Nutzung einer Website. Ich meine, heutzutage sind Benutzer es gewohnt, auf Websites auf eine bestimmte Weise zu arbeiten. Zum Beispiel haben sie früher das Menüsystem benutzt. Und dazu gehört das mobile Menü im Hamburger-Stil , das oben oder links auf der Seite zu finden ist. Sie sind es gewohnt, das Logo oben links oder oben in der Mitte der Seite zu sehen . Und sie werden verwendet, um in das Logo zu klicken. Und natürlich kann das ein Bild oder ein Bild sein , plus ich habe besteuert und das Bild, dieses Logo, wenn es geklickt hat, wird sie auf die Homepage bringen. Sie verstehen auch, dass Links vorhanden sind, wenn Sie den Mauszeiger über sie bewegen oder darauf klicken, sie ihr Aussehen ändern werden. Sie verstehen auch eine klebrige Navigation, die im Grunde erscheint, wenn ein Benutzer punktet, scrollen Sie dies auf der Seite nach unten. Und sie verstehen auch so etwas wie ein Taschen-zu-Top-Muster , das angezeigt wird, wenn der Benutzer die Seite scrollt. Und dann bringt sie ein Klick an den Anfang der Seite. Alle diese Regeln mögen zunächst eine große Einschränkung für den kreativen Prozess sein. Aber ich denke, dass es viel Platz gibt, um originelle Layouts zu entwerfen und sie für die Benutzer leicht verständlich zu machen . 21. Bereit für die Gestaltung von Bildern: Da nehme ich an, dass Sie ein aufstrebender Webdesigner und natürlich der nächste D-Benutzer sind. Ich dachte, es wäre eine gute Idee, ein Design zu erstellen , das Ihre Fähigkeiten einfach unter Beweis stellt. Und Sie können das Layout verwenden, das Sie letztendlich hier als Basis für Ihre eigene Website erstellen . Wenn Sie Designer, Freiberufler oder Portfolioelemente werden möchten. Wenn Sie einen Job als Webdesigner bekommen möchten. Aus diesem Grund werden wir die Elemente und Abschnitte hinzufügen , die in kreativen Designs am häufigsten vorkommen, die auch etwas geschäftsorientierter sind. Ich möchte nur die richtige Balance finden zwischen den Dingen, die Sie über XD wissen müssen , und Dingen, die für die Leute interessant genug sind für die Leute interessant genug , die Sie einstellen möchten. Also werden wir die Desktop-Version der Titelseite zusammen mit ihr entwerfen . Also mobile Version, aber auch eine einzige Blogpost-Seite. Und natürlich ist es die mobile Version zwei. Und übrigens ist es eine gute Praxis, etwas zu nutzen , das ich Designmedley nenne . Sobald die Desktop-Version eines bestimmten Abschnitts fertig ist, denke ich, dass Sie gleich danach die mobile Version erstellen sollten , wir können Ihr Design viel besser kontrollieren und es einfach behalten konsequent. Aber natürlich werden wir auch unser Design prototypisieren, was bedeutet, dass wir ihm Interaktivität hinzufügen werden. Nur um nachzuahmen, wie es aussehen würde, aussehen und sich verhalten würde, wenn es wie eine Live-Website wäre. Am Ende des Entwurfs - und Prototypprozesses sollten Sie also Ihr eigenes Projekt erstellen lassen. Und nicht wichtiger ist, dass Sie verstehen sollten, wie Sie ein komplettes XD-Webdesign-Projekt erstellen . Und ich ermutige dich zum Experimentieren. Ich ermutige Sie, dieses Design wie einen Zeiger zu behandeln , wie ein Beispiel, das Sie für Ihr eigenes Design verwenden könnten, Ihre eigenen Variationen dieses Designs. 22. Zunächst eine neue Datei erstellen: Also bin ich hier in XD auf dem Startbildschirm. Beginnen wir also mit dem Erstellen einer neuen Datei. Natürlich könnten wir genauso wie ein Standard-Web-Preset für 19201920 verwenden , aber ich gehe mit einer benutzerdefinierten Größe. Ich denke, dass wir mit einer Breite von 1920er Jahren und 4 Tausend in der Höhe beginnen können . Und ich klicke einfach auf diesen Kerl. Und natürlich können Sie, wie Sie bereits wissen, immer genau hier gehandhabt und die Größe Ihres Dokuments ändern und feststellen, wie sich dies Ihres Dokuments ändern und feststellen, wie sich dies auf die Größe unseres Layouts auswirkt sie. natürlich Wenn wir im Eigenschafteninspektor diesen Kerl einfach so gepackt haben, wirkt sich dies auch auf die Breite aus. Und übrigens machen wir es mit dem Auswahl-Tool. Wie Sie sehen können, ist dieses Tool ziemlich mächtig. Sie können damit Objekte transformieren , natürlich die Objekte auswählen und auch greifen. Aber natürlich, vorausgesetzt, wenn es leer ist, können Sie sich eine Kunsttafel schnappen und die Größe einfach so ändern. Du kannst es größer machen, du kannst es kleiner machen. Dann möchte ich natürlich so anders zu meiner vorherigen Größe zurückkehren , ich muss die 1920er Jahre verwenden, weil es wie eine Standard-Full-HD ist. Nun, Breite. Und ich gehe zurück auf 4 Tausend so. Eine andere, ich denke wirklich, wirklich, wirklich, wirklich, wirklich wichtig, hier zu verstehen, bevor wir mit dem Entwerfen von irgendetwas beginnen , ist, dass Sie das Rasterlayout direkt hier im Eigenschafteninspektor verwenden können direkt hier im Eigenschafteninspektor wenn wir es einfach wissen, lösen Sie es aus, Sie können sehen, dass wir diese all diese haben. Lass mich einfach zurückzoomen. Wir haben all diese Kolumnen, die es uns einfach ermöglichen, zu entscheiden , wie letztendlich unsere Elemente oder unser Designer insgesamt sein werden. Und natürlich könnte es uns helfen, die Elemente in unserem Design zu positionieren. Nun wird eine Liste angezeigt, die auf einem 12-Spaltenraster basiert , das Sie zum Beispiel wie in Bootstrap sehen können. Und wenn Sie mit Bootstrap nicht vertraut sind, ist einfach eine Entwicklungsumgebung, ist CSS- und JavaScript-Umgebung, die in der Entwicklungswelt sehr, sehr beliebt ist . Und das, dieses System verwendet 1212 Spalten. Und natürlich können Sie die Farbe ändern , wenn Sie das möchten. Und Sie können die Anzahl der Spalten auf etwas anderes ändern , wenn Sie möchten. Aber ich denke, so wie es aussieht, Es ist ziemlich Standard und ich würde nicht einladen, ich würde die Breite nicht empfehlen, als mit der Anzahl der Spalten oder mit der Rinnenbreite herumspielen . Und übrigens ist die Rinnenbreite wie dieser Rand zwischen diesen beiden, diesen beiden Spalten genau hier. Sobald wir also anfangen, in unseren Designelementen zu erstellen , können wir sie beispielsweise links anhängen, wie die linke Spalte und die rechteste Spalte. Aber ehrlich gesagt bin ich nicht, dass, wenn man sich die Entwürfe wie zeitgenössische Designs anschaut , diese nicht strikt an all diesen inneren Säulen gebunden sind . Wie immer mehr Designs wie Webdesign 3 werden Sie feststellen, dass sich viele Elemente gerne gegenseitig überlappen. Sie sind nicht wie an irgendeine Struktur geklebt, an irgendeine Art von Gitter-Layout. Aber es ist ein guter Indikator dafür, wie, wie breit Ihr Design sein sollte, wirklich sein sollte. Und es könnte Ihnen helfen, sich in Ihren Elementen zu positionieren, wenn Sie Probleme damit im Gegensatz zu den anderen Designelementen Probleme damit haben, sie in Beziehung zueinander zu positionieren. Dies ist jedoch optional. Ich komme zurück und komme zu dieser Layoutoption zurück. Jetzt während des Designprozesses denke ich, dass es ein bisschen hilft. Und wenn Sie mitmachen möchten, können Sie dieses Layout immer wie diese Spalten beibehalten und einschalten dieses Layout immer wie diese Spalten beibehalten , wenn nicht, müssen Sie es nicht tun. Aber nur damit Sie es wissen, werde ich mich auf diese beziehen, auf diese Spalten wie während des Entwurfsprozesses ziemlich viel. Natürlich ist es gut, unser Dokument zu speichern. Vielleicht speichere ich es lokal, weil ich es später, später, später, mit dir teilen möchte . Also speichere ich es als lokales Dokument. Und ich nenne es wie ein neues Design für Studenten, natürlich sollten Sie es nennen, ihm einen Namen geben, der Ihrem, mit Ihrem eigenen Design entspricht . Also werde ich diesen Kerl einfach retten. Und da sind wir los. Wir können, ich schätze, wir können mit unserem Header-Bereich beginnen. Also beginnen wir damit, etwas wie ein Logo hinzuzufügen, und wir werden vielleicht eine Art Navigation hinzufügen. Und vielleicht, und vielleicht füge ich ein Bild hinzu, aber lass uns das im nächsten Video machen. 23. Die richtigen Farben für unser Design finden: Also haben wir unsere neue Akte fertig. Also denke ich, wir könnten jetzt zum Beispiel damit beginnen, hier in der oberen linken Ecke ein Logo hinzuzufügen und vielleicht ihre Navigation hier oben rechts hinzuzufügen. Aber da ich gerne Prototyping und Design gleichzeitig machen möchte , um unsere Navigation zu prototypisieren, müssten wir einige Farben haben, oder? Ich meine, ich will es nicht, ich möchte den Hover-Status nicht mögen , wenn ich den Mauszeiger über die Navigationslinks fahre. Ich möchte sie nicht einfach im Mai unterstreichen oder mutiger machen. Ich möchte die Farbe ändern, weil wir dadurch auch lernen können, wie man den Prototyp besser prototypisiert und auch diese Farben haben müssten, wir müssten sie finden. Und wenn wir es nicht tun, wenn wir es selbst entwerfen und wenn nicht, wenn wir keine Ahnung von unserem Kunden haben, müssen wir diese Farben nur selbst finden. Wenn Sie bereits einige Bilder oder Assets an Sie gesendet haben, senden wir Sie natürlich einige Bilder oder Assets an Sie gesendet haben, von Ihrem Kunden aus. Sie sollten diese als Zeiger verwenden , um nach den Farben zu suchen. Oder vielleicht würde sich Ihr Kunde für eine bestimmte Farbe freuen , wer weiß. Aber wenn nicht, denke ich, dass es eine gute Idee wäre, zuerst ein Heldenbild für unser Design zu finden und dann unser Farbschema auf die Farben zu stützen , die Sie darin sehen können, in diesem spezifischen Helden bild. Und was ich will ist, dass ich wie ein gefälschtes Bild eines Porträts, ein Foto eines Designers oder eines Freelancers finden gefälschtes Bild eines Porträts, ein Foto eines Designers oder eines möchte, das keinen Hintergrund hätte, aber trotzdem ein paar schöne Farben hätte die wir einfach in unserem Design verwenden können. Dafür verwende ich die Seite, die rohes Pixel genannt wird. Und Sie müssen hier nur ein kostenloses Konto einrichten. Und dann können Sie suchen, naja, wenn Sie nach Premium-Fotos suchen möchten, können Sie das, aber natürlich müssten Sie dafür bezahlen. Aber wir haben auch gerne Public Domain und kostenlose Fotos hier. Was ich also tun werde, nun, was du tun könntest, ist einfach nach etwas wie Portrait zu suchen , ich würde PNG hinzufügen. Und das wird wissen, als würde man versuchen, ein paar Porträtfotos zu finden , die einfach keinen Hintergrund haben. Natürlich sind die Schöneren Premium-, Premium-Sektion. Also lasst uns Portrait hier ausprobieren, Portrait P und G. Und natürlich werden diese ein bisschen schöner. Aber was ich hier gefunden habe, ist diese Art von einem, es ist nicht wie ein Bild. Es sieht aus wie ein Schrei wie eine Illustration aus einem Bild, aber ich denke, es sieht wirklich gut aus. Es ist, dieses Mädchen ist wie ein hippes, kreatives, etwas, das hier ziemlich viele Farben gibt, die wir einfach aus diesem Design abrufen können, das eine hier ziemlich viele Farben gibt, die wir einfach aus diesem Design abrufen können großartige Basis für unser Design sein könnte . Also habe ich mich gerade entschieden, dieses Bild herunterzuladen. Und wenn wir zu XD gehen und ich einfach versuchen werde, dieses Bild zu finden, wie Sie sehen können, habe ich mit einem anderen experimentiert. Und ich werde einfach hier drüben drucken. Und ich denke, ich lasse mich einfach die Kunsttafel auswählen und schalte einfach das Layout aus. Und natürlich müssen wir es schaffen, es so kleiner machen. Aber dieses Bild oder diese Illustration wird meiner Meinung nach eine großartige Grundlage für unser Design sein , um die richtigen, richtigen Farben zu finden. Aber fangen wir das im nächsten Video an. 24. Das Logo und die Navigation hinzufügen: Wenn es also darum geht, das Logo zu Ihrer Disziplin hinzuzufügen , das Logo zu Ihrer Disziplin , haben Sie natürlich verschiedene Möglichkeiten. Sie könnten wie ein grafisches Logo hinzufügen , das Sie vielleicht selbst entworfen haben. Sie könnten ein Logo hinzufügen, das Ihr Kunde Ihnen gegeben hat, da er bereits ein Logo hat. Oder wir könnten ein sehr, sehr schnelles typografisches Logo-Glück gebrauchen, wie wir es in diesem Fall tun werden. Denn auch hier entwerfen wir nur ein einfaches, wie ein einfaches Logo für unsere Zellen, im Grunde weil wir die Freiberufler sind, die gerne unsere Arbeit präsentieren. Also schnappe ich mir einfach das Textwerkzeug und lasse mich einfach hineinzoomen . Im Moment werde ich einfach das Raster los. Und ich klicke einfach irgendwo hier. Und sagen wir, dass unser Name im Gegensatz zu Jane Doe nicht tippen möchte. Machen wir es wie Tiffany Jones. Ich hoffe, es ist hoffentlich generisch genug. Also hole ich mir jetzt einfach den Nachnamen genau hier. Ich glaube, ich habe hier ein Leerzeichen, also hole ich mir einfach den LastName und lass uns einfach die Farbe ändern, um vielleicht diese rote Farbe wie diese. Oder vielleicht hinterlassen blaue Bloods die blaue Farbe so. Jetzt kann ich einfach unser Layout zurückwerfen. Und jetzt können wir sehen , dass wir diesen Kerl einfach irgendwo hinstellen müssen , irgendwo hier gegen unsere linke, linke Spalte. Jetzt muss dieses Logo natürlich nicht so groß sein. So können wir jetzt einfach eine Vorschau unserer Seite mit dieser Desktop-Vorschauoption anzeigen. Jetzt können Sie sehen, dass dieses Logo im Grunde so aussehen wird, wenn Sie es überprüfen können , um die Größe zu verzögern oder nicht. Ich denke, dass es ein bisschen zu groß ist, also werde ich es einfach kleiner machen. Ich werde es vielleicht auf etwas wie 24 fallen lassen. Und jetzt lasst uns eine Vorschau auf diesen Kerl sehen. Ich denke, es sieht so viel besser aus. Wir haben das Logo. Vielleicht werde ich das Raster so los . Jetzt ist es eine gute Idee, einfach die Navigation wie auf der rechten Seite hinzuzufügen . Da ich also alles konsistent halten will, hole ich mir diesen Kerl einfach. Also das Logo, ich drücke und halte die Umschalttaste gedrückt und die Alt-Taste besteht darin, diesen Kerl einfach zur Seite zu klonen. Ich werde einfach dieses Tiffany Jones-Logo los und schreibe einfach so etwas wie zu Hause. Jetzt haben wir dieses Logo und wir haben unseren ersten Link bekommen. Vielleicht lasse ich es auf etwa 18 Punkte fallen . Und wir können diesen Kerl einfach in der Vorschau sehen. Jetzt denken Sie vielleicht, dass wir einfach dieses Element greifen und vielleicht einfach klonen könnten , diesen Kerl ein paar Mal nach rechts klonen, um einfach unsere Navigation aufzubauen und wir könnten es benutzen das Wiederholraster dafür, wenn du willst. Und es wird einfach viel, viel schneller sein. Aber wie gesagt, wir werden hier in XD nicht einfach etwas entwerfen, wir werden auch Prototyping machen. Und die Sache beim Klonen Dingen hier im XD ist, dass Sie, wenn Sie es tun, indem Sie einfach etwas greifen und ziehen , wobei die Alt-Taste ausgewählt und gut gedrückt ist. Oder wenn Sie das Wiederholungsraster verwenden, werden Sie auch die Prototypelemente, die einem bestimmten Element zugewiesen sind, nicht klonen die Prototypelemente, die einem bestimmten Element zugewiesen sind, . Da wir nicht hart, sondern intelligent arbeiten wollen, wäre es meiner Meinung nach eine gute Idee das erste Prototyp-Feature für unser Element zu mögen , zuerst das erste Prototyp-Feature für unser Element zu mögen und es dann mit der Prototyp-Funktion zu klonen , die diesem Element hinzugefügt wurde. Es würde also einfach bedeuten, dass wir ein bisschen schneller und ein bisschen intelligenter arbeiten würden. Lasst uns also lernen, wie man die Prototyping-Elemente im nächsten Video hinzufügt . 25. Prototyp unseres ersten Elements: Fangen wir also an, unseren ersten Prototyp in der Funktion hinzuzufügen. Und wir werden es tun, indem wir einfach die Farbe dieses Home-Links ändern die Farbe dieses Home-Links wenn einfach jemand darüber schwebt. Und um einem Element einige Prototyping-Funktionen hinzuzufügen . Und hier in XD müssen wir dieses Element zuerst in eine Komponente verwandeln. Und wir können es hier im Eigenschafteninspektor tun , indem wir einfach auf dieses Plus-Symbol auf dieser Komponentenregisterkarte klicken. Oder wenn Sie möchten, können Sie die Verknüpfung Control plus K verwenden. Also klicke ich einfach drauf. Und wie Sie sehen können, haben wir jetzt unsere Komponente und sie erscheint auch genau hier in unseren Komponenten, im Dokument, in den Dokument-Assets. Was ist eine Komponente? Komponente ist im Grunde ein Element hier in XD, mit dem Sie etwas Interaktivität hinzufügen können. Diese Interaktivität kann wie eine Schwebephase oder vielleicht so sein, als würde man das Aussehen verändern. Ich ändere die Position, all diese Dinge. Und diese können innerhalb von 11 Komponenten oder einer Reihe von Komponenten erfolgen . Jetzt wird unsere erste Komponente extrem, extrem einfach sein. Alles, was wir wirklich brauchen, ist die Farbe unseres Links zu ändern , wenn wir den Mauszeiger darüber bewegen. Und das ist wie das typische Verhalten eines Links in einem Menü, das Sie auf einer Website sehen würden. In unserem Standardstatus ändert sich also nichts. Dies ist nur ein Flugzeug wie ein sehr, sehr dunkles Grau. Im Grunde Text. Ich klicke auf dieses Plus-Symbol mit der Aufschrift Status hinzufügen. Und hier drin möchte ich den Hover-Status hinzufügen. Dann können Sie natürlich seinen Namen ändern, wenn Sie möchten. Aber ich denke, dass der Hover-Status ziemlich selbsterklärend ist und es hier einfach den Trick macht. In unserem Schwebezustand brauchen wir, wie ich bereits erwähnt habe, wie ich bereits erwähnt habe, nur die Farbe zu ändern. Und wir könnten die gleiche blaue Farbe wie in unserem Logo verwenden . Also diese blaue Farbe. Aber wir können gerade auch eine andere Farbe verwenden, nur um etwas Abwechslung hinzuzufügen, nur damit Sie verstehen was hier ein bisschen besser passiert. Im Hover-Status werde ich den Text einfach so lesen lassen . Standardstatus. Lass mich einfach reinzoomen. Also Standardzustand Grau, zeigen Sie den Mauszeiger rot. Und wir können diese Funktionalität ein bisschen besser überprüfen und verstehen , sobald wir das erreicht haben, sobald wir die Desktop-Vorschau erreicht haben. Wenn ich jetzt mit dem Mauszeiger über diesen Kerl fahre, sieht man, dass er sich verwandelt, er wird so rot. Wenn Sie nun die Desktop-Vorschau verwenden und den Hover-Status oder andere Zustände überprüfen möchten , denken Sie daran, zuerst in den Standardstatus einer bestimmten Komponente zurückzukehren . Denn wenn Sie zum Hover-Status zurückkehren und dann auf die Vorschau klicken, sehen Sie diesen Hover-Status immer in OB und wie aktiviert ausgelöst. Und wir werden den Schwebeeffekt nicht einfach sehen können. Denken Sie also daran, in den Standardstatus zurückzukehren , wenn Sie eine Vorschau anzeigen möchten. Wie gesagt, denke ich jetzt, jetzt ist es ein guter Moment, es ist ein guter Moment, um diese Komponente in ein Wiederholungsraster zu verwandeln. Also klicke ich einfach auf Raster wiederholen. Und wenn wir das tun, können Sie sehen, dass wir hier im Grunde zwei Optionen haben, die es uns ermöglichen , diesen Kerl entweder vertikal so zu wiederholen, was wir nicht wollen. Ich meine, wir erstellen kein vertikales Menü oder wiederholen diesen Kerl so horizontal, und wir müssen nur entscheiden, wie viele Links wir wollen. Normalerweise würden Sie es sein, wenn Sie diese Website nicht für sich selbst erstellen würden, würden Sie einige Hinweise von Ihrem Kunden erhalten. Aber sagen wir, wir wollen einen Home-Blog, Kontaktportfolio und über uns haben , so etwas. Also Home Blog-Portfolio über uns und Kontakt. Also noch ein Link wie dieser. Und da sind wir los. Das ist unsere, das ist unsere Navigation. Wir müssen die Länge ändern. Aber wenn wir diesen Kerl gerade in der Vorschau sehen, können Sie sehen, dass all das, wie Prototyp-neue Funktionen , mit den Designfilmen geklont wird . Also jetzt denke ich, ich denke, wir könnten uns einfach unser Wiederholungsraster schnappen und wir können die Gruppierung aufheben. Und wie Sie sehen können, haben wir all diese Komponenten genau hier. Das sind also alle Links, die wir haben. Also hole ich mir einfach diese erste Komponente und nenne sie zu Hause. Der nächste wird so ein Blog genannt. Dieser wird als Portfolio bezeichnet. Dieser wird so sein wie über uns, Über uns. Und dieser wird so etwas wie Kong-Takt sein. Und natürlich sind all diese Elemente immer noch Komponenten, daher haben sie den Hover-Status und diesen Standardstatus. Wenn wir es jetzt nur noch greifen wollen, so wie dieser Blog-Link hier. Und wir möchten diesen Text nur von zu Hause zu Blog ändern. Beachten Sie, dass wir immer noch diesen vorherigen Text haben, wenn Sie in den Hover-Status wechseln . Also nicht nur im Schwebezustand, dem Farbgen, sondern auch wir haben einen separaten Text für diesen Hover-Status. Also hier drin müssen wir auch einfach nur einen Blog eintippen. Also, wenn wir nun zur Komponente und dem Standardzustand gehen , ändert sich nur die Farbe. Das ist also etwas, das Sie wissen müssen, lassen Sie Bedenken. Ich erinnere mich dass ich, als ich das lernte , der Verkäufer, dieses Feature, wirklich so verwirrt war. Warum, warum ändert es sich nicht so, wie ich es ändern möchte, denn warum funktioniert es jetzt so? Und dann habe ich gerade die Hardware erkannt , die Sie wissen müssen, Sie müssen diese Elemente in allen Zuständen ändern , denn wenn Sie es nicht tun, werden Sie einige unangenehme Überraschungen bekommen. Also die Über uns, ich gehe in den Schwebezustand und ich werde so über uns eintippen. Der letzte sollte Kontakt sein. Also werde ich das ändern , um so Kontakt aufzunehmen. Und natürlich wird das Gleiche für den Schwebezustand gehen. Also kontaktiere. Da sind wir los. Und mal sehen, Standard, Standardstatus. Die Farbe ändert sich, nur die Farbe ändert sich und nur die Farbe ändert sich. Wir möchten nur warnen, dass Sie sich ändern möchten, die Farbe ändern, nicht den Text. Das letzte, was Sie hier tun müssen, wäre sich vielleicht unser Layout zu schnappen, wie unsere Kolumnen. Und ich bringe diesen Kerl einfach an die rechte Seite und bewege diese Typen vielleicht ein bisschen zur Seite. Vielleicht irgendwo hier drin. Und dann wähle ich alle diese Komponenten aus. Und ich werde einfach dieses Element hier verwenden , das heißt „Horizontal verteilen“. Und wenn ich das mache, können Sie sehen, dass unsere Navigation einfach schön, naja, schön verteilt ist . Jetzt können wir einfach all diese Elemente greifen und einfach nicht sehen, wie diese Funktionalität funktioniert. Und wir können sehen, dass wir diesen schönen, im Grunde wirklich schönen Schwebeeffekt haben, schätze ich. Und was noch wichtiger ist, werden wir lernen, wie man das benutzt. Nun, im Grunde genommen, wie man unseren Elementen die ersten ähnlichen Prototyping-Funktionen hinzufügt . Jetzt kann ich es also, jetzt schätze ich, dass wir uns einfach alle diese Elemente schnappen können . Ich gruppiere sie. Ich drücke Control G auf meiner Tastatur. Und ich nenne es einfach so Navigation. Und dieser Tiffany Jones. Ich nenne es einfach Logo. Da sind wir los. Da sind wir los. Im Grunde genommen haben wir unsere ersten, ersten Header-Elemente vollständig. 26. Füge den Aktiven Zustand und die ersten the hinzu.: Bevor wir wie einige Hero-Elemente hinzufügen , wählen Sie das Bild aus, vielleicht einen Hintergrund und einige wie Haupt-, Hauptüberschrift , Hauptaufruf zum Handeln, all diese Dinge. Ich denke, es ist wichtig , eine Sache zu verstehen. Und das Ding sind die aktiven Staaten. Und ich spreche nicht wirklich von den Prototyping-Funktionen hier in XD, aber etwas, das wichtig ist, fehlte auch die Welt der Webentwicklung und des Webdesigns. Und dieses Ding ist aus Sicht der Benutzerfreundlichkeit, einem Standardpunkt oder UX-Standpunkt wichtig . In Ihren Entwürfen müssen Sie also den Benutzern angeben, Sie also den Benutzern angeben welches Element derzeit ist. Sagen wir, dass es funktioniert als wäre es im Moment aktiv. Und in diesem Fall in diesem speziellen Fall, wenn wir über unsere Navigation sprechen, möchten wir in diesem speziellen Fall, wenn wir über unsere Navigation sprechen, ihnen mitteilen, nun, wir möchten den Benutzern mitteilen, auf welcher Seite sie sich gerade befinden. Also sind sie in diesem Fall derzeit auf der Homepage, oder? Wir müssten den Benutzern also mitteilen , dass dies die Basis ist , auf der sie sich derzeit befinden. Und normalerweise wird es auf die gleiche Weise angezeigt oder verwendet dieselben Attribute wie die Links, die schweben oder so ähnlich. In meinem Fall hole ich mir einfach den Home-Link. Und ich will, ich möchte nur bezeichnen, die Textfarbe von diesem Grau ändern. Lassen Sie mich einfach zu meinem Vermögen zurückkehren, zu dieser roten Farbe, die Sie gut haben, haben wir vor einer Sekunde verwendet, um den Hover-Status zu erstellen. Wenn wir also jetzt einfach zu unserem Design gehen, können Sie sehen, dass unser Home-Link durch diese rote Farbe gut angezeigt wird . Und wenn wir dann den Mauszeiger über diese Elemente bewegen, können Sie sehen, dass sie gut waren, naja, sie haben die Farben geändert, wenn sie so schweben. Weißt du was? Wenn ich es mir ansehe, bearbeite jetzt Licht, ich denke, ich werde einfach schnell die Farbe dieses Textes ändern, genau hier, nur um die Dinge konsistent zu halten und vielleicht wird es sein nur ein bisschen auffälliger. Lass es mich einfach sehen. Ja, es wird in Ordnung sein. Ich schätze. Ich weiß, dass es ist, es ist etwas generisch. Aber nein, es geht mehr darum, XD zu lernen, wie man entwirft und prototypisiert, anstatt es zum besten Design der Welt zu machen. Also okay, wir haben das Logo, wir haben die Navigation. Jetzt fügen wir unser Bild hinzu. Und wie Sie bereits wissen, ist dies dieses Bild genau hier. Und ich schätze, ich hätte das Bild vorher speichern sollen. Also lass mich einfach wieder das Rechteck schnappen. Ich werde dieses Bild einfach sehr, sehr schnell so maskieren. Ich gehe zu meinen Ebenen. Ich hole mir dieses Rechteck und das Bild und drücke Control Shift M auf meiner Tastatur, um es einfach auszumaskieren. Also jetzt könnte ich einfach hineingehen, vielleicht irgendwo hier hinstellen. Was ich jetzt machen will, ist, dass ich einfach hinzufügen möchte, vielleicht werde ich nur ein bisschen größer werden. Ich werde einfach wie einen Hintergrund hinzufügen, genau hier. Und dafür schnappe ich mir einfach das Stiftwerkzeug. Und ich markiere einfach ein paar Punkte und halte die Umschalttaste gedrückt, ich werde versuchen, diese Kanten genau hier zu finden. Natürlich können wir es immer, immer etwas später ändern, vielleicht irgendwo hier. Und dann schließe ich einfach die Form, damit sie in etwa so aussieht. Und ich möchte es mit meiner Hauttonfarbe füllen. Und natürlich muss dieser Typ den ganzen Weg nach hinten gehen. Also werde ich es schnappen und die Strg Shift plus links, linke Klammer drücken . Also Tastatur, Taste auf meiner Tastatur. Und da sind wir los. Vielleicht ist dieser vielleicht ein bisschen zu groß. Dieses Bild ist zu vage, so etwas, und wir werden es leicht zur Seite bewegen . Lassen Sie uns jetzt eine Vorschau auf unser Design sehen. Also fängt es an, sieht ganz gut aus. Jetzt müssen Sie natürlich keinen Hintergrund mögen, aber es wird zu einem gängigen Designtrends. Du könntest einfach ein einfaches wie ein Rechteck hinzufügen. Du musst es nicht auch machen. Nein. Ich muss es machen, als wüsste ich es nicht. Es ist eine Falle, da ich Trapez oder so etwas habe. Aber jetzt ist es nur ein, ich denke, es ist einfach ein netter Design-Touch. Und es erlaubt uns auch, etwas mehr Platz zu haben, wie hier auf der linken Seite, um etwas hinzuzufügen wie: Hi, ich bin Tiffany, ich bin Designerin. Danke, dass du vorbeigekommen bist, um mir diese Dinge kennenzulernen. Aber bevor wir all diese Elemente tatsächlich hinzufügen, müssen wir immer noch eins tun. Das heißt, wir müssen uns um die Reaktionsfähigkeit unserer bisherigen Entwürfe kümmern . Und das Wichtigste hier ist, sich um die Reaktionsfähigkeit unserer Speisekarte zu kümmern. Und das gut zu tun, müssen wir ein anderes separates, eine separate Kunsttafel hinzufügen . Und natürlich füge tatsächlich ein komplett neues Menü gut gebaut hinzu. Aber weißt du was? Fangen wir damit im nächsten Video an. 27. Beginnen wir die mobile Version des Designs: Um also unser mobiles Design hinzuzufügen, brauchen wir etwas, um es anzuziehen, oder? Also brauchen wir eine neue Zeichenfläche. Dafür hole ich mir einfach das Artboard-Werkzeug. Und von den mobilen Voreinstellungen denke ich, dass ich mit iPhone 13, Twelve Pro gehen werde. Und ich will nicht, dass es so kalt wird. Ich gehe zu meinem Ebenen-Panel und stelle fest, dass wir diesen Namen bereits haben, nun, dieser Name wird hier vorgestellt. Also haben wir unsere Artboard Homepage bekommen, wir haben unser iPhone 13, 12th Pro nach Hause gut, Zeichenfläche. Also nenne ich es einfach so ein Heimmobil. Bevor wir natürlich die Navigation hinzufügen, hole ich mir das Logo. Und ich werde mir einfach diese Zeichenfläche schnappen , ist die mobile Zeichenfläche zu Hause. Und hier können wir auch das Raster-Layout verwenden. Und wenn wir diesen Kerl jetzt einfügen und du siehst, wo wir ihn anhängen müssen. Also auf der linken, linken Seite. Und ich denke, es ist ein bisschen zu groß. Lass uns etwas wie 18 versuchen. Und jetzt lasst uns das Overlay loswerden. Und lasst uns vielleicht sogar eine Vorschau auf diesen Kerl sehen. Ich denke, es sollte gut aussehen. Und auch bevor wir diese Navigation hier tatsächlich hinzufügen, haben wir zwei. Ich denke, es wäre eine gute Idee, unseren Hintergrund, diesen Hintergrund, genau hier hinzuzufügen . Bevor ich das mache, bevor ich das einfach kopiere, sieht man, dass ich nicht glaube, dass ich genau hier richtig auf mein geklickt habe. Und das können wir leicht beheben. Mit diesem, was das Auswahlwerkzeug aktiv ist, könnten wir einfach in eine Form doppelklicken und vielleicht passiert nichts wirklich. Aber Sie können sehen, dass diese wie diese Begrenzung sind, diese Begrenzungsrahmenänderungen haben es. Sie können sehen, dass wir diese Zeilen genau hier haben , die darauf hinweisen, dass wir gerade die gesamte Form ausgewählt haben. Aber wenn wir hineindoppelklicken, sind diese weg. Und jetzt können wir einfach die Ankerpunkte greifen und sie einfach bewegen. Es ist also im Grunde so verwandeln würde sich das Auswahlwerkzeug in ein Ankerpunkt-Werkzeug , so etwas. Lass mich einfach gehen, Oh Mann. Es ist ein großes. Also lasst uns einfach hier runter gehen. Und ich verlege es einfach irgendwo hin. Und dann mal sehen, ich schätze, diese Jungs werden es gut gehen, aber vielleicht sollten wir das, dieses Element ein bisschen nach oben verschieben . Und lass uns einfach hier sehen, Typ sieht gut aus. Jetzt können wir vielleicht, anstatt diesen Kerl einfach zu kopieren und dann mit diesen Ankerpunkten herumzuspielen, kann ich einfach die ganzen mobilen Fänge das Rechteckwerkzeug greifen. Und lassen Sie uns einfach ein Rechteck erstellen, das sich über unseren gesamten verstreuten ersten Bildschirm erstreckt. Natürlich brauche ich die Grenze nicht. Ich muss nur füllen und was würde das Pipette-Werkzeug, das ich initialisiere, indem ich die I-Taste drücke, wir können diese Farbe einfach abprobieren. Und wieder drücke ich die linke Klammer Control Shift, um sie ganz zu ihnen zu legen, an den unteren Rand des Stapels, was im Grunde so wäre, als würde ich das Objekt-Menü verwenden, anordnen und dann zurück senden. Jetzt müssen wir unser Menüsymbol hier auf der Seite hinzufügen. Und ich denke, dass der einfachste Weg, dies zu tun, nicht das Stiftwerkzeug zu greifen und einfach alles selbst herauszuzeichnen, sondern wir können die Icons für das Design-Plugin dafür verwenden, das Eigentlich, das Plugin das wissen wir bereits. Und lasst uns einfach versuchen, etwas wie ein Menü einzutippen . Und wie Sie sehen können, haben wir hier alle möglichen verschiedenen, verschiedenen Menüs. Vielleicht sorge ich einfach dafür , dass ich in der richtigen Zeichenfläche bin. Probieren wir dieses Menü aus. Ich erinnere mich nicht an den Hintergrund, sondern an das Menü. Versuchen wir es mit einem anderen. Dieser ist definitiv etwas kleiner. Und ich glaube, ich werde damit gehen und jetzt sieht es okay aus. So können wir jetzt auch die Farbe dieses Menüs ändern die Farbe dieses Menüs , damit es mit unserem Logo übereinstimmt. Aber wenn Sie denken, dass es so einfach ist wie nur auf die Farbe zu klicken, ist es leider nicht der Fall. Ich meine, Sie können sehen, dass die Grenze genau hier überprüft wird. Es sollte also logisch sein, dass sich diese Randfarbe ändern sollte, wenn wir einfach auf eine Farbe klicken . Es. Wie Sie sehen können, funktioniert es nicht so. Ich denke, was ich vorschlagen würde, ist, einfach das Objektmenü zu greifen, zum Pfad zu gehen und einfach „ Umrissstrich“ zu wählen, was all diese Elemente zu wie gefüllten Pfaden machen würde , anstatt nur zu nein grenzen. Und wie Sie jetzt sehen können, wird in diesem Eigenschafteninspektor die Füllung ausgewählt. Und jetzt können wir diese Farbe tatsächlich in etwas ändern, das zu unserem Logo passt. Wir könnten die rote Farbe wählen, könnten Nein wählen, wie diese graue Farbe. Der Punkt ist hier, dass manchmal, wenn Sie nicht wissen, warum etwas funktioniert wie bei diesen Symbolen, vielleicht eine gute Idee ist, die Striche einfach mit den Füllungen auszutauschen Im Moment können Sie sehen, dass wir, wenn ich die Umschalttaste gedrückt halte, keine Probleme damit haben würden , die Größe dieses Symbols zu ändern. Und wir hätten Probleme damit, wenn ich dir einfach zeigen könnte, was ich meine. Wenn ich wieder mag, ich einfach dieses Menü hinzu. Ich verschiebe es. Wenn ich jetzt einfach versuche, es zu vergrößern oder zu verkleinern, sieht man, dass wir das verlieren. Nun, wir verzerren jetzt tatsächlich die Abstände zwischen ihnen, zwischen diesen Elementen dieses Hamburgermenüs. Wir kriegen dieses Menü genau hier. Lassen Sie mich einfach schnell prüfen, ob alles gut auf das Raster ausgerichtet ist. Wie Sie sehen können, ist es das nicht. Also verschiebe ich es hier irgendwo hin. Und wieder hole ich mir das Logo und stelle sicher, dass alles gut und gut ausgerichtet ist. Also haben wir das Logo bekommen, wir haben das Menü bekommen und wir haben den Hintergrund. Jetzt denke ich, dass es höchste Zeit ist einfach unser mobiles, mobiles Menü hinzuzufügen, das wir auslösen würden, sobald wir auf dieses Hamburger-Menüsymbol klicken. 28. Das Menü „Mobile hinzufügen“: Also lasst uns jetzt unsere Speisekarte ausbauen. Dafür denke ich, dass ich einfach das wiederverwenden werde, was ich bereits habe. Ich meine, wir brauchen eine separate Art Board, damit dieser Effekt richtig funktioniert. Also schnapp ich mir einfach diese ganze mobile Zeichenfläche und dupliziere sie einfach. Jetzt brauche ich dieses Logo nicht genau hier. Natürlich brauche ich dieses Menüsymbol auch nicht . Also gehe ich einfach zu meinen Icons für das Design-Plugin. Und hier drin versuche ich einfach, so etwas wie einen Knopf zum Schließen zu finden. Ich denke, das sollte okay sein, dieser sollte ausreichen. Und ich werde es einfach irgendwo hin verlegen. Es passt also einfach zu diesem Symbol, wie das Hauptmenü-Symbol , das ich natürlich loswerde. Das ist also eine super, super einfache, wie eine bloße Struktur unseres mobilen Menüs. Und ich rufe an wie ein mobiles Menü ausgelöst oder vielleicht so überlagert. Aber natürlich muss es hier nicht wie unser Haupthintergrund aussehen . In der Tat denke ich, dass ich es nicht so bedeutsam machen möchte . Auch um Ihnen jetzt zu zeigen, wie, ähm, wie diese bald in Interaktionen kommen, wie sie aussehen würden. Also gehe ich zu meinem Vermögen und denke, ich werde den Hügel wie die Hintergrundfarbe in diese bläuliche Farbe ändern . Und ich werde auch die Farben ändern, die Farbe dieses nahen Symbols. Vielleicht überprüfe, wie dieser Typ aussehen wird. Ich glaube, es wird gut aussehen. Lasst uns nun schnell unsere Links aufbauen. Also haben wir Home-Blog-Portfolio über uns und Kontakt bekommen. Lassen Sie mich also einfach schnell und schnell versuchen, das einzutippen. Also zu Hause. Und lasst uns mich diese Farbe überprüfen. Diese Schleife sollte in Ordnung aussehen. Und lassen Sie es uns vielleicht etwas größer machen , etwa 22. Also wird es ein Home-Blog sein. Ich weiß was, lasst uns einfach schnell den Grid-Home-Blog wiederholen. Dann wird es Portfolio, Bowers und Kontakt sein. Insgesamt können wir also 12345 einfach nein, nur die Links geändert. Also zu Hause. Es gab einen Blog als ich denke, es war Portfolio als über uns. Und schließlich haben wir so Kontakt bekommen. Und jetzt werde ich die Gruppierung all dieser Elemente einfach aufheben. Und wenn du willst, kannst du sie so lassen, oder du könntest sie einfach an der Mitte ausrichten. Und vielleicht können wir sie gruppieren. Also drücke ich Control G auf meiner Tastatur, denn wenn wir uns jetzt nur Mitte vertikal ausrichten, wird diese Gruppe in Bezug auf unsere zugrunde liegende Zeichenfläche ausgerichtet . Wir haben also unser mobiles Menü-Overlay und wir haben unser erstes Logo und dieses Menüsymbol erhalten. Und wir haben unser zweites Artboard mit nur dem Overlay-Effekt des mobilen Menüs bekommen. Aber natürlich müssen wir immer noch eingeben, dass Ted eine Art Interaktion zwischen diesem Symbol und dem mobilen Menü und dem Offenlegungssymbol und unserem primären, primären Bildschirm kennt Ted eine Art Interaktion zwischen diesem Symbol und dem mobilen Menü und dem . Also gehe ich zum Prototyp-Panel. Und wie hier drin möchte ich dieses Symbol erstellen und wenn ich ausgelöst wurde, wenn ich ausgelöst wurde, wenn ich angetippt wurde, wollte ich dieses Menü gerne öffnen. Zuerst. Ich werde versuchen, es auszuwählen. Ich schätze, es wird einfacher sein, es hier auszuwählen. Und wie Sie sehen können, haben wir diesen kleinen Marker, der kleine Marker auftaucht. Und wir können es einfach schnappen und unser mobiles Menü-Overlay bringen. Und wie Sie sehen können, es bereits eine Animation für uns erstellt, also haben wir einen Trigger zum Tippen gesetzt. Wir können den Typ dieser Animation von Übergang zu Auto Animate und oder anderen ändern . Normalerweise verwende ich auto animate. Es sieht einfach am nettesten aus, schätze ich. Dies ist also eine Möglichkeit, dies zu tun, aber Sie können auch das Symbol greifen, dieses Symbol auswählen und das Symbol offenlegen. Und dann können wir einfach von diesem Eigenschafteninspektor aus, ohne diesen blau-weißen, weißen Pfeil vor dem blauen Hintergrund zu berühren , die Registerkarte auswählen. Aber zuerst müssen wir die AD-Interaktion einstellen, und dann haben wir die gleichen Elemente. So können wir das automatische Animate hinzufügen und dann können wir einfach die Kunsttafel auswählen, die in unserem Fall das Heimmobil ist. Wenn wir jetzt einfach diese Vorschaufunktion starten, lassen Sie es mich einfach an die Spitze bringen. Sie können sehen, dass jetzt alles richtig funktioniert. Wenn wir also auf dieses Menüsymbol klicken, können Sie sehen, dass dieses Overlay-Element, Overlay-Zeichenfläche, tatsächlich gut auftaucht. Es ist also alles gut und in Ordnung. Es funktioniert alles. Aber nach meinem Geschmack ist es irgendwie langweilig. Ich meine, heutzutage können Sie so viele verschiedene Overlay-Optionen wie Interaktionen zwischen, wie Overlay-Menü und das Symbol, das es auslöst, sehen. Lassen Sie uns also sehen, wie wir diese Interaktionen zumindest nachahmen konnten obwohl es modernere Möglichkeiten gab ein mobiles Menü-Overlay anzuzeigen. 29. Lass uns eine bessere Möglichkeit lernen, das Menü-Symbol zu animieren.: Okay, also wissen wir, wie man Übergänge zwischen grundsätzlich Kunsttafeln schafft . Aber wie ich bereits erwähnt habe, denke ich, dass das nun an die Moderne gerissen ist. Das war, das ist zumindest ein bisschen langweiliger Geschmack. Also lasst uns tatsächlich etwas Lustigeres machen. Lass mich das einfach ausschalten. Und ich werde einige dieser Elemente wiederverwenden, aber die meisten von ihnen, naja, einige von ihnen werde ich nicht mehr brauchen, also werde ich einfach diesen Hintergrund und das wie dieses Menü greifen . Und ich stelle es vielleicht irgendwo hier hin. Vorerst. Ich werde das nicht gut benutzen, diese ganze Zeichenfläche eigentlich, also werde ich sie einfach entfernen. Ich werde diese Ikone auch los. Ich möchte einfach von vorne anfangen. Was ich mache, ist, dass ich selbst ein Menüsymbol erstelle . Also werde ich vielleicht so etwas erstellen . Es ist also nur ein einfaches Rechteck , das ich mit einer entsprechenden Farbe füllen werde . Und ich möchte, dass dieser Typ abgerundete Ecken hat. Sagen wir mal etwas wie 50. Aber vielleicht ist Höhe sechs ein bisschen zu viel. Mal sehen, drei. Das sollte in Ordnung sein. Und dann drücke und halte ich einfach die Alt-Taste gedrückt, um einfach zu drucken, dass der Typ irgendwo hier ist. Oder wir könnten auch einfach die Option Raster wiederholen verwenden, um nur zwei weitere Elemente zu erstellen. Und dann können wir es vielleicht so etwas machen. Lass mich sehen. Es sieht irgendwie gut aus, obwohl es vielleicht nur ein bisschen zu groß ist, also können wir diese Elemente einfach aufheben und diesen Kerl einfach ein bisschen kleiner machen . Das sollte reichen. Weißt du, ich will hier einfach keine Haare spalten, aber ich möchte dieses Layout einschalten und ich möchte nur, lass mich sie einfach schnappen und ich werde sie irgendwo hier hinstellen. Das sollte sein, das sollte in Ordnung sein. Was ich hier machen möchte, möchte ich einen Übergang zwischen diesem schaffen, wie diesem ganzen Zustand, der durch dieses Symbol ausgelöst wird , und diesem Zustand genau hier , der im Grunde unser Hintergrund ist und unsere und unsere Links. Um das zu tun, gruppiere ich diese Elemente vielleicht zuerst gruppiere ich diese Elemente vielleicht zuerst und nenne sie wie das Hauptmenü-Symbol. Da sind wir los. Und ich möchte, dass es wie oben genau hier ist. Der nächste Schritt wäre, so dieses Menü zu greifen. Schnapp dir diese Elemente. Vielleicht gruppiere ich sie auch. Also nochmal, dieses Menü und das, dieser Typ genau hier, und ich werde eine Komponente aus diesen beiden Elementen erstellen . Im Standardstatus. Dieses Menü hier ist weg. Wir können es nicht sehen, richtig? Aber wir können auch einen neuen Zustand hinzufügen , den ich anrufen werde , wie ich vielleicht, ich weiß nicht, angezapft und in diesem Zustand und diesem Kerl, lass mich einfach die ganze Gruppe schnappen. Dieser Typ wird den ganzen Weg hier runter gehen. Also wird es alles abdecken. Aber es muss so sein, dieses Symbol. Also nochmal, Standardstatus wie dieser, blieb so. Aber im angezapften Zustand möchte ich dieses Icon auch hier ändern. Lassen Sie mich diese Elemente einfach loswerden. Ich möchte diese 33 Marker nur drei drehen , im Grunde drei Zeilen. Also diese, lassen Sie mich einfach diese Gruppe eröffnen. Also diese Elemente möchte ich sie in ein X-Symbol verwandeln . Und um das zu tun, schnappe ich mir diese mittlere und werde seine Deckkraft bis auf 0 senken , aber ich werde auch die Füllfarbe ändern. Lass mich einfach zurückgehen und zu meinem Vermögen gehen. Und dann hole ich mir dieses Element. Ich gehe zurück zu meiner Ebene. Das ist also diese Zeile. Im Grunde möchte ich mich drehen und um 45 Grad drehen, glaube ich. Und ich möchte es so sagen, als bringe es ein bisschen runter. Also werde ich diesen Y-Wert erhöhen. Und dann hole ich mir dieses untere Element. Und ich werde mich auch drehen, aber ich denke, ich muss es um minus 45 drehen. Und dieser Typ muss ein bisschen hochgehen. Lassen Sie mich einfach, lassen Sie mich einfach reinzoomen. Schauen wir uns hier irgendwo hin. Und natürlich müssen sie auch ihre Farben ändern lassen. Also gehe ich zu meinem Dokumentenvermögen. Und wieder dieses Rechteck nochmal Document Assets. Und so haben wir so etwas. Also lass mich einfach zu meinen Komponenten zurückkehren. Also Layer-Komponente N, Standardstatus wie folgt, und tippte dann auf Status wie folgt. Und auch die Positionierung dieser Elemente ist auch wichtig, da dieses Overlay-Menü von oben kommt , in diesem Fall rechts. Aber wir können in nur einer Sekunde damit spielen. Ich hole mir diese Komponente, oder? Und ich gehe zu vielleicht nennen wir es wie Menü f x, so. Und ich gehe zum Prototyp. Und in meinem Prototyp-Arbeitsbereich versuche ich einfach, dieses Hauptmenü-Symbol zu finden. Und wieder werde ich einfach tun, was ich will ist, dass ich sicherstellen möchte, dass alles gut ausgerichtet ist. Also hole ich mir dieses Hauptmenü-Symbol und möchte es setzen, ich möchte es hier oben auf meinen Stapel legen. Und ich möchte, dass es für Standard und für Tapped gleich ist. Also lass uns sehen. Ja, okay, also ist es okay. Also nochmal, Standardprototyp-Workspace. Und im Standardzustand versuche ich wieder, mein Hauptmenü-Symbol zu finden. Und ich möchte es gut auslösen, was ein automatisches Animieren sein wird. Aber hier drin können wir, wie Sie sehen können, zwischen einer Kunsttafel in einem Bundesstaat wählen , den ich wählen möchte. Und dann gehe ich zu meinem, wir gehen zurück zum Design-Workspace. Und dann gehe ich zu meinem angezapften Stays State Prototyp. Und in diesem Zustand möchte ich nur mein Hauptmenü-Symbol finden. Ich möchte einen Tipp-Trigger hinzufügen , der mich in meinen Standardstatus zurückversetzt. Und wieder gehe ich zurück zu Design. Es gibt viel Klick, aber das ist hier ziemlich wichtig. Dann. Wenn wir nun nur eine Vorschau auf unser Design ansehen, wenn wir jetzt auf diesen Kerl tippen, können Sie sehen, dass wir so haben, wie diese nette Animation. Also machen wir sie im Grunde wie diese mittlere, mittlere Linie, die mittlere Menülinie genau hier, um einfach zu verschwinden. Und wir machen all diese Elemente wie diese, die verbleibenden Marker, um sich einfach in ein X-Symbole zu verwandeln oder sie drehen sich und sie ändern diese Farbe. Und wenn wir das wählen, gehen wir zurück zum Prototyp. Die Wahl der automatischen Animate-Funktion hier ist eigentlich ziemlich wichtig, weil sie einfach alles so viel schöner macht. Natürlich kannst du mit der Lockerung spielen. Vielleicht weiß ich nicht ob du willst. Sie können wie die Grenzen wählen, wenn Sie möchten. Und dann können wir vielleicht prüfen ob es etwas ändern wird. Tut es, aber wenn es besser ist, bin ich mir nicht sicher. Aber weißt du, du kannst immer damit spielen. Wie ich bereits erwähnt habe, ist auch die Positionierung unserer Elemente wichtig. Wenn Sie es zum Beispiel noch cooler aussehen möchten , können wir mir einfach meine Komponente im Standardzustand holen lassen . Wir könnten uns so die ganze Gruppe schnappen und sie einfach so irgendwo hin bewegen. Und jetzt, wenn wir nur unsere Animation abfeuern, können Sie sehen, dass es so ist, als würde man von oben, oben rechts, so etwas hereinkommen . Wir könnten zum Beispiel auch mit der Deckkraft einiger Staaten herumspielen. In diesem Standardzustand ist mein Hintergrund Gruppenhintergrund und weiß was, lass mich es einfach Hintergrund nennen. Dieser Hintergrund. Die Deckkraft wird auf 100 Prozent aufschreiben, aber wir können sie bis auf 0 Prozent senken. Aber wenn wir in unseren angezapften Zustand zurückkehren, diese Hintergründe, muss diese Hintergründe, die Deckkraft auf 100 Prozent zurückgehen. Wenn wir also jetzt einfach zum Standardstatus zurückkehren und jetzt unser Menü auslösen, können Sie sehen, dass dieser Opazitätseffekt auch vorhanden ist. Es ist sehr, sehr subtil, aber es ist, es ist da. Jetzt. Ich glaube, es hat mir besser gefallen, als dieser Mann, der von oben herkam. Für meinen Standardstatus möchte ich ihn nur verschieben. Lass mich einfach zu meinem Hintergrund zurückkehren. Ich möchte es irgendwo hierher verschieben, und ich möchte die Deckkraft wieder auf 100% bringen. Wenn Sie die Dinge noch interessanter gestalten möchten , könnten Sie zum Beispiel um die Rotation herumspielen. Wenn ich also nur meinen Hintergrund im Standardzustand aufnehme , könnten wir diesen Kerl zum Beispiel drehen. Was Lass uns 360 machen. Ich weiß, dass hier keine Änderung geändert werden kann , weil es ein voller Kreis ist. Aber dann stellen wir einfach sicher , dass dies auf 0 gesetzt ist, wenn wir wieder in unseren angezapften Zustand zurückkehren. Also setzte BG auf 0. Gehen wir zu, gehen wir zurück zum Standardstatus. Und mal sehen, ob das tatsächlich einen Unterschied macht. Wie Sie sehen können, haben wir hier eine Abneigung, ein flippiger kleiner Rotationsstift. Könnte ein bisschen zu viel sein. Wir könnten es vielleicht von drei Sechzehnteln auf 118 ändern . Und ich denke, dass es gut funktionieren wird. Wir werden immer noch einige funky Dinge haben, aber das ist es nicht, es ist nicht, ich denke, es ist nicht zu viel. Ich hoffe, es ist nicht zu viel. Aber wie auch immer, so können Sie auch einen Übergangseffekt wie diesen erzeugen oder hier in X, Z und einer Hälfte auf eine Tatsache klicken , um sich einfach zwischen verschiedenen verschiedenen Zeichenflächen zu bewegen . Sie können alles innerhalb einer Komponente tun, nicht nur indem Sie diese Interaktionen zwischen Zeichenflächen direkt hier in Ihrem Prototyp-Design hinzufügen, sondern einfach Interaktionen hinzufügen zwischen Elementen innerhalb einer Komponente. 30. Mehr Hero hinzufügen: Lasst uns jetzt noch etwas wie Hero Elements hinzufügen. Und ich bringe dieses Layout-Raster zurück. Was ich machen will ist, dass ich einfach wissen möchte, so etwas wie eine kurze Einführung machen möchte. Also schnappe ich mir das Textwerkzeug und tippe dort etwas wie Hallo ein. Ich bin ich so etwas. Und dann drehe ich es einfach wie rot um. Vielleicht mache ich es ein bisschen kleiner. Also lasst uns 18 mögen. Und ich denke, ich werde vielleicht das Tracking hier erhöhen. Lass uns etwas wie vielleicht zwei machen. Es ist vielleicht nicht genug, das ist 20 oder vielleicht sogar 60. Lassen wir es uns jetzt bei 60 belassen. Das sollte in Ordnung sein. Und dann muss ich natürlich den Namen schreiben. Also klonen wir den Kerl vielleicht einfach hier. Und ich werde es deutlich größer machen. Und ich ändere einfach diese Farbe auf dieselbe. Also denke ich, dass es diese Farbe sein wird. Ich bin mir nicht sicher. Lass mich den Kerl einfach ausschalten. Ja. Also müssen wir es vielleicht so oder so machen. Da sind wir los. Und jetzt machen wir so etwas wie eine Unterüberschrift, so etwas. Also leih ich mir diesen Kerl einfach aus. Und ich werde so etwas wie freiberuflicher Grafikdesigner tippen . Und ich werde es deutlich kleiner machen, etwas wie 16 oder 18 sollte ausreichen. Ich stelle es irgendwo hin. Vielleicht nur ein bisschen nach unten. Und jetzt erstellen wir hier so etwas wie ein Textfeld für unsere Lorem Ipsum-Texte. Ich erstelle einfach ein Rechteck. Es wird mehr oder weniger so aussehen. Und von unserem Lorem Ipsum-Plugin füge ich einfach Lorem Ipsum hinzu. Jetzt müssen wir diesen Text natürlich ändern, damit er im Grunde zu unserem Dokument passt. Versuchen wir also einfach, es in unsere Schriftart zu ändern. Ich bin mir nicht sicher ob das gut ist, ähm, ich denke, es ist ein bisschen lasst uns vielleicht auch diese Zeilenhöhe von 18 auf etwas wie 26 ändern . So wird das nur ein bisschen besser aussehen. Schließlich fügen wir vielleicht hier unten einen Button hinzu. das zu tun, schnappe ich mir einfach das Rechteckwerkzeug so etwas wie einen Knopf mit einigen vielleicht abgerundeten Ecken. Versuchen wir es vielleicht 48. Und ich möchte nur, dass die Leute mehr erfahren. Also leih ich mir diesen Kerl einfach aus. Und ich tippe etwas ein. Oder vielleicht leihe ich mir aus, naja, mal sehen, wie es aussehen wird. Ich leihe mir den Kerl aus. Und ich tippe ein wie mehr erfahren. Und wir werden es irgendwo in die Mitte legen. Und lasst uns vielleicht die Farbe dieses Kerls ändern , um dieses Blau zu mögen. Das sollte ausreichen. Das sollte in Ordnung sein. Und lasst uns vielleicht diese Stapel wie schlichtes Weiß machen. Ändern wir also einfach die Farbe in Weiß und legen sie irgendwo hier hin. Und lasst uns vielleicht sicherstellen, dass alles gut auf die Mitte ausgerichtet ist. Ich glaube, es sieht okay aus. Ich möchte hier keine geteilten Haare auswählen, aber ich möchte auch etwas Interaktivität zu meinem Button hinzufügen . Und ich schätze, es wäre unser primärer Button hier. Also schnappen wir uns einfach beide Elemente und vielleicht gruppiere ich sie und verwandle sie in eine Komponente. Lass es mich einfach in meinem Ebenen-Panel anschauen . Es wird also wie Learn More btn sein. Und ich möchte nur einen Hover-Status hinzufügen. Da sind wir los. Und in diesem Hover-Status werden sich meine Knöpfe einfach ändern. Es ist wie diese Hintergrundfarbe zu dieser roten Farbe. Wann immer jemand über diesen Button fährt, also schauen wir uns das einfach an. Es wird einfach die Farbe ändern. Und vielleicht mache ich es einfach ein bisschen kleiner. Ich lasse es ungefähr so aussehen. Und jetzt lasst uns eine Vorschau anzeigen. Sieht in Ordnung aus. will einfach keine gespaltenen Haare hier mögen. Das ist hier nicht das Wichtigste. Ich schätze, Sie verstehen bereits , wie Sie diese Art von Interaktivität hinzufügen können. Jetzt denke ich, das nächste, was Sie hier tun müssen um dies zu beenden, wäre dieser Teil, wie Social-Media-Symbole hinzuzufügen, wie vielleicht irgendwo hier unten. Aber lasst uns das im nächsten Video machen. 31. Die Symbole für soziale Medien hinzufügen: Jetzt fügen wir die Social-Media-Symbole hinzu. Und ich denke, dass der einfachste Weg darin besteht , einfach die Icons für das Design-Plugin zu greifen und vielleicht einfach Facebook einzutippen. Ich würde vorschlagen, Ihre Icons wie Social-Media-Symbole zu behalten, wie in einem Satz. Wenn Sie also Awesome Font Awesome verwenden möchten, können Sie einfach Font Awesome verwenden. Wenn Sie Icons von ionischen oder anderen verwenden möchten , würde ich Ihnen raten, Ihre Icons einfach konsistent zu halten. Also lasst uns vielleicht mit dem Einfachen gehen. Ich weiß nicht warum es mir gefällt. Vielleicht weil es einfach ist. Dieses Facebook-Symbol. Und ich werde versuchen, es hier unten zu legen, vielleicht irgendwo, irgendwo hier unten. Und ich werde es kleiner machen. Aber zuerst stelle ich sicher , dass dieses Sperren-Seitenverhältnis überprüft wird. Wir bekommen also keine Verzerrungen , wenn wir Elektronen unser Vermögen bilden. Also lasst uns jetzt Instagram hinzufügen. Das ist dieser Typ genau hier. Lass mich einfach versuchen, es zu schnappen. Und lasst uns die Dinge konsistent halten. Lass es uns 24 schaffen. Lasst uns jetzt vielleicht Twitter hinzufügen. Das ist dieser Typ genau hier. Wieder, Höhe 24. Vielleicht lasst uns hinzufügen, lass uns LinkedIn hinzufügen. Mal sehen, ob wir es hier haben. tun wir. Also 24, aber lasst uns das Seitenverhältnis sperren. Also 24, ich schätze, vielleicht könnten wir wie Pinterest hinzufügen . Haben wir es hier? tun wir. Lassen Sie uns also noch einmal das Seitenverhältnis machen, Seitenverhältnis sperren und 24. Oh, wir müssen es jetzt tun, um sie einfach dorthin zu bringen, wo sie hin müssen. Also werde ich einfach versuchen , sie alle zu greifen und sie an der Mitte auszurichten. Und vielleicht lassen Sie uns sie verteilen , damit sie mehr oder weniger so aussehen. Ich lege sie vielleicht hier unten hin. Und ich werde mitbringen, dieses Muster könnte irgendwo hier sein. Das wird wissen, wir werden einfach mehr Platz nutzen , den wir hier zur Verfügung haben. Und ich denke, dass all diese Icons, ich einfach versuchen sollte, sie alle zu greifen, in ihrem Aussehen konsistent sein sollten, in ihrem Aussehen konsistent sein sollten wie in ihrem primären Erscheinungsbild. Aber lasst uns sie so hellgrau anzünden. Das wird nach meinem Geschmack etwas besser aussehen. Aber ich denke, es wäre ein netter, wie ein netter Design-Touch, wenn wir diese Jungs beim Schweben dazu bringen würden, die Farben entsprechend zu ändern, zumindest wie vage zu ihren Markenfarben passen. Um das zu tun, müssen wir diese Jungs einfach in Komponenten verwandeln. Also mache ich zuerst diese Kerl Komponente, nennen wir es. Obwohl ich schätze, denke ich, dass es ziemlich selbsterklärend ist. Standardzustand dieses Kerls ist also wie er ist, aber es ist der Hover-Status wird einfach sein, lassen Sie mich einfach diese Füllung nehmen und versuchen, es eher wie Facebook, blau zu machen. Und dieser Schuh. Ich denke, das sollte okay sein. Also lasst uns jetzt Instagram machen. Ich glaube, ich werde einfach so etwas wie sehr, sehr hellviolette Farbe verwenden . Wie nur ein verrücktes Rosa. Das sollte sein, das sollte reichen. Jetzt noch einmal für Twitter, Control K, erstellen Sie eine Komponente. Und lasst uns einen Hover-Status erstellen. Und im Hover-Status, lass uns diesen Kerl hellblau machen. Ich glaube, das ist Schweben. Das ist eine, das ist Twitters Farbe, so etwas. Die meisten davon sind die meisten dieser sozialen Medien. Social-Media-Logos sind im Bereich von etwas Blauem ziemlich ähnlich. Denn jetzt, wenn wir die Farbe für LinkedIn hinzufügen, denke ich, dass es auch so blau ist. Und dann lasst uns Pinterest machen. Fügen wir einen Hover-Status von Pinterest hinzu. Und ich glaube, der Typ ist, das Logo ist etwas rot. Das sollte sein, das sollte reichen. Gehen Sie jetzt zurück zum Standardstatus, LinkedIn, Gehen wir zurück zum Standardstatus, Pinterest und Instagram-Standardstatus. Jetzt lasst uns einfach eine Vorschau auf diese Typen sehen. Wie Sie sehen können, wenn wir den Mauszeiger über diese Elemente bewegen, ändern sie einfach ihre Farben so, dass mehr oder weniger den Markenfarben entsprechen. Also, in Ordnung, jetzt haben wir einige ähnliche Designelemente. Wir haben einige wie Prototyp-Affekte hinzugefügt. Und bevor wir es einen Tag nennen, zumindest mit dieser Helden-Sektion, denke ich, dass es eine gute Idee wäre, die Reaktionsfähigkeit gerade zu beenden. Also haben wir gerade zwei. Schnappen Sie sich einfach dieses Bild und all diese Elemente und transformieren Sie sie oder übertragen auf unsere mobile, mobile Zeichenfläche. Aber lasst uns das im nächsten Video machen. 32. Lass uns die Hero ansprechend gestalten: Um unseren Abschnitt also reaktionsschnell zu machen, müssen wir im Grunde genommen all diese Elemente, diese Elemente links und rechts, greifen diese Elemente links und rechts, und sie einfach hier rechts stapeln. Fangen wir also mit diesen Texten an. Ich schnapp mir einfach alle. Wie diese Typen hier kopiere ich sie einfach. Und auf meiner gesamten mobilen Zeichenfläche schalte ich das Raster ein. Und ich füge einfach all diese Elemente ein. Also könnten wir einfach versuchen, diese Typen so kleiner zu machen. Aber ich glaube nicht, dass es perfekt funktionieren wird. Wenn wir die Umschalttaste hinzufügen, sehen Sie, dass sie nur ein bisschen besser aussieht. Es wäre auch eine gute Idee, einfach nein zu mögen, sie an der Mitte auszurichten. Also dieser Typ, also der Button jetzt, dieser Text, all diese Elemente genau hier. Ich werde sie einfach an der Mitte ausrichten. Es wird nur ein bisschen besser aussehen. Ich denke, dass auch dieser Text so zentriert werden muss. Ich schnappe mir den Knopf, aber er könnte irgendwo hier sein. Und lassen Sie mich einfach die Sichtbarkeit dieses Layouts ausschalten. Und wie Sie sehen können, wie diese Icons, wie diese Typen hier, sind sie nicht wie die am besten sichtbaren. Also denke ich, dass wir einfach nein könnten, nur für den Standardzustand, vielleicht einfach ihre Farben in etwas wie sehr, sehr hellgrau ändern . Normalerweise gehe ich mit einem Schicksal von 88 Jahren. Ich mochte diese Farbe jetzt nicht. Und dann müssen wir es einfach für alle anderen tun. Für den Standardstatus füllen Sie einfach diesen F8-Effekt und fügen Sie diesen Wert auf F8 ein. Natürlich kannst du das. Sie können einen anderen Wert verwenden, wenn Sie möchten. Wenn Sie denken, dass eine andere Farbe einfach besser aussehen würde. Aber ich denke, dass es aussieht, es sieht anständig aus. Und jetzt können wir uns einfach unser, dieses Bild, dieses Bild hier schnappen . Und dann füge ich es einfach ein. Und natürlich muss es deutlich kleiner sein. Ich halte die Umschalttaste gedrückt und lege sie einfach irgendwo in der Mitte hin. Aber ich denke, dass wir dieses Ansichtsfenster auch als glückliche Zuschneidemaske verwenden können . Clipping-Maske ist eher Zuschneidewerkzeug und machen Sie es vielleicht so etwas , nur damit es so sichtbarer ist. Und da sind wir los. Ich glaube, es sieht irgendwie aus, irgendwie okay. Also los gehst du. So würden Sie einfach wissen, wie reaktionsschnelle Versionen Ihrer zumindest Ihre Home-Bereiche. Grundsätzlich mussten wir für unsere Website wie ein mobiles Menü erstellen . Und dann haben wir einfach alle Elemente aus unserem Abschnittsmenü, dem Heldenbereich, genommen aus unserem Abschnittsmenü, und dann haben wir sie hinzugefügt. Wir stapeln sie tatsächlich vertikal, wie hier, also passen sie einfach zu unserem View-Port. Der nächste Schritt hier wäre also, einfach einige wie keine Hauptpunkte unseres Designs hinzuzufügen , wie vielleicht einige unserer Dienste oder ähnliches. Also müssen wir im Grunde einen anderen Abschnitt beginnen, aber lasst uns das im nächsten Video machen. 33. Lass uns den Abschnitt „Geräte“ beginnen: Richtig, also haben wir den Hauptbereich erstellt, wir haben den Heldenbereich erstellt. Also schätze ich, wir könnten jetzt vielleicht mit dem nächsten Abschnitt beginnen. Und dieser wird einfach zeigen, was wir für unsere Kunden tun können. Wir möchten also einfach unsere Dienstleistungen aufzählen. Und weißt du was, bevor ich das mache, bevor ich gerade hier einen schönen Hintergrund schaffe. Und vielleicht, bevor ich es einfach mag, No diese Seite nach oben zu bewegen , damit wir dem irgendwie folgen können, wie dieses Designschema genau hier. Vielleicht möchte ich eine andere Farbe für diesen Abschnitt finden. Es ist also so, als ob sie sich optisch vom vorherigen Abschnitt unterscheidet. Denn hier drin haben wir ziemlich viel los. Wir haben alle unsere wichtigsten Hauptfarben. Und wenn ich sie mir ansehe, habe ich das Gefühl, dass vielleicht etwas fehlt, etwas Akzent in Farbe, vielleicht etwas lebendigeres, etwas Helleres. Und ich werde einfach nur versuchen, etwas Interessantes zu finden. Um das zu tun, kopiere ich einfach all diese Hex-Codes. Vielleicht nicht alle diese, aber wie die prominentesten, wie der blaue, wie der Hautton und vielleicht der rote. Und dann gehe ich einfach zu coolers.co, füge diese ein, diese Werte ein und versuche einfach etwas Interessanteres zu finden. Okay, wie gesagt, ich bin hier bei coolers.co. Ich habe den Stromerzeuger gestartet. Ich fange einfach an, die Farben einzubringen. Also zuerst diese blaue, dass ich Wert einfach einfügen werde, n so. Und dann möchte ich nur diese Farbe und dann die nächste Farbe, den Hautton, sperren . Ich kopiere es einfach. Und ich füge es einfach irgendwo hier ein. Und nochmal, sperr den Kerl ein. Und die dritte Farbe, also diese rote Farbe. Ich füge es einfach wieder ein, logge diesen Kerl ein. Und jetzt können wir einfach die Bar drücken, um zu versuchen, etwas zu finden, etwas Interessantes zu finden. Ich denke, dass diese Grüns, sie, tatsächlich gut funktionieren. Und ich bin mir nicht sicher, ob mir dieses dunklere Grün besser oder dieses hellere Grün besser gefällt . Also schätze ich, wir können sie einfach kopieren. Also klicke ich einfach auf Hacks kopieren. Dann geh ich zurück zu XD. Also hier füge ich einfach diese grüne Farbe hinzu, um dieses Swell Basic zu mögen, diesen Hintergrund. Und ich füge es einfach hier hinzu. Und ich hole mir das zweite Grün. Also dieser Typ hier, wir können den Code einfach kopieren. Und wieder füge ich es einfach zu dieser Füllung hinzu. Ich gehe einfach zurück zu meinem Vermögen, reife noch einmal und füge das Grün hinzu. Jetzt haben wir das bekommen, naja, diesen neuen Abschnitt mit einem neuen Hintergrund. Und wir können sicher sein, dass beide wie dieses hellere Grün und dieses dunklere Grün beide mit den Farben arbeiten, aus denen wir extrahiert haben, im Grunde aus unserem Heldenbereich. Bevor wir uns entscheiden, werden wir eigentlich mitmachen, ich doppelklicke einfach hier rein, um einfach einen dieser Ankerpunkte zu holen. Und ich halte die Umschalttaste gedrückt, um Bill zu machen, genau wie ein altes Gehirn, diesen Kerl nur ein bisschen hoch um vielleicht irgendwo hier zu sein. Und das sollte in Ordnung sein, lass mich nur sehen, ob ich alles richtig habe. Vielleicht wie irgendwo hier und lass uns einfach runtergehen. Ich bin mir nicht sicher ob ich denke, dass es gut aussieht, also können wir uns jetzt im Grunde einfach entscheiden, ob wir wollen, wir wollen dieses Grün oder vielleicht dieses Grün. Ich glaube, ich gehe mit dem hin. Es ist nur ein bisschen mehr wie Existenzgrundlagen, es ist ein bisschen lebendiger. Und weil diese Farben ein bisschen langweilig sind oder vielleicht etwas langweilig sind. Also denke ich, dass wir einfach wissen können, wie die Dinge mit dieser grünen Farbe beleben . Jetzt können wir einfach wie Rho hinzufügen, meine Dienste sehen oder wie ich Ihnen helfen kann. Irgendwie ein Titel und dann können wir die Karten hinzufügen. Aber fangen wir damit im nächsten Video an. 34. Die Services hinzufügen: Also fange ich damit an , den Titel hinzuzufügen. Also schnappe ich mir einfach das Textwerkzeug. Und ich klicke hier irgendwo. Und ich gebe einfach etwas ein, wie ich dir helfen kann. Da sind wir los. Normalerweise mag ich nein, diese Titel, die eher den Erwartungen von No Client entsprechen. Also ein Sub-Halbfett, ich schätze, es sieht gut aus, aber lass mich nur sehen, dass dieses Mittel war, das Medium auch hier. So mittelgroß wie das. Und ich hole mir das Rectangle Tool und erstelle einfach ein Rechteck , in dem ich nur Text hinzufügen werde. Also werde ich versuchen, mein Lorem Ipsum Plugin zu finden und füge einfach einen solchen Text hinzu. Und aus meinem Vermögen werde ich dieses so schnell wie möglich 16 wählen, aber weißt du was, vielleicht könnten wir es vielleicht wie 22 machen. Und lassen Sie uns die Zeilenhöhe auf etwa 30 erhöhen. Normalerweise tue ich das gerne. Für die Zeilenhöhe mag ich normalerweise die Schriftgröße plus sechs oder acht. Aus meiner Praxis habe ich gerade erkannt, dass es normalerweise funktioniert in Bezug auf die Lesbarkeit am besten funktioniert. Und lassen Sie uns auch einfach die Füllung in schlichtes Weiß ändern. Und lassen Sie uns diese Typen zentrieren. Und vielleicht brauche ich einfach zwei Textzeilen. Und ich werde versuchen, sie in die Mitte zu legen. Also verwende ich einfach diese Option „Center ausrichten“. Ich mache das Gleiche für diesen Text. Lass mich sie einfach irgendwo hinstellen. Also los geht's. Wir haben im Grunde unseren Titel bekommen. Vielleicht können wir es schaffen, es ein bisschen machen, es nach oben bewegen. Wir haben den Titel, wir haben den Untertitel. Jetzt können wir einfach, wie ich bereits erwähnt habe, ein paar Karten hinzufügen . Und diese Karten werden einfach wie Icons, Titel und einige Untertitel der Dinge sein, die wir für unsere Kunden tun können, wie Webdesign, Webentwicklung und Blake, SEO, Logo-Design in Schwarz, Social-Media-Marketing, all diese Dinge. Also werde ich eines meiner Plugins verwenden, um zumindest so zu starten, wie das Hinzufügen von Diensten. Also gehe ich zu Icons zum Design. Und sagen wir, ich möchte zuerst wie Webdesign machen. Wenn Sie also nur ein Webdesign eingeben , bin ich mir nicht sicher, ob wir etwas finden werden. Nun, wir werden nichts finden. Also lasst uns etwas wie vielleicht Laptop machen. Mal sehen, Laptop. Lass uns vielleicht wie Laptop machen, Mac. Aber ich klicke einfach auf diesen Hintergrund, um sicherzustellen, dass wir dieses Symbol irgendwo in der Nähe hinzufügen. Also werde ich einfach versuchen , es zu schnappen. Lass mich einfach reinzoomen. Und sagen wir, dass diese Ikone etwas größer sein soll. Lass es uns so machen, vielleicht etwa 36 in der Höhe. Und ich werde einfach versuchen, es irgendwo hier zur Seite zu bringen. Und ich denke, wenn wir es einfach nur weiß machen würden, wäre es langweilig, denke ich. Also. Anstatt es nur weiß zu machen, werde ich es weiß machen, aber ich bin auch im Hintergrund. Also hole ich mir einfach dieses Rechteckwerkzeug und halte einfach die Umschalttaste gedrückt , um ein perfektes Quadrat zu erstellen , das mehr oder weniger so aussehen wird. Also brauche ich den Hintergrund nicht. Und für die Füllung, lass mich einfach mein Vermögen schnappen mein Vermögen schnappen und vielleicht fangen wir mit diesem blauen an. Und lassen Sie uns den Eckenradius hier auf etwas wie vielleicht 12 erhöhen . Beachten Sie, dass wir gerade den Radius für alle diese Ecken anpassen . Wenn Sie das tun möchten, müssen Sie den gleichen Radius für alle Ecken überprüfen und dann können Sie diesen alle Ecken überprüfen und dann können Sie Eckenradius genau hier eingeben. Wenn Sie jedoch verschiedene Radien für verschiedene Quartale hinzufügen möchten , müssen Sie zuerst für jede Ecke auf diesen anderen Radius klicken . Und jetzt können Sie verschiedene, unterschiedliche Werte für verschiedene Ecken machen. Wenn ich mich also nicht irre, wird der erste oben links sein, dann werden wir oben rechts, unten rechts, genau hier und unten links haben . Also gehen wir einfach wie im Uhrzeigersinn mit dieser Rate rein, mit diesen strahlen. Also denke ich, dass 12 Punkte ausreichen sollten. Lass uns diesen Kerl jetzt so weiß machen. Und mal sehen, ob das gut funktionieren wird. Also muss ich diesen Kerl natürlich einen Schritt nach unten bewegen. Also halte ich einfach die Strg-Taste gedrückt oder halte den Befehl gedrückt, wenn du auf einem Mac bist. Und dann die linke Klammertaste, um diesen Kerl einen Schritt nach unten zu bewegen . Also lasst uns vielleicht die Größe dieses Kerls auf etwas erhöhen , vielleicht sollte 4040 ausreichen. Jetzt halte ich einfach die Umschalttaste gedrückt und klicke auf diesen Hintergrund , um dies der Auswahl hinzuzufügen. Jetzt müssen wir also nur noch das Symbol greifen und dann den zugrunde liegenden Hintergrund greifen, indem Sie die Umschalttaste darauf klicken. Und ich werde nur sicherstellen, dass alles gut auf das Zentrum ausgerichtet ist. Und sobald es so ist, drücke ich einfach Control G, um zu gruppieren. Beide Elemente und wir können es einfach verschieben, vielleicht wie irgendwo hier. Jetzt brauchen wir nur noch den Untertitel hier oder den Titel hinzuzufügen . Und dann wie einige, wie einige Texte. Dafür kann ich einfach und wähle den Titel und den Untertitel aus. Und wenn ich jetzt die Umschalt- und Alt-Taste gedrückt halte, führe ich sie einfach hier unten aus. Ich werde diese beiden Elemente einfach Cloud-Cloud machen. Wenn Sie auf einem Mac sind, können Sie dafür natürlich einfach die Optionstaste verwenden. Geben wir einfach etwas wie Webdesign ein. Da sind wir los. Und natürlich muss es deutlich kleinere Feststoffe sein , die etwa 28. Und lasst es uns irgendwo hier hinstellen. Und lassen Sie uns diese Typen kleiner machen. Lass uns vielleicht so etwas machen und ich stelle es irgendwo hin. Und wie Sie bemerkt haben, können Sie beim Verschieben dieser Elemente sehen, dass wir diese Marker zeigen, die uns diese Indikatoren zeigen , die uns die Abstände zwischen bestimmten Elementen wie in dieser Region. Jetzt können wir sicher sein, dass diese Typen nicht in gleichen, gleichen Entfernungen wie untereinander sind , oder? Also haben wir Webdesign. Jetzt können wir uns vielleicht all diese Elemente schnappen. Schon wieder. Ich halte die Alt-Taste und die Umschalttaste gedrückt, um diese Typen einfach irgendwo hier zu klonen. Und ich beginne damit, den Hintergrund zu ändern und erinnere mich daran , dass es eine Gruppe ist. Also müssen wir doppelklicken, um zu diesem Rechteck zu gelangen. Und von meinen Farben, vielleicht gehen wir mit, das muss mit dem Hautton übereinstimmen. Und jetzt müssen wir das Icon ändern , denn das wird sein, sagen wir, dass dies ein Webentwickler sein wird . Bemeinte Webentwicklung. Und lasst uns versuchen, mir etwas wie das Code- oder Codierungssymbol und den Code zu finden . Lass uns vielleicht so machen. Und es muss irgendwohin hier unten gehen. Und dieser Typ muss in diese Gruppe gehen. Und ich glaube, es war ja, es ist diese Gruppe 20. Also schnappe ich mir einfach dieses Icon und drucke es einfach hier drüben aus. Und wir brauchen dieses Symbol nicht mehr, also werde ich es einfach los und seine Höhe beträgt 40. Okay? Also gehe ich mit diesem Symbol, ändere seine Farbe in Weiß und ändere seine Größe auf 40. Analoge, nimm das Rechteck so den Hintergrund und das Symbol. Also klicke ich einfach bei gedrückter Umschalttaste auf dieses verbleibende Element hier in meinen Ebenen. Und ich werde nur sicherstellen, dass alles gut auf das Zentrum ausgerichtet ist. Und dann können wir einfach, weißt du, diesen Kerl dorthin bringen. Und natürlich können wir einfach sicherstellen, dass dies der Fall ist, diese Jungs sind auch gut aufeinander abgestimmt. Und ich verlege sie irgendwo hin. Also werde ich es tun, ich wiederhole den Vorgang. Und natürlich, bis es ganz von mu abhängt, wie viele Dienste Sie teilen möchten, Sie teilen möchten, die Sie Ihnen zeigen möchten. Es können drei sein, es können vier sein. Das liegt total, ganz bei dir. Okay. Also habe ich ein paar grundlegende Housekeeping gemacht. Wie Sie sehen können, habe ich eine Gruppe wie auf der linken Seite, die wir tatsächlich eine Webdesign-Karte nennen können . Und es hat unser Icon und hat unseren Hintergrundtext und den Titel genau hier. Und das Top wird das Web sein, die Karte. Und es hat die gleichen Elemente. Jetzt können wir einfach gerne greifen, sagen wir das hier. Wir könnten es einfach zur Seite klonen und eine weitere Karte erstellen. Oder wir könnten einfach mit der rechten Maustaste darauf klicken, nun, diesen Ebeneneintrag und wählen Sie einfach Duplikat aus. Aber wie Sie sehen können, wird es es einfach auf das vorherige stapeln. Also schätze ich, es wäre ein besserer Weg. Bessere Produktionstechnik wäre, einfach die Alt-Taste gedrückt und diesen Kerl zur Seite zu bewegen. So kannst du hier entscheiden, wie viele, wie viele Elemente du willst. Es können drei sein, es kann sein, du weißt schon, es liegt total, ganz bei dir. Sie können wie SEO haben, Dinge, die Sie haben können wie Social-Media-Marketing, vielleicht wie die Erstellung von Online-Kursen von y naught. Das liegt ganz bei dir. Also habe ich die Farbe geändert und den Titel geändert. Natürlich müssen wir das Icon ändern. Also gehe ich zu meinen Plugins und SEO. Ich glaube nicht, dass wir wie ein Icon für SEO haben werden, aber wir können so etwas wie die Suche machen. Mal sehen, vielleicht gehe ich einfach mit diesem Lupensymbol. Und wieder, das ist meine kopierte Karte. Das muss ich natürlich seinen Namen ändern. Es wird also wie eine SEO-Karte sein. Und ich schnappe dieses Icon und setze es einfach in diese Gruppe ein. Und ich brauche dieses Icon nicht. Unsere Ikone Metro wird ungefähr 40 Pixel hoch haben. Und es wird eine andere Farbe haben. So weiß. Und wir müssen einfach versuchen, es hineinzulegen. Also mal sehen, ob ich es einfach wissen kann. Ich glaube, es sieht aus. Alles klar. Natürlich müssen wir diese Karten ausrichten. Ebenso. Aber im Moment werde ich diesen Kerl vielleicht noch einmal kopieren. Ich möchte nur noch einen Platzhalter haben, hier geht es. Ich möchte nur etwas wie vielleicht Logo-Design machen , etwas, aber es ist eher so, wie Webdesign in gewisser Weise auch wie Grafikdesign ist , aber kein Logo-Design wäre, ich denke ein bisschen mehr spezifisch. Und dieser Typ, also dieses Rechteck, werde ich seinen Namen in Logo-Design ändern. Da sind wir los. Dieses Rechteck wird also strahlen. Lassen Sie uns vielleicht diese Farbe überprüfen, vielleicht wie schwarze Farbe. Gehen wir mit diesem dunklen, dunkelgrauen und Logo-Design. welcher Art von Ikone sollten wir suchen, wie zum Beispiel Logo-Design. Versuchen wir etwas wie ein Stiftwerkzeug. Vielleicht. Ich bin mir nicht sicher, ob wir ein paar Pflanzen oder weniger haben werden, ist wie ein Stift. Sie hatten Glück Bleistift, einen Stifthalter. Es sieht irgendwie okay aus. Mir gefällt es. Und wir brauchen dieses Icon nicht. Machen wir es, lasst uns einfach sicherstellen, dass dieses Symbol Höhe auf 40 eingestellt ist, wie die anderen. Und ich werde einfach versuchen, es in meinen Hintergrund zu verschieben . Da sind wir los. Was ich tun würde, ist, dass ich einfach das Kunstbrett schnappen und das Layout zurückbringe. Und jetzt können wir sehen, ob wir diese vielleicht gerne machen können, wie diese Karten zum Beispiel so groß wie unsere Kolumnen. Also wenn ich jetzt einfach diese schnappe und halte die Umschalttaste gedrückt. Wir können sie vielleicht so groß machen und diesen Kerl auch. Also werde ich einfach irgendwo hier gedruckt. Vielleicht nur ein bisschen kleiner, so etwas. Und dann werden wir das Gleiche mit diesem machen. Natürlich ist es nicht wie obligatorisch. Wenn Sie eine Art festgelegte Größe haben, können Sie diese definitiv verwenden, können Sie diese definitiv verwenden, da ich Ihnen nur zeigen möchte, wie Sie dieses Spalten- und Spaltenraster verwenden können dieses Spalten- und Spaltenraster um jetzt wie zu definieren, wie groß die Größe sein sollte. Vielleicht drucken wir diesen Kerl irgendwo hier hin. Ich denke, dieser Typ sollte nur größer sein. Natürlich könnten wir einfach wissen, dass unsere erste Gruppengröße sehen. Was ist diese Gruppengröße, 398 mal 353. Also können wir versuchen, das Gleiche hier zu tun. Also drei, 98353. Also lasst uns 353 machen. Dies 1398 von drei, glaube ich, es war 3353353. Und dann dieser Typ, also 398353. Lass es mich einfach irgendwo hinstellen. Jetzt können wir alle diese Elemente einfach greifen und einfach wie sie ausrichten, werden sie horizontal verteilen. Richten Sie sie vielleicht nach oben aus. Und lassen Sie mich jetzt einfach auf den Layout-Editor klicken. Es wird irgendwas aussehen, so etwas. Jetzt könnten wir vielleicht einfach ein paar Dinge bewegen. Sagen wir, ich denke, dass dieser Typ ein bisschen sein sollte, nur dieser Text sollte irgendwo hier hingehen. Und der Rest denke ich sieht in Ordnung aus. Wenn Sie möchten, können Sie sich nur diese Textstücke schnappen nur diese Textstücke und vielleicht mehr als nur ein bisschen hoch. Wie die Zusammenfassung hier. Das sollte sein, das sollte okay sein. Und vielleicht lasst uns sicherstellen, dass sie auch gut an die Spitze gesetzt sind . Und ich denke, es sieht in Ordnung aus. Auch hier müssen Sie diese Symbole nicht so groß machen wie die Spalten. Also wollte ich Ihnen nur zeigen, wie Sie dieses Raster verwenden können, um beispielsweise Ihre Like, Ihre Elemente hier zu platzieren . Bevor wir es also einen Tag mit diesem Abschnitt nennen, denke ich, dass ich einfach hineindoppelklicke und diese beiden Ankerpunkte schnappe und sie einfach nach unten schiebe. Ich möchte nur mögen, fügen Sie hier unten wie einen Button hinzu. Als würde ein Aufruf zum Handeln etwas sagen wie mehr anzeigen oder mehr erfahren. Aber lasst uns das vielleicht im nächsten Video machen . 35. Die Schaltfläche „Call to Action“ hinzufügen: Unser Call-to-Action-Button wird also sehr, sehr einfach sein. Wir können uns das einfach schnappen. Lassen Sie mich also einfach versuchen, den Button in dieser Gruppe zu finden , wird dieser sein. Ich kopiere es einfach. Und ich werde versuchen, es irgendwo hier einzufügen. Lass uns hier runter gehen. Und wenn wir jetzt nur eine Vorschau auf unser Design ansehen, können wir einfach alles konsistent haben. Und du weißt schon, und füge im Grunde einen Button wie diesen hinzu. Aber vielleicht verschiebe ich es nur ein bisschen nach oben. Und ich denke, dass es vielleicht so sein könnte, dass es ein bisschen größer wird. Anstatt also 72 Ebenen auszublenden, kann es wie 96 sein. Und lasst es uns ins Zentrum stellen. Mal sehen, wie es aussehen wird. Oder ich will hier keine Haare spalten. Aber ich denke, es sieht in Ordnung aus. Vielleicht könnten wir hier unten einfach mehr Raum zum Atmen hinzufügen. Also werde ich einfach zuerst greifen, natürlich müssen wir in dieses Element doppelklicken, den Hintergrund. Umschalttaste, klicke auf die beiden unteren Ankerpunkte, und ich werde sie einfach runterlaufen. Jetzt können wir diesen Knopf greifen und ihn vielleicht wie hier unten bewegen , um den Abstand, den Abstand konsistent zu halten. Also wenn wir jetzt nur prüfen, wie es gerade aussieht, ja, ich schätze, es sieht ganz gut aus. Vielleicht sind diese Elemente, diese Wasserstoffe, nur ein bisschen zu groß. Wenn Sie diese also nicht mögen, können Sie sie immer kleiner machen, aber zumindest sind sie prominent und so wird alles, jeder bemerkt, diese bemerken. Lassen Sie mich einfach die Größe dieses Textes überprüfen. Es ist also 18 und ich glaube, das ist auch 18. Da wir den Button größer gemacht haben, sollten wir vielleicht die Größe dieser Schriftart auf etwas wie 26 erhöhen . Das wird ein bisschen zu viel sein. Vielleicht 22. Und natürlich müssen wir diesen Kerl dazu bringen, ins Zentrum zu gehen. Also mal sehen, ich denke, es sieht ein bisschen besser aus, denke ich, als das Letzte, was man hier tun muss, um diesen Abschnitt zu erstellen, wäre, ihn einfach hinzuzufügen, würde es reaktionsschnell machen. Also müssen wir es immer noch zu unserer mobilen Zeichenfläche für zu Hause hinzufügen. Fangen wir damit im nächsten Video an. 36. Die Services ansprechend gestalten: Jetzt ist es, sich das gesamte mobile Kunstbrett zu schnappen . Und lassen Sie es uns tatsächlich deutlich größer machen. Lasst uns brillant sein. Vielleicht den ganzen Weg hier unten. Und ich fange einfach damit an zu greifen und den Hintergrund zu greifen. Also kopiere ich es einfach. Und ich gehe zu meiner mobilen Zeichenfläche zu Hause. Und ich werde es einfach einfügen und es vielleicht so ansprechen, ich will es nur wissen, ich will nur nicht, dass dieses Mädchen so ist, als würde sie so in der Luft schweben und sie sieht aus, als wäre sie halbiert. Also werde ich einfach versuchen, es vielleicht wie irgendwo hier mitzubringen. Was in Ordnung sein sollte. Ich will nicht einmal wissen, wie mich darum kümmern oder vielleicht, weißt du, vielleicht möchte ich mich nicht darum kümmern, als würde ich diesen Kerl nur ein bisschen kleiner machen . Bringen wir es also wie irgendwo her. Und wieder, ich doppelklicke einfach hinein, um diesen Kerl zu bringen, vielleicht irgendwo hier, das sollte o k sein. Und ich denke, wir müssen vielleicht ausgedehnt werden, noch weiter, um es unterzubringen alle, alle übrigen Elemente. Aber im Moment hole ich mir nur diese beiden Elemente und gehe wieder zu meinem Heimmobil. Diese Typen werden also in meine Zwischenablage Control V kopiert , um sie einzufügen. Jetzt kann ich diese Gruppe einfach nicht mögen. Und beachten Sie, dass wir diese reaktionsschnelle Größe erhalten haben, wie hier überprüft. Es ist aktiv. Wenn wir es also kleiner machen, wird es reagieren. Wir können gut, wir können zu XD führen, das schwere Heben für uns machen und es wie eine Zwei auf die Größe unseres Kunsttafels machen. Nun, manchmal kann man Ergebnisse erzielen, die man nicht wirklich erzielen wollte. Ich meine, wenn wir jetzt einfach versuchen, diese Typen dazu zu bringen , Bücher anzupassen. Also werde ich einfach versuchen, diese Typen so zu machen , dass du siehst , dass die Größe so zu klein wird. Das ist okay, wie dieser Text hier unten. Aber wir wollen definitiv nicht dass dieser Text so klein ist. Und ich schätze, der Unterschied liegt darin, dass dies wie der künstlerische Text ist. Und dies geschieht aus der Verwendung, nun, zuerst den Rahmen mit dem Rechteckwerkzeug zu erstellen und dann etwas Text darin hinzuzufügen. Und hier haben wir gerade etwas Text mit dem Textwerkzeug hinzugefügt. Und nein, es sieht nicht so toll aus. Was ich tun würde, ist, dass ich den Kerl einfach hier schnappen würde. Ich meine, ich würde einfach wissen wie enter, setze meinen Cursor genau hier und ich würde die Umschalttaste plus Enter drücken. Und jetzt kann ich einfach wie diesen Kerl von unten greifen und ihn vielleicht etwas größer machen und diesen Kerl hier drüben ausdrucken. Aber mal sehen, ob wir gerade jetzt vielleicht gerne greifen, wie zum Beispiel das entfernen. Wird es aussehen, ich werde diesen harten Einstieg entfernen . Sieht es gut aus? Lasst uns das Layout-Raster zurückbringen. Wie Sie sehen können, ist es ein bisschen zu groß. Machen wir es also kleiner auf so etwas, wie 35, vielleicht 34 und unten. Bringen wir den Kerl einfach hoch. Und mal sehen, ob 34 genug sind. Ich schätze, es würde reichen. Es ist nicht größer als dieser und dieser ist 41. Aber wenn wir das 141 tun, um die Dinge konsistent zu halten, denke ich, dass es zu groß wird. Es wird definitiv zu groß sein. Also hier drin könnten wir wieder das harte, harte Betreten machen und sehen, wie es aussehen wird. Ich glaube nicht, dass es aussieht, ich denke nicht, dass es gut aussieht, aber das ist unser Weg also muss es nicht so groß sein wie dieses, was unsere Überschrift wäre. Dieser konnte also so bleiben, und dieser wurde auf 22 eingestellt. Vielleicht versuchen wir es wie 18 zu machen. Vielleicht wird es ein bisschen besser aussehen. Aber wenn wir das tun, müssen wir die Zeilenhöhe von 30 auf 18 erhöhen oder verringern . Lassen Sie uns auswählen plus sechs wird eine 24 sein. Und mal sehen, wie es aussieht. Wissen was Lass uns machen. Vielleicht wie 26, also 18 plus acht. Ich denke, es sieht ein bisschen besser aus. Also nochmal können wir uns jetzt einfach wie dieses Webdesign-Symbol schnappen. Und ich glaube, ich bringe das Layout-Gitter zurück. Und ich werde versuchen, es einfach einzufügen und irgendwo hier in der Mitte zu legen. Und lasst uns jetzt sehen, ob unsere reaktionsschnelle Größe oder Funktionen ordnungsgemäß funktionieren werden . Also lasst uns versuchen, diesen Kerl kleiner zu machen als hier. Versuchen wir, es in die Sonne zu bringen, ins Zentrum. Ich denke, es muss immer noch ein bisschen kleiner sein, so etwas. Und ich glaube, ich werde vielleicht Alter mögen, diesen Kerl. Also haben wir diese 1800er Jahre gemacht. Das ist 22. Ich glaube. Weißt du was? Lass uns diesen Kerl genauso machen wie Basic, Basic 16. Also werde ich mir diesen Charakterstil entnehmen. Aus meinem Brunnen, im Grunde aus meinem Vermögen. Aber natürlich müssen wir die Farbe ändern und sehen, wie es aussieht. Und ich denke, ich werde es deutlich kleiner machen , so etwas. Und ich schätze, es sollte okay aussehen, ich möchte hier nur so etwas wie eine Hierarchie behalten, also möchte ich diese Leute größer machen. Und ich möchte diesen Untertitel nicht so groß machen wie diese Typen hier. Ich denke, wenn wir diese so behalten , sollte es in Ordnung sein. Eine andere Sache, von der ich denke, dass wir es tun könnten ist, dass wir das vielleicht so machen könnten. Ich kann nur ein bisschen kleiner als so etwas. Das sollte in Ordnung sein. Und natürlich sollten wir diese Typen vielleicht nur ein bisschen hochbringen. Nur so sieht es etwas sauberer aus, vielleicht wie hier in unserer, in unserer mobilen Version. Lasst uns also schnell sehen , wie es aussehen wird. Hier. Ich denke, es sieht gut aus, also müssen wir im Grunde genommen alle verbleibenden Elemente greifen und sie einfach vertikal hier stapeln . Als Beispiel werde ich einfach den Webentwicklungsteil hier greifen und vielleicht, bevor ich das mache, doppelklicke ich wieder hinein, schnappe diese beiden Ankerpunkte und einfach in unserem Gehirn entsaftet und stumm, heb sie fest, vielleicht wie zwei irgendwo hier. Nur um sicher zu sein. Und ich werde es noch mal machen, lass mich das einfach ausschalten, denn jetzt können wir den Kerl einfach wieder einfügen. Vielleicht lege es irgendwo hier hin. Und wenn wir jetzt nur diese Elemente oder dieses Webdesign, eine Karte, greifen , können wir sehen, dass ihre Größe auf 269 in der Höhe und 318 in der Breite eingestellt ist . Also lass uns einfach wissen, mal sehen, ob wir einfach wissen können , wie diese Werte einzugeben. Es war also wieder 38269. Also lasst uns 318 sehen und lasst uns wie 269 machen. Mal sehen, ob es funktionieren wird. Ich glaube nicht, dass es verschwunden ist. Also denke ich, es wäre besser, diese Elemente einfach zu wissen, einfach zu tun, nicht wie zuvor. Also schnapp ich mir das zuerst . Ich ändere nur die Größe auf 16 und die Zeilenhöhe auf 22. Und natürlich muss es deutlich kleiner sein als so etwas. Und ich lasse es mehr oder weniger so aussehen. Nun, dieser bleibt hier, aber das wie dieses Symbol und der Hintergrund müssen kleiner sein. Wenn du es bemerkt hast, sind diese Typen nicht gruppiert, also haben wir hier keine ähnlichen Breiten - und Höhenwerte. Wenn wir uns gruppieren, könnte das unser erstes sein. Ich gruppiere diese Elemente. Also dieses Icon und dieses Rechteck gruppiere ich sie. Und jetzt können wir diese Werte genau hier sehen . Wenn ich jetzt nur dieses Rechteck und dieses Symbol schnappe , gruppiere ich sie. Und lasst uns das tun, ich glaube, es war eine 114. Also lasst uns 114 machen. Da sind wir los. Und wieder werde ich nur sicherstellen, dass diese Typen gut auf das Zentrum ausgerichtet sind. Da sind wir los. Dann können wir einfach diese beiden Elemente greifen und sie einfach oben setzen. Gehen wir noch einmal zu unserem, jetzt zu diesem, schnappen wir uns einfach unser mobiles Design zu Hause und sehen, wie es aussieht. Es sieht irgendwie okay aus, also jetzt müssen wir wirklich nur das SEO und das Logo-Design hinzufügen. Also lass mich das ganz schnell machen und ich melde mich bei dir. Okay, also habe ich alle Karten hinzugefügt und die Schaltfläche „Mehr erfahren“ hinzugefügt. Ich habe das auch geändert, aber die Größe unseres Hintergrunds. Jetzt können wir einfach eine Vorschau anzeigen, wie es auf unserem Mobilgerät aussehen würde. Also haben wir das Menü bekommen. Und wenn wir jetzt nur verkleinert sind und nach unten scrollen, können Sie sehen, dass wir alle unsere Elemente hinzugefügt haben. Wenn Sie möchten, können Sie natürlich die Größe ändern, vielleicht Titel und vielleicht die Symbole. Es wird total, ganz bei dir liegen. Ich denke, dass es so aussieht , wie es gerade aussieht, wir können es immer optimieren, später optimieren. Aber das Wichtigste ist du verstehst, wie alle Karten wie diese hinzufügst und wie du sie später hinzufügst? Nun, wie man sie in der responsiven Version Ihres Designs stapelt . 37. Lass uns beginnen, Portfolio hinzuzufügen.: Wir haben also unseren Dienstleistungsbereich und wir haben es natürlich auch wie mobil gemacht. Wie Sie sehen können, habe ich einfach nichts repariert, etwas Positionierung. Ich habe die Größe nur ein bisschen optimiert , nur damit alles ein bisschen schöner aussieht. Und jetzt können wir tatsächlich anfangen, den Portfoliobereich hinzuzufügen. Was ich also tun werde, ist, dass ich mir diese beiden Elemente schnappen werde . Ich kopiere sie. Geh hier runter und ich werde sie einfach einfügen, natürlich möchte ich die Farben ändern. Aus meinem Vermögen werde ich einfach wie diese Farben wählen , diese dunkleren Farben. Und hier drin werde ich einfach so etwas tippen wie meine Projekte ansehen oder so ähnlich. Das sollte sein, das sollte okay sein. Das, was wir hier tun möchten , ist natürlich, wie Portfolioelemente hinzuzufügen. Und du kannst es auf vielfältige Weise machen. Normalerweise werden dann die Portfolios , die Sie auf den Homepages sehen würden auf den Homepages sehen würden , in Form einer Galerie präsentiert. Und diese Galerie kann gut gestapelt werden, kann Praktikant präsentiert werden. Ich mag ein Gitter oder vielleicht mag ein Mauerwerk, Fliesenlayout und solche Dinge. Aber worauf wir uns hier konzentrieren werden ist, Ihren Portfolioelementen Interaktivität hinzuzufügen , damit jemand, der über sein Portfolio-Miniaturbild schwebt sein Portfolio-Miniaturbild eine Art von Interaktion. Aber bevor ich das mache, bringe ich das Layout so zurück. Weil ich nur wissen will, möchte ich mein, mein Raster im Grunde genommen auf meinem 12. Säulensystem stützen mein Raster im Grunde genommen auf meinem . Zuerst füge ich einfach ein einfaches Rechteck hinzu. Und das wird so sein, als wären sie es zuerst, zuerst Portfolioelement, Miniaturansicht, und dann werden wir Interaktivität hinzufügen. Also schnappe ich mir einfach das Rechteckwerkzeug. Und ich werde ein Rechteck erstellen, das sich über diese drei Spalten erstrecken wird. Lass es uns ein bisschen größer machen, so etwas. Und ich werde es einfach mit einem füllen , ich glaube nicht, dass es eine Grenze braucht. Ich werde es nur mit etwas Farbe füllen, aber nur damit du es jetzt besser sehen kannst, werde ich einfach zu dieser Farbe passen. Aber letztendlich möchte ich es einfach mit einer Art Foto füllen. Also verwende ich hier das Pexels-Plug-In. Ich tippe einfach Design ein. Die Bilder hier sind wirklich nicht so wichtig. Es geht darum, es geht um die Tatsache, dass wir es anstreben, aber vielleicht füge ich einfach wie Grafikdesign hinzu. Und ich füge das einfach hinzu. Warum nicht? Also klicke ich einfach drauf. Und wie Sie sehen können, haben wir bereits dieses Bild hier aufzutauchen und durch unser Rechteck, das im Grunde wie eine Maske funktioniert, gut eingeschränkt zu sein durch unser Rechteck, das im Grunde wie eine Maske funktioniert, gut eingeschränkt . Also werde ich einfach ausbrennen, klicke auf dieses Layout, damit du alles ein bisschen besser sehen kannst. Ich verschiebe es ein bisschen nach unten. Was ich hier machen möchte, ist wenn ich den Mauszeiger über dieses Bild fahre, ich wollte nur sehen, wie ein Titel dieses Projekts auftaucht. Und wir werden einen Untertitel fragen, der mehr wäre, vielleicht eher wie einige Kategorien oder einige zusätzliche Informationen. dieses Rechteck ausgewählt ist, füge ich vielleicht füge ich vielleicht ein weiteres Rechteck hinzu, das so groß sein wird . Vielleicht schnappe ich mir einfach mein Rechteckwerkzeug und erstelle einfach ein Rechteck, das ungefähr so sein wird. Wieder ohne Grenze. Lassen Sie mich einfach prüfen, ob die Größe in Ordnung ist. Es sind also 5366285366 bis acht. Und ich werde es einfach so abdecken. Und jetzt hole ich ihnen einfach eine dunklere Farbe, vielleicht wie diese. Und was ich jetzt mache, ist, nun, das wird letztendlich unser Schwebezustand sein. Aber im Moment möchte ich nur, dass du verstehst , was hier passiert. Also habe ich diesen kleinen Schlüssel bekommen. Wie ein Covered, das auch ein Hintergrund sein wird. Aber nun, es deckt das Bild darunter ab und es wird der Hintergrund für den Titel und den Untertitel sein. Also hole ich mir das Textwerkzeug. Und ich klicke einfach irgendwo hier. Und ich gebe etwas wie ein Portfolioelement ein. Und vielleicht ist das ein bisschen zu groß. Lass uns etwas wie 42 versuchen. Vielleicht sogar etwas Kleineres, kleiner wie 36. Und ich stelle es irgendwo in der Mitte hin. Und ich werde nur ein paar klonen und unten halten die Umschalttasten und die Alt-Tasten zum Klonen gedrückt. Diese, dieser Typ und Zwang, es ist, seine Bewegung. Und hier unten wird es so sein, weißt du, etwas Gezeiten, ein Titel hier. Und dieser Typ wird kleiner und vielleicht leichter sein. Versuchen wir es wie 22. Ich denke, es sollte gut aussehen. Und ich werde versuchen, sie irgendwo in die Mitte zu stellen. Das sollte sein, das sollte reichen. Das sieht aus, das sieht gut aus. Was Sie gerade sehen, ist der Hover-Status, der bald Komponente sein wird. Ich wähle alles aus und drücke die Steuerung. Oder wenn Sie auf einem Mac sind, drücken Sie Command K um eine Komponente aus diesem Typ zu erstellen. Wir können es also sogar wie ein Portfolioelement so nennen. Im Standardstatus möchten Sie diese Elemente im Leerlauf sehen. Also dieses darunter liegende Rechteck. Also dieser Typ hier, dieser Typ muss weg sein. Also werde ich das ansprechen und seine Deckkraft bis auf 0 bringen. Und diese Typen, ich will, ich bin Paul, ich möchte auch ihre Deckkraft auf 0 bringen, aber ich möchte sie auch verschieben. Also bringe ich diesen Kerl zur Seite, an den Rand dieser Komponente. Und wir werden seine Deckkraft bis auf 0 drucken . Und mit diesem Kerl bringe ich es zur Seite, auf die rechte Seite. Und ich werde seine Deckkraft auch auf 0 drucken. Jetzt ist dies unser Standardstatus, aber wenn wir den Hover-Status hinzufügen , gehe ich im Hover-Status einfach zu meinen Ebenen zurück. Also hier drin möchte ich das greifen, das ist das zugrunde liegende Rechteck. Also möchte ich diese Deckkraft bis zu 100% bringen. Und dann muss der Portfolioartikel, dieser Typ ins Zentrum gehen. Also sollte es wie irgendwo hier sein. Da sind wir los. Und natürlich muss die Deckkraft auch auf 100 Prozent steigen. Natürlich können wir immer einfach überprüfen, ob Portfolioartikel nicht mögen würden. Dieser Typ, wir können immer einfach auf dieses Align Center klicken, aber ich denke, wir haben es ziemlich gut ausgerichtet. Und dieser Typ muss auch seine Deckkraft auf 100 Prozent eingestellt haben. Und wieder können wir das Gleiche tun. Wir können es einfach so an der Mitte ausrichten. Jetzt im Standardzustand sehen wir nichts anderes als im Hover-Status. Diese Typen sind zurück, rückwärts hier, also gehe ich einfach schnell in den Vorschaumodus. Also drücke ich Command oder Strg und Enter auf meiner Tastatur. Wenn Sie auf einem Mac sind, drücken Sie die Eingabetaste. Und das wird ungefähr so aussehen, also können wir im Moment nicht alles und alles sehen. Bewege den Mauszeiger darüber. Man kann sehen, wie diese Typen vorbeikommen. Also haben wir unseren wie diesen zugrunde liegenden Hintergrund bekommen, der seine Deckkraft wiedererlangt hat. Und diese beiden Elemente. Wie das Portfolioelement, Name und ein Typ sollte hier tatsächlich ein Untertitel geschrieben werden. Diese Typen fliegen also wie von den Seiten herein und gewinnen auch ihre Deckkraft wieder. Was wir jetzt tun können, ist, dass wir dieses Element einfach klonen können , um es zu wissen, um im Grunde wie ein Raster aus Miniaturansichten von Portfolioelementen zu erstellen . Und wir würden unseren Portfoliobereich nicht erstellen lassen . Aber fangen wir das im nächsten Video an. 38. Das Portfolio fertigstellen: Bevor wir also mehr wie Portfolioelemente hinzufügen, könnten wir einfach einige wie ein gerade unbekanntes Filtersystem hinzufügen, nur um anzugeben was wir hier erreichen möchten. Wenn also jemand auf diesen Filter klickt, wie die Kategorie, würde er oder sie sehen, dass die entsprechenden Elemente angepasst wurden. Also klone ich diesen Kerl einfach hier schnell. Und ich tippe zuerst so etwas wie alle ein. Und natürlich muss es viel kleiner sein. Also wird es ungefähr so aussehen. Und vielleicht machen wir es wie 18. Das sollte in Ordnung sein. Und dann klone ich es einfach zur Seite und tippe so etwas wie das sogenannte Webdesign ein. Und natürlich werde ich es ein bisschen größer machen. Und wieder, Colonia, um zu entscheiden, dass ich etwas wie vielleicht etwas wie Webentwicklung eintippen werde. Wenn die Zuteilung. Und natürlich wäre das Letzte hinzuzufügen, lasst uns Logo-Design hinzufügen. Ich glaube, wir hatten ein Logo-Design in unseren Dienstleistungen. Also Logo-Design, und ich werde sie einfach gut ausrichten lassen. Aber ich denke, wir müssen diese Texte, diese Textrahmen, vielleicht reparieren . Diese Typen sind also in der Tat gut ausgerichtet. So sollte das besser sein. Ich stelle sie irgendwo hin. Und vielleicht könnten wir es auch nicht mögen, nicht angeben, welche Kategorie aktiv ist. Also die Kategorie, während die aktive Kategorie nicht mehr hervorstechen würde . Also können wir uns all diese Elemente einfach schnappen. Wir können aus unserem Vermögen vielleicht genauso wie wir einfach die Farbe ändern können , um weniger prominent zu sein. Und vielleicht bringe ich diese Typen einfach mit. Diese Typen müssen näher zusammenstehen und sie irgendwo hier ins Zentrum bringen. Also bringe ich mein Raster-Layout so zurück. Was wir jetzt tun können, ist, dass wir diesen Kerl einfach auf diese Seite klonen können , einige halten wieder sowohl die Umschalt- als auch die Alt-Tasten. Und ich werde es vielleicht etwas größer und vielleicht größer machen um so etwas größer. Also werden wir wie ein Mauerwerk erstellen. Jetzt lassen Sie uns dieses Foto einfach hier ändern, aber stellen wir zuerst sicher, dass wir uns auf dem richtigen Rechteck befinden , das es tatsächlich ausgewählt hat. Also das ist dieser Typ genau hier. Und lasst uns einfach etwas mehr wie etwas anderes wählen . Oder dieser ist funky. Also lasst uns dieses wählen. Ich weiß nicht, was für ein Webdesign- oder Webentwicklungsprojekt es sein würde, aber es sieht in Ordnung aus. Wenn wir jetzt nur eine Vorschau unseres Elements anzeigen, können Sie sehen, dass wir in der Tat dieselben Elemente haben der Tat dieselben Elemente hier passieren, wenn wir über diesen Kerl fahren. Aber sie sind genau die gleichen Werte, die wir dieser Komponente hinzugefügt haben. Also müssen wir diese ändern, wie der Hover-Status auch hier mit dieser Komponente. Um das zu tun, schnappen wir uns unsere Komponente und gehen wir in den Schwebezustand. Das erste, was ich tun werde, ist, dass ich einfach meinen Portfolio-Artikel oder diesen Artikel schnappen werde . Ich gehe zum Standardstatus und möchte nur seine Größe überprüfen. Es heißt also 674997. Ich denke, ich kopiere einfach die Breite und ich werde versuchen, mich an die Höhe zu erinnern, also 997. Jetzt im Hover-Status müssen wir dieses Rechteck wieder greifen und wir können dieses Rechteck tatsächlich auch greifen und einfach einfügen und 997 und im Hover-Status eingeben , auch diese Leute müssen ins Zentrum gehen. Also denke ich, dass sie irgendwo hingehen sollten. Und wenn ich einfach in meinen Standardstatus gehe, können wir prüfen, ob alles richtig funktioniert. Ich denke, dass wir noch daran arbeiten müssen, wie an der Positionierung dieser Elemente wie in ihnen zu arbeiten. Obwohl es irgendwie so gut aussieht. Aber um jetzt den gleichen Effekt wie hier zu behalten, müssen wir definitiv an der Standardpositionierung dieser Elemente für das Positionsargument arbeiten Standardpositionierung dieser Elemente für das Positionsargument . Wenn wir also in den Hover-Status gehen, denke ich, dass es cool aussieht, so sieht es okay aus. Ich denke, das ist der fehlerbeweisste Weg um die Positionierung dieser Elemente zu fixieren Wenn wir einfach die Werte kopieren und dann wieder einfügen. Wenn du also in den Hover-Status gehst, können wir uns einfach schnappen, lass uns diesen Portfolio-Artikel greifen. Also dieser Titel hier, und wirklich alles, was wir brauchen, ist der y-Wert, also sozusagen die Position, wie die vertikale Position. Also kopiere ich das einfach. Ich gehe zurück zum Standardstatus. Ich hole mir den Titel des Portfolio-Elements und füge ihn einfach ein. Und dann gehe ich zurück in den Hover-Status, hole mir diesen Untertitel, nimm diese vertikale Position gehe zum Standardstatus des Portfolioelements. Es ist irgendwie so, als wäre es sehr Arbeit aber ich denke, um die Dinge konsistent zu halten, denke ich, dass es der beste Weg ist, um die Dinge konsistent zu halten. Also haben wir diese Werte bekommen, fügen Sie sie ein. Und wenn wir jetzt nur den Mauszeiger über diesen Kerl bewegen, können Sie sehen, dass diese Typen tatsächlich in der richtigen Position sind. Aber natürlich glaube ich, dass ich vergessen habe, dieses Bild zu ändern. Also lasst uns dazu gehen. Versuchen wir herauszufinden, dass das flippige Bild dieser Typ war. Also nochmal, wenn ich jetzt wirklich nichts vermasselt habe, wenn wir in den Vorschaumodus zurückkehren, können Sie sehen, dass alles wie erwartet funktioniert. Alles, was wir gerade brauchen, ist, unser Layout einfach zu behalten, weiter zu erstellen, damit wir es einfach wissen können, diesen Kerl irgendwo zu klonen, um ihn zu entscheiden. Und dann vielleicht verringern die Größe, um vielleicht so etwas zu mögen. Sie können es noch kleiner machen, als wir klonen können und vielleicht hier unten und die Größe dieses Leitfadens auf so etwas erhöhen . Dann könnten wir vielleicht, vielleicht nicht, vielleicht sogar etwas größer machen. Jetzt wo wir es können, bringen wir diesen Kerl jetzt einfach runter. Lass es mich einfach gut bauen. Es sieht also mehr oder weniger so aus. Ich denke, dass dieser Typ es sein sollte, sollte ein bisschen nach oben gehen. Stellen wir es irgendwo hier oben hin. Und ich werde es vielleicht ein bisschen kleiner machen, aber seine Größe vergrößern, so etwas. Und schließlich wird dieser Typ runter gehen, hier unten und ich werde es einfach so aussehen lassen. Natürlich. Wenn ich einfach darauf klicke, wenn wir zu unserer Vorschau gehen. Also haben wir dieses Element bekommen, Elemente hinzugefügt. Aber wie Sie sehen können, müssen wir wieder nur die Positionierung korrigieren, die Bilder und unser Portfolio sollte vollständig sein. Also lass mich das jetzt ganz schnell machen und ich melde mich so schnell wie möglich bei dir. Wie Sie sehen können, braucht alles ziemlich viel Zeit. Sie müssen ziemlich viele Optimierungen und einige Anpassungen vornehmen. Aber wenn Sie fertig sind, denke ich, dass der Effekt ziemlich interessant aussieht. Wenn wir fertig sind, können wir einfach nur eine gewisse Positionierung wissen. Wenn wir fertig sind, müssen wir unser Portfolio immer noch auf unsere mobile Zeichenfläche legen. Und ich denke, dass es ziemlich lang sein wird. Aber fangen wir das im nächsten Video an. 39. Das Portfolio Reponsive gestalten: Genau wie bei allen unseren vorherigen Abschnitten müssen wir jetzt einfach unseren Portfoliobereich auf die mobile Zeichenfläche legen . Also hole ich mir einfach diesen ersten Folientitel und den Untertitel. Und nochmal, lass mich vielleicht einfach das Layout-Raster einbringen. Und hier drin füge ich diese Typen einfach ein. Und lasst uns prüfen, ob wir tatsächlich davonkommen können Lucknow diese Jungs ein bisschen kleiner macht, vielleicht so etwas. Ich glaube nicht, dass wir es zulassen können, lass uns jetzt mal sehen, was wir hier haben. Also lasst uns überprüfen, ob dieser 34 mittelgroß ist und dieser Typ ist 800 Jahre normaler Laden. Also 34 mittel. Vielleicht. Lass uns einfach nachsehen. Tu das schwer. Herz tritt genau hier ein. Und dieser Typ sollte ein Team sein. Und ich schätze, es sollte aussehen , in Ordnung, vielleicht mache ich es einfach ein bisschen kleiner. Und das sollte okay sein, lass es uns so lassen. Als nächstes fügen wir diese Filter hinzu. Ton kopieren Sie einfach, kopieren Sie diese Elemente oder Control C oder Command C, wenn Sie auf einem Mac sind , und fügen Sie sie dann einfach hier ein. Lasst uns diese Jungs jetzt einfach nicht als eine Liste setzen diese Jungs jetzt einfach nicht als eine Liste , die mehr oder weniger so aussehen wird. Ich möchte größere Lücken zwischen diesen Elementen behalten , weil es das Tippen auf einem mobilen, mobilen Gerät einfach machen würde . Aber natürlich muss ich sie in den Mittelpunkt stellen und auch die ganze Gruppe. Das sollte gut aussehen, aber natürlich müssen wir alle diese Elemente immer noch greifen und richtig verteilen. Es sieht also mehr oder weniger so aus. Jetzt können wir uns einfach das hier kopierte und eingefügte Portfolio-Element holen und es irgendwo hier ablegen. Und wieder müssen wir mit der Positionierung wie dieser herumspielen . Und vergiss nicht, dass wir es für die ganze Welt tun müssen , wie alle Staaten. Also werde ich nicht so sein, die Größenvariationen beibehalten, nur um die Dinge ein bisschen sauberer und einfacher für uns zu machen. Also. Ich füge diese Elemente einfach schnell hinzu. Also kopiere und füge irgendwo hier ein. Und ich schaffe es, mach den Kerl kleiner. Also werde ich nur sehen, wie groß dieser Typ ist. Es ist also 454, und natürlich müssen wir es mit den Spalten anhängen. Also für 54, so, werde ich es vielleicht ansprechen. Schon wieder. Dieser Typ, der hier eingefügt wurde, mach es kleiner. Und wieder, waren es vier oder 54? Ich glaube, das war es. Und dann lass uns vielleicht den Kerl machen. Also Kopie wurde hier eingefügt. Mach es wieder kleiner. Und vier oder 54. Und wir haben immer noch wie diese beiden Typen übrig. Also füge es hier ein. Mach es für vier oder 54 kleiner. Und geh nach oben. Und wieder, dieser Typ fügt es hier ein und legt es dahin, wo es hin muss. Dann vier oder 54, so. Aber natürlich sind wir noch nicht fertig, denn wenn wir einmal über diese Jungs schweben, also wenn wir nur eine Vorschau auf diesen Kerl sehen, gehe ich hier runter. Man sieht, dass es nicht gut aussehen wird, wenn wir den Mauszeiger darüber bewegen . Es wird eigentlich ziemlich schrecklich aussehen. Also müssen wir es wieder tun, all diese Dinge für alle Staaten tun. Also kennst du wenigstens die Größe. Also mach es kleiner. Und für 54 so, wieder mit diesem Kerl, für den Schwebezustand. So kleiner und vier oder 54. Und ich denke, es muss immer noch kleiner sein, dieser Typ auch so. Und natürlich müssen wir das beheben. Nun, der Text. Dieser Typ sieht also in Ordnung aus. Schnappen wir uns den Kerl. Und mal sehen, wie im Standardzustand, Lass uns etwas wie 38. Fünfundzwanzig, das könnte ein bisschen zu viel sein. Lasst uns u1. Mai 0 ein bisschen mehr sein. Also mache ich hier einfach eins und dann werde ich, nein, ich werde dich nicht langweilen , ohne die Entfernungen aller anderen Elemente zu überprüfen . Ich mache es schnell wie außerhalb der Kamera. Aber nur um zu sehen, was es tun wird, wie es gemacht werden muss. Also Standardstatus, Lass uns einfach drei machen. Vielleicht hab ich den Kerl kopiert. Da sind wir los. Also sollte der Standardstatus aussehen, sollte aussehen. Okay, also lass es mich jetzt einfach schnell für alle übrigen Elemente machen . Stimmt's? Wenn also alles erledigt ist, wenn alle Entfernungen und Größen im Grunde verfolgt werden, und natürlich mag ich es auch, die Größe dieser Elemente leicht zu ändern. Du kannst sehen, wie es aussieht, sieht gerade ein bisschen besser aus. Bisher so gut, aber wir wollen nicht, dass nur jemand darüber schwebt, um es zu sehen. Ich mag diese Elemente, wie diese interaktiven Elemente. Wir möchten auch darauf hinweisen , dass der Benutzer, wenn jemand auf eines dieser Elemente klickt, tatsächlich auf eine Unterseite wie eine Unterseite für sie gebracht wird , mit unseren leichten Portfolio-Bildern oder zu einem separate Galerie , die hier in gewisser Weise mit einem dieser Elemente verbunden ist. So können wir das natürlich hier drinnen, in Adobe XD tun , und das werden wir tatsächlich tun. Aber im nächsten Video. 40. Ein Image hinzufügen: Der Effekt, den ich hier erzielen möchte, ist also nicht nur jemand, der den Mauszeiger über eines dieser Gegenstände bewegt. Und er wird einen Titel und einen Untertitel sehen , diese Art von Effekt. Aber auch wenn diese Person auf eines dieser Miniaturansichten klickt, wird sie es nicht an ihn weiterleiten, auf ein Bildkarussell, das natürlich auch interaktiv sein wird. Also lasst uns das jetzt machen. Was ich tun werde, ist etwas einfach gegangen , um eine neue Zeichenfläche zu erstellen. Also hole ich mir das Artboard-Werkzeug. Und ich möchte, dass dieses Bildkarussell das gesamte Ansichtsfenster abdeckt. Also werde ich wählen wie Web Desktop 19, 1920er Jahre. Ich möchte hier ein paar Elemente hinzufügen. Zuallererst werde ich nur den Eindruck erwecken , dass wir uns tatsächlich noch auf derselben Art Board befinden. Also kopiere ich einfach all diese Elemente und füge sie hier auf dieses Bildkarussell ein. Denn wann immer Sie auf einer typischen Webseite möchten, wenn Sie auf etwas wie ein Portfolioelement wie das Bett klicken , bleibt die Kulisse, aber es ist wie mit diesem Bildkarussell bedeckt. Das ist es, was ich hier erreichen möchte. Also bleibt dieser Typ. Aber ich werde es mit einem einfachen Rechteck abdecken , das jeder Rand enthält. Aber es wird ein glückliches Schwarz haben und dann füllen. Und versuchen wir vielleicht etwa 90% der Deckkraft. Es würde also im Grunde etwa so aussehen. Vielleicht lasst uns fünfundachtzig machen, so. Vor diesem Hintergrund möchte ich also wie ein Bild, Bildkarussell hinzufügen . Und ich werde etwas wie sehr, sehr einfach erstellen, genau wie einen Schieberegler, bei dem die drei Bilder nur so verstehen, wie man hier in XD ein Bildkarussell oder einen Schieberegler wie diesen erstellt . Das erste Bild, das ich verwenden werde, ist dieses Bild genau hier. Vielleicht versuchen wir es tatsächlich zu kopieren. Also kopiere ich diesen Kerl einfach und versuche ihn hier einzufügen. Und natürlich möchte ich es deutlich vergrößern. Es sieht also mehr oder weniger so aus. Vielleicht ein bisschen größer. So etwas. Das sollte ausreichen. Jetzt gib ich unten einfach etwas wie den Projekttitel ein. Also Projekttitel, aber ich möchte, dass es deutlich kleinere Liste von etwas wie 26 ist. Und ich werde seine Farbe auf schlichtes Weiß ändern. Und ich werde versuchen, es irgendwo in die Mitte zu stellen , irgendwo hier. Damit alles funktioniert, müssen wir weitere Bilder hinzufügen und sie maskieren. Also lass mich einfach dieses Rechteck schnappen und ich kopiere es zur Seite, vielleicht wie irgendwo hier links. Und vielleicht weißt du was, das ist eigentlich, schnapp dir alles, all diese Elemente und ich werde zusammen mit der Art Board und diesem Kerl. Zuerst versuche ich einfach, die Zeichenfläche zu greifen. Ich stelle es irgendwo hin. Nur sono, die Bilder decken diese Zeichenflächen nicht genau hier ab. Und mal sehen, ob wir es einfach noch einmal zur Seite kopieren . Und ich werde einfach versuchen, dieses Bild zu ändern. Lass uns etwas machen wie vielleicht, ich weiß nicht, Designer. Und lass uns ein Bild hinzufügen. Denken Sie daran, als ob wir vielleicht versuchen, etwas wie Webdesign zu finden. Und lasst uns vielleicht normal sein, wie Lass uns dieses Bild hinzufügen. Warum nicht? Und lasst uns das noch einmal kopieren, gehen Sie auf diese Seite. Jungs legen es irgendwo her, und lasst uns vielleicht das hinzufügen. Warum nicht? Jetzt müssen wir, wie ich bereits erwähnt habe, diese Typen maskieren. Also hole ich mir das Rechteckwerkzeug und erstelle ein Rechteck , das dieses Bild abdecken wird . muss keine Grenze haben, aber wir müssen alle diese Elemente hinzufügen. Also diese beiden Bilder und auch die, die zugrunde liegenden Elemente, oder vielleicht wäre es einfacher, diese beiden Typen einfach zu greifen. Ich setze sie irgendwo an die Spitze, nur damit du alles besser siehst. Und dieser Typ wird gehen, vielleicht legen wir es auch an die Spitze, irgendwo hier. Und dieses Element wird auch irgendwo hier nach oben gehen . Und ich werde nur sicherstellen , dass all diese Typen gut aufeinander abgestimmt sind. Dann muss diese Summe, wie dieses weiße Rechteck, natürlich nach oben gehen. Das wird unsere Maske im Element sein. Also werde ich all diese Elemente greifen und wir können zum Objektmenü gehen und einfach mit Shape old maskieren wählen oder einfach die Umschalttaste plus Steuerung plus M verwenden. Das ist also nicht so, das ist maskiert. Also bringe ich es hier rüber. Also hier unten zu irgendwo, irgendwo hier, das sollte sein, das sollte etwas besser sein. Jetzt brauchen wir also eine Art Navigation hier. Also schnapp ich mir einfach das Stiftwerkzeug. Und ich werde einfach erstellen, indem ich die Umschalttaste gedrückt halte, wie eine Pfeilspitze, die so aussehen wird. Lass es uns weiß machen. Und machen wir es deutlich dicker, aber vielleicht kleiner als so etwas. Und ich stelle es irgendwo hin. Natürlich könnten wir es auch hier zur Seite stellen. Aber ich mag es einfach hier. Als Nächstes klone ich es einfach zur Seite. Also halte ich sowohl die Umschalttaste als auch die Alt-Taste gedrückt. Und aus dem Transformations-Panel hier wähle ich einfach „Horizontal spiegeln“. Und wenn wir alle diese Elemente gerade auswählen, können wir sie einfach horizontal verteilen. Und vielleicht gruppiere ich sie vorerst, weil ich nur sicherstellen möchte, dass sie gut im Mittelpunkt stehen. Und jetzt können wir die Gruppierung aufheben. Da sind wir los. Was wir gerade tun müssen, ist, dass wir eine Komponente aus unserer Maske erstellen müssen . Und dieser kleine Pfeil und diese kleinen Pfeile links und rechts. Also mache ich es einfach zu einer Komponente. Und das ist in der Tat unser Standardzustand, aber wir brauchen tatsächlich ein paar weitere Staaten. Also füge ich einen neuen Zustand hinzu, der als Folie eins bezeichnet wird . Und wenn wir in diesem Zustand nur versuchen, zu unserer Maske zu gelangen, müssen wir nur dieses Rechteck, dieses Rechteck und dieses Rechteck greifen . Also all diese Bilder und verschiebe sie einfach Seite , um hier irgendwo hin zu gehen. Als Nächstes füge ich einen neuen Zustand hinzu. Und es wird unser Durchrutschen nicht sein , weil der Standardstatus tatsächlich unsere Folie ist, schieben Sie nach wie in dieser Gruppe. Also wird unsere Folie drei sein, lass mich einfach noch mal die Maske schnappen, all diese Typen und bewege sie einfach zur Seite hin. Also Standardstatus, schieben Sie eins, also das linke Bild, das linke Bild, schieben Sie drei, das rechte Bild. Jetzt können wir also zum Prototyp-Panel gehen. Und hier drin müssen wir das alles tun. Wir müssen den Pfeilen gerne sagen , dass sie auf einen bestimmten Zustand zeigen sollen. Im Standardzustand möchte ich das also schnappen. Fangen wir mit dem Pfeil nach links an. Der Pfeil nach links, wenn wir uns in diesem Zustand befinden , muss beim Klicken zur Folie, der ersten Folie, gehen. Also füge ich eine Interaktion hinzu. Es wird tippen, automatisch animieren, und ich wähle Slide One aus. Und dieser Weg, dieser Pfeil wird eine Interaktion haben und automatisch animieren, wählen Sie Kunsttafel. Und wir werden mit der Folie drei gehen. Wenn wir jetzt auf den Pfeil nach links klicken, gehen wir zur Folie eins. Und der Pfeil nach rechts führt uns, wenn Sie darauf klicken, zu dieser Folie drei. Aber wir müssen es für alle Folien machen. Also gehe ich in den Entwurfsmodus. Und in der Komponente wähle ich die erste Folie zurück zum Prototyp. Und hier, wenn wir auf diese Folie klicken , diesen Pfeil nach links. Wenn wir also geklickt haben, soll dieser Typ uns zu unserer dritten Folie bringen , weil wir hier so etwas wie eine Endlosschleife erstellen. Und dieser Typ, also soll der Pfeil nach rechts, wenn er darauf geklickt wird, zum Standardstil führen , der unsere zweite Folie ist. Und der letzte Typ ist unsere Folie drei. Also nochmal Prototyp. Und hier drin, wenn wir klicken, nun, okay, fangen wir damit an. Wenn wir also auf den Pfeil nach rechts klicken, soll es uns zu dieser Folie bringen, eins. Und wenn wir auf diesen Pfad fünf klicken, also unseren Pfeil nach links, soll dieser Typ uns in unseren Standardzustand bringen und ich bin, ich spiele nicht mit diesen Dingen herum. Jetzt wie die Dauer, in der es standardmäßig so eingestellt ist, denke ich, dass es in Ordnung aussieht. Jetzt können wir, wenn ich zum Design zurückkehre, es entwerfen und auf den Standardstatus setze, einfach überprüfen, wie es aussehen wird. Dies ist also unser Standardstatus. Lasst uns einmal klicken. Wir gehen zurück zur Folie zur ersten Folie, klicken erneut, schieben Sie erneut drei. Und wie Sie sehen können, funktioniert alles gut, gut. Aber es gibt immer noch zwei Dinge, die wir gut machen müssen. Zunächst müssen wir in der Lage sein, dieses Bildkarussell abzubrechen. Dafür gehe ich zum Prototyp. Und hier könnten wir wie ein X-Symbol hinzufügen . Aber ich möchte, dass du wie eine andere lernst , eine andere Technik. Ich wähle mein gesamtes Kunstbrett und füge eine Interaktion hinzu. Aber anstelle des Tipp-Triggers werde ich ihn so einstellen, dass er Pad verliert und gewinnt. Und hier drin können wir einfach eine Taste drücken um es im Grunde zu einem Auslöser für unsere Interaktion zu machen. Also möchte ich nur, ich möchte, dass der Benutzer einfach die Escape-Taste auf der Tastatur drücken kann einfach die Escape-Taste auf der Tastatur drücken , um diese Art Board einfach abzubrechen . Also drücke ich einfach Escape. Und unser Ziel ist unsere Homepage. Und auch wenn wir zu unserem gehen, gehe ich zum Design und hole mir diese Komponente, gehe in den Schwebezustand und dann zurück zum Prototyp. Wenn also jemand auf diese Komponente klickt, füge ich eine Interaktion hinzu. Und diese Interaktion wird angezapft. Ich möchte, dass er oder sie auf unser Bildkarussell geleitet wird. Also gehe ich zurück zum Design. Jetzt möchte ich nur, dass du das ganze Interaktivitätsmuster hier verstehst . Also scrolle ich einfach nach unten zu unserem Portfolio. Wenn ich den Mauszeiger darüber fahre, kannst du sehen, dass diese Animation stattfindet. Klicke drauf. Wir gehen zu unserem Image-Karussell. Und natürlich haben wir unser Karussell zum Laufen gebracht und drücken Escape, um zu unserer Homepage zurückzukehren. 41. Lass uns beginnen, den Blog hinzuzufügen.: Okay, also haben wir unseren Portfoliobereich genau hier erstellt. Und wenn du merkst, habe ich meine Art Board schon einfach verlängert. Also habe ich mir einfach das Kunstbrett geschnappt und es einfach ein bisschen länger gemacht. Denn hier drin möchte ich gerade einen weiteren Abschnitt hinzufügen. Und dieser Abschnitt wird unser Blob sein. Aber da wir anfangen , hier ziemlich viele Dinge hinzuzufügen, denke ich, dass es eine gute Idee ist, in dieser Phase unseres Designs ein grundlegendes Housekeeping zu machen . Wenn wir also alle diese Elemente auswählen und zu unseren Ebenen gehen möchten , können Sie sehen, dass wir all diese Elemente einfach auf unsere Homepage, Ihre Kunsttafel, gestellt werden . Und ich will es nicht, ich will nicht, dass es so aussieht. Ich möchte sie einfach gruppieren. Also drücke ich einfach Control G auf meiner Tastatur. Und ich nenne es wie Portfolio, Abschnitt, so. Dann werde ich versuchen, all diese Elemente zu greifen. Also nicht mögen Dienste Abschnitt. Das sind also all diese Elemente. Ich gruppiere sie noch einmal. Und dieser Typ wird wie Sir sein, Dienstleistungsabteilung. Und dann schnappe ich mir all diese Elemente. Also diese Typen hier, ich werde sie gruppieren und ich nenne sie wie Nav Plus Hero Section. Und auf diese Weise, wenn Sie dies haben, nun, wenn Sie mit ihnen mit dieser speziellen Datei arbeiten , die ich Ihnen zur Verfügung stellen werde. Auf diese Weise halte ich die Dinge organisiert, aber ich halte sie auch für Sie organisiert. Wenn du also mit dieser Akte arbeiten wirst, denke ich, dass es für dich einfacher sein wird zu verstehen, was alles hier ist. Jetzt können wir damit beginnen, unseren Blog-Bereich zu erstellen. Und ich möchte, dass es sich von dem vorherigen Portfoliobereich unterscheidet . Also gehe ich einfach zum Rectangle Tool und erstelle ein Rechteck, das mehr oder weniger so aussieht. Ich möchte nicht, dass es eine Grenze hat, aber ich möchte, dass es eine Füllung hat. Ich denke, es wird ein bisschen dunkler. Wenn wir also nach unten scrollen, können Sie sehen, dass es einfach so viel anders aussieht als im vorherigen Abschnitt hier. Und natürlich müssen wir hier nur eine Art Titel mit dem Textwerkzeug hinzufügen. Ich tippe einfach etwas ein wie hier ist mein Blog. Und ich mag die weiße Farbe, aber ich möchte sicherstellen, dass die Größe genau wie die vorherigen Abschnittstitel entspricht. Es ist also ein Sub-Vier-Medium. Und natürlich sitzt es genau hier in unserem, in unserem Vermögen. Wenn wir jedoch auf die Assets klicken, können Sie sehen, dass sich die Farbe ändert. Das will ich nicht. Mir gefällt das gefällt mir. Nun, weiße Lunge wird hier Kragen, helle Farbe. Und ich möchte, dass es ins Zentrum geht, vielleicht ein bisschen nach oben. Wir könnten uns das auch einfach schnappen, diesen Kerl genau hier. Also der Untertitel, und vielleicht auch wenn ich hier bin, werde ich mir diese Elemente auch schnappen. Und ich kopiere sie und füge sie hier ein und lege sie irgendwo hin. Natürlich muss die Farbe dieses Kerls auch weiß sein. Und was diese Jungs angeht, möchte ich damit einfach nur in Kategorien meines Blogs verwandeln. Ich möchte nur zeigen, dass ich dort ähnliche Posts wie Webdesigner-Kategorie, Webentwicklung, SEO, all diese Dinge habe. Also möchte ich diesen All Button genau hier haben, aber ich werde seine Farbe ändern, um diesen Kerl vielleicht zu mögen. Und diese Typen. Mal sehen. Ich denke, das ist diese graue Farbe. Ja, das ist es. Ich glaube, es sieht okay aus. Weißt du was? Ich denke, es sieht gut aus und es wird definitiv konsistent sein. Aber ich werde den Text einfach in eine Kategorie ändern, vielleicht wie eine. Da sind wir los. Und natürlich muss es nur ein bisschen größer sein. Dieser Typ. Vielleicht können wir diesen Kerl einfach kopieren und das einfügen, diesen Kerl einfügen n. Und es werden zwei sein. Und dieser Typ wird Kategorie drei sein. Da sind wir los. Und natürlich muss es so etwas größer sein. Alles, was wir jetzt tun müssen , ist einfach alle diese Elemente auszuwählen. Vielleicht werde ich sie einfach ansprechen und sie auswählen und einfach sicherstellen , dass sie gut an das Zentrum verteilt sind . Okay, also haben wir unsere ersten Schritte beim Erstellen dieses Blog-Abschnitts hinter uns bekommen. Und ich denke, dass wir im nächsten Video tatsächlich anfangen können , die Blog-Post-Auszüge hinzuzufügen. 42. Lass uns beginnen, die Blog-Posts hinzuzufügen, die Auszüge: Genau wie im Fall unseres Portfolios können wir unsere Blogbeitragsauszüge hinzufügen. Schalten Sie zuerst das Layout-Raster so ein. Und jetzt können wir einfach entscheiden, wie viele, wie viele Blog-Post-Auszüge wir hier haben wollen. Lassen Sie uns sie also schnell wie ein Modell aus unseren Blog-Post-Auszügen erstellen . Ich schnappe mir einfach das Rechteckwerkzeug. Und sagen wir, dass ich so etwas erschaffen werde , vielleicht nur ein bisschen kleiner. Und dann kann ich mir einfach mein Rechteck schnappen und vielleicht so etwas wie einen Titel nachahmen. Und dann schnapp ich es mir noch einmal und mache es einfach größer, so etwas. Das wäre also im Grunde unser wie eine Null. Dies wird unser Image sein, das wäre unser Titel und dies wäre unser, im Grunde lassen Sie einige, so etwas wie ein Auszug aus unserem Blogbeitrag. Vielleicht bringe ich es nur ein bisschen hier runter. Aber ich denke auch , dass wir etwas hinzufügen könnten , das uns vorher nicht gefallen hat. Also kopiere ich diesen Kerl einfach nach oben und ich werde ihn kleiner machen, wie deutlich kleiner. Und das könnte im Grunde unseren Kategorienamen auf der linken Seite imitieren unseren Kategorienamen auf und vielleicht wie ein Datum auf der rechten Seite. Und vielleicht bringe ich diesen Kerl nur ein bisschen hier hoch. Und was wir dann tun könnten, ist, dass wir all diese Elemente einfach greifen könnten, Klong sie zur Seite. Und dann noch einmal , um zu sehen, ob wir tatsächlich einen dieser Typen wollen, um etwas zu sehen so etwas , was drei ausreichen werden. Aber ich möchte diese Elemente greifen. Also wir sozusagen einfach die Textelemente. Ich bringe sie irgendwo hin. Und ich mache den Kerl noch ein bisschen länger. Also vielleicht sogar ein bisschen länger oder so ähnlich. Nur damit du es weißt, nur damit es nicht wie in einem super, super gleichmäßigen, gleichmäßigen Raster aussieht , vielleicht sogar ein bisschen länger. Also zwei, so etwas. Und ich werde auch diese Elemente schnappen, sie irgendwo hier runterziehen und diesen Kerl irgendwo hier rüberdrucken. Das wäre also im Grunde unser wie ein Raster-Layout. Aber wir könnten auch all diese Elemente außer dem Hintergrund greifen . Und ich denke, dass mein Hintergrund nicht so richtig gestellt wird. Lassen Sie mich diesen Hintergrund jetzt nur ein bisschen länger machen . Es sieht also mehr oder weniger so aus. Jetzt könnten wir vielleicht einfach gerne mit der Positionierung unserer Gitterzelle ohne Hintergrund herumspielen . Also klone ich diese Typen einfach. Ich halte den Alt-Schlüssel gedrückt. Ich werde es klonen, um es zu mögen irgendwo hier. Dann schnapp ich mir diese Typen. Also diese Elemente außer dem Hintergrund, ich denke, wir könnten vielleicht den Hintergrund sperren. Das ist also unser Rechteck hier. Dies ist unser Hintergrund. Also schließe ich es einfach ab. Und jetzt können wir uns diese Typen einfach schnappen und sie einfach irgendwo klonen, um uns zu entscheiden. Das sollte sein, das sollte okay sein. Jetzt lass mich einfach diese Elemente schnappen und sie an die Wand klonen, irgendwo hier nach unten. Das wäre also im Grunde so etwas wie ein Gitter für unsere Elemente. Und du kannst mit Rastern wie diesen herumspielen, damit sie es wissen, also sehen sie genau so aus, wie du möchtest, dass sie aussehen sollen. Und im Grunde brauchen wir hier, diese wie diese Top-Elemente einfach in vorgestellte Bilder umzuwandeln . Und natürlich will ich nicht, dass dieser Typ eine Grenze hat. Ich will auch nicht, dass dieser Typ eine Grenze hat. Vielleicht wähle ich sie einfach alle aus und stelle sicher, dass keine dieser Grenzen tatsächlich solche Grenzen hat. Jetzt kann ich einfach wie dieses Rechteck auswählen . Wieder, Paxos. Also lasst uns versuchen, diesmal vielleicht nicht so etwas wie einen Designer zu finden . Lass es uns vielleicht so machen. Lasst uns jetzt vielleicht dieses Mädchen genau hier machen. Dann mal sehen, vielleicht lasst uns was tun. Vielleicht wie dieser Typ. Dann lass uns tun, lass uns mehr laden. Und lasst uns hinzufügen Abneigung Modedesigner Angus. Ja nichts, natürlich ist nur die Repräsentation nur ein Modell. Vielleicht lasst uns den Kerl machen. Und schließlich ist dieser hier. Der nächste Schritt besteht darin, unseren Titeln einfach Text hinzuzufügen , wie Mock-up-Titel und Mockup wie Akzeptierungen. Das wäre auch das richtige Plug-In. Also Lorem Ipsum Plugin, wir können es einfach mit Platzhaltertext füllen. Und natürlich muss es größer sein. Gehen wir also zu unserem Vermögen. Versuchen wir es so, ein Sub-Medium 36, und lassen Sie es uns so weiß machen. Und ich denke, wie zu diesem Zeitpunkt könnten wir vielleicht einfach einschalten das Layout-Raster so ausschalten, damit Sie besser sehen können , wie es hier vor sich geht . Ich schätze, das ist es. Okay, vielleicht könnten wir es sogar als Vermögenswert hinzufügen. Machen wir, anstatt SF-36 zu mögen, machen wir Blogpost oder wie x oder vielleicht Blogpost-Titel. So. Wir könnten das Gleiche hier machen. Also Plugins, letzte Einstellungen, dieser Typ. Wieder mein Blogbeitrag Titel. Vielleicht versuchen wir etwas wie einen anderen Text zu finden. Aber wieder gehe ich zu meinen Plugins-Rückständen wie Lorem Ipsum. Und lasst uns unseren Blogpost-Titel machen. Machen wir das Gleiche hier. Also Lorem Ipsum, Alice, füge einfach hinzu, fügte hier und dann hier hinzu. Und dann können wir einfach auf diese Typen klicken. Vielleicht wird das ein bisschen schneller und ändert einfach die Farbe. Es sieht also mehr oder weniger so aus. Jetzt können wir das Gleiche mit diesen Typen machen. Mal sehen, ob ich, wenn ich all diese Elemente auswähle, all diese Rechtecke, zum Plugin gehe. Mal sehen, ob es klug genug , all diesen Text hinzuzufügen. Also lasst uns ein schnelles Lorem ipsum machen. Das A war darauf, wie wir davon ausgehen können vielleicht eine bessere Schriftart dafür finden können. Also fange ich einfach mit einem Sub 16 an. Und ich ändere die Farbe auf Weiß. Aber ich schätze, dieser Auszug ist vielleicht ein bisschen zu groß. Und vielleicht lasst uns etwas wie 22 versuchen. Und lasst uns wie 32k machen, vielleicht sieht das ein bisschen besser aus. Also 20 bis 32, fügen wir es unseren Charakterstilen und lassen Sie uns einen Blog-Auszug wie diesen machen. Dann können wir einfach diese zugrunde liegenden Elemente auswählen , während dies diese Fragmente ist. Und lasst uns einfach einen solchen Blogbeitrag machen und es sieht schlecht aus. Okay, vielleicht, vielleicht sind diese zusätzlichen Ergebnisse ein bisschen zu lang, aber wir können immer wissen, wie sie vielleicht transformieren, sie ein bisschen anders aussehen lassen, so etwas. Und vielleicht auch dieser Typ zu etwas wie drei Zeilen oder zwei Zeilen. Gleiche gilt für diese Typen. Natürlich. Dann müssten wir sie einfach nicht nur ein bisschen hochbringen. Gleiche gilt für diese Typen und das Gleiche für diese Typen. Natürlich wäre das Letzte, was Sie hier tun müssen, einen Datums- und Kieselkategorienamen hinzuzufügen . Diese wie Metadaten sind normalerweise kleiner. Und sie können auch in einer anderen Schriftart geschrieben werden, aber in einem Lipid, einer anderen Schriftfarbe. Also werde ich diese Elemente behalten, also diese beiden Rechtecke. Und ich füge einfach wie einen Text irgendwo in der Mitte hinzu. Und ich gebe einen ähnlichen Kategorienamen ein. Da sind wir los. Ich werde seine Farbe ändern, um vielleicht zu sehen, ob dieser Typ arbeiten wird. Natürlich müssen wir die Hintergrundfarbe ändern, aber im Moment werde ich sie einfach irgendwo hier platzieren. Und ich werde es deutlich kleiner machen, wie etwa 12 vielleicht oder vielleicht 14. Das sollte reichen. Und lassen wir diese Typen so aussehen wie diesen Satz. Dieser Typ ist echt, sehr klein. Ich stelle es einfach irgendwo hin. Und ich gebe das Datum ein. Das sollte okay sein. Vielleicht könnte dieser Kategoriename sein. Ich tippe einfach wie ein Leerzeichen ein. Und dann denke ich, dass es wie ein Pfeifensymbol genannt wird und nicht so etwas. Und vielleicht tippe ich jetzt einfach das Datum ein. Das wäre vielleicht ein bisschen einfacher für uns. Und mal sehen, ob es tatsächlich sichtbar sein wird. Es ist etwas sichtbar, aber vielleicht können wir es ein bisschen sichtbarer machen. Machen wir es also einfach ein bisschen leichter für so etwas. Dann müssten wir nur noch diesen Kerl mitbringen. Also, aber bis irgendwo hier. Und ich denke, es sieht ganz in Ordnung aus. Eigentlich könnten wir jetzt nur noch alle diese Elemente schnappen und sie einfach kopieren. Und wir können sie einfach durch diese Typen ersetzen . Ich weiß, dass wir hier vielleicht sogar ein bisschen zu viele Schritte unternehmen, aber ich wollte Ihnen nur den Prozess der Konzeptualisierung von Dingen wie diesen zeigen . Natürlich wirst du mit der Zeit deine eigenen besseren Wege finden, um diese Dinge zu tun. Also schnapp ich mir diese Typen einfach und entferne all diese Elemente wie diese. Ich füge diese Typen einfach ein. Aber ich denke nur, dass es einfach wie eine gute, gute Übung für uns ist, einfach diese Schritte zu durchlaufen , die wissen, wie vielleicht mit der Zeit , du wirst denken, dass sie so sind unnötig, dass sie übertrieben sind. Aber weißt du, das ist, ich denke, es ist nur ein guter Weg, um zu lernen, wie man Raster erstellt, Gitter wie diese. Lassen Sie mich also einfach sicherstellen, dass ich alles kopiere, was ich kopieren muss. Ich werde sie irgendwo hier stützen und sie müssen hierher gehen. Also werde ich es einfach so ausdrücken. Das sollte okay sein. Ich schneide diese Typen aus, entferne diese Elemente und füge sie dann ein. Sam wird sich für diese Elemente entscheiden. Also nochmal, ich füge diese Typen einfach hier ein und bringe sie zur Seite. Sollte gut aussehen und wieder schneiden, entfernen Sie diese Elemente, fügen Sie sie wieder ein. Und ich werde diese Typen einfach einfügen, sie hierher legen, schneiden und diese L ersetzen, diese Elemente entfernen und sie durch Boot durch unsere ersetzen, mit unseren Gitterelementen. Der letzte Schritt hier besteht darin, wie einen Button hinzuzufügen , der nein sagt, wie mehr lernen oder mehr lesen würde , vielleicht wäre das besser. Also leihe ich mir das einfach aus unserem Dienstleistungsbereich aus. Und lass mich einfach sicherstellen, dass diese Typen gut in den Mittelpunkt stehen. Anstatt also mehr zu lernen Ländertyp Schmerz, lassen Sie uns tippen und lesen Sie mehr. Das sollte sein, das sollte okay sein. Und jetzt schauen wir uns einfach an, wie es aussieht, wenn wir es in unserem Hauptdesign in der Vorschau ansehen. Ich glaube, es sieht aus, okay, natürlich. Was wir gerade brauchen, ist, einige dieser Dinge einfach zu prototippen. Ich meine, wir möchten zum Beispiel, wenn wir auf eines dieser Elemente klicken, zu unserem Hauptblog, Blogbeitrag, gehen. Oder wenn wir auf den Button „Mehr lesen“ klicken. Und wie Sie sehen können, muss ich diesen Kerl auch für den Hover-Status ändern . Wenn wir also auf den Button „Mehr lesen“ klicken, lass mich diesen Kerl einfach kopieren. Wir möchten zu unserer Blog-Unterseite gehen. Aber das ist etwas, von dem ich denke, dass wir im nächsten Video tun werden . 43. Blog-Seiten einrichten: Großartig, also haben wir unsere Blog-Post-Auszüge hier auf unserer Titelseite bekommen. Und was wäre jetzt der richtige Zeitpunkt, um tatsächlich ein einziges Blog-Post-Layout zu erstellen . Und auch wie eine Unterseite mit unseren Blogbeiträgen. Normalerweise würden wir das tun. Aber die Sache ist, dass wir das nicht mögen, weitere neue Dinge lernen, um solche Seiten zu erstellen. Du könntest alle Techniken anwenden , die wir bereits gelernt haben. Aber natürlich bedeutet das nicht, dass wir uns keinen Blogpost auf den Seiten ansehen werden und nein, wir werden sie nicht erforschen und erklären, wie man sie erstellt. Was ich getan habe, war, dass ich schnell separate Blocker-Seiten für dich erstellt habe. Also lasst uns einfach schnell durchgehen diese Entwürfe durchgehen. Die erste Blog-Seite , die ich erstellt habe, kannst du gleich hier sehen. Natürlich haben wir oben unser Logo und haben das gleiche Logo , das wir unserer Titelseite hinzugefügt haben. Und das Gleiche gilt für die Navigation. Und das brauchen wir. Wir haben einfach ein Foto. Ich bin mit einer Deckkraft sich auf etwa 15 bis 16 Prozent verwandelt hat. Natürlich haben wir einen Seitentitel und einen Untertitel bekommen . Das wäre also wie ein Beispiel Hero, Hero-Bereich für unsere Blog-Unterseite. Darunter sehen Sie, dass ich alle erstellt habe die die Kategorien im Grunde genommen hinzugefügt haben. Dies sind also im Grunde dieselben Kategorien, die wir auf der Titelseite sehen können. Und darunter habe ich einfach wie ein Mosaik dieser Blogbeiträge oder Auszüge hinzugefügt . Aber hier unten habe ich etwas anderes geschaffen. Auf einigen Seiten können Sie in einigen Designs so etwas wie eine Schaltfläche „Mehr laden“ sehen . Es gibt verschiedene Möglichkeiten, weitere Blog-Posts zu laden. Sie können so etwas wie eine faule Ladetechnik sehen. Das bedeutet, dass nach unten immer mehr Blogbeiträge geladen werden, sobald Sie nach unten scrollen . Sie können aber auch so etwas wie einen Load More Button sehen. Und tatsächlich ist dies eine Komponente, wie Sie hier sehen können. Wir könnten es tatsächlich wie Load More Button nennen. Und diese Komponente hat zwei Zustände. Dies ist also der Standardstatus und wir haben den Load-Morris-Status , der uns im Grunde einige weitere Beiträge zeigt. Und dieser Button ändert sich von mehr laden, um mehr Beiträge zu erfahren, die uns zeigen, dass wir jetzt im Grunde das Ende der Liste erreicht haben. Es sind keine weiteren Beiträge verfügbar. Und wenn wir dieses Design gerade in der Vorschau sehen, dann werden wir übrigens, wie Sie sehen können, dieser Typ, diese Navigation funktioniert genau wie die vorherigen. Wenn wir also nach unten gehen auf diesen Button Mehr laden klicken, können Sie sehen, dass hier weitere Beiträge präsentiert werden. Und natürlich habe ich hier unten etwas Platz für unsere Fußzeile gelassen . Wir haben es noch nicht erstellt. Aber sobald wir es getan haben, werden wir es zu unserem Blogbeitrag hinzufügen. Nun, Blog, Blog-Unterseite. Und natürlich muss es auf allen Seiten gleich sein . Also habe ich einfach etwas Platz hier unten von meiner Blog-Seite gelassen , alternatives Design. Ich habe im Grunde denselben Heldenbereich hinzugefügt. Aber wenn wir untergehen, können Sie sehen, dass ich hier etwas wie einen vorgestellten Blogbeitrag habe. Auf der linken Seite bekommen wir unser Heldenbild. Dann haben wir diesen Kategorienamen und Datumsplatzhalter bekommen, wir haben den Titel bekommen, wir haben den Untertitel bekommen. Und rechts hier unten haben wir die weiterlesen einen Button, der beim Klicken darauf geklickt hat. Und während dieser Link uns zu einem einzigen, einem einzigen Blogbeitrag führen würde . Also hier unten haben wir die Kategorien. Vielleicht komme ich einfach irgendwohin. Und dann haben wir im Grunde das gleiche Mosaik wie zuvor. Hier unten werden Sie jedoch sehen, dass wir diesen Load More Button nicht mehr haben, aber wir haben eine Paginierung. Wenn wir also eine Vorschau auf diesen Kerl sehen, gehst du runter. Sie können sehen, dass diese Jungs genau hier wie dieses aktive Element aussehen, wenn Sie den Mauszeiger über diese Elemente Jungs genau hier wie dieses aktive Element aussehen bewegen. Wie gesagt, wenn wir hier auf diesen Continue Reading Button klicken , werden wir zu einer einzigen Blogpost-Seite weitergeleitet . Und das ist das Design , das ich mir ausgedacht habe. Nur ein altes würzen Dinge auf oder machen sie wenigstens ein bisschen unterschiedlicher. So langweilig nicht. Das ist nicht mehr wie dunkel. Es ist gerade wie leichter, nur damit wir hier etwas Abwechslung haben. Aber natürlich sind diese Navigation und Logos gleich. Wir haben das vorgestellte Bild hier. Und hier unten haben wir unseren Kategorienamen und Datumsplatzhalter bekommen. Wir haben den Titel, wir haben den Haupttext hier unten. Und dann haben wir ein paar typische Einzelblog-Post-Elemente bekommen. Wir haben die Anzahl der Likes. Wir sind zu den Social-Media-Symbolen gekommen, dann haben wir das Kommentarfeld bekommen, wir haben im Grunde genommen die Kommentare bekommen. Dann haben wir wie eine einfache Navigation. Für die verwandten Beiträge können wir vielleicht sehen, dass wir, wenn ich diese Jungs einfach vergrößere, wie einen vorherigen Post-Link mit einem Mockup-Titel des vorherigen Beitrags haben . Und wir haben den nächsten Post-Link auch mit einem Titel bekommen. Hier auf der rechten Seite. Wir haben die Sidebar. Und hier haben wir einfach unsere, sagen wir, das ist, das ist unser Designer Freelancer. Ich weiß, dass dies ein anderes Foto ist als zuvor, aber in unserer Disziplin ist es einfach nett. Wir haben etwas über mich, nun, wir haben im Grunde diese Titel und suchen über mich die neuesten Beiträge, die im Grunde Titel für diese wie Unterabschnitte sind. Und natürlich haben wir die Suchleiste, wir haben die neuesten Beiträge, wir haben die Kategorien, haben den Newsletter beitreten, und wir haben mir in den sozialen Medien und diesen Links genau hier gefolgt . Und natürlich sind diese Links, wenn wir einfach hier anklicken, diese gleich lang wie auf unserer ersten Seite und das Gleiche gilt hier. Also sind wir im Grunde genommen, ich versuche die Dinge konsistent zu halten. Sobald wir alle diese Elemente erstellt haben. Und wie ich bereits sagte, ich habe nichts getan, was wir vorher nicht benutzt haben. Ich habe keine Technik benutzt, die dir unbekannt wäre . Also wollte ich dir nur die Variationen zeigen , die du machen kannst. Was Sie können, was Sie in Ihren Layouts ändern können und wie Ihre Layouts aussehen sollten. Und natürlich wird Ihnen diese Layoutdatei für Blogbeiträge zur Verfügung gestellt , damit Sie sie einfach herunterladen und sehen können , wie alles eingerichtet wurde. Aber natürlich müssen wir immer noch einige Dinge prototippen. Sagen wir das also. Nehmen wir an, wir möchten die Blog-Seite für unsere Blogseite verwenden . Also werde ich einfach versuchen, einfach diese ganze Kunsttafel auszuwählen, und ich kopiere es. Und hier drin versuche ich einfach , es einzufügen. Ich schätze, es kann irgendwo hier sitzen. Natürlich müssen wir es auch mögen, letztendlich alles nicht mehr zu reagieren. Das ist also unsere Blog-Seite, dieser Typ genau hier. Und ich mache das Gleiche für den einzelnen Blogbeitrag. Also schnapp ich mir den Kerl und klebe irgendwo hier rein. Jetzt können wir also tatsächlich anfangen, einige Dinge zu prototypisieren. Also hole ich mir das zuerst. Nun, meine Hauptseite, ich gehe zum Prototyp. Und hier drin möchte ich nur versuchen, meinen Blog-Link zu greifen. Also dieser Typ hier möchte ich eine Interaktion hinzufügen und es wird tippen. Und dieser Typ, lass uns diesen Kerl automatisch animieren, der uns zu unserer Blog-Seite bringen soll, um unsere Blogbeitragsauszüge zu erhalten. Versuchen wir einfach, vielleicht so zu greifen. Wie Sie sehen können, habe ich einige Dinge organisiert. Ich werde meine Elemente in Gruppen organisiert haben. Nehmen wir an, dass dieser Leitfaden Blog-Auszug eins ist, wird eine Interaktion haben , die eine Registerkarte sein wird. Und es führt uns zu einem einzigen Blogbeitrag. Also das ist jetzt, das ist etwas, das wir für all diese Typen tun könnten, aber ich zeige es dir nur, zeige es dir als Beispiel, wie alle diese Jungs klicken wollen, sie sollten Bringen Sie uns zu einer einzigen Blogseite. Ich denke auch, dass wir uns diesen Home-Link schnappen sollten, diesen Kerl genau hier. Und wir sollten es wie eine Interaktion hinzufügen. Und ich bin Tab, es sollte uns auf unsere Homepage bringen. Homepage genau hier. Gleiche gilt für unseren einzelnen Blog. Also nochmal, Interaktion nicht beim Schweben, auf Hahn. Bring uns zur Homepage. Und ich denke, dass wir auch unser Logo greifen und auch Tipp-Interaktion hinzufügen könnten . Und es sollte uns zu einer Homepage bringen wie eine Standardfunktionalität ist. Sie wissen, wann immer jemand auf das Logo klickt, sollte diese Person auf die Homepage gebracht werden. Und ich denke, dass es besser wäre, wenn wir es als normale Komponente für unser Hauptdesign hier machen würden. Aber da ich es vergessen habe, naja, los geht's. Dies, nun, das sollte richtig funktionieren. Jetzt. Mal sehen, wie unsere Interaktionen aussehen könnten. Also lass uns zu meinem Blog gehen. Also lasst uns auf klicken, sagen wir das hier. Wie Sie sehen können, werden Sie durch unsere Hauptseite, Hauptseite transportiert . Wenn wir auf den Link Home klicken, wir zurück zu unserer Seite. Wenn wir auf den Blog klicken, wir unser Blog sein. Und natürlich gibt es, dieser Typ arbeitet auch. Und wenn wir auch auf das Logo klicken, gehen wir zurück zu unserer Homepage. Also denke ich, der nächste Schritt wäre , einfach nicht alles ansprechend zu machen. Aber in unserem Fall wäre es so, als würde man sich das schnappen, schnappen wir uns diesen Kerl, dieses Kunstbrett, und machen es so viel länger. Und dann müssten wir diese Elemente einfach greifen und sie einfach nicht horizontal stapeln. Ich schätze, wir könnten damit anfangen, diesen Hintergrund vielleicht kleiner zu machen. Und dann könnten wir diese Typen einfach ins Zentrum bringen. Mal sehen, wie groß diese Typen waren. Also 34. Also lasst uns 34 machen. Lasst uns diese Typen kleiner machen. Im Grunde mache ich hier nichts , was wir vorher nicht gemacht haben. Und ich denke ehrlich gesagt , dass es für Sie wie eine großartige selbständige Arbeit wäre . Ich meine, du könntest einfach alles tun , was getan werden soll , um sie zu machen, diese Jungs reagieren. Und ich denke, dass es für Sie eine großartige Aufgabe wäre , im Grunde allein zu tun. Ich werde diese Jungs einfach schnell ins Zentrum bringen, das sagen, diese Typen auch in den Mittelpunkt stellen , diese Kategorien. Und jetzt können wir einfach all diese Elemente greifen und sie einfach einsetzen, reagieren lassen und kleiner machen. Es sind nur die Größen. Und dann können wir einfach zu unserem nächsten Abschnitt übergehen. Natürlich, sobald dies erledigt ist und sobald diese Jungs auch reagieren, werden natürlich für Sie haben, Sie diese Datei natürlich für Sie haben, damit Sie einfach sehen können, wie alles aussehen wird. Und dann können wir einfach zu unserer Rubrik wechseln. Nächster Abschnitt, von dem ich denke, dass er so etwas wie ein Nike-Symbol Über mich sein wird. Abschnitt. 44. Lass uns einige Pagination lernen: Was ich entschieden habe, wäre es vielleicht eine gute Idee, Ihnen zu zeigen, wie Sie diese Paginierungseffekte erzielen können. Also ja, also fangen wir zuerst mit dem Button Mehr laden an. Wie Sie sehen können, habe ich einfach all diese Elemente aus unserem Hauptdesign hier kopiert . Ich denke nur, dass es für uns vielleicht etwas sauberer sein könnte, damit zu arbeiten. Ich habe auch gerade drei Blog-Post-Auszüge hier. Lassen Sie uns also, lassen Sie mich schnell damit beginnen, viel mehr Schaltflächen hinzuzufügen. Ich hole mir das Textwerkzeug, klicke irgendwo hier, und ich gebe einfach mehr so die Ladung ein. Natürlich werde ich es für dich ein bisschen sichtbarer machen . Also lass es uns weiß machen. Ich mache mir zu diesem Zeitpunkt keine Sorgen um die Schrift, weil es nicht so wichtig ist. Obwohl ich schätze, wir könnten es einfach so schnell wie möglich ausdrucken. Und vielleicht lasst uns Medium machen. Und lasst uns etwas wie 26. Lasst uns vielleicht den Track in etwas erhöhen, das U5 genannt wird, oder vielleicht mit 50 leben. Und ich füge auch nur ein einfaches Rechteck hinzu, das wie einen weißen Rand haben wird. Da sind wir los. Und stellen wir sicher, dass sie gut auf die Mitte ausgerichtet sind . Also gruppiere ich diese Typen. Was wir hier machen wollen, ist, dass wir weitere Beiträge anzeigen möchten , sobald wir auf diesen Load More Button klicken, oder? Also denke ich, dass wir damit beginnen sollten , diese weiteren Beiträge hinzuzufügen. Ich werde diesen Kerl genau hier runterbringen, weil wir eine Komponente mit zwei Zuständen erstellen wollen, oder? Also halte ich einfach die Alt-Taste mit dem ausgewählten Kerl gedrückt und bringe ihn hier hin hin. Das sollte ausreichen. Dieser Typ wird hier irgendwohin gehen. Und dieser Typ wird hier irgendwohin gehen . Das sollte okay sein. Was wir tun könnten, ist, dass wir all diese Elemente einfach in diesen Button und diese drei Blog-Post-Auszüge in eine Komponente verwandeln könnten. Also halte ich einfach die Umschalttaste gedrückt klicke auf all diese Typen. Und ich drücke einfach Control K auf meiner Tastatur, um eine Komponente aus diesem Kerl zu erstellen. Nennen wir es wie weitere Beiträge laden. Da sind wir los. Dieser Typ muss also zwei Zustände für unseren Standardstatus haben , wir wollen diese Elemente nicht sehen, also wollen wir diese Gruppe nicht sehen. Das wollen wir eigentlich diese Gruppe sehen, weil dies unser Button ist. Aber wir wollen diese, diese drei verbleibenden Gruppen, nicht sehen . Also diese Beiträge, oder? Also diese Typen hier, was ich tun werde, ist, dass ich die Deckkraft einfach so nach unten drehen werde . Und wir könnten verschiedene Dinge mögen. Also könnten wir vielleicht mal sehen, vielleicht schnappen wir uns den richtigen Kerl. Und ich werde es irgendwo hier zur Seite bringen. Und ich schnapp mir den linken Kerl und schiebe ihn zur Seite, nur damit es hier wie außerhalb der Grenzen klingt. Und der Load More Button muss hier irgendwo hin. Das ist also unser, das ist unser Standardstatus. Aber ich möchte einen neuen Staat hinzufügen. Und ich nenne es vielleicht wie geladen, Back Post geladen. Machen wir es wie Posts, niedrige Schulden. Und in diesem Zustand nehme ich einfach den Knopf. Der Button muss irgendwo hier hin und er muss sagen wie keine Posts mehr. Und natürlich muss das auch größer sein, wie so etwas. Und natürlich müssen sie in den Mittelpunkt gestellt werden. Dieses Element muss seine Deckkraft auf 100 Prozent zurückbringen. Gleiche gilt für diesen Kerl. Und natürlich muss es auch ins Zentrum gehen. Wie es ist wie ein früherer Ort , der wie irgendwo hier sein würde. Und dieser Typ auch. Also Deckkraft auf 100 Prozent und seine Position, die platziert werden soll, um irgendwo irgendwo hier eingestellt zu werden. Und dieser Typ muss deutlich untergehen, vielleicht wie irgendwo hier. Das sind also unsere geladenen weiteren Staaten. Jetzt können wir es also tatsächlich prototisieren. Also gehe ich zum Prototyp-Workspace. Und hier drin möchte ich unseren Auslöser setzen , um mehr Tasten zu laden. Also lass mich einfach diesen Knopf schnappen. Und auf Hahn möchte ich, dass dieser Typ automatisch animiert. Und ich möchte, dass es zu geladenen Posts geht, oder? Wenn wir jetzt in unseren Vorschaumodus gehen, wenn wir in Zukunft einfach auf diese Schaltfläche Mehr laden klicken, können Sie sehen, dass diese Boote schön animiert wurden. Dies ist also unsere erste Möglichkeit, den gut ähnlichen Paginierungseffekt zu addieren . Fügen wir jetzt den zweiten hinzu. Du siehst, dass ich meine Standard-Paginierung hier habe. Und was hier passiert ist, nun, zunächst haben wir unsere aktive Seite genau hier angezeigt. Und wenn wir den Mauszeiger über eine dieser Zahlen wie diese bewegen, auf den zugrunde liegenden Effekt, wie ein Hintergrundeffekt auftritt. Mal sehen, wie wir das erreichen können. Also schnappe ich mir einfach das Textwerkzeug und werde diese Paginierung einfach neu erstellen. Machen wir es wie einer und vielleicht wiederholen wir das Gitter. Es wird also 12345 sein. Das sollte ausreichen. Ich lasse es vielleicht so aussehen. Und ich werde die Gruppierung des Rasters aufheben , denn im Moment werde ich hier einfach schnell die richtigen Zahlen hinzufügen. Also 12345. Unsere aktuelle Seite muss also so aussehen, naja, sie muss einen richtigen Hintergrund haben. Und wir können uns einfach eine Ellipse schnappen. Wir können eine Ellipse erzeugen. Und ich leihe mir diese Farbe einfach schnell aus. Da sind wir los. Brauche keine Grenze. Und dieser Typ muss den ganzen Weg dorthin gehen, naja, zumindest hinter unseren Zahlen. Das sollte also sein, das sollte reichen. Ich schätze. Das sollte gut aussehen. Jetzt möchte ich es mögen, wenn ich den Mauszeiger über eine dieser Zahlen fahre, ich möchte sehen, wie dieser Kreis darunter erscheint. Und tatsächlich kann es ein Kreis sein, obwohl wir es auch mögen könnten, wie ein abgerundetes Rechteck, das komplett abgerundet ist, Till bildet einen Kreis. Lasst uns das tatsächlich machen. Also schnappe ich mir ein Rechteck und erstelle eines, das mehr oder weniger so aussieht. Das sollte okay sein. Und natürlich möchte ich, dass dieser Typ einen richtigen Phil hat. Und ich möchte, dass es wieder unter meine Zahlen geht. Also lasst es uns irgendwo hierher verschieben. Und es wird eine gute Idee sein, diese Jungs zentriert zu machen und wir sollten es zu einer Komponente machen, oder? Also hole ich diese beiden Elemente und drücke Strg K auf meiner Tastatur, um es in eine Komponente zu verwandeln. Wir werden einen Standardstatus haben. Wir werden einen Schwebezustand haben. Also im Standardstatus unser Hintergrund. Dieser Typ, dieses Rechteck hier, wird seine Deckkraft einfach auf 0 gesetzt. Aber im Hover-Status wird dieses Rechteck seine Deckkraft bis zu 100 Prozent erreichen. Und es ist wie ein Eckenradius, der auf 100% oder 100 eingestellt ist. Denke, das sollte reichen. wir nun sicher, dass Status dieses Kerls auf Standard eingestellt ist. Und lasst uns einfach eine Vorschau auf diesen Kerl sehen. Ich gehe hier runter. Und wie Sie sehen können, wird dieser Typ, wenn wir den Mauszeiger darüber bewegen , nun, wir können diesen Kreis genau hier sehen. 45. Richte die einzelne Seite ein, und beende den Abschnitt: Wenn wir auf diesen Continue Reading Button klicken , werden wir direkt hier zu einer einzigen Blogpost-Seite weitergeleitet . Und das ist das Design , das F entwickelt hat. Peppen Sie die Dinge einfach auf oder machen Sie sie wenigstens ein bisschen unterschiedlicher. So langweilig nicht. Das ist nicht mehr wie dunkel. Es ist gerade wie leichter, nur damit wir hier etwas Abwechslung haben. Aber natürlich sind diese Navigation und Logos gleich. Wir haben das vorgestellte Bild hier. Und hier unten haben wir unseren Kategorienamen und Datumsplatzhalter bekommen, und wir haben den Titel bekommen. Wir haben den Haupttext hier unten. Und dann haben wir einige typische Einzelblog-Post-Elemente bekommen. Wir haben also die Anzahl der Likes. Wir sind zu den Social-Media-Symbolen gekommen, dann haben wir die Commons-Box bekommen, wir haben im Grunde genommen die Kommentare bekommen. Und dann haben wir wie eine einfache Navigation. Für die verwandten Beiträge können wir vielleicht sehen, dass wir, wenn ich diese Jungs einfach vergrößere, sehen, dass wir wie einen vorherigen Post-Link mit einem Modell haben , einen Titel des vorherigen Beitrags. Und wir haben den nächsten Post-Link auch mit einem Titel bekommen. Hier auf der rechten Seite. Wir haben die Sidebar. Und hier haben wir einfach unsere, sagen wir, das ist, das ist unser Designer Freelancer. Ich weiß, dass dies ein anderes Foto ist als zuvor, aber in unserer Disziplin ist es einfach nett. Wir haben etwas über mich, nun, wir haben im Grunde diese Titel und suchen über mich die neuesten Beiträge, die im Grunde Titel für diese wie Unterabschnitte sind. Und natürlich haben wir die Suchleiste, wir haben die neuesten Beiträge, wir haben die Kategorien, wir haben die Kategorien, holen Sie sich meinen Newsletter an und wir haben mir in den sozialen Medien und diesen Links genau hier gefolgt. Und natürlich sind diese Links, wenn wir einfach hier anklicken, diese gleich lang wie auf unserer ersten Seite und dasselbe gilt hier. Also sind wir im Grunde genommen, ich versuche die Dinge konsistent zu halten. Sobald wir alle diese Elemente erstellt haben. Und wie ich bereits sagte, ich habe nichts getan, was wir vorher nicht benutzt haben. Ich habe keine Technik benutzt, die dir unbekannt wäre . Also wollte ich dir nur die Variationen zeigen , die du machen kannst. Was Sie können, was Sie in Ihren Layouts ändern können und wie Ihre Layouts aussehen sollten. Und natürlich wird Ihnen diese Layoutdatei für Blogbeiträge zur Verfügung gestellt , damit Sie sie einfach herunterladen und sehen können , wie alles eingerichtet wurde. Aber natürlich müssen wir immer noch einige Dinge prototisieren. Sagen wir das also. Nehmen wir an, wir möchten die Blog-Seite für unsere Blogseite verwenden. Also versuche ich einfach diese ganze Zeichenfläche auszuwählen, und ich kopiere sie. Und hier drin versuche ich einfach , es einzufügen. Ich schätze, es kann irgendwo hier sitzen. Natürlich müssen wir es auch mögen, letztendlich alles nicht mehr zu reagieren. Das ist also unsere Blog-Seite, dieser Typ genau hier. Und ich mache das Gleiche für den einzelnen Blogbeitrag. Also schnapp ich mir diesen Kerl und klebe irgendwo hier ein. Jetzt können wir also tatsächlich anfangen, einige Dinge zu prototypisieren. Also schnapp ich mir das zuerst. Nun, meine Hauptseite, ich gehe zum Prototyp. Und hier drin möchte ich nur versuchen, meinen Blog-Link zu greifen. Also dieser Typ hier möchte ich eine Interaktion hinzufügen und es wird tippen. Und dieser Typ, lass uns automatisch animieren. Dieser Typ soll uns auf unsere Blog-Seite bringen, um unsere Blogbeitragsauszüge zu erhalten. Versuchen wir einfach, vielleicht so zu greifen. Wie Sie sehen können, habe ich einige Dinge organisiert. Ich hätte meine Elemente in Gruppen organisiert. Nehmen wir an, dass dieser Leitfaden Blog-Auszug eins ist, wird eine Interaktion haben , die eine Registerkarte sein wird. Und es wird uns zu einem einzigen Blogbeitrag führen. Das ist also merkwürdig, das ist etwas, das wir für all diese Typen tun könnten, aber ich zeige es nur zeige es dir als Beispiel. Wie alle diese Typen sollten sie uns, wenn ich geklickt habe, zu einer einzigen Blogseite führen. Ich denke auch, dass wir uns diesen Home-Link schnappen sollten, diesen Kerl genau hier. Und wir sollten es wie eine Interaktion hinzufügen. Und ich bin Tab, es sollte uns auf unsere Homepage bringen. Also Homepage genau hier, genauso für unseren einzigen Blog. Also nochmal, Interaktion nicht beim Schweben, auf Hahn. Bring uns zur Homepage. Und ich denke, dass wir auch unser Logo greifen und ihm auch eine Tap-Interaktion hinzufügen könnten , und es sollte uns zu einer Homepage führen. Dies ist wie eine Standardfunktionalität. Sie wissen, wann immer jemand auf das Logo klickt, sollte diese Person auf die Homepage gebracht werden. Und ich denke, dass es besser wäre, wenn wir es als normale Komponente für unser Hauptdesign hier machen würden. Aber weißt du, da ich es vergessen habe , naja, los geht's. Das sollte richtig funktionieren. Jetzt. Mal sehen, wie unsere Interaktionen aussehen könnten. Also lass uns zu meinem Blog gehen. Also klicken wir auf, sagen wir das hier. Wie Sie sehen können, werden Sie durch unsere Hauptseite, Hauptseite transportiert . Wenn wir auf den Link Home klicken, wir zurück zu unserer Seite. Wenn wir auf den Blog klicken, wir unser Blog sein. Und natürlich gibt es, dieser Typ arbeitet auch. Und wenn wir auf das Logo klicken, wir zurück zu unserer Homepage. Also denke ich, der nächste Schritt wäre , einfach nicht alles nicht mehr zu reagieren. Aber in unserem Fall wäre es so, als würde man sich das schnappen. Schnappen wir uns den Kerl. Diese Kunsttafel macht es also so viel länger. Und dann müssten wir es einfach wissen, diese Elemente greifen und sie einfach nicht horizontal stapeln. Ich schätze, wir könnten damit anfangen, diesen Hintergrund vielleicht zu verkleinern. Und dann könnten wir diese Typen einfach ins Zentrum bringen. Mal sehen, wie groß diese Typen waren. Also 34. Also lasst uns 34 machen. Lasst uns diese Typen kleiner machen. Im Grunde mache ich hier nichts , was wir vorher nicht gemacht haben. Und ich denke ehrlich gesagt , dass es für Sie wie eine großartige selbständige Arbeit wäre . Ich meine, du könntest einfach alles tun , was getan werden soll , um sie zu machen, diese Jungs reagieren. Und ich denke, dass es für Sie eine großartige Aufgabe wäre , im Grunde allein zu tun. Ich werde diese Jungs einfach schnell ins Zentrum bringen, das sagen, diese Typen auch in den Mittelpunkt stellen , diese Kategorien. Und jetzt können wir einfach all diese Elemente greifen und sie einfach einsetzen, reagieren lassen und kleiner machen. Es sind nur die Größen. Und dann können wir einfach zu unserem nächsten Abschnitt übergehen. Natürlich, sobald dies erledigt ist und sobald diese Jungs auch reagieren, werden natürlich für Sie haben, Sie diese Datei natürlich für Sie haben, damit Sie einfach sehen können, wie alles aussehen wird. Und dann können wir einfach zu unserer Rubrik wechseln. Nächster Abschnitt, von dem ich denke, dass er so etwas wie ein Nike-Symbol Über mich sein wird. Abschnitt. 46. Lass uns den Abschnitt Über mich hinzufügen.: Bevor wir in unserem Abschnitt Über mich hinzufügen, lassen Sie mich Ihnen schnell zeigen, was ich in Bezug auf die Reaktionsfähigkeit mit unseren Blog-Designs getan habe . Also auf unserem Hauptblog-Design. Also dieser eine Hauptblog, welches mobile Design? Ich habe einfach nicht alles vertikal aufgestellt. Also habe ich mich natürlich an die Größe der Schriftarten der Bilder angepasst. All diese, all diese Dinge. Und ich habe mich entschieden, einfach keine Werbung wie diese zu machen, Schaltfläche „Mehr lesen“ in der gleichen, die wir hier haben. Was unsere mobile Blog-Seite angeht, habe ich, wie Sie sehen können , das Logo hier hinzugefügt und das mobile Menü hinzugefügt. Und dann habe ich es im Grunde genommen einfach über die Designideen von der Hauptseite gelegt. Also habe ich gerade das gleiche Bild im Hintergrund hinzugefügt. Ich habe denselben Text und Subtext oder Untertitel hinzugefügt. Und dann habe ich gerade die Kategorien hinzugefügt und natürlich habe ich sie vertikal gestapelt. Und dann haben wir die Blog-Auszüge bekommen. Und dieses Mal habe ich gerade die Schaltfläche Mehr laden hinzugefügt , damit wir wissen, ob jemand nur auf einem mobilen Gerät mehr Seiten sehen möchte, mehr Beiträge laden möchte. Sie können einfach auf den Button Mehr laden klicken. Und soweit sie, ein einziger Block unbeweglich. Also lass mich einfach schnell gehen. Geh hier hin. Da sind wir los. Also haben wir natürlich unser Logo, wir bekommen das Menü und dann haben wir das vorgestellte Bild. Unten. Ich habe gerade die Metadaten, den Titel und natürlich den Text selbst hinzugefügt . Und dann haben wir unseren Kommentarbereich mit den Namen bekommen, also die Möglichkeit, hier in diesem Feld einen Kommentar hinzuzufügen. Und dann haben wir die Sidebar-Elemente, die natürlich jetzt nicht auf der Seite, sondern unter diesen Elementen liegen. Also haben wir unseren Abschnitt „Über mich“, den Suchbereich, diesen Blogbeitrag Auszüge bekommen. Natürlich bekommen wir die Kategorien, die das Suchfeld und natürlich die Social-Media-Symbole haben. Und ich habe gerade schnell etwas Platz für die Fußzeilenelemente gelassen , die irgendwann zu unserem Design kommen werden. Sobald alles erledigt ist, sind wir jetzt bereit, einfach zu übergehen , um unseren grundsätzlichen Abschnitt über uns hinzuzufügen . Es wird also nicht wie irgendetwas Super sein, super funky. Hier drin. Ich möchte nur ein Bild wie vielleicht rechts hinzufügen, paar Texte auf der linken Seite. Und vielleicht füge ich dem Bild etwas Hintergrund hinzu. Das erste, was ich tun werde, ist, dass ich einfach ein Bild hineinziehe, und das ist ein Bild, das ich aus rohen Pixeln aufgenommen habe. Also die gleiche Seite, die wir vorher benutzen, vielleicht werde ich es nur ein bisschen größer machen. Und ich lege es vielleicht irgendwo hier hin. Ich möchte diesem Bild einen Hintergrund hinzufügen. Und ich möchte nicht, dass es ein einfaches Rechteck ist, weiß, noch eine Ellipse. Ich möchte nur, ich möchte, dass die Form ein bisschen wie unregelmäßig ist. Also schnappe ich mir das Stiftwerkzeug und fange einfach an, wie irgendwo hier zu klicken , vielleicht halte ich jetzt die Umschalttaste gedrückt, um irgendwo hier zu liegen. Und vielleicht machen wir einfach so etwas. Und dann so können wir es später immer ändern. Ich glaube nicht, dass wir wie eine Füllfarbe haben , die für dieses Bild ideal wäre . Und lass mich das einfach einen Schritt zurück nach unten bewegen . Wir haben einige Farben, die vielleicht funktionieren. Aber ich bin mir nicht sicher, ob es großartig für diese Art von n gibt , diese Art von Bild. Was wir also tun könnten, ist, dass wir diesen Hintergrund vielleicht einfach greifen könnten. Und ich drücke einfach die I-Taste auf meiner Tastatur, um das Pipettenwerkzeug zu initialisieren. Und lasst uns vielleicht einfach nach so etwas suchen. Das könnte vielleicht ein bisschen besser aussehen. Oder vielleicht versuchen wir vielleicht etwas aus den Haaren zu holen. Vielleicht etwas Leichteres, vielleicht etwas etwas dunkleres. Jetzt könnten wir das machen. Ich versuche nur, eine Farbe zu finden , die gleichzeitig gut mit dem Farbschema zusammenpasst, das wir hier in diesem Bild haben. Aber gleichzeitig wäre es irgendwie wie ein Hintergrund, der das Bild vom Hintergrund trennen würde . Also werden wir bei diesem Kerl bleiben. Aber ich denke, dass wir ein bisschen an diesem Bild arbeiten könnten, vor diesem Hintergrund genau hier. Also doppelklicke ich einfach hinein, was es mir im Grunde erlaubt die Ankerpunkte zu kontrollieren. Wir könnten diesen Kerl vielleicht irgendwohin bringen. Vielleicht könntest du diesen Kerl auswählen und ich drücke einfach die Entf-Taste, um ihn einfach los zu werden. Und ich bringe den Kerl noch ein bisschen mehr zur Seite. Vielleicht auch dieser Typ und rede nach unten. Wir könnten vielleicht Brendas Typ nur ein bisschen hoch sein. Und dann schnappe ich mir vielleicht das Bild und werde es deutlich größer machen. So sieht es aus. Mehr oder weniger so. Jetzt möchte ich einfach so etwas anderes haben. Ich möchte nur nicht wie nur gerade Linien wie Schnee haben, wie zum nur gerade Linien wie Schnee haben, wie unsere Abschnitte zu teilen, wir haben bereits einen leichten Abschnitt geteilt, der genau hier geteilt ist. Also schätze ich, es könnte so funktionieren. Jetzt könnten wir natürlich wissen, dass wir einfach versuchen, die perfekte Balance zwischen diesem Funky zu finden , die perfekte Balance zwischen . Und jetzt, anders als nicht übermäßig auffällig, meine ich, ich möchte nicht, dass es zu viel Aufmerksamkeit erregt. Das ist jetzt, das ist nur der Hintergrund, aber ich will es nicht gleichzeitig zu langweilig. Manchmal geht es also nur darum das richtige Gleichgewicht zu finden. Also hole ich mir jetzt das Textwerkzeug und klicke hier irgendwo und tippe einfach etwas wie über mich ein. Und lasst uns das ein bisschen größer machen. Vielleicht werde ich es diesmal etwas mutiger machen. Ich schaffe es wie 54. Und lasst es uns so machen, als würde man vielleicht lesen. Vielleicht lass mich einfach bei diesem Kerl nachsehen. Es waren mittelgroße 54 Feststoffe, das Medium. Ich denke, dass der Unterschied zwischen mittel und fett nicht so groß ist. Also schätze ich, wir können es so lassen. Ich stelle es irgendwo hin. Und dann leihe ich mir vielleicht einfach ein paar SMS von diesen Typen aus. Also schnapp ich mir einfach diese Rolle und das Epsilon. Ich füge es ein wie irgendwo hier. Natürlich muss dieser Typ ein bisschen sichtbarer sein. Also schaffe ich es, lass uns den Kerl zu 22 machen. Ich schaffe es ein bisschen wie Boulder. Und lasst uns liegen, kommt 30 in Bezug auf seine Zeilenhöhe. Und vielleicht mache ich es ein bisschen kleiner und lege es irgendwo hier hin. Und dann könnten wir vielleicht irgendwo klonen und hier unten klonen und es nur ein bisschen größer machen. Und dann klone es noch einmal. Aber mach diesen Kerl vielleicht wie aber kleiner. Es sieht also mehr oder weniger so aus. Sagen wir also, wir haben genug Text, genug über Mutex. Und vielleicht schnappe ich mir einfach wieder das Stiftwerkzeug. Und vielleicht schaffe ich einfach so etwas wie eine gerade Linie. Ich halte übrigens die Umschalttaste gedrückt. Und diese Linie wird mehr oder weniger so aussehen. Und vielleicht lasst uns die Grenze machen. Geben wir ihm eine richtige Farbe. Aber wie Sie sehen können, können wir die Rahmenfarbe leider nicht einfach so ändern. Also kopiere ich einfach den Hex-Code und füge ihn in einen Krankenwagen ein, um etwa 33 Punkte für die Größe auszusehen . Das sollte ausreichen. Vielleicht werde ich auch unsere Icons schnappen, wie diese, Social-Media-Icons, diese Typen genau hier, lass es mich einfach ausprobieren. Schnapp sie dir richtig. Vielleicht wäre es besser, wenn wir sie einfach aus dem Ebenenbedienfeld holen würden. Also denke ich, dass es dieser Typ sein wird, also kopiere ich sie einfach. Ich gehe hier irgendwo runter und füge sie ein. Und bring sie hier runter hin hin. Nun, wenn du vielleicht gerne diesen Kerl machen willst , machen Justin Felsbrocken. Vielleicht ist es so etwas wie eine Spur hier, aber ich denke, es sollte noch mutiger sein. Ich schätze, es würde gut aussehen. Es würde vielleicht gerne die Monotonie dieser Absätze brechen . Und ich denke, dass es aussieht, es sieht gut aus, also als nächstes brauchen wir natürlich nur diese Elemente zu greifen, vielleicht ohne das Bild vorerst. Und wir müssen sie hier auf unsere mobile Version stellen. Aber bevor wir das tun, schnappen wir uns einfach all diese Elemente. Also all diese Typen, ich werde sie gruppieren und ich rufe sie so wegen mir an. Und ich werde auch vielleicht nur diese greifen, versuche nur diese Elemente zu greifen. Es wird also wie Icons und dieser Lorem Ipsum sein. Ich denke, das sind diese Absätze. Und der Weg ohne das Bild, ich denke, es wird in Ordnung sein, also nicht dieser Weg, sondern dieser Weg. Und ich gruppiere diese Typen. Nennen wir es wie über mich SMS. Und ich kopiere das einfach über meinen Text. Und ich werde versuchen, es irgendwo hier einzufügen und lass es uns nach unten bewegen. Vielleicht könnten wir das Layout-Raster zurückbringen. Lass uns hier runter gehen. Und ich hole mir einfach diese Gruppe und werde versuchen alles kleiner zu machen damit es mehr oder weniger so aussieht. Ich schätze, wir sollten uns das wie intertidal schnappen und es sind 34 Medien. Also lass es uns 34 mittel machen. Und stellen wir es genau in die Mitte. Also werde ich versuchen, es in den Mittelpunkt zu stellen. Gleiche gilt für diesen Kerl. Wir könnten uns vielleicht auch diese Absätze schnappen und sie auch in den Mittelpunkt stellen. Ich denke, dass die Icons in Ordnung sind. Jetzt müssen wir uns das Bild schnappen. Also dieser Typ genau hier und der Hintergrund. Also werde ich diese einfach kopieren und zerschmettern als würde ich versuchen, es hier reinzupassen, also sieht es einfach in Ordnung aus. Also werde ich versuchen, diese Typen kleiner zu machen. Mix, so etwas. Und lasst es uns hierher bringen. Bringen wir den Kerl nur zum Zusammenbruch. Kann vielleicht ohne das, ohne das mobile Layout-Raster, es wird nur ein bisschen besser aussehen. Du könntest vielleicht sogar versuchen, das Bild ein bisschen größer zu machen . Da sind wir los. Wir haben den Abschnitt Über uns erstellt. Und ich weiß, dass es nichts allzu ausgefallenes ist, aber zumindest hatten wir die Gelegenheit zu lernen , Ankerpunkte innerhalb der benutzerdefinierten Formen zu ändern. 47. Lass uns den Abschnitt Contact hinzufügen: Hey Leute, wir haben den Abschnitt Über mich. Ich schätze, wir können mit dem Hinzufügen der Elemente des Abschnitts „Kontakt“ fortfahren . Was ich tun möchte, ist auf der linken Seite, ich füge wie ein einfaches etwas hinzu, wie kontaktiere mich oder kontaktiere mich, Texte als ein glücklicher Untertitel. Und dann vielleicht mögen einige Kontaktinformationen. Und darunter könnten wir ein Kontaktformular hinzufügen. Und auf der rechten Seite denke ich, dass ich einfach ein Bild hinzufügen werde. Bevor ich anfange, bringe ich mein Layout-Raster einfach so zurück. Ich leihe mir einfach das über mich aus, schreibe diesem Kerl genau hier. Und ich kopiere es einfach. Und ich werde es irgendwo hier einfügen und ich werde es irgendwo hierher verschieben. Und wir könnten es vielleicht ganz zur Entscheidung bringen. Ich bin mir nicht sicher, ob ich diesen Abschnitt wie diesen ganzen Abschnitt auch zur Seite verschieben möchte , er wird uns hier ein bisschen mehr Platz geben. Aber weißt du, wenn es wie dieses Web 3-Design sein soll, muss es nicht so sein, das ausgerichtet ist. Also hier drin tippe ich etwas ein, wie zB Kontakt aufnehmen und wir gehen und vielleicht werde ich die Farbe ändern. Geh einfach zurück zu meinen Farben und B zu dieser grauen Farbe. Und lasst uns vorerst das Layout-Raster loswerden. Ich will nur sehen, wie es aussehen wird. Und dann unten, fügen wir etwas Text hinzu. Schon wieder. Lassen Sie mich vielleicht ein paar Texte von hier ausleihen , wie diesen Absatz. Ich füge es ein und arme es , was es braucht, um hier irgendwo hin zu gehen. Und ich werde es deutlich kleiner machen. Jetzt könnten wir einfach zu einigen wie gefälschten Adressgeneratoren gehen , gefälschte Telefonnummerngeneratoren. Aber dafür verwende ich einfach meine Standard-Sache von Lorem Ipsum. Wir müssen diese Typen ausschneiden damit sie nicht in derselben Gruppe sind. Also diese und diese, ich schneide sie aus, füge sie wieder ein. Also gehe ich zuerst zu meinem Icons-Plugin. Also Icons für Design. Und hier drin tippe ich einfach etwas wie Telefon ein. Und vielleicht gehen wir diesmal mit den Federsymbolen. Ich werde es einfach mögen, diesen Kerl einzufügen und klicke darauf. Und wie Sie sehen können, werden sie manchmal eingeklebt wie nein, nicht wirklich das, was ich möchte, dass sie eingefügt werden. Und ich werde die gleiche Farbe greifen, aber es muss für die Grenze sein. Also kopiere ich einfach den Hex-Code, füge ihn ein und lege ihn einfach irgendwo hier hin. Und wie gesagt, kann ich mir einfach das Lorem Ipsum leihen. Ich werde es kopieren, aber nur damit ich einfach nicht die gleiche, die gleiche Farbe, die gleichen Schriftmerkmale behalten kann. Aber ich tippe einfach wie eine gefälschte Telefonnummern 123 ein, vielleicht etwa vier oder 56789. Das sollte reichen. Und ich werde dieses Textfeld einfach kleiner machen und ich stelle es irgendwo hier hin. Dann gehen wir los. Und vielleicht drucke ich sie einfach irgendwo aus. Fangen wir vielleicht mit einem Adresssymbol an. Geben wir also etwas wie Map ein. Und mal sehen, ob wir hier etwas mit Federsymbolen haben. Mal sehen, ob ich einfach auf diesen Kerl klicke und dann auf das Icon klicke. Ja, es wird irgendwohin kommen. Ich glaube also nicht, dass ich meine Farben mehr in meiner Zwischenablage habe. Ich meine, ich habe diesen Hex-Code nicht, also füge ich ihn noch einmal ein und ich werde ihn ablegen, er ist vielleicht irgendwo hier. Und lass uns den Kerl runterbringen. Und lasst uns diesen Text entfernen. Es wird ungefähr so aussehen. Und schließlich machen wir eine E-Mail-Adresse. Nehmen wir einfach eine E-Mail dafür, vielleicht wird die Feder nur das haben. Versuchen wir es wie ein Umschlag. Normalerweise gibt es viele Umschlagsymbole, in diesem Fall nicht wirklich. Lass uns etwas wie Post machen. Und wieder markiere ich einfach dieses Icon und ich werde es tun, Hey, ist der Typ n? Und mal sehen, ob wir diese Farbe wieder einfügen können. Und ich werde versuchen, dieses Symbol zu greifen. Und übrigens, wenn es Ihnen zu schwer fällt, ein Element zu greifen, weil XD funktioniert, können Sie immer einfach die Strg- oder Befehlstaste drücken und gedrückt halten . Das wird wie eine direkte Auswahl einer Objekttechnik lizenziert . Und ich werde den Kerl einfach schließen. Natürlich drücke und halte ich die Alt- und Umschalttasten zusammen gedrückt . Und hier drin, machen wir etwas wie das Ausziehen oder vielleicht nicht zwei Großbuchstaben. Oder lasst uns so etwas wie Info auf meiner email.com machen, so etwas. Das sollte reichen. Und lassen Sie mich jetzt vielleicht sicherstellen, dass alles gut ausgerichtet ist. Aber ich möchte diese Textfelder so klein wie möglich gestalten , damit unsere Transformation so genau wie möglich ist , während unsere Ausrichtung, vielleicht nicht die Transformation. Also lasst uns so etwas machen. Dann lasst uns tatsächlich sicherstellen, dass wir diese Typen so liebevoll auf die Mitte ausgerichtet haben. Und sagen wir, das Gleiche mit diesen Typen. Vielleicht mache ich diese Box einfach ein bisschen kleiner. Also ins Zentrum, da geht's. Jetzt können wir diese Elemente vielleicht einfach gruppieren. Aber vorher, lass mich vielleicht prüfen, ob diese Jungs auch gut nach links ausgerichtet sind . Ich glaube, das sind sie. Und lasst uns sicherstellen, dass diese Jungs so gut auf das Zentrum ausgerichtet sind . Und jetzt gruppiere ich sie tatsächlich. Also gruppiere, gruppiere diese Typen auch. Da sind wir los. Und jetzt können wir einfach sicherstellen, dass sie gut verteilt sind. Und wir können sie einfach irgendwo hinstellen. Vielleicht nur ein bisschen so hoch. Jetzt, da wir diese Elemente haben, könnten wir tatsächlich mit der Erstellung unseres Kontaktformulars beginnen. Und es wird super einfach. Alles was wir wirklich brauchen ist nur ein einfaches Rechteck. Erstens wird das mehr oder weniger so aussehen. Und dann tippe ich drinnen etwas wie einen First ein, lasst uns vielleicht deinen Namen machen. Also mache ich deinen Namen. Das wird also unser Platzhalter sein und normalerweise sind Platzhalter kleiner. Also mache ich etwas wie 14 oder vielleicht 16. Und ich gehe zu meinen Farben und mache es leichter, so etwas. Und ich lege es irgendwo hin und vielleicht wird dieser Typ so kleiner sein. Und ich werde sicherstellen, dass sie gut auf das zentrale Rohr ausgerichtet sind . All diese Elemente sind gut auf die Mitte ausgerichtet. Also denke ich, dass ich die Füllung loswerden werde und ich werde auch den Wert für Rundheit, abgerundete Ecken erhöhen . Machen wir etwas wie 16 oder vielleicht sogar ein bisschen größer wie 26. Machen wir 32. Okay, lass es uns so lassen. Es sieht anständig genug aus. Jetzt kann ich diese Elemente einfach greifen und ich wähle einfach „Raster wiederholen“. Ich gehe unter Mike One, zwei. Ich denke, das wird ausreichen, denn ich möchte hier einfach wie eine E-Mail-Adresse hinzufügen und dann den Textbereich hier unten, wir könnten wieder wie einen Schritt nach unten gehen , um wie ein Button, aber wir haben bereits einen Knopf, also glaube ich nicht, dass wir das brauchen, also sollten drei ausreichen. Was an dem Wiederholungsraster wirklich cool ist, ist, dass wir, obwohl wir es getan haben, nur ein Element manipulieren. siehst du immer noch. Nun, nun, es ist im Grunde wie ein Live-Effekt, bis Sie die Gruppierung des Rasters aufheben. Alle Änderungen, die jetzt an unserem Hauptelement vorgenommen werden , werden allen wiederholten Elementen widergespiegelt oder hinzugefügt. Wenn wir jetzt den Rundheitswert der Ecken ändern wollen , können Sie sehen, dass es sich gut ändert, damit wir diese auch manipulieren können. Also werde ich es in Schwarz 32 machen, und dann hole ich mir dieses Element einfach und ich werde das Gitter so aufheben. Jetzt wähle ich einfach den letzten Kerl aus und ich werde ihn deutlich größer machen , so etwas. Und ich glaube, wir mussten auch die Rundheit ändern. Tim, um es mit den restlichen Elementen abzugleichen. Also statt 32, lassen Sie es uns vielleicht etwas erhöhen. Die 64, wie doppelt so groß, doppelt so groß. Ich glaube nicht, dass es so gut aussieht. Machen wir vielleicht etwas wie, lass uns 16 mit diesen Typen machen. Diese beiden Elemente wähle ich sie aus, indem ich die Strg - und Umschalttasten gedrückt halte. Machen wir 24 mit ihnen oder vielleicht 20. Oh, es sieht aus, es sieht anständig genug aus. Jetzt brauchen wir nur noch diese Steuer von Ihrem Namen in Ihre E-Mail zu ändern . Und hier wird es so etwas wie deine Nachricht sein. Und natürlich muss dieser Typ irgendwo hingehen wie eine Zusammenfassung hier. Und jetzt gehen wir einfach zu unseren Like unseren Komponenten. Und ich versuche einfach, meinen Knopf zu finden. Also das ist dieser Typ genau hier. Also werde ich es einfach irgendwo hier und hier hineinlegen. Und anstatt mehr zu erfahren, tippen wir so etwas wie eine Nachricht senden ein. Und natürlich müssen wir diese Elemente gut ausrichten. Lassen Sie mich also einfach versuchen, auf diese Elemente zu klicken und sie an der Mitte auszurichten. Und vergiss nicht, wir müssen dasselbe für den Hover-Status tun. Lassen Sie mich also einfach diesen Text kopieren. Und dann gehe ich wieder zu meiner Komponente. Also weiter und schweben Sie den Zustand. Anstatt mehr zu erfahren, tippen wir Sendenachricht ein. Und wieder müssen wir sicherstellen, dass alles so gut auf das Zentrum ausgerichtet ist . Jetzt, wenn wir uns unser Design ansehen, gehen wir hier runter. Du kannst sehen, dass wenn wir den Mauszeiger über diesen Kerl bewegen, er seine Farbe ändert und es sieht aus, es sieht gut aus. Jetzt brauchen wir jetzt wirklich nur noch ein Bild wie ein Bild hinzuzufügen , nur damit es nicht so aussieht , so langweilig. Wir könnten vielleicht gerne eine Google Map hinzufügen, wenn Sie möchten, nur um zu zeigen, wo sich Ihr Büro befindet es ist ziemlich üblich, aber vielleicht füge ich stattdessen einfach hinzu. Stattdessen füge ich einfach etwas wie ein einfaches, wie ein einfaches Bild hinzu, das wie Senden und Senden eines Nachrichtenprozesses angezeigt wird . Und ich fange hier irgendwo an. Also füge ich ein Rechteck hinzu. Irgendwo hier. Da sind wir los. Ich brauche keine Grenze. Ich fühle mich auch nicht wirklich, aber ich brauche ein Bild. Also gehe ich wieder nach Pexels und tippe etwas wie vielleicht Kontakt ein. Ich bin mir nicht sicher, ob ich etwas Interessantes finden werde. Oder vielleicht fügen wir einfach dieses Bild hinzu. Es ist wirklich nicht so wichtig, das beste Image der Welt zu haben . Genau hier. Es dient eher zu Präsentationszwecken. Also los geht's. Wir haben unseren Abschnitt „ Berührung“ erstellt. Ich denke, dass Sie es jetzt nur noch zu unserer Hauptseite hinzufügen müssten , ich meine, unsere Haupt-Mobile-Designseite. Also mache ich das einfach schnell. Wie Sie sehen können, habe ich diese schnell wie den Kontaktbereich ansprechend gemacht . Und hier gibt es wirklich keine Raketenwissenschaft. Alles, was wir tun müssen, ist einfach die Positionierung und den Abstand anzupassen , damit sie auf mobilen Geräten gut aussehen. 48. Füge die Fußzeile hinzu: Fügen wir jetzt eine Fußzeile hinzu. Und dafür werde ich einfach schnell ein Rechteck greifen, weil ich meinen Gedankenfuß oder ein bisschen prominenter machen möchte, ein bisschen sichtbarer. Und ich werde seine Füllfarbe ändern, sagen wir mal das Rot. Und ich werde es kleiner machen. Also passt es zu unserer Leinwand. Und ich stelle es irgendwo hin. Jetzt sind die Fußzeilen in den letzten Jahren in der Designwelt, der Webdesign-Welt, gewachsen in den letzten Jahren in der . Aber wenn Sie nicht viel in Ihre Fußzeile stecken können, können Sie es natürlich viel in Ihre Fußzeile stecken können, immer einfach so lassen wie wirklich, sehr einfach. Sie können genau wie Ihren Namen hinzufügen, wie zum Beispiel Copyright-Informationen, und das war's. Aber lasst uns tatsächlich beides machen. Also lasst uns eine längere Fußzeile machen. Und lassen Sie uns wahrscheinlich einfache, kleinere, wie grundlegende, grundlegende Informationen für wie ganz unten machen. Also fange ich damit an, vielleicht ein paar Texte auszuleihen. Also schnapp ich mir diese Typen einfach und versuche sie irgendwo hier einzufügen. Und natürlich müssen sie ihre Farben ändern. Also lasst uns vielleicht einfach weiß machen. Dieser Typ wird also weiß sein. Das ist der Typ auch. Aber vielleicht füge ich hier einfach ein bisschen mehr Text hinzu. Und ich werde etwas eintippen, als ob ich so etwas wie Danke für den Besuch nahe bin . Weil ich davon ausgehe, dass jemand wie nicht zu diesem Teil der Seite scrollt, also ist es eine nette Geste, ihnen zu danken. Also lasse ich es so. Und hier unten fügen wir vielleicht unsere Icons wie unsere Icons hinzu. Aber lassen Sie mich zuerst versuchen, sie in meinem Vermögen zu finden. Also wähle ich diesen Kerl vielleicht zuerst aus. Also fangen wir einfach an, ein paar Icons hinzuzufügen. So wie dieser Typ hier. Und lass es uns weiß machen. Da sind wir los. Und lasst uns die restlichen hinzufügen. Jetzt müssen wir natürlich sicherstellen, dass sie gut aufeinander abgestimmt sind. Und es wird großartig sein, wenn ich sie richtig auswählen könnte. Und ich werde sie einfach verteilen. Und vielleicht gruppiere ich sie. Vielleicht mache ich diese Schrift auch einfach kleiner. Also gehe ich zu etwas wie 16. Und ich bringe es zurück senke die Zeilenhöhe auf etwa 24. Und hier auf der rechten Seite möchte ich letztendlich drei Listen erstellen, möchte ich letztendlich drei Listen erstellen die einige Informationen wie unsere Projekte, die neuesten Blogbeiträge und vielleicht unsere Dienste enthalten einige Informationen wie unsere Projekte, . Also leihe ich mir einfach die SMS von links aus. Und für diesen Kerl wie dieser Kerl wird deutlich kleiner als etwas einfacher sein wie 26 vielleicht oder vielleicht 32. Das sollte reichen. Und sagen wir, dass das so sein wird, lasst uns die neuesten Projekte sammeln. Und jetzt werden wir eine Liste von, sagen wir wie Links unserer neuesten Projekte, erstellen wir eine Liste von Links. Was ich also im Grunde tun werde, ist, dass ich mich einfach wie ein Stück Texte wie diesen schnappen werde. Und wir legen sie hin, vielleicht könnten wir einfach klonen und irgendwo hier runter. Und ich werde vielleicht versuchen, ein anderes wie Lorem Ipsum-Fragment wie dieses zu schnappen . Nur so, nur damit wir hier nicht genau dieselben Textstücke haben . Und ich werde diese Elemente ausrichten. Und wieder klone ich den Kerl einfach runter. Ich mache das Gleiche. Sagen wir also, ich fange mit diesem Satz an. Und dann schränken wir, wie Sie sehen können, unser Textrahmen diesen Text einfach ein. Wir müssen uns also keine Sorgen machen , wie all diese überlaufenden Texte. Aber das dient nur zur Präsentation. Aber vielleicht mache ich sie nur ein bisschen kürzer, so etwas. Ich denke, dass das reichen sollte. Jetzt wähle ich einfach beides aus, wie alle diese Elemente, wechsele Alt, drücke und halte die Umschalttaste Alt. Und dieser Typ wird wie neuesten Posts sein. Da sind wir los. Und ich mache das Gleiche hier. Also werde ich nur einige dieser Elemente entfernen. Und das Gleiche hier. Also lasst uns vielleicht irgendwo hier gehen. Und wieder so. Vielleicht sorge ich einfach dafür, dass dieser Typ richtig aussieht. Und lasst uns tun, lasst uns so etwas machen. Und da sind wir los. Du hättest gerne aktuelle Projekte, neueste Beiträge. Und vielleicht lasst uns so tun, wie unsere Dienste tatsächlich meine Dienste sind. Also warum Dienste? Und lassen Sie uns Webdesign eintippen. Und dann lasst uns wie Webentwicklung machen, vielleicht Webentwicklung, wenn ich es richtig buchstabieren kann. Also lass uns hier runter gehen. Lass uns etwas wie vielleicht Logo-Design machen. Und schließlich machen wir etwas wie vielleicht SEO. Ich klone den Kerl nach unten. Denn wie ganz unten möchte ich nur etwas wie eine Copyright-Information hinzufügen . Vielleicht wie ein Link zu unserer Datenschutzrichtlinie oder ähnlichem. Die Copyright-Informationen beginnen mit dem Copyright-Symbol, oder? Wenn du also auf einem Windows bist, hier ist ein kleiner Trick, den du machen kannst. Sie können einfach die Alt-Taste gedrückt halten und dann nur 0169. Wenn Sie eine numerische Tastatur haben, wird ein Copyright-Symbol auf einem Mac hinzugefügt. Es ist, es ist viel einfacher. Alles, was Sie tun müssen, ist die Wahltaste zu drücken und dann einfach die G-Taste zu drücken. Und wenn Sie keine Zehnertastatur auf Ihrer Tastatur haben, können Sie einfach zu Google gehen und einfach Copyright-Symbolcode eingeben. Wählen und kopieren Sie einfach das Copyright-Symbol und fügen Sie es dann einfach in XD ein. Also hier tippen wir einfach etwas wie 20192022 ein. Wenn Sie diese Website gerade wie heute, in diesem Jahr, erstellt diese Website gerade wie heute, in diesem Jahr, würden Sie natürlich dieses aktuelle Datum so verlassen . Und natürlich, weil wir dieses Copyright-Symbol hier hinzugefügt haben dieses Copyright-Symbol hier , ist es im Grunde genommen eine Schriftart. Wie Sie sehen können, sind die Werte gleich, aber ich denke, dass ich das vielleicht in regulär ändern werde . Ich tippe so etwas wie hieß unser Name? Ich weiß es nicht mehr. Eigentlich. Tiffany Jones. Tiffany Jones. Okay. Das Urheberrecht gehört also Tiffany Jones. Und ich mache es kleiner. Und ich denke, ich werde es mögen, ihm diese schöne, tolle graue Farbe zu geben. Und ich werde ihn klonen, um es zu entscheiden. Und ich gebe so etwas wie die Datenschutzrichtlinie ein. Da sind wir los. Wir könnten auch haben, dass es wie eine größere, größere Seite war. Sie könnten so etwas wie Bedingungen und Nutzungsbedingungen haben. Und natürlich müssen diese beiden Links auf die rechte Seite gehen. Ich stelle sie vielleicht irgendwo hin. Also werden sie zur Seite gehen. Und natürlich sollten wir schließlich sicherstellen, dass all diese Informationen gut auf unser Raster abgestimmt sind. Vielleicht mache ich das einfach kleiner und bringe diesen Kerl irgendwo hin, wo ich mich entscheiden kann. Dann hole ich mir diese Elemente und lege sie vielleicht irgendwo hier hin. Und das Gleiche für diese Typen. wir einfach sicher, dass sie gut auf das Raster ausgerichtet sind . Also werde ich jetzt all diese Elemente gruppieren. Diese Typen sind also auch gruppiert. Jetzt wähle ich einfach alles aus und verteile es einfach so. Gleiche gilt für diese Elemente. Ich schnappe mir einfach diese Links und schiebe sie nach rechts. Und dieser Typ hat fast Recht. Also im Grunde das Letzte, was man benutzt , um all diese Elemente einfach zu greifen. Also der Hintergrund und die Links, und stellen Sie sie einfach so in den Mittelpunkt. Das letzte, was Sie hier tun müssen, wäre natürlich unsere Fußzeile zu den verbleibenden Teilen unserer Website hinzuzufügen zu den verbleibenden Teilen und sie natürlich zu reagieren. Aber lasst uns das im nächsten Video machen. 49. Lass uns die Fußzeile ansprechend gestalten: Weißt du was, ich habe beschlossen, dass es vielleicht nicht die beste Idee ist , dich mit einem anderen, einem weiteren Video zu langweilen, in dem du Elemente einfach vertikal stapelst. Also habe ich mir einfach die Freiheit genommen, die Fußzeilenelemente zu unseren responsiven Versionen des Designs hinzuzufügen die Fußzeilenelemente zu . Aber es gibt nur eine Sache , auf die ich hinweisen möchte. Ich meine, für einige der Designs habe ich mich auch entschieden, nicht nur diese Fußzeilenelemente hinzuzufügen, sondern auch die Kontaktinformationselemente. Wenn wir also zum Beispiel auf unsere mobile, mobile Blogseite gehen , gehen wir in diesem Blog-Modus nach dem anderen aus. Sie können sehen, dass ich auch den Abschnitt „Berührung“ sowie das Foto hinzugefügt habe. Und übrigens, wie Sie sehen können, es alles nur keine Spalten von gestapelten Elementen. Also habe ich die Kontaktinformationen hinzugefügt, ich habe sie in die Fußzeile aufgenommen. Aber ich habe es nicht für unseren einzigen Blogbeitrag gemacht, weil ich gerade entschieden habe, dass es vielleicht einfach zu viel sein würde. Ich meine, wir haben bereits solche Icons, die sich hier unten wiederholen, wie die Social-Media-Symbole. Ich dachte, wir hätten unseren Nutzern bereits genug gesagt, wie können sie uns kontaktieren? Wie Sie sehen können, geht es im Grunde genommen , nur darum diese Elemente wie bei allen anderen Elementen vertikal hinzuzufügen . Und Sie können auch entscheiden , ob Sie anhand der Kontaktinformationen oder andere Informationen, die dem Essen oder in diesem Fall vorausgehen, zu Ihrem Handy hinzufügen andere Informationen, die möchten. Mobile Versionen des Designs. 50. Der letzte Schliff: Okay, also haben wir unser Projekt erstellt und auf dem Weg dorthin haben wir unseren Hauptheldenbereich mit dem Bild erstellt. Natürlich haben wir das Logo hinzugefügt, wir haben die Navigation hinzugefügt. Und so Informationen hier auf der linken Seite. Dann haben wir mit dem Hinzufügen der Dienste fortgefahren. Also haben wir die Icons natürlich viel Text und einen Button hinzugefügt . Dann haben wir diesen Portfolio-Bereich mit animierten Portfolio-Miniaturansichten hinzugefügt . Dann haben wir mit dem Hinzufügen eines Blogs fortgefahren. Dann fügten wir den Abschnitt „Über mich“, gefolgt vom Kontaktbereich und der Fußzeile hinzu. Und natürlich haben wir auf dem Weg alles reaktionsschnell gemacht. Und denken Sie daran, dass es eine gute Idee ist, wann Sie einmal eine Desktop-Version eines Abschnitts erstellen und dann mit einer mobilen Version dieses Abschnitts folgen . Und wir haben auch hinzugefügt, dass wie ein Schiebereglereffekt genau hier dieses Bildkarussell ist. Wir haben eine Blogseite hinzugefügt. Wir haben natürlich die mobile Version der Blogseite hinzugefügt. Und wir haben einen einzigen Blogbeitrag hinzugefügt. Und natürlich ist er eine einzige Blogpost mobile Version. Natürlich könnten wir weitermachen und wie einen Abschnitt über uns erstellen, wie einen Abschnitt „ Kontakt“. Aber ehrlich gesagt würden wir einfach die Elemente wiederholen , die wir hier bereits haben. Für den Abschnitt Über mich werden wir im Grunde einfach dieselben Elemente sowie das Logo und die Navigation hinzufügen . Natürlich folgte gut mit der Fußzeile. Für den Abschnitt Kontakt fügen wir grundsätzlich einfach ihr Logo, die Navigation, diesen Teil hier und die Fußzeile hinzu. Ich denke also, dass es eine Design-Herausforderung für Sie sein sollte , zusätzlich zum Hinzufügen oder Erstellen Ihrer Variante, Ihrer Version einer Website wie dieser. Und natürlich, sobald alles erledigt ist, sollten wir überprüfen, ob der gesamte Text, ob der Abstand, wenn die Schriftgrößen in Ordnung sind, können wir natürlich wie die Homepage greifen und die Interaktivität sehen. Nehmen wir an, wir haben unseren Button „Mehr erfahren“ erhalten. Wir haben diesen Knopf genau hier. Wir haben unsere Portfolioelemente wie diese. Schaltfläche „Mehr lesen“. Diese Symbole funktionieren genauso wie im vorherigen Abschnitt. In der Helden-Sektion haben wir unseren Kontaktbereich bekommen, der berührt wurde. Und natürlich könnten wir zum Beispiel prüfen, ob unsere Links funktionieren. Dieser Blog-Link funktioniert also einwandfrei. Und wenn wir auf das Logo klicken, bringt es uns zurück zu unserer Homepage. Alles in allem denke ich, dass wir ziemlich viel gemacht haben. Wir haben ziemlich viel abgedeckt. Wie immer ermutige ich Sie, Ihre eigenen Variationen des Designs zu erstellen oder vielleicht etwas ganz anderes zu kreieren. Solange Sie alle Techniken und Fakten und Tricks verwenden , die Sie während dieses Entwurfsprozesses gelernt haben. 51. Teilen durch Exportieren: Die einfachste und offensichtlichste Art, Ihr Projekt und einzelne Elemente davon zu teilen Ihr Projekt und einzelne Elemente , ist einfach der Export darin. Mal sehen, wie wir das in XD machen können. Sie fragen sich also vielleicht, wie sich Export von dem Speichern unterscheidet. Also lass es mich einfach erklären. Sie möchten Ihre Datei speichern, wenn Sie es sind oder ein anderer Benutzer daran arbeitet, derselben Datei möchten Sie Ihr Projekt exportieren, wenn es entweder fertig ist oder Sie nur einige Elemente teilen möchten davon, wie einige Bilder oder Icons, exportieren Sie es. Vermögenswerte können geschlossen werden, was bedeutet, dass sie nicht mehr editierbar sind oder editierbar bleiben können. Es hängt alles von dem Dateiformat ab, das Sie beim Exportieren auswählen. Also eigentlich wie exportiere ich dein Projekt. Im Menü Datei finden Sie also, dass die Exportfunktion noch mehr Optionen enthält. Die Stapeloption ermöglicht es Ihnen, mehrere Assets auf einmal zu exportieren. Sie müssen sie nur für den Export markieren, entweder im Eigenschafteninspektor oder indem Sie im Ebenenbedienfeld auf das kleine Exportsymbol neben das kleine Exportsymbol neben dem Namen der Säure klicken. Wenn Sie möchten, wählen Sie es aus. Sie können bestimmte Assets exportieren, indem Sie sie einfach auswählen , ohne sie für den Export markieren zu müssen. Und Sie können Alle Zeichenflächen auswählen, wenn Sie alle unsere Boards exportieren möchten, auch ohne sie zuerst auszuwählen. Wenn Sie After Effects verwenden, können Sie Ihre Assets mit der letzten Option After Effects in diese Anwendung exportieren . Egal für welche Methode Sie sich entscheiden, Sie sehen einen Dialog zum Exportieren von Assets, dem Sie den Exportprozess noch weiter steuern können. Je nach ausgewähltem Dateiformat sehen Sie eine andere Reihe verfügbarer Funktionen. Und standardmäßig können Sie Ihre Assets als P und G speichern Mit diesem Format können Sie die Exportgröße steuern. Und Sie können aus einer vordefinierten benutzerdefinierten Exportgröße wählen , die zwischen 0,5 und vier liegt. Oder Sie wählen ein Experten-Preset wie Web, Android und iOS. Das erste Tool besteht darin, Ihre Assets einfach mit vordefinierten benutzerdefinierten Größen zu exportieren . Die iOS-Voreinstellung exportiert die Assets jedoch mit vordefinierten Bildschirmdichten. der Option Exportieren nach können Sie entscheiden, wo Sie Ihre exportierten Assets speichern möchten. Klicken Sie also auf die Schaltfläche Ändern, um die richtige Stelle auf Ihrer Festplatte auszuwählen . Das nächste Dateiformat ist also AVG. Es wird hauptsächlich zum Speichern von Vektorgrafiken verwendet, aber Sie können damit auch Bilder und Texte exportieren. Und wenn Sie es auswählen, erhalten Sie viele weitere Optionen wie Styling. Und hier können Sie die Option Präsentationsattribute verwenden , wenn Sie Ihre Assets exportieren möchten, die in Android Studio verwendet werden sollen . Und Sie können auch die interne CSS-Option verwenden, die im Grunde zu einer kleineren Dateigröße führt. Unter der Option Bilder speichern können Sie das Einbetten verwenden, können Sie das Einbetten verwenden um das Bild in die Datei einzuschließen. Oder Sie können den Link verwenden, um einen Verweis auf das separat gespeicherte Bild hinzuzufügen . Unter Dateigröße können Sie die optimierte, minimierte Option verwenden , um die Dateigröße kleiner zu halten. Unter Pfadoptionen können Sie Konturstriche verwenden, um Striche zwei Pfade zu konvertieren , um zu verhindern, dass sie verzerrt aussehen. Experten können Sie erneut entscheiden, wo Sie Ihre Export-IT-Assets speichern möchten. Das nächste Dateiformat ist also PDF. Und hier können Sie hauptsächlich entscheiden , ob Sie Ihre Assets als mehrere PDF-Dateien oder eine einzelne Datei exportieren möchten. Und r ist, dass Sie, wenn Sie die Starterversion des Programms verwenden , nur bis zu zwei PDF-Dateien exportieren können. Und das letzte beiden Dateiformat ist JPEG. Es ist das einzige Format , mit dem Sie die Qualität des Exports in seiner Größe steuern können. Die geringere Qualität bedeutet eine höhere Kompression. Und das führt zu einer kleineren Dateigröße. Und eine höhere Qualität bedeutet , dass weniger Komprimierung verwendet wird und eine größere Dateigröße erzeugt wird. Normalerweise beträgt eine gute Balance zwischen der Dateigröße und der Qualität etwa 75 Prozent. Jetzt denke ich, dass Sie in den meisten Fällen die PNG- und JPEG-Exportformate verwenden werden, insbesondere für schnelle Präsentationen. XD verfügt jedoch über einen völlig separaten freigegebenen Workspace, mit einen völlig separaten freigegebenen Workspace, dem Sie Ihre Projekte für verschiedene Szenarien freigeben können. 52. Der Arbeitsbereich „Teilen“: Dieser Arbeitsbereich ist daher besonders nützlich, wenn Sie mit einem Team von Stakeholdern wie Designern, Entwicklern oder einfach Rezensenten zusammenarbeiten . Hier können Sie also Links erstellen, die verwendet, bearbeitet und überprüft werden können , um an Ihrem Design zusammenzuarbeiten. Im Eigenschafteninspektor können Sie eine der Ansichtseinstellungen auswählen, können Sie eine der Ansichtseinstellungen auswählen abhängig davon, mit wem Sie das Design freigeben möchten. Verwenden Sie diese Designbewertung, um Feedback zu Ihrem Design von anderen Designern im Team zu erhalten. die Navigationssteuerungen standardmäßig Daher sind die Navigationssteuerungen standardmäßig aktiv und verwenden deren Entwicklung um Ihr Design mit den Entwicklern zu teilen. Standardmäßig werden beim Kommentieren des Hotspots Navigationssteuerelemente und Entwurfsspezifikationen freigegeben. Die Präsentationsvoreinstellung optimiert Ihr Design, um den Stakeholdern am besten präsentiert zu werden. Und standardmäßig sind Hotspot daher Navigationssteuerelemente und Vollbildoptionen aktiv. Und die Voreinstellung zum Testen des Benutzers ermöglicht es anderen Benutzern, Ihr Design zu testen. Und hier ist standardmäßig nur die Vollbild-Option aktiv. Und natürlich können Sie die Erfahrung des Designs anpassen, das Sie teilen, und die Optionen für den Wissensaustausch und die Interaktion können frei hinzugefügt oder entfernt werden. Sobald Sie also alle Optionen für die Ansichtseinstellungen festgelegt haben, können Sie die Zugriffsberechtigungen für den Link festlegen. Die Optionen hier sind also jemand mit dem Link? Nun, das bedeutet im Grunde, dass jeder, der den Link hat , das Projekt sehen kann. Sie können jedoch auch einschränken, dass die Datei nur von ausgewählten Personen angezeigt wird. Natürlich, wenn Sie die einzige Option für eingeladene Personen wählen. Und jeder mit Passwort, was bedeutet, dass jeder, der das von Ihnen festgelegte Passwort kennt , auf die Datei zugreifen kann. Wenn Sie also bereit sind, Ihre Datei zu teilen, klicken Sie einfach auf die Schaltfläche Link erstellen. Und nach einiger Zeit wird der Link erstellt, Sie werden feststellen, dass der Link selbst zusammen mit einigen Schaltflächen, mit denen Sie den Link des Projekts kopieren können , das in einen iFrame eingebettet ist codieren oder teilen Sie es auf Behance. Sie können auf den generierten Link klicken und Sie werden zu einer Seite weitergeleitet , auf der Sie das Design zusammen mit zusätzlichen Panels auf der rechten Seite sehen . Wenn Sie also die Starterversion von XD verwenden, können Sie jeweils nur ein Projekt freigeben. Und wenn Sie mehr teilen müssen, müssen Sie auf einen Premium-Plan upgraden. Sie können jedoch immer einfach denjenigen löschen, den Sie teilen, und Schnee einfach einen anderen teilen. Um dies zu tun, müssen wir die Option verwaltete Links auswählen, die die Registerkarte veröffentlichte Dateien in Ihrem Adobe-Konto öffnet . Und hier können Sie die Datei dauerhaft löschen. Natürlich bleibt das ursprüngliche Design intakt und Sie können einfach, wissen Sie, ein anderes teilen. Da gehst du. Auf diese Weise können Sie Ihre Dateien in einem Team von Stakeholdern in XD teilen. Wenn Sie gerade erst anfangen und das Programm lernen möchten, wird möglicherweise nicht Ihre tägliche Routine sein, wenn Sie gerade erst anfangen und das Programm lernen möchten. Aber ich denke immer noch, dass dies eine wichtige Funktionalität ist und es einfach eine gute Idee ist, sich damit vertraut zu machen. 53. Teilen mit einem Kunden: Eine Frage, die ich wirklich viel von meinen Schülern bekomme , ist, in welchen Dateiformaten sollte ich mein Design an den Kunden übergeben? Und die Antwort ist letztendlich eine der frustrierendsten. Und es kommt darauf an, ähm, es kommt darauf an. Ich meine, wenn Sie zugestimmt haben, alle Rechte an dem Projekt an den Kunden zu übergeben , sollten Sie in den meisten Formaten liefern . Und das schließt die Quelldatei ein. Also exportiere ich das Projekt normalerweise in JPEG, PNG. Ich füge die Quelldatei hinzu, zum Beispiel p XD, XD oder AI. Ich verwende auch PDF und wenn das Projekt nicht mit Photoshop gemacht wurde, exportiere ich es nach PSD, weil es so allgegenwärtig ist. Jeder versteht P als n. Wenn das fertig ist, zippe ich alle Dateien. Wenn Sie jedoch mit dem Kunden nicht einverstanden waren, die Urheberrechte an das Projekt zu übergeben. Sie müssen die Quelldatei nicht freigeben. In diesem Fall würde ich mich einfach bei JPEG, PNG und PDF halten. Wenn Ihr Projekt mehrere Kunsttafeln verwendet, würde ich sie auch als separate JPEG- oder PNG-Dateien und als einzelne PDF-Datei speichern . Auf diese Weise erleichtern Sie Ihrem Kunden die Vorschau des Projekts. Kurz gesagt, wenn Sie jemals Zweifel haben, welche Dateiformate zu verwenden sind , verwenden Sie einfach PNG, PDF und optional die Quelldatei. Wie ich bereits erwähnt habe, ist es immer eine gute Idee , Ihre Dateien zu zippen. Und die meisten modernen Betriebssysteme ermöglichen es Ihnen, dies ohne separate App zu tun. Wenn Sie jedoch ein eigenständiges Programm für die Archivierung benötigen, können Sie sieben Zip verwenden, die kostenlos, Open Source sind und unter Windows, PC, macOS und Linux installiert werden können . Das Teilen Ihrer Dateien ist immer der letzte Schritt im Entwurfsprozess. Sobald das Projekt angenommen und kostenpflichtig ist, können Sie es als vollständig bezeichnen und sich zu einer gut geleisteten Arbeit gratulieren . 54. ZUSAMMENFASSUNG: Ich hoffe also, dass es Ihnen gefallen hat, XD zu lernen und ich hoffe, dass Sie es in Ihren zukünftigen Webdesignern nutzen werden . Es ist eine wirklich wichtige Software, die Sie in Ihrem Skill-Portfolio haben müssen. Lasst uns also schnell zusammenfassen , was wir hier gelernt haben. Also haben wir zuerst die absoluten Grundlagen wie den Startbildschirm und die Umgehung des Arbeitsbereichs behandelt die absoluten Grundlagen wie den Startbildschirm und und den Unterschied zwischen Design und Prototyping verstanden . Dann haben wir unser erstes neues Dokument erstellt. Wir haben gelernt, Artwork, Layer und Tools zu verwalten. Und im nächsten Abschnitt lernen wir, wie man Plugins und Assets verwendet. Ich habe auch mit dir geteilt, dass meine Lieblings-Plug-Ins XD verwenden. Dann haben wir ein wenig über die Theorie des Webdesigns gelernt, nämlich die Farben, Typografie und die Best Practices des modernen Webdesigns. Danach sind wir zum Hauptdesignteil übergegangen und haben ein persönliches Website-Projekt für ein Design von Freelancer erstellt . Schließlich lernen wir, wie Sie Ihr Projekt teilen? Also danke, dass du es bis zu diesem Teil des Kurses geschafft hast. Ich hoffe, dass Sie mit etwas Zeit und Übung selbstständig Ihre eigenen Designs erstellen können. Und wenn dieser Kurs Ihnen hilft eine erfolgreiche Gestaltung einer freiberuflichen Karriere zu beginnen oder einen Webdesigner Job zu verleihen. Es wird bedeuten, dass es nützlich war und dass es seinem Zweck diente. Und das würde mich wirklich glücklich machen.