Design mit Figma: Einseitiger Restaurant-Website

1. Willkommen: Hey da und willkommen. Mein Name ist Adi Purdila. Ich bin Webdesigner und Entwickler und in dieser Klasse geht es darum eine einseitige Restaurant-Website in Figma zu entwerfen. Das werden wir erschaffen. Es ist eine einfache Website für ein fiktives Restaurant namens Birdhouse Bar and Grill. Es verfügt unter anderem über einen netten Menübereich, eine Menüführung, eine Instagram-Fotogalerie, ein Kontaktformular mit einer Karte und auch einen Newsletter-Anmeldebereich. Indem Sie an diesem Kurs teilnehmen, lernen Sie zwei Dinge UI/UX Design und Figma. In Bezug auf das UX-Design lernen Sie, wie Sie eine Projektübersicht lesen und darauf basierend Wireframes erstellen. Wir besprechen aber auch die Informationsarchitektur oder wie wir den Inhalt auf der Webseite strukturieren. Dann geht es auf die Benutzeroberfläche oder das UI-Design. Hier erfahren Sie, wie Sie die Typografie so definieren , dass sie der Art der Website entspricht , die Sie entwerfen, und wie geeignete Farben auswählen und auf verschiedene Elemente anwenden. Sie lernen, wie Sie das Acht-Punkte-System für Abstände und Dimensionierung verwenden . Sie müssen also nie erraten, welche Werte für Randauffüllung, Breite oder Höhe verwendet werden sollen . Sie lernen auch, wie Sie reaktionsschnelle Designs erstellen. Wir entwerfen zunächst für große Bildschirme und erstellen dann Versionen für mittlere und kleine. Während dies geschieht, lernen Sie auch, wie Sie Figma für das Website-Design verwenden können. Natürlich lernen Sie die Grundlagen wie das Arbeiten mit Rahmen, Text, Farben, Formen, Seiten und Tastenkombinationen kennen. Aber Sie werden auch einen Vorgeschmack auf die erweiterten Funktionen bekommen . Sie lernen, wie Sie das automatische Layout zum Ausrichten und Verschieben von Elementen sehr einfach verwenden . Sie erfahren auch mehr über die verschiedenen Größenanpassungsmodi in Figma wie Hug Inhalt oder Füllcontainer und wann Sie jeden verwenden sollten. Es gibt auch ein Klassenprojekt, mit dem Sie die Theorie verfolgen und anwenden können. Alles in allem denke ich, dass dieser Kurs perfekt für Anfänger ist , da ich jeden einzelnen Schritt des Prozesses vom Wireframing bis zum Entwerfen reaktionsschneller Versionen der Website durchlaufen jeden einzelnen Schritt des Prozesses vom Wireframing bis zum Entwerfen reaktionsschneller werde. Also freue ich mich darauf, dich im Unterricht zu sehen. In der ersten Lektion sprechen wir über das Unterrichtsprojekt. Kommt rauf. 2. Das Kursprojekt: Ich denke, dass Sie etwas nicht richtig lernen können indem Sie einfach die Theorie lesen, die Sie üben müssen. Deshalb hat dieser Kurs ein Projekt, das Sie erstellen können. Sie können es auch Hausaufgaben oder Arbeitsauftrag nennen. Diese Aufgaben und solche solche Aufgaben mithilfe der bereitgestellten Projektübersicht entwerfen mithilfe der bereitgestellten Projektübersicht eine einseitige Website für ein Restaurant namens Birdhouse Bar and Grill. Sie können jede Software verwenden, die Sie wollen, aber ich arbeite in Figma und ich empfehle Ihnen, dasselbe zu tun. Jetzt in dieser Klasse mache ich genau den gleichen Auftrag. Ich verwende denselben Projektbrief. Ich bespreche es mit dir. Ich erstelle ein paar Wireframes und entwerfe dann die einseitige Website. Dann liegt es an dir, das Gleiche zu tun. Sie können meine Schritte genau befolgen oder sich von dem, was ich mache, inspirieren lassen und Ihre eigene Version des Projekts erstellen. Die Wahl liegt wirklich bei Ihnen. Um mit diesem Klassenprojekt zu beginnen, müssen Sie tatsächlich ein paar Schritte unternehmen. Schritt 1 besteht darin, die Klassenressourcen herunterzuladen. Jetzt finden Sie in der Klassenbeschreibung die Links zum Herunterladen dieser Dateien. Hier haben wir das fiktive Logo im SVG-Format für Birdhouse Bar und Grill. Wir haben eine Projektübersicht, die im Grunde alles beschreibt, was wir über das Website-Design wissen müssen , das wir tun werden. Dann haben wir eine PDF-Datei für alle Ressourcen, die ich in dieser Klasse verwenden werde. Hier finden Sie Links zur fertigen Figma-Datei. Sie finden einen Link oder Links zu allen Archivfotos, die ich im Design verwendet habe. Abschließend noch ein paar Links für die Icons. Ich benutze die Bootstrap-Symbole und auch die Schriften. Als Bonus werden hier auch einige nützliche Links hinzugefügt, Links zu Figma und einige andere Tools, die wir verwenden werden. Bevor Sie mit diesem Kurs beginnen, müssen Sie zuerst die Ressourcen herunterladen. Schritt 2 ist das Erstellen eines Figma-Kontos und wenn Sie bereits eines haben, können Sie mit Schritt Nummer 3 fortfahren . Aber wenn nicht, benötigen Sie ein Konto, um in Figma arbeiten zu können. Da Figma im Kern browserbasiert ist, jede von Ihnen erstellte Datei muss jede von Ihnen erstellte Datei mit einem Konto verknüpft sein. Einen zu erstellen ist wirklich einfach. Sie gehen zu figma.com und klicken entweder auf diese Schaltfläche oder diese Schaltfläche , um zum Fenster zur Bildschirmerstellung zu gelangen. Hier können Sie sich mit einer E-Mail oder einem Passwort oder mit Ihrem Google-Konto anmelden, falls Sie eines haben. Es ist ein wirklich einfacher Prozess. Es ist auch völlig kostenlos, ein Figma-Konto zu erstellen. Mach das sofort. Nun habe ich gesagt, dass das Erstellen eines Figma-Kontos kostenlos ist und die Verwendung von Figma ebenfalls kostenlos ist, aber bis zu einem gewissen Punkt sehen Sie, dass es einige erweiterte Funktionen gibt, die Sie nur auf Figma Professional und Figma erhalten Organisationspläne, Dinge wie unbegrenzte Dateien, unbegrenzter Versionsverlauf, Teambibliotheken. Diese werden in diesem Startplan nicht verfügbar sein , der kostenlos ist. ist der kostenlose Plan jedoch Wenn Sie als Anfänger gerade erst anfangen, mehr als genug, daher empfehle ich Ihnen, dies zu erhalten. Schritt 3, der optional ist, ist das Duplizieren meiner fertigen Entwurfsdatei. Lassen Sie mich erklären, warum dies optional ist. Für diesen Kurs empfehle ich Ihnen, mit einer leeren Leinwand zu beginnen und mit mir zu arbeiten, indem Sie sich die Klassenvideos ansehen. Alles, was ich tue, wirst du auch an deinem Ende tun. Ich denke, das ist eine großartige Art zu lernen. Wenn Sie jedoch separat arbeiten möchten, erstellen Sie vielleicht Ihre eigene Version des Projekts und verwenden Sie mein Design als Referenz, dann möchten Sie vielleicht mein fertiges Design duplizieren. So kannst du das machen. Sie beginnen damit, die PDF-Datei für Ressourcen zu öffnen. Auf der zweiten Seite finden Sie den Link mit der Aufschrift Website Design von Adi. Sie werden darauf klicken und es wird in Ihrem Browser geöffnet. Sie müssen sicherstellen , dass Sie eingeloggt sind. Jetzt sehen Sie standardmäßig, dass diese Version der Website schreibgeschützt ist. Sie können auf Elemente klicken, damit Sie sie auswählen, Entfernungen suchen und hier auch verschiedene Eigenschaften für das ausgewählte Element erkunden können sie auswählen, Entfernungen suchen und hier auch verschiedene Eigenschaften für das ausgewählte Element erkunden . Aber eine Sache, die Sie nicht tun können, ist dieses Dokument zu bearbeiten , da es die Masterdatei ist, die ich mit Ihnen geteilt habe. Deshalb ist es für dich schreibgeschützt, nur ich kann das bearbeiten. Jetzt könnten Sie versucht sein, auf diese Schaltfläche zu klicken , die besagt, dass Sie nach Bearbeiten fragen , und die mir nur eine Benachrichtigung über Ihre Anfrage senden wird. Es wird mir nur sagen, dass Sie nach Bearbeitungsberechtigungen für dieses Dokument fragen und ich kann diese Ihnen nicht geben, da dieses Dokument für alle zugänglich sein muss. Stattdessen müssen Sie tun, um dieses Dokument zu bearbeiten, hier auf diesen Dropdown-Link zu klicken und Duplikat zu Ihren Entwürfen auszuwählen . Jetzt teilt Figma uns mit, dass die Datei dupliziert wurde deine Entwürfe. Wenn wir in Ihrem Konto wieder unter Entwürfe gehen, sollten Sie die Datei haben. Jetzt können Sie dies schließen und Sie können die Datei in Ihren Entwürfen öffnen. Beachten Sie, dass hier Copyright steht. Der einzige Unterschied ist jedoch, dass diese Datei jetzt editierbar ist , sodass Sie den Text auswählen, löschen können, Elemente neu anordnen, Sie können tun, was Sie wollen. Am Ende ist dies Ihre eigene Kopie des Dokuments und nicht die Originaldatei , die hier im Ressourcen-PDF verknüpft ist. Ich wiederhole, vergewissern Sie sich, dass Sie die Datei duplizieren , wenn Sie Bearbeitungszugriff darauf haben möchten. Jetzt verstehe ich es. Nicht jeder fühlt sich wohl seine Arbeit anderen Menschen zu zeigen. Für diesen Kurs empfehle ich Ihnen jedoch dringend, uns Ihr fertiges Design zu zeigen , indem es in die Projektgalerie hochladen. Dafür gibt es zwei Gründe. Nummer 1, du bekommst Feedback von mir oder anderen Studenten, natürlich Feedback von mir oder anderen Studenten, wenn du das willst. Das kann sich als sehr hilfreich erweisen. Nummer 2, du wirst andere ermutigen , ihre Projekte zu veröffentlichen , und das ist immer eine gute Sache. Bitte nehmen Sie meine Empfehlung an und zeigen Sie uns Ihr fertiges Design, indem Sie es in die Projektgalerie hochladen . Denken Sie schließlich daran, dass ich hier bin, um Ihnen zu helfen, egal welche Fragen Sie zu dieser Klasse oder zum Webdesign im Allgemeinen haben , sie im Diskussionsbereich zu veröffentlichen. Ich antworte jedem Einzelnen und garantiere, dass wir dem Problem auf den Grund gehen werden. diesem Fall freue ich mich darauf, Sie in der nächsten Lektion zu sehen in der wir uns den Projektbericht kurz ansehen, verstehen, was der Kunde uns fragt, und wir werden auch besprechen einige Wireframing-Grundlagen. Wir sehen uns dort. 3. Grundlagen des Wireframing: Bevor wir überhaupt über Typografie, Farben oder Layout nachdenken , müssen wir ein bisschen Vorbereitungsarbeit leisten. Dies besteht aus zwei Dingen, dem Verständnis der Projektübersicht und dem Erstellen eines Drahtrahmens. Wir öffnen Figma nicht einfach und fangen an zu entwerfen, das ist ein Fehler, den viele Leute machen. Das Design sollte auf dem Inhalt basieren, nicht umgekehrt. Wir erstellen nicht nur das Design und machen den Inhalt dann fit, sondern erstellen den Inhalt und gestalten dann darum. Das ist ein viel besserer Ansatz. Um den Inhalt zu erstellen, schauen wir uns die Projektübersicht an und verstehen, was der Kunde von uns als Designer verlangt. dann in der Projektübersicht Beginnen wir dann in der Projektübersicht mit dem ersten Abschnitt, und der spricht mit uns über die Restaurants, Birdhouse Bar und Grill. Wir haben hier eine allgemeine Beschreibung, die uns im Grunde sagt, dass es sich um ein Familienunternehmen , das '95 eröffnet handelt, das '95 eröffnet wurde und derzeit von dem ursprünglichen Besitzer Sohn namens Robert Wilson geführt wird. Birdhouse Bar and Grill ist ein kleines Haus, in dem Sie ein kaltes Bier bekommen, leckeres Essen bekommen und sie auch liefern können . Es gibt ein paar wichtige Punkte, an die wir uns erinnern müssen. Wir haben hier den Restaurantnamen, den Standort und die Telefonnummer, das Motto, das als Gast kommt, sagen Sie Ihnen als Freund. Die Beschreibung der Dienstleistungen, seit '95 schmackhafte Speisen und Getränke servieren, sowie die Geschäftszeiten. Weiter können wir die Seitenstruktur finden. Denken Sie daran, dass es sich um eine einseitige Website handelt, daher müssen wir den gesamten Inhalt auf einer einzigen Seite anpassen. In keiner bestimmten Reihenfolge verläuft die Struktur so. Wir brauchen ein Food-Menü, einen Bereich mit Informationen über das Restaurant, einige Fotos von Instagram, ein Kontaktformular, ein Newsletter-Formular, und auch der Kunde möchte, dass wir das Motto zeigen irgendwo auf der Seite. Dann beschreibt die Projektübersicht auch jeden Abschnitt ausführlicher. Dann kommen wir zur Menübeschreibung. Dies ist eigentlich die Beschreibung des Essensmenüs. Dies ist etwas, das wir tatsächlich auf die Website stellen können , wahrscheinlich irgendwo vor den tatsächlichen Menüpunkten für Lebensmittel weil es ziemlich gut geschrieben ist. Dann haben wir den Menüinhalt. Die Speisekarte hat im Grunde fünf Kategorien. Wir haben Einsätze, und für jeden haben wir den Namen des Gerichts, den Preis und auch seinen Inhalt. Dann haben wir Burger und Sandwiches, Quickies und dann Salate. Dies ist der gesamte Inhalt, den wir im Bereich des Lebensmittelmenüs platzieren müssen. Es ist nicht viel, aber es wird definitiv eine kreative Raumnutzung erfordern , wenn wir dieses Ganze auf eine Seite anpassen wollen. Schließlich, nach dem Food-Menü, haben wir einige Designrichtlinien, die uns diesem Zeitpunkt nicht wirklich wichtig sind, da wir uns noch nicht in der Entwurfsphase der Benutzeroberfläche befinden. Wir werden uns das für später aufheben. Aber ja, das ist der Projektbrief, mit dem wir arbeiten können. Das Schöne daran ist, dass es alle Inhalte enthält , die wir auf der Website platzieren müssen, die gesamte Kopie ist vorhanden, die Beschreibungen, den Standort, die Telefonnummer, das Modell, alles ist angelegt schön hier drin, also müssen wir beim Erstellen der Wireframes nur kopieren und einfügen. Jetzt, da wir wissen, worum es bei dem Projekt geht, können wir einen Inhalt erstellen , der auf den Informationen basiert, die wir erhalten haben, und wir erstellen diesen Inhalt als Drahtgitter. Ein Drahtgitter ist eine Darstellung des Endprodukts mit geringer Wiedergabetreue , und dessen Zweck ist es, den endgültigen Inhalt des Projekts anzuzeigen . Stellen Sie sich das wie eine Skizze vor, etwas, das Sie auf ein Blatt Papier zeichnen würden. In einem Drahtgitter Sie sich keine Sorgen um Layout, Farben, Typografie, Abstände oder ähnliches; machen Sie sich keine Sorgen um Layout, Farben, Typografie, Abstände oder ähnliches; es ist nur eine rohe Skizze. Worüber Sie sich jedoch Sorgen machen müssen , ist der Inhalt, denn dieser muss ungefähr in der endgültigen Form sein. Sie können später kleine Änderungen am Inhalt vornehmen, aber ich würde sagen, 95 Prozent, es muss in der endgültigen Form vorliegen, weil Sie um diesen Inhalt herum entwerfen. Sie können sich ein Drahtgitter wie ein Skelett oder eine Foundation vorstellen . Sobald Sie das haben, können Sie damit beginnen, darauf aufzubauen, Sie können beginnen, die äußeren Ebenen, die Farbe, die Typografie, den Abstand, die Größe und all das gute Zeug hinzuzufügen . Es ist wirklich einfach, Wireframes zu erstellen. Wie gesagt, es sind nur rohe Skizzen, daher ist Stift und Papier die billigste Option. Wenn Sie jedoch lieber digital arbeiten möchten, gibt es dafür dedizierte Apps. Eines der beliebtesten Tools ist Balsamiq Wireframes. Dies ist sehr einfach zu bedienen, da es eine Bibliothek mit vorgefertigten Komponenten enthält , die Sie einfach per Drag & Drop ziehen können. Es handelt sich jedoch um eine kostenpflichtige App Wenn Sie also nicht regelmäßig Wireframes erstellen, lohnt es sich möglicherweise nicht für Sie. Es gibt natürlich andere Wireframing-Apps, die Sie verwenden können, aber persönlich und das empfehle ich Ihnen auch, ich benutze Figma. Dafür gibt es zwei Gründe. Nummer 1, es ist einfach. Figma ist mein bevorzugtes Werkzeug für das UI-Design, daher bin ich damit sehr vertraut. Das bedeutet, dass ich sehr schnell daran arbeite und etwas so Einfaches wie ein Drahtgitter zu erstellen ist einfach ein Kinderspiel. Nummer 2, es ist praktisch. Dies ist das Wichtigste für mich, denn nachdem ich das Drahtmodell erstellt habe, mache ich eine Kopie davon und stütze mein endgültiges Design auf dieser Kopie. Das bedeutet, dass ich nicht all diese Elemente neu erstellen muss, wenn ich eine andere Software verwende. Weil ich in Figma in derselben Software arbeite , ist alles da. Alle Elemente, die ich im Drahtgitter erstellt habe, dupliziere sie einfach und fange an, diese direkt zu bearbeiten. Dies ist eine enorme Zeitersparnis, und Sie werden sehen, wie einfach es später in diesem Kurs ist. Sie können die Wireframes nach Ihren Wünschen erstellen, aber ich empfehle Ihnen, dies in Figma zu tun. Lassen Sie uns jetzt eine kurze Zusammenfassung machen. Beginnen Sie immer ein Projekt indem Sie die Projektübersicht verstehen. Wireframes sind Darstellungen mit geringer Wiedergabetreue des Endprodukts. Ein Drahtgitter sollte ungefähr die endgültige Version des Inhalts enthalten . Erstellen Sie zur Vereinfachung ein Wireframes in derselben Software, die Sie verwenden, um das endgültige Design zu erstellen. Wir haben die Projektübersicht, wir wissen, was ein Drahtgitter ist und wie man einen erstellt, lasst uns an die Arbeit gehen. In der nächsten Lektion beginnen wir mit dem Wireframing der Header- und Heldenabschnitte. 4. Wireframing: Der Abschnitt Header und Hero: Kurze Anmerkung, bevor wir beginnen, ist Wireframing ein ziemlich einfacher Prozess, der normalerweise ziemlich schnell geht. In diesem Kurs werde ich jedoch Wireframing in fünf Lektionen behandeln , da ich den Prozess so detailliert wie möglich erklären möchte und nicht nur eine super lange Lektion machen möchte. Aus diesem Grund werden wir in jedem dieser fünf Videos nur einen oder zwei Abschnitte gleichzeitig behandeln. Beginnen wir damit mit den Header- und Heldenabschnitten. Beginnen wir damit, uns bei Figma anzumelden und eine neue Designdatei zu erstellen. Ich werde meine Datei im Ordner Entwürfe ablegen, und das empfehle ich Ihnen auch, denn wenn Sie Dateien in Ihren Entwürfen erstellen, können Sie so viele Seiten und so viele Dateien wie Sie haben willst, du bist nicht auf eine bestimmte Zahl beschränkt. Wenn Sie hier Teams erstellen und Ihre Dateien so organisieren möchten, müssen Sie einen der anderen Pläne in Figma kaufen . Wenn Sie jedoch so viele Dateien erstellen möchten, wie Sie möchten, erstellen Sie sie in Entwürfen. Klicken wir auf „Neue Designdatei“, und wir nennen dies Birdhouse Restaurant Website, und benennen wir die erste Seite in Wireframes um. Nehmen Sie hier das Frame Tool oder drücken Sie „F“ auf der Tastatur, Sie können auch von hier aus darauf zugreifen und einen Rahmen zeichnen und diesen Rahmen mit einer Breite von 1.800 Pixel erstellen. Lassen Sie uns ein wenig verkleinern, Sie können hinein - oder verkleinern indem Sie auf diese Schaltfläche klicken und eine Option auswählen, oder Sie können Befehl oder Alt gedrückt halten und mit dem Maus-Scrollrad nach oben und unten, um hineinzuzoomen und zu verkleinern, nennen wir diesen Frame Wireframe. Stellen wir vorerst auch eine Höhe auf 3.000 Pixel ein, 3.000 Pixel ein, um sie größer zu machen. Öffnen wir dann unsere Projektübersicht und scrollen wir zur Seitenstruktur und überlegen, was wir in die Kopfzeile einfügen sollten. In der Regel enthält ein Website-Header eine Marken-Identifikation wie das Logo. Es enthält auch das Navigationsmenü und kann möglicherweise auch Kontaktinformationen oder Social-Media-Symbole enthalten . In unserem Fall verwenden wir Logo, Navigationsmenü und Social-Media-Symbole. Beginnen wir mit dem Logo, wir können es aus den Klassenressourcen nehmen, einfach klicken und ziehen, und wo es Auswahlfarben steht, lassen Sie uns alles schwarz machen weil Sie daran denken, im Drahtgitter, wir interessieren uns überhaupt nicht für irgendeine Farbe, also verwenden wir einfach Schwarz, Weiß und Grau. Um es uns jetzt einfacher zu machen , verschiedene Elemente auf der Seite auszurichten, verwenden wir etwas, das als Hilfslinien bezeichnet wird. Dafür müssen wir zuerst die Lineale anzeigen, es sind diese beiden oben und links auf der Seite. Sie können dies tun, indem Sie „Umschalt R“ wählen, um ihre Sichtbarkeit umzuschalten, oder Sie können unter „Ansicht“, „Lineale“ in das „Menü“ gehen . Wenn die Lineale sichtbar sind, können wir einfach so klicken und ziehen, um eine Anleitung zu erstellen. Normalerweise zeigt Figma die Position des Handbuchs genau hier an, aber aus irgendeinem Grund wird es manchmal fehlgeschlagen und es wird nicht angezeigt, und wenn Sie das Lineal positionieren möchten in einem bestimmten Abstand von den Kanten wäre es eine schnelle Möglichkeit, dies einfach in die gewünschte Größe zu bringen, sagen wir 120, und dann das Lineal zu klicken und zu ziehen bis es einrastet, genau so. Jetzt ist dieses Lineal 120 Pixel von der Kante entfernt positioniert , wir können das Gleiche hier tun, ein anderes Lineal wie folgt ziehen, und wir können jetzt dieses Rechteck löschen. Nehmen wir nun unser Logo, richten es mit dem Lineal und wir können weitermachen. Mal sehen wir uns das Navigationsmenü an. Laut der Projektübersicht ist dies die Seitenstruktur, und wir werden darauf basierende Navigationsmenüelemente erstellen . Beginnen wir mit dem Link für Home, lassen Sie uns Helvetica als Schriftart verwenden, Sie können natürlich jede gewünschte Schriftart verwenden, aber für einen Wireframe empfehle ich etwas Neutrales wie Helvetica oder Roboto vor. Machen wir diese 20 Pixel, und dann Befehl D zum Duplizieren, und klicken Sie dann, während Sie „Umschalttaste“ gedrückt halten, um die gleiche horizontale Position beizubehalten, wird dies Menü sein. Dasselbe: „Command D, „Umschalt“, klicken und ziehen, lass uns das machen, Über uns und was haben wir sonst noch? Instagram-Kontakt und Newsletter. Wir können auch „Umschalt“ und „Option“ gedrückt halten, um einen Artikel genau so zu duplizieren, also werden wir hier sagen, Instagram-Feed. Tun Sie das noch einmal, kontaktieren Sie uns, und nochmal für das Newsletter-Formular, rufen Sie diesen Abschnitt an Abonnieren. Jetzt können wir diese „Command G“ nehmen, um sie zu gruppieren. Sie können auch zu „Objekt“, „Gruppenauswahl“ gehen , also ist es Befehl G auf einem Mac, Control G auf einem PC. Dann schauen wir uns die Social-Media-Symbole an, und wir werden drei klassische Icons verwenden, und wir werden Symbole für Instagram, Facebook und Twitter anzeigen . Für die Icons öffne ich die Iconset App, dies ist eine meiner Lieblings-Apps, sie funktioniert sowohl unter macOS als auch unter Windows und ist kostenlos, und es ist eine App, mit der Sie Symbole organisieren können und ich habe hier eine Reihe verschiedener Icon-Sets hinzugefügt, und das ist wirklich einfach. Alles was ich tun muss, ist in meine Designsoftware zu klicken und zu ziehen, und das schnappt sich einfach das Symbol. Aber lasst uns weitermachen und nach Facebook, Instagram suchen , und ich verwende die Icons aus dem Set „Bootstrap Icon“, ziehe das dorthin und auch Twitter. Lasst uns das machen. Lasst uns das Minimum minimieren, lassen Sie uns diese Icons ein bisschen größer machen. In Figma können Sie auf dieses Symbol mit der Aufschrift „Proportionen beschränken“ klicken und sicherstellen, dass der Wert, den Sie für die Breite und Höhe eingeben, bei den anderen Messungen repliziert wird also lasst uns diese 32 machen. Wenn ich die Größe ändern würde, ohne dass diese Schaltfläche geklickt wird, ändert es nur die Breite oder die Höhe. Machen wir 32 von 32 und auch hier nochmal 32. Lasst uns die jetzt zusammenfassen. Wieder mache ich mir keine Sorgen um die Entfernung zwischen diesen beiden, ich tue mein Bestes, um gleiche Distanz zu schaffen, aber was die tatsächliche Zahl angeht, wird das erledigt wenn wir dazu kommen die eigentliche Entwurfsphase , also nochmal „Command G“, um diese zu gruppieren, und ich werde das so ausrichten. Ich kann sogar all dies nehmen und die Ausrichtungswerkzeuge in Figma verwenden, wo es heißt Vertikale Zentren ausrichten, klicken Sie darauf und dann mit all diesen drei ausgewählten „Command G“ erneut, und das wird unser Header sein. Lassen Sie uns als Nächstes etwas über den Heldenbereich sehen. In der Regel enthält ein Hero-Bereich die Hauptüberschrift für ein Produkt. Es enthält auch einen Aufruf zum Handeln und normalerweise einige Medien, ein Video, ein Bild, vielleicht eine Illustration. Aber da unsere Website ein bisschen anders ist, handelt es sich um eine Website für ein Restaurant, wir verkaufen eigentlich kein Produkt, also im Heldenbereich, weil es eines der ersten ist, was ein Besucher sieht, wir werden ein paar verschiedene Elemente platzieren. Wir werden das Motto des Restaurants setzen, wir werden die Geschäftszeiten platzieren und dann vielleicht ein paar Kontaktinformationen und eine Art Bild, vielleicht ein Bild aus dem Restaurant, das könnte ziemlich gut funktionieren. Beginnen wir mit dem Bild, ich nehme das „Rectangle Tool“ oder R auf der Tastatur, und ich zeichne einfach ein Rechteck wie dieses, und dies wird als Platzhalterbild fungieren in unserem Wireframe. Als nächstes schauen wir uns das Motto an, wir können zur Projektübersicht zurückkehren, unter wichtigen Punkten können wir das Modell finden, also kopieren wir das von hier, T für „Text Tool“, fügen Sie es ein. Lassen Sie uns das ein bisschen größer machen, sagen wir 70, und machen wir es mutig. Jederzeit, wenn ein Textfeld ausgewählt ist, kann ich eine der Seiten greifen und die Größe so ändern, und dann kann ich sie positionieren. Lassen Sie uns auch den Standort hinzufügen, warum nicht? Lassen Sie uns diese 20 Pixel wieder normal machen und dann diese duplizieren, fügen wir die Telefonnummer und dann die Geschäftszeiten hinzu. Wir kopieren diese einfach aus dem Projektbrief „Option Shift“, um dies zu duplizieren, doppelklicken, um in den Bearbeitungsmodus zu wechseln, und kopieren und einfügen. Lassen Sie uns das hier ein wenig beheben und fügen wir auch einen beschreibenden Text mit der Aufschrift „Geschäftszeiten“ hinzu, und lassen Sie uns das fett machen. Jetzt können wir das nehmen, gruppieren, und wir können beide nehmen und sie so ausrichten. Wie Sie sehen können, gehen wir hier sehr schnell, egal, welche Schriftarten wir verwenden, Farben, Abstände, Größenbestimmungen, nichts davon. Unser Ziel ist es gerade, den Inhalt im Wireframe zu platzieren. Wird dies die endgültige Form sein? Höchstwahrscheinlich nein. Wir können sogar bestimmte Elemente in andere Abschnitte verschieben , zum Beispiel wenn uns die Tatsache nicht gefällt, dass sich die Adresse und Telefonnummer im Heldenbereich befinden, können wir sie woanders verschieben, vielleicht irgendwie in der Kopfzeile, oder vielleicht können wir hier sogar eine obere Leiste erstellen, im endgültigen Design. Aber für das Drahtgitter können wir es in der Kopfzeile positionieren, kein Problem. Wenn du mitfolgst, bist du an der Reihe, den Header - und Heldenbereich zu verdrahten. Sobald du das getan hast, sind wir bereit, zur Essenskarte zu gehen , das kommt. 5. Wireframing: Das Speisekarte: Der nächste Abschnitt auf unserer Liste ist das Food-Menü. Werfen wir einen Blick auf die Projektübersicht und sehen, welche Art von Inhalten wir dafür erstellen müssen. Gehen wir zum Abschnitt Seitenstruktur der Projektübersicht, in dem wir etwas mehr Details zu den verschiedenen Seitenabschnitten sehen , die wir erstellen müssen. Unter der Speisekarte, dem Food-Menü, können wir sehen, dass der Kunde möchte, dass wir das Restaurantmenü auf sehr einfache und einfache Weise anzeigen das Restaurantmenü , um zu navigieren und zu lesen und wenn möglich auch die Menübeschreibung anzuzeigen. Wir haben die Menübeschreibung. Wenn wir hier nach unten scrollen , ist es dieses, also können wir es jetzt einfach kopieren. Dann halten wir dies auch griffbereit, da wir auf die Menüinhalte verweisen werden, während wir vorankommen. Dann gehen wir zurück zu Figma und lassen Sie uns hier nur ein bisschen aufräumen. Ich werde all diese Elemente auswählen, Befehl G, um sie zu gruppieren, also ist das unser Heldenbereich , den wir erstellt haben vorher, kümmern wir uns jetzt um den Menübereich. Dafür kann ich diesen Abschnitt tatsächlich duplizieren. Befehl D auf einem Mac, um es zu duplizieren, weil ich mit der Beschreibung des Food-Menüs beginnen möchte. Vielleicht benutze ich hier irgendeine Art. Wir werden sehen, wann wir zum Designteil kommen, aber ich werde ungefähr die gleiche Struktur behalten. Hier werde ich tatsächlich die Menübeschreibung platzieren , die wir gerade aus der Projektübersicht erhalten haben. Lassen Sie mich die Größe einfach ändern, so etwas. Für einen Titel können wir tatsächlich auf den Projektbrief zurückgehen, und ich erinnere mich, dass wir eine Beschreibung für das Essen hatten , das sie servierten, oder eine Beschreibung der Dienstleistungen, und es ist dieses richtig hier heißt das Servieren, Verkosten von Speisen und Getränken seit 1995. Verwenden wir das als Titel für diesen Abschnitt. Machen wir das tatsächlich ein bisschen kleiner, lass uns mit 48 Pixeln gehen, so etwas. Lasst uns das nach oben bringen. Lassen Sie uns alles gruppieren und das wird die Beschreibung des Essensmenüs sein. Jetzt schauen wir uns das eigentliche Food-Menü an. Wenn Sie sich an die Projektübersicht erinnern, möchte der Kunde das Menü auf sehr einfache und einfache Weise anzeigen , um zu navigieren und zu lesen. Wenn wir uns das eigentliche Menü ansehen, können wir sehen, dass es in ein paar Kategorien aufgeteilt ist. Wir haben Einsätze, wir haben Burger und Sandwiches, Quickies und Salate. Im Grunde fünf, wenn man Burger und Sandwiches als separate Kategorien zählt . Aber in der Speisekarte hier sind sie als eine Kategorie gebündelt. Eine Möglichkeit, dies wie von Anfang an zu tun ist mit einem Tab-Controller. Weil das Tab-Steuerelement oder eine Registerkarte ein Muster ist , das es uns ermöglicht , große Mengen an Inhalten wie ein Menü auf relativ kurzem Platz anzuzeigen . Wir könnten Tabs für jede dieser vier Kategorien verwenden, und der Inhalt jeder Registerkarte wird die entsprechenden Menüpunkte sein. Machen wir weiter und machen das, lassen Sie mich diesen Text einfach hier kopieren , lasst uns ihn so ausrichten. Wir rufen dieses Menü auf. Hier unter den Textsteuerelementen stelle ich es auf die automatische Breite ein. Erstellen wir dann die Tab-Links für die Menükategorien. Ich werde das duplizieren. Machen wir diese 21 Pixel. Die erste Kategorie ist was klebt. Lassen Sie uns das duplizieren. nächste ist Burger und Sandwiches. Lassen Sie uns einfach kopieren und einfügen, duplizieren Sie erneut die Umschalttaste gedrückt, während ziehen, um die Bewegung auf eine Achse zu beschränken. Der nächste ist was? Quickies. Endlich Salate. Großartig. Nehmen wir nun an , dass wir die Tabs öffnen werden, wobei die Einsätze aktiv sind. Wählen wir diese drei und wechseln wir von fett zu regulär. Nur um hervorzuheben, dass dies das aktive Tab-Steuerelement ist, spielt es keine Rolle. Wir können diesen mutig und diesen unregelmäßig machen. Wir wissen nicht einmal, ob wir Tabs verwenden werden , wenn wir das eigentliche Design erstellen. Das ist nur eine Idee. Nehmen wir eigentlich an, dass ja, wir haben die Quickies ausgewählt und wir möchten einige Artikel von Quickies anzeigen. Lass uns weitermachen und das machen. Stattdessen greifen wir Buffalo Wings das Rechteckwerkzeug oder R auf der Tastatur und erstellen wir einen Bildplatzhalter, etwa so. Es muss nicht genau sein. Dann füge ich den Text hier und dann den Inhalt ein. Auch hier ist mir der Abstand oder die Größenbestimmung egal, es ist nur eine rohe Skizze. Ich denke, dass der Preis möglicherweise separat aufgeführt werden sollte . Lass uns das machen. Das ist ein schnelles Drahtmodell eines Elements im Menü, lasst uns weitermachen und das gruppieren. Befehl D zum Duplizieren, dann Shift, Drag, etwa so, und lass uns das noch einmal machen. Richten wir es so aus und machen wir die anderen. So süße Chilihunde, lass uns das machen. Das waren 6 Dollar und dann Pommes Frites 3 Dollar, lassen Sie uns das kopieren. Das ist eine Vorstellung davon, wie wir dieses gesamte Menü auf unserer Seite darstellen können . Wir haben Registerkarten, die die vier Kategorien von Menüpunkten für Lebensmittel darstellen . Dann enthält jede Registerkarte die entsprechenden Elemente. Im Drahtgitter würde nur ein Beispiel angezeigt. Wir gehen nicht jeden einzelnen Menüinhalt durch. Das ist Zeitverschwendung. Das können wir später machen, wenn wir zum Designteil kommen. Wenn wir solche Tabs verwenden, müssen wir nicht einmal den gesamten Inhalt hinzufügen , da dieser müssen wir nicht einmal den gesamten Inhalt hinzufügen , da sowieso versteckt wird, das geschieht auf der Entwicklungsseite der Dinge. Auf der anderen Seite, wenn wir kein Tab-Steuerelement wie dieses verwenden, und stattdessen wählen wir den gesamten Inhalt des Lebensmittelmenüs an, dann, ja, das endgültige Design enthält alle Inhalte, die hier aufgeführt sind. Aber wir überqueren die Brücke, wenn wir dran sind. Moment ist dies in Bezug auf das Wireframing mehr als genug. Lassen Sie uns abschließend alle diese Elemente auswählen. Befehlen Sie G, alles zu gruppieren und jetzt haben wir eine nette Essensmenü-Beschreibung, dann das eigentliche Food-Menü. Jetzt ist es an der Zeit zu üben. Erstellen Sie den Food-Menü-Teil in Ihrer Version des Drahtgitters, damit wir mit der Klasse fortfahren können. Wenn du das schon gemacht hast, ist das großartig, bedeutet das, dass wir Fortschritte machen. Lassen Sie uns nun die About - und Instagram-Abschnitte behandeln. 6. Wireframing: Die Bereiche Über und Instagram: Wenn Sie sich erinnern, hieß es in der Projektübersicht , dass wir einen Abschnitt mit Informationen über das Restaurant und einen weiteren mit Instagram-Fotos benötigen Informationen über das Restaurant und . Lassen Sie uns diese jetzt erstellen. Lassen Sie uns unsere Projektübersicht öffnen und wir werden tatsächlich wieder nach oben scrollen , wo wir einige Details zu den beiden Abschnitten sehen einige Details , die wir erstellen müssen. Über uns sagt der Kunde, dass wir eine kleine Beschreibung dessen zeigen möchten was unser Restaurant ist, und vielleicht ein oder zwei Bilder im Restaurant zeigen. Hier haben wir im Grunde einen Titel über uns oder über das Restaurant, Textbeschreibung und vielleicht ein oder zwei Bilder, Bilder. Dann Fotos von Instagram. Wir müssen ein paar Bilder, Instagram-Fotos und dann einen Follow-Button anzeigen . Cool. Gehen wir zurück zur allgemeinen Beschreibung und wir werden tatsächlich viele der Texte von hier aus verwenden, aus dem Brief dafür, lassen Sie uns diesen Teil kopieren , wir werden einfach die Elemente wiederverwenden weil es viel schneller gehen wird. Für diesen Abschnitt werden wir es im Grunde wegen Birdhouse Bar and Grill nennen . Hier werden wir ein oder zwei Bilder haben. Es kommt wirklich darauf an. Wir können es so machen. Vielleicht haben wir zwei Bilder nebeneinander, wir werden sehen und was den Text hier angeht, lasst uns kopieren und einfügen. Das ist der Text, den wir verwenden werden. Das ist der Abschnitt „About“. Ich schätze, wir können das ein bisschen nach oben bringen . Es spielt keine Rolle. Dies ist nur der Perfektionist in mir Zeit verschwendet, um ehrlich zu sein. Wir können diese Gruppe auswählen und wir sind fertig mit dem Abschnitt About. Jetzt schauen wir uns etwas über das Instagram an. Bevor wir das tun, wählen wir den übergeordneten Frame aus. Sehen Sie, wie wir fast den unteren Teil, die untere Kante, erreicht haben, also lassen Sie uns die Größe ändern, damit wir viel mehr Platz zum Arbeiten haben. Verwenden wir hier 5.000 Pixel. Großartig. Jetzt schauen wir uns die Instagram-Fotos an. genau das, kopieren wir dieses Element hier. Übrigens, hier ist ein kurzer Tipp, wenn Sie mit Elementen arbeiten , die sich innerhalb von Gruppen oder Frames befinden. Beachten Sie, dass, da es sich um eine Gruppe handelt, wenn ich mit der Maus auf ein bestimmtes Element fahre und klicke, wenn ich mit der Maus auf ein bestimmtes Element fahre und klicke, die Gruppe auswählt Um ein bestimmtes Element aus der Gruppe auszuwählen, kann ich doppelklicken und in die Gruppe eintreten. Sie können sehen, dass ich von der Auswahl der Gruppe 13 zur Auswahl von Gruppe 12 übergegangen bin . Wenn ich erneut doppelklicke, gehe ich in Gruppe 6 und so weiter und so weiter, bis ich zu dem gewünschten Element komme. Wenn ich beispielsweise nichts ausgewählt habe, um zum Beispiel dieses Bild auszuwählen, kann ich doppelklicken, erneut doppelklicken und dann einfach die gesamte Baumstruktur durchqueren um zum Element zu gelangen Ich will es. Aber es gibt tatsächlich eine schnellere Möglichkeit, Command auf einem Mac zu halten , ich denke, auf einem PC ist es Control. Ich halte den Befehl gedrückt und bewege den Mauszeiger auf das Element, das ich auswählen möchte, und ich kann es einfach sofort darauf klicken und es wählt es durch die gesamte Baumstruktur aus , die ich hier im Ebenenbedienfeld habe. Unabhängig davon, wie tief es verschachtelt , kann ich einfach den Befehl gedrückt halten , darauf klicken und es so auswählen. Es ist super einfach. Klicken Sie nun für den Instagram-Bereich gedrückter Befehlstaste auf dieses Element, um es auszuwählen. Befehl C, um es zu kopieren. Ich klicke nach draußen, füge dann ein und lass uns diese Fotos von Instagram anrufen. Wählen wir auch dieses Rechteck aus. Befehl C, klicken Sie außerhalb des Befehls V. Manchmal wird das einfach an derselben Stelle eingefügt, aber Sie können es verschieben und lassen Sie uns den Fotoabschnitt erstellen. Schon wieder. Ich werde es einfach sehen, so etwas wie diesen Befehl D zu duplizieren. Dann können wir diese drei auswählen und hier im Inspector gehen , wo es mehr Optionen gibt. Ich kann den horizontalen Abstand verteilen. Dadurch wird ein gleicher Abstand zwischen diesen beiden Elementen geschaffen. Ist das die endgültige Menge an Speicherplatz? Definitiv nicht. Aber für ein Drahtgitter wird es gut gehen. Wir haben eine Reihe mit drei Fotos. Lassen Sie uns das duplizieren. Ziehen Sie es nach unten, um die zweite Zeile zu erstellen. Wählen Sie dann einfach alle diese Befehle G aus, um sie zu gruppieren, sodass es für uns einfacher ist, sie bei Bedarf zu verschieben , und in Figma funktioniert Command Z genauso für das Rückgängigmachen. Wenn Sie eine Änderung rückgängig machen möchten, führen Sie einfach Befehl oder Steuerung Z aus, genau wie bei jeder anderen App. Wenn Sie sich erinnern, sagte der Projektbrief auch etwas über einen Follow-Button aus. Lasst uns weitermachen und das hinzufügen. Schnappen wir uns das Textwerkzeug. Klicken Sie auf. Wir werden sagen , folge uns. Lassen Sie uns 21 Pixel fett machen. Schnappen wir uns auch ein Instagram-Symbol. Wählen wir hier das übergeordnete Element aus, Befehl C, das kopiert werden soll. Ich würde diesen Befehl V auswählen, um ihn hier einzufügen , und lasst uns dies in der Mitte ausrichten etwa so, und dann mit dem Rechteckwerkzeug oder R auf der Tastatur zeichnen wir wie einen Schaltflächenhintergrund. Beachten Sie, dass dies derzeit auf unserem Text- und Instagram-Symbol steht. Um es weiter zurück im Ebenenbedienfeld zu verschieben , können wir es so anklicken und ziehen, oder wir können es mit Befehl und linker eckiger Klammer einmal, zweimal oder dreimal nach unten verschieben . Dann können wir die rechte Klammer benutzen , um in die andere Richtung zu gehen. Befehl linke Klammer, um es rückwärts zu senden, Befehl rechte eckige Klammer, um sie vorwärts zu senden. Dies ist eine einfache Möglichkeit, die Reihenfolge der Elemente oder die Reihenfolge der Ebenen in Figma zu manipulieren . Nachdem wir das erledigt haben, wählen diese drei Command G aus und richten wir es einfach so aus. Beachten Sie, dass Figma bei der Ausrichtung sehr hilfreich ist, da es uns all diese Anleitungen und Smart Guides gibt uns all diese Anleitungen und Smart Guides gibt, die uns sagen : „Hey, Ihr Element ist gut mit den anderen Elementen ausgerichtet es umgibt „, was ziemlich cool ist. Wählen wir nun diese drei Elemente aus. Befehlen Sie G, sie zu gruppieren, und damit ist der Instagram-Bereich fertig. Alles klar dann. Wie üblich ist dies Übungszeit Wenn Sie also die Abschnitte About und Instagram nicht erstellt haben , machen Sie es weiter. Sobald Sie das getan haben, ist es an der Zeit in den Kontaktbereich zu wechseln. 7. Wireframing: Das Kontaktformular: Nun, wir haben fast mit einem Wireframing fertig. Es gibt nur zwei weitere Abschnitte, die wir erstellen müssen , und der erste ist das Kontaktformular. Um loszulegen, werfen wir zunächst einen Blick auf die Projektübersicht. Unter dem Kontaktformular bittet uns der Kunde, ein Formular zu erstellen, mit dem Personen Nachrichten senden oder Reservierungen vornehmen können , und er möchte auch eine Karte, die den Standort festlegt. Lasst uns weitermachen und das machen. Ich scrolle nach oben und kopiere diesen Abschnitt, da dieser eine Struktur hat, die wir verwenden können. Ich füge es einfach so ein. Nennen wir diesen Kontakt. Lassen Sie uns diesen Text ein bisschen kleiner machen, wie 48. Ich werde diese drei Elemente tatsächlich behalten, weil es sich um einen Kontaktbereich Es ist sinnvoll, dass Adresse , Telefonnummer und Geschäftszeiten nicht nur im Heldenbereich vorhanden sind . Wir werden das haben, dies und das. Wir werden hier eine Karte haben. Lassen Sie uns das ein bisschen größer machen, vielleicht um es vom Rest zu unterscheiden, können wir es etwas dunkler machen und warum fügen Sie nicht einen Text hinzu, in dem Map steht. Beachten Sie, wie grob die Skizze ist, es sind genau welche Texte, ihr nur ungestylter Text auf grauen Hintergründen. Das ist das Schöne an einem Drahtgitter, wir müssen nicht auf solche Details achten. Es ist nur eine schnelle Möglichkeit, den Inhalt zu platzieren. Wir wissen, wofür wir entwerfen sollten. Schließlich ist das Letzte, was hier ist, ein Kontaktformular zu erstellen. Lassen Sie sich dafür die Gruppierung tatsächlich aufheben und wir gruppieren es später noch einmal. Lassen Sie uns ein Rechteck erstellen. Das wird das Forumsfeld sein, so etwas und dann der Text darin, sagen wir Namen, gruppieren Sie das. Wir werden das super einfach halten. Wir werden nach einer E-Mail-Adresse fragen. Wir werden nach einer Telefonnummer fragen, und wir werden nach der eigentlichen Nachricht fragen , und natürlich muss dies etwas größer sein, und am Ende brauchen wir einen Knopf. Wir haben hier tatsächlich einen Button erstellt. Schnappen wir uns das und fügen wir es hier ein. Lassen Sie uns das Symbol löschen und wählen Sie den Text aus , um eine Nachricht zu senden. Ich kann den Button vergrößern, wenn wir wollen, und das ist nur ein unbedeutendes Detail. Dann können wir all diese Befehle G ergreifen, um sie zu gruppieren , und dann können wir all das nehmen, G es erneut befehligen, um es zu gruppieren, also ist es jetzt eine Gruppe , in der wir uns frei bewegen können und damit, das Kontaktformular oder der Kontaktbereich ist fertig. Wir haben einen Titel angezeigt, wir haben eine Restaurantadresse, Telefonnummer, Geschäftszeiten, ein Kontaktformular wie der Kunde gewünscht hat, und auch eine Karte angezeigt Geschäftszeiten, ein Kontaktformular wie der Kunde gewünscht hat, . Dies ist ein Platzhalter für eine Map, aber das endgültige Design wird eine Map haben. Dann Zeit zum Üben. Wie gesagt, wir sind fast fertig mit dem Wireframing. Erstellen Sie den Kontaktbereich, damit Sie über Ihre Version des Drahtgitters auf dem Laufenden Ihre Version des Drahtgitters auf dem und dann bereit sind, weiterzumachen. Als nächstes und der letzte Bereich, den wir verdrahten müssen, ist die Fußzeile. 8. Wireframing: Fußzeile: Wir haben die letzte Wireframing-Lektion erreicht , in der wir uns um die Fußzeile kümmern werden. Lasst uns gehen. Wenn es um die Fußzeile geht, haben wir keine genaue Richtung vom Client, aber normalerweise enthält die Fußzeile Informationen, die nirgendwo anders auf die Seite gehören. Eine Sache, die wir unserer Seite bisher nicht hinzugefügt haben , ist ein Newsletter-Formular und die Fußzeile ist tatsächlich der perfekte Ort dafür. Wir fügen also das Newsletter-Formular hinzu, aber auch einige andere typische Inhalte, die Sie in einer Fußzeile wie Copyright-Informationen finden . Wir fügen das Logo auch noch einmal hinzu. Dies ist die Art von Inhalt , den Sie normalerweise in einer Fußzeile finden. Sie können auch Navigationslinks hinzufügen, wenn Sie das möchten. Sie können eine Schaltfläche „Zurück nach oben“ hinzufügen. Es hängt wirklich von der Website ab. Sie können es so komplex oder so einfach machen, wie Sie möchten, aber in unserem Fall werden wir es sehr einfach halten. Beginnen wir mit diesem Newsletter-Formular. Noch einmal werde ich die Größe unseres Rahmens auf, sagen wir, 6.000 Pixel erhöhen die Größe unseres Rahmens auf, sagen wir, , was uns hier genug Platz geben sollte. Lassen Sie uns damit beginnen, diesen Text zu kopieren, und während wir dabei sind, können wir ihn genauso gut automatisch breit machen. Das auch hier. Jetzt mal sehen, haben wir noch andere? Ja, das tun wir. Wenn Sie eine feste Breite für ein Textabschnitt wie dieses festlegen , bedeutet dies nur, dass wenn Sie mehr Text als die Grenzen hinzufügen, er einfach zur nächsten Zeile überläuft. Wenn Sie es jedoch auf die automatische Breite einstellen würden, wird das nicht auf einer separaten Linie überlaufen. Stattdessen wird es einfach die Größe ändern und seine Breite vergrößern, um es an alle Inhalte anzupassen. Für Titel wie diesen ist es mehr als in Ordnung, sie auf die automatische Breite einzustellen. Wenn es beispielsweise um Absätze wie diesen geht, bei denen der Text an einem bestimmten Punkt angehalten werden soll , natürlich können Sie ihn natürlich auf die automatische Höhe einstellen, was bedeutet, dass er eine feste Breite und ihre Höhe wird durch seinen Inhalt bestimmt. Aber bei solchen Dingen, bei denen es sich um Titel handelt, können Sie es auf die automatische Breite einstellen, kein Problem. Es sei denn, der Titel ist sehr lang, in diesem Fall möchten Sie ihn möglicherweise auf die automatische Höhe einstellen. Aber dann kümmern wir uns um das Newsletter-Formular. Hier sagen wir „Abonnieren Sie unseren Newsletter“. Schnappen wir uns auch eines dieser Textelemente und machen wir es so groß. Im Inneren fügen wir einen Untertitel mit der Aufschrift „Melden Sie sich für unseren Newsletter an, um mehr über Neuigkeiten und besondere Ereignisse zu erfahren “. Dann haben wir hier ein einfaches Formular, und da wir bereits ein Formular im Kontaktbereich erstellt haben, kopieren wir diese beiden Elemente und bringen sie nach draußen. Lassen Sie uns den Text hier ändern, um uns zu abonnieren. Gruppieren Sie dies, verschieben Sie es nach oben und wählen Sie dann Gruppe aus, und das ist unser Newsletter-Abonnementformular. Jetzt, für den Rest der Fußzeile, ist es sehr einfach zu machen. Wir werden einen Copyright-Text mit der Aufschrift Copyright 2021 Birdhouse Bar & Grill hinzufügen . Alle Rechte vorbehalten. Lassen Sie uns diese 21 Pixel so gestalten, dass sie mit dem Rest unseres Textes übereinstimmen , und dies sollte auch 21 sein. Nicht dass es zu viel wichtig ist, aber es ist einfach etwas, was wir gerade tun können. Einundzwanzig hier. Mal sehen, das sind alle 21, also sind wir gut. Dann können wir das einfach hier ausrichten, und dann können wir wieder nach oben gehen. Wir können uns das Logo schnappen und dann wieder nach unten scrollen und einfügen. Wir können das Logo im Drahtgitter etwas verkleinern. Dann ist das der Fußzeilenbereich. Wählen wir diese ganze Gruppe aus und dann können wir den übergeordneten Frame auswählen und die Größe einfach so ändern. Damit ist unser Drahtgitter jetzt fertig. Natürlich ist es schwarz-weiß, man könnte denken, dass „Oh, das sieht schrecklich aus.“ Nun, natürlich sieht es schrecklich aus, es ist eine Skizze. Es hat nicht unsere endgültige Typografie, unsere endgültigen Farben, unseren endgültigen Abstand, Größenbestimmung, nichts davon. Das Drahtgitter ist einfach eine Skizze, und es ist der Zweck, wie ich in den vorherigen Lektionen gesagt habe, den Inhalt zu präsentieren. Das machen wir sehr grob, weil es uns ermöglicht, sehr schnell zu arbeiten. Wenn wir zum Design kommen, nehmen wir natürlich jeden Abschnitt und wir werden anfangen, die Schriftarten, die Farben hinzuzufügen , wir richten Elemente anders aus, wir entscheiden, ob wir diese Symbole verwenden möchten oder vielleicht nicht? Vielleicht wollen wir überhaupt keine Icons verwenden. Wir werden sehen, wann wir zum Designteil kommen. Aber im Moment ist dies unser fertiges Drahtgitternetz. Wie du es wahrscheinlich schon gewohnt bist, ist es Zeit zu üben. Wenn du mit mir zusammengearbeitet hast, solltest du ein fertiggestelltes Drahtmodell haben. Wenn nicht, mach das jetzt, damit du bereit bist, mit der Klasse weiterzumachen. Jetzt, seit wir mit dem Wireframing fertig sind, lassen Sie uns eine kurze Zusammenfassung der letzten fünf Lektionen machen. Wireframing ist wie Skizzieren, und Sie können es digital oder mit Stift und Papier machen. In einem Wireframe können Sie alle gewünschten Schriftarten verwenden, aber ich empfehle neutrale wie Helvetica oder Roboto. Ein Drahtgitter sollte in Graustufen erstellt werden. Farben gehören nicht in diese Phase des Prozesses. Abstand und Größe sind zu diesem Zeitpunkt nicht endgültig. Versuchen Sie also nicht, Ihr Wireframe-Pixel perfekt zu machen, es ist Zeitverschwendung. Da das aus dem Weg ist, können wir den eigentlichen Designprozess starten, und wir werden damit beginnen, die Typografie zu definieren. 9. Definieren der Typografie: In dieser Lektion beginnen wir offiziell mit dem Designprozess. Wir machen das, indem wir zuerst die Typografie definieren. Das bedeutet die Schrift oder Schriften. Wir verwenden die Typskala und den Buchstabenabstand, die Schriftgewichte, die Zeilenhöhen usw. Jetzt fangen wir so an, weil auf einer typischen Webseite der Großteil des Inhalts Text ist. Die Typografie wird die größte visuelle Wirkung haben. Außerdem finde ich es sehr einfach, so zu arbeiten , weil es den Workflow vereinfacht. Sicher, Sie können später Änderungen an der Typografie vornehmen, aber wenn Sie dies zuerst angehen erhalten Sie eine solide Grundlage, auf der Sie aufbauen können. Bei der Auswahl der Schriften für ein Projekt wie dieses müssen mehrere Faktoren berücksichtigt werden. Während dies ein Thema ist , das tatsächlich für eine ganze separate Klasse geeignet weil es so viel zu besprechen gibt, werde ich versuchen, den Prozess zu vereinfachen und meine Entscheidungen im Grunde zu erklären. Ich glaube, es läuft alles auf den Zweck des Designs und das Gefühl hinaus, das Sie den Besuchern vermitteln möchten . Am einfachsten ist es , den Ton oder die Stimmung der Website herauszufinden , die Sie entwerfen möchten. Ist es lässig oder formeller? Ist es ernster oder mehr spielerisch? Sobald Sie diese Frage beantwortet haben, haben Sie eine viel klarere Richtung. Um dann den Ton und die Stimmung der Website zu entdecken , die wir erstellen möchten, schauen wir uns die Projektübersicht genauer an. Wenn Sie sich an die vorherigen Lektionen erinnern, haben wir am Ende einige Designrichtlinien. Jetzt ist der perfekte Zeitpunkt, um sich diese anzusehen. Der Kunde möchte, dass wir eine modern aussehende Website entwerfen. Beachten Sie das Wort „Modern“. Dies ist eine wichtige Information . Auch wenn es sich um ein Familienunternehmen das bereits im Jahr '95 eröffnet wurde, möchten die Eigentümer, dass wir uns anpassen und mit der Neuzeit Schritt halten. Sie möchten auch, dass die Website freundlich und nicht sehr schick aussieht . Sie gehören nicht zu diesen superteuren High-End-Restaurants. Beachten Sie die Keywords hier, freundlich, nicht sehr schick. Das Design muss jüngere und ältere Menschen gleichermaßen ansprechen. Auf dieser Grundlage können wir anfangen, uns eine Meinung darüber zu bilden , welche Schriften wir verwenden sollten. Es gibt zwei Hauptkategorien, aus denen wir wählen können. Wir haben Serifen und Sans Serifs. Lass mich dir zeigen, wie beide aussehen. Dafür öffne ich Google Fonts, einer der besten Dienste, die wir derzeit haben, um hochwertige Schriftarten zu erhalten. Zum Beispiel Playfair Display. Jetzt denke ich, dass wir alle mit dieser Art von Schriftart vertraut sind. Die Kategorie heißt deswegen hier Serif . Diese Dekorationen, die Sie auf den Buchstaben sehen, werden Serifen genannt. So sehen Schriften am Anfang aus. Diese gelten als klassischere Schriftarten. Wenn wir uns dagegen einige serifenlose Schriftarten ansehen, was im Grunde ohne Serifen bedeutet, und nach einigen davon suchen lassen, zum Beispiel Roboto, werden Sie feststellen, dass bei den sans-Serien wir haben diese Dekorationen nicht mehr auf den Charakteren. Diese sind geometrischer, sie sehen moderner aus, weil sie diese Eigenschaften nicht mit den Serifenschriftarten teilen. dann versuchen, Wenn Sie dann versuchen, sich zwischen Serifs und Sans-Serien zu entscheiden , sollten Sie sich an Folgendes erinnern Sans Serifs, zum Beispiel Roboto, sind moderner und sie sind mehr freundlich, sie sind lässiger, sie sehen geometrischer aus. Serifen hingegen sind, wie die, die ich Ihnen zuvor gezeigt habe, eher auf der ernsten Seite. Sie sind klassischer, eleganter und rufen verschiedene Gefühle hervor. Sie würden eine Serifenschrift auf der Website verwenden, die Sie Eleganz vermitteln oder ernster aussehen möchten , nennen wir es. Wenn Sie eine verspieltere oder modern aussehende Website wünschen dann würden Sie sich für eine Serifenlose entscheiden, wie die, die ich Ihnen hier zeige. Das ist auf den Punkt gebracht. Wie gesagt, dieses Thema wäre wahrscheinlich für eine ganze Klasse geeignet, aber im Moment möchte ich Ihnen nur eine sehr verdichtete Version geben . Basierend auf dem, was ich gerade gesagt habe, und basierend auf den Designrichtlinien, die uns zur Verfügung gestellt wurden, weil der Kunde eine modern aussehende Website möchte und er möchte, dass die Website freundlich und nicht sehr schick aussieht, haben wir kann sofort eine Wahl bezüglich der Schrift treffen. Wir benutzen eine serifenlose Schrift. Der, den ich für dieses Projekt ausgewählt habe heißt Poppins. Lass es mich dir einfach zeigen. Dieser hier ist kostenlos bei Google Fonts erhältlich und so sieht es aus. Es gibt ein paar Gründe, warum ich mich für Poppins entschieden habe. Zuallererst ist es eine Serifenlose. Es sieht modern aus, es ist sehr freundlich, aber auch, und das sind sehr wichtige Dinge, es sieht sehr gut aus bei großen Größen wie dieser, aber auch in kleineren Größen. Zum Beispiel können wir es sowohl für den Haupttext, aber auch für Überschriften, für Titel verwenden . Der zweite Grund ist, dass es eine große Auswahl an Stilen oder Gewichten zur Auswahl hat. Es geht von dünn, was so aussieht, bis hin zu Schwarz, was so aussieht. Eine vielseitige Schriftart zu sein und all diese Optionen in Bezug auf das Schriftgewicht zu haben all diese Optionen in Bezug , macht sie sehr nützlich, insbesondere auf Websites, auf denen wir eine einzige Schrift verwenden , wie wir es hier haben. Ein weiterer Grund ist natürlich die Tatsache, dass es kostenlos genutzt werden kann. Jede Schriftart von Google Fonts ist auch in kommerziellen Projekten kostenlos zu verwenden , was fantastisch ist. Das bedeutet, dass unser Kunde nicht für eine Schrift bezahlen muss. Schließlich ist Poppins auch in Bezug auf Lesbarkeit und Lesbarkeit sehr gut. Dies sind alles Faktoren, die Sie bei der Auswahl einer Schriftart für Ihr Projekt berücksichtigen müssen. Zusammenfassend verwende ich Poppins für die gesamte Website, also eine einzige Schrift. Aber vielleicht fühlen Sie sich von etwas anderem angezogen . Es ist völlig in Ordnung, wenn Sie eine andere Schrift für Ihre Version des Projekts verwenden möchten. Ich empfehle Ihnen, Google Fonts zu verwenden, da es einen kostenlosen Service handelt und Sie hier viele hochwertige Schriftarten finden . Wenn Sie jedoch nach einer Alternative suchen und beispielsweise die Adobe Creative Cloud verwenden , können Sie Adobe Fonts verwenden. Dies kann unter fonts.adobe.com aufgerufen werden, und hier können Sie alle Schriftarten durchsuchen. Sie können sie nach Klassifizierungseigenschaften und Tags filtern. Sie können nur nach geometrischen Schriftarten suchen und das wird Ihnen all dies geben. Sie können sogar Poppins direkt hier bei Adobe Fonts finden. Dies ist eine weitere großartige Ressource, jedoch nicht kostenlos ist, während Google Fonts kostenlos ist. Es hängt wirklich von dir ab und was denkst du wird am besten aussehen. Aber für dieses Projekt werde ich Poppins benutzen. Jetzt, da wir wissen, welche Schrift wir verwenden werden, wenden wir sie zusammen mit allen anderen typografischen Merkmalen wie Zeilenhöhe, Schriftgröße, Schriftgewicht, und so weiter. Gehen wir in Figma auf Seiten. Erstellen Sie eine neue Seite. Wir können dieses Design nennen, nur damit wir eine gewisse Trennung zwischen den Wireframes und dem endgültigen Design haben . Kopieren wir das Drahtgitter und fügen wir das in unsere neue Seite ein. Jetzt haben wir ein nettes Exemplar und wir werden daran arbeiten. Dann rufen wir zunächst diese großen Bildschirme auf. Sie sich gerade keine Sorgen um diesen Namen, er gibt uns nur einen Hinweis auf die Größe des Bildschirms. Jetzt müssen wir als erstes alle Textelemente auswählen und ihre Schriftfamilie in Poppins ändern . Natürlich müssen Sie dies auf Ihrem System installiert haben , also wenn Sie dies nicht tun, ist es wirklich einfach. Sie können die Schriftarten einfach in Google Fonts öffnen und dann einfach auf „Familie herunterladen“ klicken. Es wird Ihnen alle Schriftdateien geben, die Sie dann auf Ihrem System installieren können. Ich werde das nicht durchgehen, weil ich davon ausgehe, dass Sie wissen , wie man eine Schriftart installiert. Sobald Sie Poppins installiert haben, gehen wir zurück zu Figma. Wenn Sie im Browser arbeiten, sehen Sie die Schriftart möglicherweise nicht sofort In diesem Fall müssen Sie die Seite aktualisieren oder neu laden. Dann wählen wir dieses Element aus. Hier ist ein kurzer Tipp, Sie können zu Bearbeiten gehen und alle mit derselben Schriftart auswählen. Das wird alle Elemente auswählen , die Helvetica verwenden und wir werden einfach so zu Poppins wechseln. Mal sehen, wir brauchen immer noch die Überschriften. Diese verwenden Helvetica fett, daher wurden sie auch nicht ausgewählt. Aber lass uns das jetzt machen. Ich wähle alle mit derselben Schriftart aus. Lass uns die in Poppins umwandeln und mal sehen, ob wir noch etwas haben, das ausgelassen wurde. Ich halte einfach den Befehl gedrückt und wähle jedes Textelement aus, nur um sicherzustellen , dass es die richtige Schrift verwendet. Wie Sie im Inspector sehen können, benutzen sie alle Poppins. Natürlich können Sie das auch visuell sehen, aber ich stelle lieber sicher, dass es sich um einen einfachen Prozess handelt. Poppins, Poppins, Poppins. Was ist mit diesen? Richtig. Poppins. Es scheint, als hätten wir sie alle bekommen. Das ist Schritt 1, der die Schriftfamilie ändert. Lassen Sie uns als Nächstes an den Schriftgrößen arbeiten, und hier kommt eine Typskala ins Spiel. Hier ist die Sache, wenn Sie entscheiden welche Schriftgröße Sie für Ihr Designprojekt verwenden möchten, gibt es zwei Möglichkeiten, dies zu tun. Eine besteht darin, es zu sehen und zu sagen, okay , nun, vielleicht wird dieser besser aussehen, ein bisschen größer. Dieser ist vielleicht ein bisschen kleiner wie 46. Aber die Sache mit diesem Ansatz ist, dass es ziemlich lange dauern kann. Stattdessen empfehle ich Ihnen, eine Typskala zu verwenden , und eine Typskala sieht ungefähr so aus. Ich öffne ein Werkzeug namens Type Scale, und eine Skala beginnt immer mit einer Basisgröße und einem Verhältnis. Es geht in etwa so. Sie beginnen mit der Basisgröße und multiplizieren diese mit dem Verhältnis, und Sie erhalten einen weiteren Schritt in der Skala. Sie nehmen diesen Wert, multiplizieren ihn mit der Skala oder dem Verhältnis, und Sie erhalten den nächsten Schritt und den nächsten und nächsten und den nächsten können Sie sogar so viele Schritte hinzufügen, wie Sie möchten. Wie Sie sehen können, ist dies wie eine Fortschreitung der Schriftgrößen von groß zu klein oder von klein zu groß. Das ist es, was eine Typskala im Grunde genommen ist. Weil Sie es so machen, müssen Sie die Schriftgrößen nicht mehr erraten. Sie sind alle gut für Sie angelegt, basierend auf dieser Anfangsgröße und dem Verhältnis. Je nach Verhältnis sieht Ihre Waage so aus oder so oder so. Je größer die Skala, desto größer der Kontrast zwischen jedem Schritt in der Skala. Bei einem großen Drittel im Verhältnis von 1,250 haben wir einen relativ geringen Kontrast zwischen dieser Größe und dieser Größe oder zwischen dieser Größe und dieser Größe. Aber wenn wir zum Goldenen Verhältnis gehen, haben wir einen viel größeren Unterschied zwischen dieser Größe und dieser Größe, zwischen diesem und diesem und und so weiter und so weiter. An dieser Stelle kannst du einfach dieses Tool benutzen, das ich wärmstens empfehle, ich benutze es ständig. Sie verwenden es, um Ihre eigene Typenskala zu erstellen. Dies gibt Ihnen genau die Schriftgrößen, die Sie benötigen. Für unser Projekt weiß ich mit Sicherheit, dass ich mit einer Basisgröße von 21 Pixeln beginnen möchte . Dies ist die Größe des Haupttextes. Dies ist im Grunde die Größe eines normalen Absatzes. Ich möchte eine größere Schriftgröße als normal. In einem Browser beträgt die Basisschriftgröße normalerweise 16 Pixel, daher ist 21 ein bisschen größer. Aber ich mache das absichtlich, weil ich möchte, dass der Text lesbar ist. Wenn Sie sich an den Projektbrief erinnern, Design gemäß den Designrichtlinien muss unser Design gemäß den Designrichtlinien jüngere und ältere Menschen gleichermaßen ansprechen. Ältere Menschen werden definitiv eine größere Schriftgröße zu schätzen wissen , da sie leichter lesen können. Deshalb entscheide ich mich dafür, die Typskala bei 21 Pixeln zu starten. Jetzt müssen wir uns für die Skala oder das Verhältnis entscheiden , das wir verwenden werden. Ich denke, für diese Art von Projekt wird das perfekte vierte Verhältnis von 1,333 genau das sein, was wir brauchen, da wir zwischen jedem Schritt in der Skala ein bisschen Kontrast haben , aber es ist nicht übertrieben wie zum Beispiel das Goldene Verhältnis. Das ist viel zu viel. Für diese Art von Design für das, was wir in diesem Projekt tun, denke ich, dass der perfekte vierte uns alles gibt, was wir brauchen. Sobald wir uns für die Basisschriftgröße und den Maßstab entschieden haben und unsere typografische Skala herausgefunden haben, können wir zu Figma zurückkehren und eine andere Seite erstellen, und normalerweise nenne ich diese Assets. Hier habe ich normalerweise mein Logo. Aber ich erstelle auch gerne einen Rahmen, der anzeigt, dass alle Schriftgrößen und Zeilenhöhen verwendet werden. Das wird meinen Job später noch viel einfacher machen. Lasst uns einen Rahmen erstellen. Die Größe spielt keine Rolle. Ich fange nur mit einem Text an , auf dem 21/, sagen wir jetzt 32, und ich werde erklären, was diese Zahlen machen. Einundzwanzig Pixel ist meine Basisschriftgröße. Es ist das hier. Was ich mache ist, dass ich tatsächlich den Text 21 mache. Ich werde auch Poppins verwenden , um dies anzuzeigen, weil es mir die Möglichkeit gibt, zu sehen, wie Text mit meiner gewählten Schrift aussieht. Aber ich werde regulär verwenden, und dann ist der zweite Wert die Zeilenhöhe. Jetzt ist hier das Coole an Figma, es berechnet automatisch die Zeilenhöhe für mich basierend auf einem vordefinierten Verhältnis und die Zeilenhöhe ist die Höhe einer Textzeile. Zum Beispiel, wenn ich hier einen textilen habe und sage: Hallo, das ist ein mehrzeiliger Text. Stellen wir dies auf die automatische Höhe ein. Beachten Sie, dass die Auswahl bei der Auswahl eines Elements oder eines Wortes die genaue Höhe dieser Textzeile angibt. Wenn ich dies von 32-48, dieser Auswahl, ändern würde , wird diese Zeilenhöhe jetzt größer sein als diese Zeilenhöhe, die immer noch auf 32 Pixel eingestellt ist. Dies ist wichtig, da Zeilenhöhe die Lesbarkeit beeinflusst. Sie möchten keine zu kleine Zeilenhöhe. Wenn ich zum Beispiel eine Zeilenhöhe von acht Pixeln festlegen würde, wäre dies zu klein. Sie können den Text einfach nicht lesen , da sich die Textzeilen überlappen. Was ist, wenn ich diese 52 Pixel mache? Nun, das ist zu lang oder zu groß. Der Text ist derzeit nicht wirklich lesbar. Stattdessen müssen Sie eine Zeilenhöhe wählen , die für die Schriftgröße geeignet ist. Wenn ich diesen Wert auf 21 Pixeln löschen würde , berechnet Figma automatisch eine Zeilenhöhe für mich, in diesem Fall wären es 32. Für 21 Pixel ist eine Zeilenhöhe von 32 Pixel sehr gut, also werde ich sie dabei behalten. Lassen Sie uns dies als Nächstes duplizieren und die nächste Schriftgröße bestimmen, die in unserem Fall 27,99 beträgt. Lassen Sie uns das auf 28 abrunden. Hier drin sage ich 28. Lasst es uns auch hier ändern. Für die Zeilenhöhe berechnet Figma dies bei 42. Ich setze 40 auf das hier. Einige dieser Messungen beziehen sich auf das Acht-Punkte-System, das ich für Abstände und Dimensionierung verwende. Dafür gibt es eine separate Lektion und das wirst du sehr bald sehen. Aber im Moment jede Zeilenhöhe, die ich verwende wird jede Zeilenhöhe, die ich verwende, ein Vielfaches von acht sein. In meinem Fall empfahl Figma 42, aber ich habe 40. Lassen Sie uns als Nächstes diesen Wert duplizieren. Die nächste Schriftgröße ist 37. Lass uns 37 gehen. Außerdem werden wir hier die Zeilenhöhe ändern, und Sie werden nur ein wenig sehen, warum das so praktisch ist. Für 37 Pixel empfiehlt Figma 56 Pixel als Zeilenhöhe, aber ich werde einfach so 48 verwenden. Als Nächstes haben wir eine Schriftgröße von 50 Pixel, wie diese. Mal sehen. Für die Zeilenhöhe empfiehlt Figma 75, aber ich werde 64. So. Lass uns weitermachen. Sechundsechzig Pixel. Für die Zeilenhöhe empfiehlt Figma 99. Ich bringe das leicht auf 80 zurück. Wir werden 66 und 80. Das ist 64 für die Zeilenhöhe, ich habe vergessen, das zu ändern. Ich denke, wir brauchen noch einen, und das wird für die größeren Titel sein. Mal sehen, 88. Also 88 Schriftgröße, und für die Zeilenhöhe werde ich dies auf 104 abrunden, was auch ein Vielfaches von acht ist. Jetzt stellen wir das hier hin, 104. Cool. Auch wir haben bei 21 Pixeln angefangen und sind nach oben gegangen. Möglicherweise benötigen wir aber auch kleinere Schriftgrößen als 21 Pixel. Lassen Sie uns einen Schritt tiefer machen und das Tool gibt uns auch niedrigere Werte, und in unserem Fall sind es 15,75. Runden wir es auf 16 ab. Ich habe 16 Pixel, 24 Pixel Zeilenhöhe. Das ist richtig, also sage ich 16 und 24. Damit haben wir jetzt die endgültige Typskala. Die Schriftgrößen sind 16, 21, 28, 37, 50 , 66 und 88. Direkt neben jeder Schriftgröße haben wir die Zeilenhöhe , die auf jedes Element angewendet wird. dann Lassen Sie uns dann diese typografischen Eigenschaften auf unser Design anwenden . Um es uns einfacher zu machen, können wir diesen Rahmen in unser Design kopieren , nur damit wir diese Werte genau dort haben , wenn wir sie brauchen. Beginnen wir mit dem Menü und wählen Sie alle aus. hier benutzen wir 21 Poppins. Ich denke, wir gehen auf Schwarz, weil es ziemlich gut aussieht, und ich denke auch in Großbuchstaben. Um auf zusätzliche Optionen für Text zuzugreifen, klicken Sie einfach auf dieses Element und gehen Sie unter Großbuchstaben, wählen Sie dieses Element in Großbuchstaben aus. Jetzt können wir sie einfach so ein bisschen bewegen. Dann haben wir uns um die Menüpunkte gekümmert, 21 Pixel. Fügen wir auch die richtige Zeilenhöhe hinzu, die 32 ist , und wir können weitermachen. Lasst uns jetzt tatsächlich alle Überschriften angehen. Dieser hier ist einfach. Es ist eine Überschrift 1. Wir verwenden auch das schwarze Schriftgewicht und für die Schriftgröße ist es 88, es ist dieses hier und 104 für die Zeilenhöhe. Natürlich müssen wir, wenn wir das tun, einige dieser Elemente umgehen da sie eine viel größere Schriftgröße haben. Lass uns das mal sehen. Dafür verwenden wir eine etwas kleinere Größe wie diese, aber auch das schwarze Schriftgewicht 66 und 80. Auch in den Überschriften möchte ich den Buchstabenabstand ein wenig reduzieren und ich sage minus drei Prozent. Dies bringt den Brief nur ein bisschen näher zusammen. Ich glaube, das sieht für diese spezielle Schrift für Poppins viel besser aus. Ich mache das Gleiche für die Überschrift 1. Wenn wir es so nennen wollen , minus drei Prozent. Das ist im Grunde genommen Rubrik 1. Dies ist Rubrik 2. Lasst uns das auch nach oben bringen. Dies ist auch eine Überschrift 2 und Folgendes können Sie in Figma Pro-Tipp tun. Sie können die Textelemente auswählen. Sie können mit der rechten Maustaste klicken, Einfügen kopieren als, Sie können die Eigenschaften kopieren. Dann können Sie eine andere auswählen, mit der rechten Maustaste klicken, Einfügen als kopieren und Eigenschaften einfügen. Oder Sie können die Tastenkombinationen verwenden. Das wird genau das gleiche Styling erhalten wie dieses. Ziemlich cool. Mal sehen wir uns die anderen Überschriften an. Wählen wir dies aus, wählen wir auch dieses und dieses aus. Wir klicken mit der rechten Maustaste auf Eigenschaften einfügen. Gut. Dafür werden wir tatsächlich eine Größe niedriger gehen und eine Seite ist niedriger , je nachdem unsere Typskala 50 beträgt. Oder wir können zwei Größen tiefer gehen und 37 wählen, also 37 Schriftgröße, 48 Zeilenhöhe. Machen wir das, 37, 48, ebenfalls schwarz, ebenfalls minus drei Prozent. Großartig. Das sind alle Überschriften, die sich gekümmert haben. Sehen wir uns jetzt den Rest des Textes an. Wählen wir die großen Absätze aus. Dieser, dieser und dieser und dieses und dieses. Fügen wir eine Schriftgröße von 21 Pixeln hinzu, was der Basisschriftgröße und 32 Pixel als Zeilenhöhe entspricht. Wir halten das Schriftgewicht regelmäßig. Auch für diesen, weil es in der Fußzeile ist, möchte ich ihm einen etwas anderen Stil verleihen. Ich werde es wieder 16 Pixel und 24 Pixel Zeilenhöhe erstellen, basierend auf unserer Typskala. Was sonst noch? Stellen wir sicher, dass diese die richtigen Einstellungen haben. Lass uns 21, 32. Dann diese 21, 32. Übrigens könnten wir einige dieser typografischen Eigenschaften ändern, während wir mit unserem Design voranschreiten. Moment ist es im Grunde eine Stiftung. Lasst uns zu diesen übergehen. Dies sind eigentlich die Titel oder die Dish-Titel, und vielleicht möchten wir ihnen etwas mehr Bedeutung verleihen. Ich werde die Schriftgröße hier um einen Schritt erhöhen. Anstelle von 21 benutzen wir 28. Wir wählen diese drei aus. Wir sagen 28 und 40 und auch minus drei Prozent, und diesmal werden wir Poppins fett verwenden , weil ich es schwarz für die großen Überschriften reservieren möchte. Ich denke, für diese Art von Inhalten würde Fett viel besser funktionieren. Für diese behalte ich 21 Pixel. Machen wir die Zeilenhöhe und auch für diese. Dieser ist bereits eingestellt. Dieser, 21, 32. Was haben wir sonst noch? Wir haben diese, wir sollten auch die 32 Pixel Zeilenhöhe haben. Wir haben auch diese, die 21 und 32 sein sollten. Dieser ist richtig. Diese, lasst uns auch aktualisieren, 21 32. Dieser ist 16 und 24. Das sollte es sein. Lassen Sie mich Ihnen den Unterschied zwischen unserem ursprünglichen Drahtgitter und der ersten Iteration unseres Designs zeigen unserem ursprünglichen Drahtgitter und der ersten Iteration unseres Designs nachdem wir die Typografie angewendet haben. Natürlich sieht es gerade wie ein Durcheinander weil zwischen den Elementen nicht genug Platz ist. Lasst uns das wirklich schnell reparieren. Lass uns hier einfach etwas mehr Raum zum Atmen schaffen, so etwas. Vielleicht mach das ein bisschen kleiner. Bewegen Sie das nach unten. Du siehst den Unterschied. Dies ist das Drahtgitter. Hier haben wir angefangen, und dies ist der erste Schritt im Designprozess, um die Typografie einzustellen. Sehen Sie, wie viel Unterschied es macht. Denn wie ich schon sagte, der Großteil der Inhalte auf wird der Großteil der Inhalte auf einer Webseite durch Text dargestellt. Indem Sie die Typografie ändern, werden Sie die größte visuelle Wirkung erzielen. Das ist alles, was wir vorerst in Bezug auf Typografie tun werden. Jetzt ist es Zeit für eine schnelle Zusammenfassung. beim Entwerfen einer Website Beginnen Sie beim Entwerfen einer Website mit der Typografie. Bevor Sie eine Schriftart auswählen, definieren Sie den Ton und die Stimmung der Website, die Sie entwerfen. Verwenden Sie serifenlose Schriften für modernere, lockere oder minimalistischere Websites. Verwenden Sie serifenlose Schriften für elegantere oder ernstere Websites. Jetzt, da Sie die Grundlagen des Arbeitens mit Typografie und der Auswahl der richtigen Schriften kennen , machen Sie das weiter. Wenn Sie möchten, können Sie eine völlig andere Schrift für Ihre Version des Projekts auswählen. Ich habe erklärt, warum ich mich für Poppins entschieden habe, aber Sie sollten wählen, was Ihrer Meinung nach am besten für die Art von Website funktioniert, die wir entwerfen. Was kommt als Nächstes? Nun, als nächstes arbeiten wir mit Farbe und wir werden die Farbpalette für dieses Projekt erstellen die Farbpalette für , und das werden wir in der nächsten Lektion tun. 10. Farben wählen: Arbeiten mit Farbe macht Spaß und kann ein Design definitiv auf eine gute Weise verändern . Aber es kann auch einen ruinieren. Wenn Sie zu viele oder einfach die falschen Farben verwenden, wird sozusagen ein gutes Design einfach den Bach runtergehen. Lassen Sie mich Ihnen die Farben zeigen, die ich für dieses Projekt verwenden werde, warum ich sie ausgewählt habe und Ihnen auch ein paar hilfreiche Werkzeuge zum Arbeiten mit Farbe zeige . Für mich fing alles mit dem Logo an. Denn sofort als ich es sah und als ich dieses bräunliche Orange sah, wusste ich, dass ich das für einen Akzent verwenden wollte. hier im Ordner „Assets“ Nennen wir hier im Ordner „Assets“ auch diesen Typ Scale. Lassen Sie uns einen neuen Rahmen erstellen. Wir nennen es Farben. Übrigens, Pro-Tipp mit einem ausgewählten Frame, können Sie Befehl R drücken oder es ist wahrscheinlich Control R unter Windows, um in den Umbenennungsmodus zu wechseln. Oder Sie können einfach in das Ebenenbedienfeld doppelklicken oder direkt hier doppelklicken und es so umbenennen. Bei den Farben zeichne ich normalerweise ein Rechteck oder einen Kreis wie diesen und füge einfach diese Farbe ein. Das werden wir für den Akzent verwenden. Ein paar sehr gute Gründe, einer ist, dass es zum Logo passt daher sehr gut zur Marke passt. Aber es ist auch sehr nah an der Farbe Orange, die zwischen Braun und Gelb liegt. Gelb steht für Glück, Freude und es ist auch ein Aufmerksamkeitsgetter, ein Aufmerksamkeitsgreifer. Braun ist eine ernstere und imposantere Farbe und steht für Stabilität und Weisheit. Die Kombination dieser beiden funktioniert meiner Meinung nach sehr gut für diese Art von Website, aber auch für die Marke selbst. Denn wenn wir uns erinnern, ist dies ein Familienunternehmen, das im Jahr '95 eröffnet wurde. Obwohl sie auch modern und freundlich sein wollen, wollen sie auch einen Teil dieses Vermächtnisses bewahren, wie wir aus dieser allgemeinen Beschreibung entnehmen können. Es ist ein Familienunternehmen. Ich denke, insgesamt wird dies für dieses Projekt eine großartige Akzentfarbe ergeben. Eine Akzentfarbe bedeutet eine Farbe, die wir sparsam verwenden werden, hier und da auf bestimmten Elementen sparsam verwenden werden, um sie hervorzuheben. Außerdem hat es einen großartigen Kontrast zu Weiß und auf dunklem Hintergrund. Apropos Kontrast: Dies ist etwas, das Sie immer in Betracht ziehen sollten da die Verwendung von Farben mit einem sehr geringen Kontrast einem sehr geringen Kontrast in Bezug auf die Zugänglichkeit sehr schlecht ist, Menschen mit Sehbehinderung wird nicht in der Lage sein, zwischen diesen Farben zu unterscheiden, also machen Sie es ihnen schwerer. Sie daher sicher, dass bei der Auswahl der Farben für Ihr Projekt sie bei der Auswahl der Farben für Ihr Projekt einen guten Kontrast haben. Es gibt mehrere Möglichkeiten, dies zu überprüfen. In macOS befindet sich eine App in der Menüleiste, die Kontrast genannt wird. Es ist wirklich einfach zu bedienen. Sie können einfach eine Farbe auswählen und dann die andere Farbe auswählen, und alles, was über Double A liegt, kann verwendet werden. Der Apple sagt dir auch, ob es fehlschlägt, wie es hier der Fall ist, also bedeutet es, dass diese Farbe, die auf einem hellgrauen Hintergrund wie diesem sitzt auf einem hellgrauen Hintergrund , nicht genug Kontrast hat, sondern auf ein Weiß setzt wie dieser wird einen ausreichenden Kontrast haben. Sie können es sogar vor dunkleren Hintergründen überprüfen und Sie werden sehen, dass wir einen guten Kontrast haben. Es gibt auch Möglichkeiten, dies im Internet zu überprüfen. Wenn Sie nicht für diese App bezahlen möchten oder möglicherweise Windows verwenden und diese App nicht verfügbar haben, können Sie einfach eine Google-Suche nach Kontrastprüfer durchführen und diese finden Sie bei WebAim. und auch hier können Sie die Werte einfügen oder manuell auswählen und es gibt Ihnen das Verhältnis genau hier und auch einige, die sehr hilfreich sind. Um diese Akzentfarbe zu ergänzen, sprechen wir über die schwarzen Farben oder die Farbe, die ich für den Text verwenden werde. Diese Farbe ist diese, 081E26, die ungefähr so aussieht. Diese Farbe ist ein sehr dunkelblau. Beachten Sie, dass der Farbton dieser ist. Es ist eine sehr schöne blaue Farbe, die übrigens Blau ein Kompliment von Orange ist, Blau ein Kompliment von Orange ist also funktionieren sie sehr gut zusammen. Aber ich habe es auch viel abgeschwächt , weil ich es für Text verwenden möchte. Ein weiterer Tipp, den ich Ihnen hier geben kann, ist, dass Sie sich von reinem Schwarz fernhalten, wenn Sie die Farben für Ihren Text definieren . Das wird zu hart, es wird viel zu sehr mit dem Rest Ihrer Seite kontrastieren . Verwenden Sie stattdessen ein Grau oder mischen Sie ein wenig von der Farbe mit diesem Grau wie bei diesem Beispiel. Wir verwenden 081E26, das grau mit Blau gemischt ist. Ich denke, diese beiden zusammen werden ein wirklich nettes Paar bilden. Auch hier steht diese Farbe sehr gut im Kontrast Weiß oder anderen Farben , mit denen wir sie verwenden könnten. Die beiden Farben, die wir verwenden werden, sind diese, D9366 und 081E26. Dies ist der Akzent, das ist das Schwarz. Ich nenne es schwarz, obwohl es technisch gesehen nicht zu 100 Prozent schwarz ist, aber es ist viel einfacher, es als schwarze Farbe zu bezeichnen , weil wir das für Text verwenden werden, für verschiedene Grenzen, Hintergründe und ähnliches. Jetzt, da ich Ihnen die beiden Farben gezeigt habe, die ich verwenden werde wenden wir sie auf das Design an. Ich beginne damit, diese Farbe genau hier auszuwählen, das Schwarz. Gehen wir zu unserem Design, wir werden dieses Element tatsächlich duplizieren. In Figma ist das super einfach zu machen. Wann immer Sie eine Gruppe von Elementen auswählen , wie ich es hier getan habe. Im Inspektor erhalten Sie etwas, das als Auswahlfarben bezeichnet wird. Dies zeigt Ihnen im Grunde alle Farben, die im Design verwendet werden. Da wir nur mit Schwarz, Weiß und Grau gearbeitet haben, kann ich auf das Feld mit der schwarzen Farbe klicken und einfach den neuen Wert einfügen. Das wird reines Schwarz durch diese Farbe auf allen Elementen gleichzeitig einstellen oder ersetzen . Wie Sie sehen können, verwenden wir die aktualisierte Farbe. Wie einfach ist das? Das ist einer der Gründe, warum ich Figma einfach liebe, es hat auch diese Farbe dem Menü hinzugefügt, zu den Icons, allem. Eine Sache, die ich hier mache, ist, den Ausleihgrill wieder in seine Axonfarbe zu wechseln . Dafür kann es ein bisschen knifflig sein. Wir wählen diese einfach einzeln aus. Wir gehen zurück zu Vermögenswerten, wir greifen diese Farbe und dann zurück zum Design und verwenden es. Großartig. Das ist alles, was wir an dieser Stelle mit Farbe machen werden, da andere Änderungen vorgenommen werden , wenn wir mit unserem Design vorankommen. Wir könnten entscheiden, dass dieser Absatz vielleicht etwas abgeschwächt werden muss In diesem Fall können wir die Farbdeckkraft auf 80 Prozent oder 70 Prozent ändern . Aber das können wir momentan nicht tun . Das passiert später, wenn wir anfangen, die Layouts zu erstellen und zu sehen, wie wir Elemente anordnen und wie wir Raumelemente unterstützen. Im Moment ist das Hinzufügen der Textfarbe und der Akzentfarbe zum Logo mehr als genug, und dies gibt uns eine sehr starke Basis , auf der wir aufbauen können. Wenn Sie jetzt mit Farbe arbeiten, können Sie einfach diejenigen auswählen , von denen Sie glauben, dass sie am besten aussehen werden, das ist völlig in Ordnung. Es gibt jedoch bestimmte Tools, die Ihnen bei dieser Aufgabe helfen können. Da sage ich, mach es genauer. Ich zeige Ihnen ein paar dieser Tools, die ich übrigens regelmäßig verwende. Die erste ist Adobe Color. Dies ist eine großartige Möglichkeit, Farbpaletten zu entdecken, indem Sie auf die Registerkarte Explorer gehen. Wenn Sie sich uninspiriert fühlen, möchten Sie vielleicht etwas mit Goldgrün kreieren. Sie können nach Goldgrün oder nach welchem Begriff suchen , den Sie möchten, und Sie werden Farbpaletten finden, die diesen Kriterien entsprechen. Sie können diese als JPEG herunterladen, wenn Sie die Creative Cloud Suite verwenden, dann können Sie sie Ihrer Bibliothek hinzufügen oder diese öffnen und jede einzelne Farbe kopieren. Oder Sie können sie direkt als CSS oder XML oder SAS oder RSS kopieren . Dies ist ein sehr praktisches Werkzeug, aber Sie können auch Ihre eigenen Farbpaletten erstellen. Wenn ich zum Beispiel meine Akzentfarbe auswählen würde, gehe ich zu Adobe Color, dann würde ich sie genau hier in der Mitte einfügen, wo ich den Grundfarbenpfeil habe. Aufgrund der Harmonie kann ich verschiedene Kombinationen haben. Dies ist analog und Sie können tatsächlich sehen, wo sich jede Farbe auf dem Farbrad befindet. Dies ist eine einfarbige, verschiedene Variationen derselben Farbe, aber mit mehr Weiß oder mehr Schwarz hinzugefügt. Sie haben Triade, kostenlos, kostenlos geteilt. Es gibt eine Reihe von Harmonieregeln, aus denen Sie wählen können. Auf diese Weise können Sie jedoch Farbpaletten für Ihr Projekt entdecken und erstellen. beispielsweise unter Complete oder Split komplementär, Sehen Sie beispielsweise unter Complete oder Split komplementär, dass die orange Farbe, die auf unserem Akzent basiert , mit Blau ergänzt wird. Für Ihr eigenes Projekt können Sie dieses für den Hintergrund oder dieses auswählen und einfach mit der Leichtigkeit der Farbe herumspielen. Das hier. Das gibt dir wirklich viel Freiheit und es macht deinen Job viel einfacher. Die nächste App heißt ColorSnapper. Dies ist etwas, das ich seit sehr langer Zeit auf einem Mac verwende . Leider funktioniert es unter Windows nicht. ColorSnapper ermöglicht es Ihnen jedoch, im Grunde eine Farbauswahl wie diesen anzuzeigen , mit der Sie Farben von überall auf Ihrem Bildschirm auswählen können . Das wird automatisch in Ihre Zwischenablage kopiert . Sie können die Farbhistorie auch hier einsehen. Ich kann aus verschiedenen Formaten wählen. Alles in allem ist es eine großartige App. Wenn Sie einen Mac verwenden und oft mit Farbe arbeiten , würde ich diesen sehr empfehlen. Eine Alternative auch für Mac ist Sip. Dies ist etwas komplexer, da Sie auch bestimmte Farbpaletten speichern können. Es ist etwas fortgeschrittener, aber das ist auch wieder, nur für Mac. Wenn Sie Windows verwenden, können Sie die Power-Toy-Anwendung installieren, auch eine Farbauswahl integriert ist. Es funktioniert nicht so gut wie diese beiden, aber es ist ein Anfang. Wenn Sie Windows verwenden, können Sie von derselben Funktionalität profitieren. Ein anderes Tool, das ich verwende, wenn ich beispielsweise in Windows arbeite , ist colorcontrast.cc. Dies ist eine Kontrastprüfung im Internet, und es tut genau das Gleiche wie diese in dem Sinne , dass er Ihnen den Kontrast zwischen zwei Farben zeigt und ob er die Tests bestanden hat oder nicht. Aber dieser ist kostenlos und von jedem Betriebssystem aus zugänglich. Schließlich ist dies die App, von der ich dir früher erzählt habe. Aber auch hier ist das nur für Mac. Wählen Sie die Farben sorgfältig aus. Sie können ein Design erstellen oder brechen. Verwende nicht zu viele Farben. Um die Dinge einfach zu halten, wählen Sie eine Farbe für den Text und eine um bestimmte Elemente wie Schaltflächen oder Links zu akzentuieren. Wenn Sie mehr als zwei Farben auswählen, stellen Sie sicher, dass sie gut zusammenarbeiten. Jetzt sind die Farben drin und wir haben gerade eine weitere große Aufgabe bei der Gestaltung dieser Website erledigt eine weitere große Aufgabe bei . Sie werden sehen, dass es Ihnen viel leichter fällt, das Design zu vervollständigen, sobald die Typografie festgelegt ist und Sie einige Farben auf den Text oder einige Elemente auf der Website angewendet und Sie einige Farben auf den Text oder einige Elemente auf der Website haben . Jetzt ist wie immer Zeit zum Üben. Gehen Sie fort und wählen Sie die Farben für Ihre Version des Designs aus und wenden Sie sie an. Sobald Sie das getan haben, sind wir bereit Abstand und Größe fortzufahren. Dafür verwenden wir tatsächlich etwas das Acht-Punkte-System. Ich benutze es schon lange und es ist so nützlich für mich, es wirklich das Rätselraten beseitigt wenn es um Abstände und Dimensionierung von Elementen geht. Lassen Sie mich Ihnen in der nächsten Lektion mehr darüber erzählen. 11. Arbeiten mit dem 8pt System: Das Acht-Punkte-System wird unser Leben viel einfacher machen , weil wir es für Abstände und Dimensionierung verwenden werden. Das ist etwas, womit viele Menschen zu kämpfen haben. Ich meine, wenn Sie ein Design erstellen, wie breit oder groß oder sollten Sie ein Element erstellen? Welchen Rand oder welche Polsterung sollten Sie einer Schaltfläche hinzufügen? Zum Beispiel, schaust du es einfach an? Oder gibt es einen Standard, den Sie verwenden können? Nun, das ist die Macht des Acht-Punkte-Systems. Es erstellt einen standardisierten Satz von Größen, bei denen jeder Artikel ein Vielfaches von acht ist, z. B. 16 , 24, 32 , 48 usw. Jetzt müssen Sie nicht mehr raten, da jeder Wert ein Vielfaches von acht ist. Sie müssen sich nicht einmal an den vollen Wert erinnern. Wir können uns an den Multiplikator erinnern. Beispielsweise könnten Sie auf einer Schaltfläche eine Polsterung von 16 Pixeln oben und unten sowie 32 Pixel links und rechts anwenden . Anstatt sich an diese Werte zu erinnern, können Sie sich einfach an den Multiplikator zwei für oben und unten, vier, für links und rechts erinnern, also zweimal acht und vier Mal acht. Die Beispiele können weiter und weiter gehen. Der Punkt ist, dass dieses System einfach ist und es Ihnen die Arbeit erleichtert. Da alle Abstände und Größenbestimmungen auf derselben Zahl basieren, haben Sie viel mehr Konsistenz zwischen den Elementen. Jetzt fragst du mich vielleicht, warum acht, warum nicht fünf oder zehn? Nun, ich denke, die Nummer Acht ist in unser Bewusstsein eingraviert , weil wir viel mit Computern arbeiten . das Vielfache von acht in 16, 24, 32, 120, 256, 512. Es sind alle sehr gebräuchliche Zahlen, die in der IT verwendet werden. Jetzt 32 Gigs RAM, 512 Gigs Speicher, 1024 Pixel als Bildschirmbreite. Die Beispiele können weiter und weiter gehen. Der Punkt ist die Zahl Acht und ihre Vielfachen sind sehr leicht zu merken. Ein weiterer sehr guter Grund ist, dass acht Skalen bis zu einer ganzen Zahl, selbst wenn bestimmte Reibungsmultiplikatoren verwendet werden. Zum Beispiel entspricht 8 mal 1,25 10, 8 mal 1,5 gleich 12 und so weiter. Jetzt können Sie natürlich jede gewünschte Zahl als Basis verwenden , Sie können drei verwenden oder sieben verwenden. Die Idee ist, dass Sie ein Vielfaches dieser Zahl verwenden würden. Aber ich denke, dass die Verwendung von acht viel einfacher ist weil wir uns an diese Multiplikatorwerte oder diese Vielfachen für die Nummer Acht viel einfacher erinnern werden diese Multiplikatorwerte oder . Lassen Sie mich Ihnen jetzt schnell zeigen, wie ich dieses Acht-Punkte-System in diesem Design verwenden werde. Lassen Sie mich dies noch einmal duplizieren und geben Ihnen ein oder zwei Beispiele dafür , wo ich das Acht-Punkte-System verwenden werde. Einer von ihnen ist genau hier im Menü. Der Abstand zwischen jedem Menüpunkt ein Vielfaches von acht. Was ich tun werde, ist einfach die gleiche Distanz zu benutzen. In meinem Fall wird es wahrscheinlich um 32 oder 48 sein . Es hängt wirklich vom endgültigen Design ab. Verwenden wir vorerst einfach 32 Pixel. Ich habe 32 hier. Ich habe 32 hier. Ich werde Ihnen einen einfacheren Weg zeigen, dies zu tun, aber im Moment nur zu Demonstrationszwecken werde ich es nur zu Demonstrationszwecken manuell machen. Sie können übrigens die Option drücken und den Mauszeiger auf ein bestimmtes Element bewegen, um den Abstand zwischen dem, was Sie ausgewählt haben, und diesem Element anzuzeigen den Abstand zwischen dem, was Sie ausgewählt haben . Ich halte einfach die Umschalttaste gedrückt, um diese auszuwählen , und benutze dann einfach die Pfeiltasten. Ich bewege das nach links und rechts. Ich kann auch die Umschalttaste drücken und die Pfeiltasten verwenden , um dies in Schritten von 10 Pixeln anstelle eines Pixels zu tun . Da sind wir los. Das sind 32 Pixel. Das ist ein Beispiel dafür , wo ich das Acht-Punkte-System verwenden würde. Das Gleiche gilt für diese Elemente hier. Diese Symbole sind 26 Pixel voneinander entfernt, aber vielleicht möchte ich, dass sie 24 Pixel haben. Auch hier ist das ein Vielfaches von acht. Was ist mit vertikal? Nun, das Gleiche gilt. Vielleicht möchte ich einen Abstand zwischen dieser Überschrift zu diesem Text von 32 Pixel haben. Ich werde das einfach nach unten bewegen und jetzt habe ich 32 Pixel. Was ist mit diesem und diesem? Vielleicht will ich dort acht Pixel haben. Zwischen diesen beiden möchte ich vielleicht wieder 16 Pixel, Vielfaches von acht. Vielleicht möchte ich, dass das so ist. Da ich 32 Pixel als Zeilenhöhe verwende, halte ich das gleiche System am Laufen. Ich denke, jetzt kannst du verstehen, warum ich die Linienhöhen so neu definiert habe. Wenn Sie 24, 32, 40, 48, 64 betrachten 32, 40, 48, , sind alle diese Linienhöhen Vielfaches von acht. Noch bevor ich zum Designteil kam, benutzte ich dieses Acht-Punkte-System immer noch bei der Definition der Topographie. Apropos Typografie, die Schriftgrößen müssen nicht unbedingt ein Vielfaches von acht sein. Was wichtig ist, um einen richtigen vertikalen Rhythmus beizubehalten , ist, dass die Linienhöhen ein Vielfaches von acht sind. Wie ich schon sagte, mache ich es schon lange und es bringt immer gute Ergebnisse. Nun, wenigstens halte ich sie für gute Ergebnisse. Ich empfehle Ihnen wärmstens, dasselbe zu tun. Wir werden das Acht-Punkte-System weiterhin anwenden während wir immer mehr Elemente entwerfen. Im Moment habe ich Ihnen gerade zwei, drei Implementierungen oder Beispiele gezeigt drei Implementierungen oder Beispiele , wo wir dieses System verwenden könnten. Aber ich denke, das sollte dir eine ziemlich gute Idee geben. Da wir uns mit dem Thema Höhen für Bilder beschäftigen, können wir diese Vielfachen von acht erstellen. Obwohl es bei Bildern etwas schwieriger ist, da Sie auch ein Seitenverhältnis in Betracht ziehen sollten . Wenn Sie jedoch eine feste Höhe für ein Bild festlegen möchten, können Sie es im Allgemeinen eine feste Höhe für ein Bild festlegen möchten, genauso gut als Vielfaches von acht festlegen. In meinem Fall wäre das Bild hier 480 Pixel. Bevor wir die Dinge abschließen, nur eine letzte Erwähnung. Wenn Sie feststellen, dass Vielfache von acht manchmal für bestimmte Größen oder Abstände zwischen Elementen zu groß sind manchmal für bestimmte Größen oder Abstände zwischen Elementen zu groß , Sie gerne Vielfaches von vier verwenden. Das gibt Ihnen eine granulare, engere Kontrolle darüber, wie die Dinge aussehen. Nehmen wir zum Beispiel an, dass die 32 Pixel zu viel einen zu großen Abstand zwischen diesen beiden manuellen Elementen aufweisen. Das vorherige Vielfache von acht wäre 24. Aber 24 könnte zu klein sein, in diesem Fall können Sie Kompromisse eingehen. Sie können mit 28 gehen, und 28 ist eigentlich ein Vielfaches von vier. Wenn das gut aussieht, dann großartig. Mach weiter und benutze das. Obwohl es das Acht-Punkte-System genannt wird, bedeutet dies nicht, dass jede Entfernung, jede Messung ein Vielfaches von acht sein muss. Sie können die Regeln ein wenig biegen , wenn sie nicht richtig aussehen. Verwendung eines Vielfachen von vier ist oft die richtige Lösung für solche Situationen. Lassen Sie uns jetzt eine kurze Zusammenfassung machen. Das Acht-Punkte-System erstellt einen standardisierten Satz von Größen, bei denen jede Größe ein Vielfaches von acht ist. Diese Größen können auf jeden Abstand- oder Größenaspekt angewendet werden . Zum Beispiel Rand, Polsterung, Zeilenhöhe, Breite, Höhe usw. Wir verwenden die Nummer Acht, weil sie und ihre Vielfachen sehr bekannt und leicht zu merken sind. Die Zahl Acht skaliert auch bei Verwendung bestimmter Bruchmultiplikatoren auf eine ganze Zahl . Zum Beispiel 1.5. Nachdem das Acht-Punkte-System erklärt wurde, sind wir bereit weiterzumachen. Aber bevor wir das tun, möchte ich mit Ihnen über das automatische Layout sprechen. Dies ist eines der größten und wichtigsten Merkmale in Figma. Ich liebe es absolut. Ich benutze es die ganze Zeit und werde es auch in diesem Projekt stark verwenden, und ich empfehle Ihnen, dies auch zu tun. Da ich ein so großes Feature bin, wollte ich ihm eine Lektion widmen. Ich mache das, weil ich möchte, dass Sie die Grundlagen der Arbeit mit Layout erlernen , bevor wir wieder in den Designprozess einsteigen. Ich denke, das wird dir enorm helfen , wenn wir vorankommen. In der nächsten Lektion zeige ich Ihnen die Grundlagen der Arbeit mit mündlichem Layout in Figma. Wenn Sie diese Funktion bereits nutzen können, Sie mit Lektion 13 fortfahren. 12. Eine kurze Einführung in das Figma Auto Layout: Ich denke, das Auto-Layout ist das beste Feature in Figma. Es ist so mächtig und so hilfreich , dass ich ohne es einfach nicht arbeiten könnte. Kurz gesagt, ermöglicht das automatische Layout das Erstellen dynamischer Layouts in Frames und Komponenten. Diese Layouts werden verkleinert oder erweitert, wenn sich der Inhalt im Inneren ändert. Sie können auch eine ziemlich erweiterte Ausrichtung für diese Layouts verwenden. Um Ihnen ein einfaches Beispiel mit automatischem Layout zu geben, können Sie eine Schaltfläche erstellen, die automatisch die Größe ändert, wenn sich der darin enthaltene Text ändert. Sie können auch diesen Button auffüllen, was fantastisch ist. Lassen Sie mich Ihnen eine kurze Tour zur Verwendung des automatischen Layouts damit Sie besser auf die bevorstehenden Lektionen vorbereitet sind. Fangen wir mit etwas Einfachem an. Erstellen wir zwei Rechtecke, eins eins, eins kleineres. Eine Sache, die Sie gleich am Anfang verstehen müssen , ist, dass das automatische Layout nur für Frames funktioniert. Sie können keine Gruppe von Elementen mit automatischem Layout haben. Sie können das automatische Layout auf diese Gruppe anwenden, es wird jedoch automatisch in einen Frame konvertiert. Um ein automatisches Layout hinzuzufügen, können Sie einfach die Elemente auswählen, die Sie in Ihr automatisches Layout aufnehmen möchten. In meinem Fall wählen wir diese beiden aus. Es gibt mehrere Möglichkeiten , ein automatisches Layout hinzuzufügen. Sie können mit der rechten Maustaste klicken und Auto-Layout hinzufügen auswählen, oder Sie können „Umschalt A“ als Tastenkombination drücken, oder Sie können zum Menü-Objekt Auto-Layout hinzufügen wechseln. Wenn es sich bei dem von Ihnen ausgewählten Objekt beispielsweise um einen Rahmen handelt, habe ich diesen Mainframe hier ausgewählt, Sie haben auch die Möglichkeit, ein automatisches Layout vom Inspektor hinzuzufügen , indem Sie auf diese Schaltfläche klicken oder einfach indem du hier klickst. Konzentrieren wir uns vorerst auf diese beiden Elemente. Ich wähle sie aus, Umschalttaste A, um ein automatisches Layout hinzuzufügen. Dadurch wurde automatisch ein Frame mit diesen beiden Elementen erstellt . Natürlich ist dies ein verschachtelter Rahmen. Das ist etwas, was du in Figma tun kannst. Sie können einen Rahmen in einem anderen Rahmen haben und das ist vollkommen in Ordnung. Wie Sie sehen können, enthält dieser Rahmen jetzt diese beiden Rechtecke. Im Inspector sehen Sie, dass das automatische Layout in diesem Frame aktiv ist. Anschließend weist Figma basierend auf der Anordnung oder Position dieser Elemente auf Ihrem Canvas automatisch eine Richtung zu. In meinem Fall ist es horizontal. Aber ich kann immer in eine vertikale Richtung wechseln. Das Coole Ding ist unabhängig von der Richtung, jedes Element ist austauschbar. Ich kann diese Position mit den Pfeiltasten oder durch Ändern der Position des Elements im Ebenenbedienfeld ändern. Wie Sie sehen können, behalten sie durch Ändern der Position oder Reihenfolge der Elemente der Position oder Reihenfolge der Elemente tatsächlich die Ausrichtung und den Abstand zwischen Elementen bei, die ich für diesen Rahmen festgelegt habe. Das ist einfach fantastisch. Ich habe dir gezeigt, dass du die Richtung änderst. können sie mit diesem Toggle hier im Inspector machen. Sie können den Abstand zwischen den Elementen auch ändern , indem Sie mit dem Mauszeiger klicken und so gehen, oder Sie können einen Wert manuell eingeben. Dadurch wird sichergestellt, dass ich immer 240 Pixel zwischen diesen Elementen habe. Ich kann ein drittes Element hinzufügen. Nehmen wir zum Beispiel an, ich möchte einen Kreis in meinem Rahmen hinzufügen. Ich kann einfach klicken und ziehen, um meinen Kreis hinzuzufügen. Wie Sie sehen können, wurde die Größe des Rahmens automatisch angepasst, um das neue Element aufzunehmen. Dieses neue Element ist jetzt 240 Pixel von den anderen beiden positioniert . Wenn ich das auf 120 ändere, ändert sich der Rahmen natürlich automatisch. Wie cool ist das? Abgesehen davon, dass Sie einen festen Abstand zwischen Elementen hinzufügen können, können Sie auch eine Polsterung innerhalb des Rahmens hinzufügen. der Rahmen ausgewählt ist, kann ich beispielsweise eine Füllfarbe hinzufügen. Sagen wir, ich möchte so etwas hinzufügen. Dann kann ich eine Polsterung hinzufügen. Ich kann so etwas wie 32 Pixel sagen. Dies fügt 32 Pixel Polsterung in meinem Hauptrahmen hinzu. Aber ich kann noch weiter gehen und auf die Schaltfläche klicken , die Ausrichtung und Polsterung anzeigt, und ich kann die Polsterung für jede Seite individuell ändern; oben, rechts, unten und links. Sagen wir zum Beispiel, ich will die 32 oben, aber vielleicht 64 auf der rechten Seite, vielleicht 48 unten und vielleicht 16 auf der linken Seite. Im Moment wurden für dieses Element vier verschiedene Füllwerte hinzugefügt. Sie haben ein sehr hohes Maß an Kontrolle darüber, wie das aussieht. nun die Werte wie diese ändern, wird der Eigenschaftswert hier auf gemischt gesetzt der Eigenschaftswert hier auf , da Sie einen gemischten Satz von Werten haben, jedoch immer überschreiben können Verhalten jedoch immer überschreiben können , indem Sie einen Wert manuell eingeben. Sagen wir, ich will 32 Pixel zurück. Das wird es auf alle vier Seiten anwenden. Eine weitere sehr interessante Tatsache über das Auto-Layout ist, dass Sie Elemente auf verschiedene Arten ausrichten können. Standardmäßig sind die Elemente oben und links ausgerichtet, aber ich kann sie in der Mitte ausrichten. Das wird deutlicher, wenn ich eine feste Breite auf meinem Rahmen setze. Dies ist [NOISE] das Standardverhalten oben links, aber das ist oben in der Mitte. Ich kann sie oben rechts ausrichten. Wenn ich meinem Rahmen eine feste Breite oder eine feste Höhe hinzufüge , entschuldigen Sie mich, ich kann sie auch so in der Mitte ausrichten. Ich kann sie mitte-Mitte, Mitte links ausrichten , und dann kann ich sie nach unten ausrichten. Es ist super einfach und sehr intuitiv und auch sehr leistungsstark. Abgesehen von den Ausrichtungsoptionen haben wir auch einige Artikelverteilungsoptionen, von denen zwei tatsächlich gepackt und Platz dazwischen liegen. Verpackt ist die Option, die wir verwenden, wenn wir einen festen Abstand zwischen den Artikeln haben möchten . Im Moment haben wir 120 Pixel, daher werden die Elemente mit 120 Pixeln nebeneinander platziert . Aber ich kann auch Leerzeichen dazwischen wählen. Dadurch wird der Abstand zwischen Elementen auf automatisch festgelegt, was bedeutet, dass die Elemente den gesamten verfügbaren Platz des übergeordneten Frames einnehmen den gesamten verfügbaren Platz des und der Abstand zwischen ihnen automatisch berechnet wird. Moment sind wir bei 471 Pixel, aber wenn ich das verkleinere , ändert sich auch der Abstand zwischen ihnen. Das ist ziemlich cool. Dies funktioniert natürlich in beide Richtungen. Wenn ich zu vertikal wechseln werde, werden Sie sehen, dass diese Elemente jetzt vertikal statt horizontal angeordnet sind und die Verteilung gleich bleibt, Abstand und die Verteilung dazwischen. Während ich im Zwischenraum bin, richte ich Elemente auch ein wenig anders aus als zuvor, da der Abstand zwischen ihnen jetzt automatisch berechnet wird , aber ich kann sie trotzdem ausrichten links, Mitte, rechts oder wenn die Richtung horizontal ist, kann ich sie oben, Mitte oder unten ausrichten. Das ist der Abstand dazwischen. An jedem Punkt kann ich zwischen dem Leerzeichen zwischen entpackt wechseln und auch an der Ausrichtung arbeiten. Dies ist sehr praktisch für viele verschiedene Anwendungsfälle. Zum Beispiel kann ich eine Liste von Elementen als Navigationsmenü haben. Sagen wir Home, Über, Kontakt. Ich kann diese drei auswählen, und ich kann Umschalttaste A ausführen, um Auto-Layout hinzuzufügen. Dies richtet sie automatisch so aus. Ich kann auch den Abstand zwischen ihnen einstellen, sagen wir 32 Pixel. Unabhängig vom Inhalt jedes Textelements stellt Auto Layout immer sicher, dass die Ausrichtung korrekt ist und auch der Abstand zwischen den Elementen korrekt ist. Ich muss Elemente nicht jedes Mal manuell neu ausrichten, wenn ich eine Änderung vornehme. Ich kann auch eines der Gegenstände greifen und seine Position einfach mit den Pfeiltasten ändern. Wie cool ist das? Möchte ich dieses Menü vertikal statt horizontal gestalten ? Ich ändere einfach die Richtung hier. Natürlich kann ich auch die Pfeiltasten nach oben oder unten verwenden die Pfeiltasten nach oben oder unten , um die Reihenfolge dieser Elemente zu ändern. Ein weiterer sehr häufiger Anwendungsfall für das mündliche Layout ist das Erstellen einer Schaltfläche. Nehmen wir an, wir haben einen Text, den wir in einen Button verwandeln möchten. Nun, damit kann ich natürlich Auto Layout hinzufügen. Dadurch wird automatisch ein Standardabstand von 10 Pixeln und eine Polsterung von 10 Pixeln festgelegt. Ich kann dem Rahmen eine Füllfarbe hinzufügen. Sagen wir, ich will es blau machen. Sagen wir, ich möchte diesen Text weiß machen, vielleicht fett. Dann, wenn mein Rahmen ausgewählt ist, kann ich die Polsterung ändern. Angenommen, ich möchte 32 Pixel oben und unten, 64 Pixel links und rechts. Vielleicht möchte ich abgerundete Ecken hinzufügen und es zu einem blassen Knopf machen. Das Schöne daran ist, dass ich diesen Text in das ändern kann , was ich will, und der Button ändert sich automatisch. Ich kann sogar zu meiner Icon-Set-App gehen und ein Icon hineinziehen. Nehmen wir an, ich möchte dieses Alarm-Fill-Symbol hinzufügen. Ich kann dieses Symbol in meinen Canvas klicken und ziehen und dann kann ich es natürlich in meinen Auto-Layout-Frame ziehen. Dann machen wir diese Schaltfläche oder dieses Symbol, entschuldigen Sie mich, 32 Pixel, und dann kann ich meinen Rahmen auswählen und ich kann wählen alles in der Mitte so ausrichten möchte. Ich kann wählen, ob ich seine Farbe in Weiß ändern möchte, und ich kann den Abstand zwischen Elementen wählen, sagen wir 16 Pixel. Vielleicht ist das zu groß, lass uns 24 Pixel machen. Oder vielleicht ist es zu klein, lass es uns 128 Pixel machen. Sie werden sehen, dass unabhängig von der Größe des Elements da ich die Ausrichtung auf die Mitte eingestellt habe, der Text und das Symbol immer richtig ausgerichtet sind. Gehen wir zurück zu 24 hier. Außerdem kann ich die Nachricht oder den Text in der Schaltfläche immer ändern und die Größe der Schaltfläche ändert sich automatisch. Der Abstand zwischen Text und Symbol bleibt immer genau gleich. Wenn ich will, kann ich die Position immer ändern. Vielleicht möchte ich, dass der Knopf links statt rechts ist. All das passiert super leicht ohne meinerseits zu basteln. heißt, ich muss Elemente nicht manuell neu positionieren. Ich drücke einfach eine Taste. einfach ist es wirklich. Dies sind nur zwei Anwendungsfälle für Auto-Layout. Dies ist super leistungsfähig und wie Sie in dieser Klasse sehen werden, gibt es viele verschiedene Möglichkeiten, es zu verwenden und ich empfehle Ihnen dringend diese Funktion zu verwenden, da sie nur praktisch ist und spart du viel Zeit. Oh, und habe ich erwähnt, dass Sie Frames mit Auto-Layout in anderen Frames mit Auto Layout verschachteln können Frames mit Auto-Layout ? Zum Beispiel kann ich dieses Symbol greifen und es in diesen Menürahmen platzieren. Lasst uns seine Farbe ändern , damit wir sie besser sehen können. Aber sagen wir, ich wollte mit dem Link Über uns gebündelt werden . Was ich tun kann, ist, dass ich dies und das auswählen kann. Ich kann Shift A ausführen, um einen weiteren Rahmen mit Auto-Layout zu erstellen weiteren Rahmen mit Auto-Layout und ich kann die Richtung zur Horizontalen wählen, vielleicht einen richtigen Abstand zwischen den Elementen hinzufügen alles in der Mitte ausrichten. Vielleicht etwas weniger Abstand hier und vielleicht möchte ich das etwas kleiner machen. Jetzt haben wir den Mainframe , der Auto-Layout hat, aber darin habe ich einen zusätzlichen Frame auch mit Auto Layout. Dies kann so viele Ebenen erreichen, wie Sie möchten, sodass Sie so tief nisten können, wie Sie möchten. Dies sind nur die Grundlagen der Arbeit mit Auto Layout. Wie ich schon sagte, denke ich, dass dies das wichtigste Merkmal in Figma ist. Dies ist einer der Hauptgründe, warum ich Figma täglich für das UI-Design verwende. Ich ermutige Sie sehr, damit herumzuspielen, alles zu lernen, was Sie darüber lernen können, und sobald es für Sie zur zweiten Natur wird, werden Sie in Figma so viel schneller Layouts erstellen. Lassen Sie uns jetzt eine kurze Zusammenfassung machen. Mit dem automatischen Layout können Sie dynamische Layouts in Frames und Komponenten erstellen . Diese Layouts werden automatisch verkleinert oder erweitert, wenn sich der Inhalt ändert. automatische Layout bietet erweiterte Optionen für die Ausrichtung und Inhaltsverteilung. Mit Auto-Layout können Sie individuelle Auffüllung des übergeordneten Elements sowie einen festgelegten Abstand zwischen allen untergeordneten Elementen in diesem übergeordneten Element festlegen. Das automatische Layout funktioniert sowohl im horizontalen als auch im vertikalen Modus. Nun, ich hoffe, Sie haben jetzt ein viel besseres Verständnis dafür , wie Auto Layout funktioniert und warum es eine so wichtige Funktion ist. Ich glaube, dass Sie eine viel einfachere und unterhaltsame Zeit haben werden eine viel einfachere und unterhaltsame Zeit in Figma zu arbeiten, sobald Sie diese Funktion gemeistert haben Vergessen Sie also nicht zu üben. Ich habe dir nur ein paar grundlegende Beispiele und Anwendungsfälle gezeigt. Aber spielen Sie damit alleine herum und ich denke, Sie werden in kürzester Zeit den Hang bekommen. Jetzt haben wir hier ein bisschen designt indem wir Farben hinzugefügt und die Topographie eingerichtet haben. Aber jetzt ist es an der Zeit, sich wirklich darauf einzulassen. Wir werden die Seite in kleinere Abschnitte aufteilen und im Grunde genommen einen Abschnitt nach dem anderen behandeln, und wir beginnen mit der nächsten Lektion mit dem Site-Header. Wir sehen uns dort. 13. Seitenheader: Wenn ich eine solche Website entwerfe, beginne ich immer ganz oben und arbeite mich nach unten. Der erste Abschnitt, den wir angehen werden, ist der Site-Header. Im Drahtgitter enthält dies das Logo, das Navigationsmenü und die sozialen Symbole. Bevor wir anfangen, kurz zu beachten, ist das Drahtgitter als Leitfaden da. Sein Zweck ist es, uns den Inhalt zu zeigen. Beim endgültigen Design ist es jedoch vollkommen in Ordnung, das Layout des Drahtgitters zu ignorieren , und es ist vollkommen in Ordnung, die Elemente neu anzuordnen , damit sie für das endgültige Design am sinnvollsten sind. Du wirst genau sehen, was ich damit meine. Lasst uns anfangen. Ich werde an einer Kopie unseres Drahtgitters arbeiten, aber an der neuesten der die Typografieänderungen angewendet wurden und auch die Farben. Wie Sie hier sehen können, haben wir diese Farbe 081826 angewendet. Um die Dinge für uns ein bisschen einfacher zu machen, definieren wir zwei Farbstile. Ich habe vorher nicht darüber gesprochen, aber sie sind wirklich leicht zu verstehen und sie gehen so etwas. Wann immer Sie eine Farbe verwenden, die Sie an mehreren Stellen wiederverwenden möchten, sollten Sie einen Farbstil erstellen. Sie tun dies, indem Sie ein Element auswählen und zum Farbbereich gehen, auf Stil klicken und dann einen Stil erstellen, indem Sie auf die Plusschaltfläche klicken. Nennen wir das Schwarz. Anstatt den Farbbereich anzuzeigen, wird nur Schwarz angezeigt, und ich kann dasselbe für den Rest der Elemente tun. Anstatt 081826 zu verwenden, kann ich hier klicken und ich kann Schwarz wählen, und hier ist der coole Teil. Wenn ich jetzt außerhalb meiner Frames klicke, wenn ich also auf die Leinwand klicke, sehe ich hier alle meine Farbstile und ich kann auf Bearbeiten klicken, und ich kann seine Eigenschaften und alle Elemente ändern die diesen Farbstil verwenden, werden automatisch aktualisiert. Das ist super cool. Jetzt lass mich diese Farbe einfach zurückgeben. Um den hart codierten Farbwert in den Farbstil zu ändern den Farbstil zu , den ich gerade auf der gesamten Seite erstellt habe, kann ich einfach die gesamte Seite auswählen, und wann immer ich 081826 sehe, kann ich darauf klicken und ich kann schwarz wählen. Jetzt verwenden alle Elemente auf meiner Seite, die wir verwenden , dieser fest codierte Wert jetzt Schwarz. Dies wird es mir sehr einfach machen die Farbe zu ändern, wenn ich irgendwann entscheide, dass es mir nicht mehr gefällt, oder ich muss kleine Anpassungen vornehmen. Dies ist ein superschneller Weg, dies zu tun. Lassen Sie uns auch einen Farbstil für diese Farbe erstellen, D09366, und wir nennen das Akzent. Großartig. Jetzt schauen wir uns über den Site-Header an. Um uns die Arbeit erheblich zu erleichtern, verwenden wir das automatische Layout. Der erste Ort, an dem wir ein automatisches Layout hinzufügen, ist tatsächlich der übergeordnete Frame. So machen wir das. Wir wählen es aus, wir gehen zum automatischen Layout, wir klicken darauf. Wir stellen sicher, dass die Richtung vertikal ist, und wir legen den Abstand zwischen den Elementen auf 240 Pixel fest, und ich setze die Polsterung auf Null. Du wirst in ein bisschen sehen warum. Ich setze auch eine feste Breite in diesem Rahmen auf 1800 Pixel. Ich werde die Ausrichtung auf Mitte ändern, also ist alles gut in der Mitte ausgerichtet. Da sich alle untergeordneten Elemente dieses übergeordneten Frames innerhalb von Gruppen befinden, sind sie gut organisiert, ausgerichtet und genau 240 Pixel voneinander entfernt positioniert. Das ist genau das, was ich will. Das wird es für uns sehr einfach machen zu arbeiten, denn wenn ich mich irgendwann entschieden habe, okay, ich möchte die Positionen dieser beiden Elemente austauschen, ich kann es einfach auswählen und dort verschieben wo ich will in der seite. Schau, wie einfach das ist. Vielleicht möchte ich, dass das Menü oben auf der Seite steht, nun, ich kann es einfach so verschieben. Ziemlich cool. Aber jetzt richten wir unsere Aufmerksamkeit auf den Header. Standardmäßig ist dies die Struktur , die wir im Drahtgitter hinzugefügt haben. Aber das ist wie eine typische Struktur für einen Header, und das möchte ich nicht wirklich tun. Ich möchte etwas Besonderes für diese Restaurant-Website. Stattdessen wähle ich es aus, und derzeit ist dies eine Gruppe, aber ich kann es immer in einen Rahmen mit automatischem Layout verwandeln. Ich kann einfach hier klicken. Ich schaffe es vertikal. Ich kann alles in der Mitte so ausrichten und den Abstand zwischen den Elementen auf 64 Pixel einstellen. Das sieht ziemlich gut aus. Jetzt werden wir diesen Header nennen. Mal sehen, was über das Logo geht. Dies ist 80 Pixel in der Höhe. Ich denke, ich werde es auf dieser Größe behalten , weil es ziemlich gut aussieht und wenn Sie sich fragen, warum 80 Pixel? Warum 240 Pixel hier? Nun, das sind alles Vielfache von acht. Ich verwende das 8-Punkte-System, also wenn du diese Lektion verpasst, geh zurück und sieh es dir an, dann wirst du verstehen warum. Jetzt haben wir über das Logo gesprochen, unsere 80 Pixel hoch. Ich denke, das ist eine ziemlich gute Größe. Ich stelle es aus dem Navigationsmenü auf 64 Pixel ein. Da wir uns im Navigationsmenü befinden, benennen wir dies auch in Nav-Menü um, und lassen Sie uns dies auch in einen Rahmen mit automatischem Layout verwandeln, und stellen wir sicher, dass wir richtigen Abstand zwischen diesen Elementen haben. Lassen Sie mich hier ein bisschen hineinzoomen . Ich glaube, ich will ein bisschen mehr, vielleicht 48 Pixel wie diese, also sind sie etwas weiter auseinander. Das sieht ziemlich gut aus. Was ich nicht mag, ist die Position dieser Icons. Sie sehen unter dem Menü fehl am Platz aus. Was ich stattdessen tun kann, ist sie woanders auf meiner Seite zu platzieren . Es spielt keine Rolle, ob der ursprüngliche Drahtgitter angibt , dass sie neben dem Menü sein müssen. Im endgültigen Design kann ich jede gewünschte Änderung vornehmen, solange ich denselben Inhalt behalte, aber ich kann diesen Inhalt nehmen und ihn nach Belieben neu anordnen. Genau das mache ich hier. Ich nehme das, das ich soziale Icons nenne, und füge auch ein automatisches Layout hinzu. Ich befehle X. Ich gehe einfach zu „Command V“, um es in meine Seite einzufügen. Da mein gesamter Rahmen ein automatisches Layout verwendet, wurde dieser ganz unten platziert und ich möchte es ganz oben, also werde ich es einfach so verschieben. Jetzt, nach einigem Einzoomen, habe ich jetzt meinen Social Icons Frame ganz oben positioniert . Aber ich werde diese wahrscheinlich irgendwo auf der rechten Seite platzieren, was bedeutet, dass ich hier links und oben links etwas freien Speicherplatz habe. Ich kann diesen Bereich nutzen, um einige vielleicht nützliche Informationen hinzuzufügen . Was ist, wenn wir die Adresse und die Telefonnummer für das Restaurant hinzufügen die Telefonnummer für , das ganz oben steht. Es ist leicht zu erkennen und es ist tatsächlich eine ziemlich gute Nutzung von Speicherplatz Kontaktinformationen hinzuzufügen. Was wir tun werden, ist, dass wir eine obere Leiste erstellen die diese Informationen, die Adresse, die Telefonnummer und auch die sozialen Symbole enthält die Adresse, die Telefonnummer . Wenn der Frame für soziale Symbole ausgewählt ist, kann ich erneut ein automatisches Layout hinzufügen, um kann ich erneut ein automatisches Layout hinzufügen, um einen übergeordneten Frame zu erstellen. Ich kann wieder „Shift A“ um einen weiteren Frame zu erstellen. Beachten Sie, dass Frame 1 jetzt soziale Symbole enthält. Nennen wir das Frame Top Bar. Die obere Leiste zieht einfach die Seiten, um sie in voller Breite zu machen, oder wir können ihre Breite von hier aus manuell einstellen, wir können sie auf 1.800 Pixel einstellen. Aber hier ist ein kurzer Tipp für dich. Option zur Größenänderung von Cd, die jetzt im Rahmen mit automatischem Layout verfügbar ist . Im Moment ist es auf feste Breite eingestellt. Aber wir können es auch ändern, um Inhalte zu umarmen, wodurch der Rahmen so groß ist wie sein Inhalt. Oder ich wähle „Behälter füllen“. Dies wird es so groß wie der verfügbare Speicherplatz im übergeordneten Container machen , was in meinem Fall das Hauptrame ist. Mir ist klar, dass das gerade etwas zu kompliziert erscheinen mag , aber das ist es nicht wirklich. Lassen Sie mich versuchen, es etwas weiter zu erklären. Wir haben unseren Hauptrahmen namens Large Screens. Dies ist unsere Webseite. Lassen Sie mich in meiner Webseite einige dieser Gruppen zusammenklappen, einige dieser Gruppen zusammenklappen damit Sie ein bisschen besser verstehen können In meinem Hauptrahmen haben wir zwei Kinder, Header und obere Leiste. Die obere Leiste hat ein automatisches Layout, und in der oberen Leiste haben wir den Rahmen für soziale Symbole , der auch ein automatisches Layout hat. Jetzt habe ich die obere Leiste eingestellt, um den Container zu füllen. Dies bedeutet, dass seine Breite 100 Prozent seines übergeordneten Containers betragen wird . Der übergeordnete Container ist Große Bildschirme, was 1.800 Pixel beträgt. Sie werden feststellen, dass wenn ich die Größe des Elternbildschirms oder des übergeordneten Frames auf 1.645 ändern werde, meine obere Leiste ebenfalls 1.645 sein wird, da sie den Container füllen soll. Ich hoffe, das ergibt ein bisschen mehr Sinn. Ich bin mir sicher, wenn Sie mit diesen Funktionen herumspielen, werden Sie sie viel besser verstehen. Dann sagte ich, dass wir diese beiden Elemente in unsere obere Leiste einfügen werden. Wenn Sie Elemente direkt in einen Rahmen mit automatischem Layout platzieren möchten , können Sie diesen Rahmen einfach auswählen und diese einfach einfügen. Ändern wir nun die Richtung in „Horizontal“. Weil ich möchte, dass diese in einer einzigen Zeile angezeigt werden. Ich werde auch die Höhe ändern, um Inhalte zu umarmen. Dies wird die obere Leiste so groß wie der Inhalt im Inneren machen. Jetzt möchte ich, dass sich die Icons auf der rechten Seite befinden, und manchmal hat Figma einen seltsamen Fehler, bei dem, wenn Sie hier mit der Größenänderung herumspielen, diese auf der Horizontalen herauskommt. In diesem Fall müssen Sie einige dieser Elemente wie in dieser Situation erneut auswählen . Wir sind gerade von Umarmungsinhalten zum Füllen des Behälters gegangen , um die Größe dieser oberen Leiste entsprechend anzupassen. Ich werde hier ein nettes Feature verwenden, Raumverteilung. Ich werde dies von gepackt in Leerzeichen ändern , weil ich die Icons am äußersten Rand hier rechts und den Text auf der linken Seite anzeigen möchte die Icons am äußersten Rand . Mit Leerzeichen dazwischen Figma automatisch den Abstand zwischen den einzelnen Elementen auf gleich ein. Richten wir diese auch so an der Mitte aus. Lassen Sie uns vorerst diese Polsterung von 10 Pixeln loswerden , wir brauchen es nicht. Stattdessen verwenden wir oben 24 Pixel, 24 unten, und ich setze eine Polsterung links und rechts auf 64 Pixel. Jetzt haben wir hier 64 Pixel und 64 Pixel hier, den Abstand zwischen den Elementen und den Kanten. Wenn Sie sich daran erinnern, stellen wir diese Hilfslinien tatsächlich auf 120 Pixel ein. Aber wir werden das so ändern, dass sie bei 128 Pixel liegen. Da dies bei 120 ist, mache ich 1, 2, 3, 4, 5, 6, 7, 8, also 128. Mit den Pfeiltasten schiebe ich dies nach links, 1, 2, 3, 4, 5, 6, 7, 8. Außerdem erstelle ich eine neue Anleitung mit 64 Pixeln, die hier und hier ist. Normalerweise wird der Wert dieser Hilfslinien genau hier auf dem Lineal angezeigt, oder die Position der Hilfslinien wird auf dem Lineal angezeigt. Aber aus irgendeinem Grund nervt Figma mich gerade. Ich bin mir nicht sicher warum, aber normalerweise sieht man diesen Wert direkt neben dem Leitfaden hier, aber darauf können wir vorerst verzichten. Jetzt möchte ich diesen Text ein bisschen kleiner machen, also wähle ich beide aus. Ich benutze 16 Pixel. Wir müssen auch die Zeilenhöhe ändern. Wenn wir auf unsere Assets-Seite verweisen, können wir sehen, dass wir auf 16 Pixeln 24 Pixel als Zeilenhöhe verwenden müssen. Wir kehren mit diesen beiden ausgewählten Elementen zu unserem Design zurück mit diesen beiden ausgewählten Elementen ändern die Zeilenhöhe auf 24. Jetzt möchte ich diesem Text auch einige Icons hinzufügen. Vielleicht ein Symbol eines Karten-Pins zu diesem und ein Symbol mit einem Telefon für dieses. Ich denke, es wird die Dinge nur ein bisschen interessanter machen . Dafür öffne ich mein Icon-Setup, wo ich alle meine SVG-Symbole habe. Wir verwenden Icon-Sets , die Bootstrap-Symbole genannt werden, und Sie finden den Link dazu auch in der PDF-Datei für Ressourcen. Dies sind die gesetzten Bootstrap-Symbole. Suchen wir nach Map-Pin , der ungefähr so aussieht. Vielleicht Ort. Nein, vielleicht pinnen Sie einfach. Mal sehen, ob wir verschiedene Icons finden können. Vielleicht etwas mit Geographie, Geo-Alt. Ich denke, das würde gut funktionieren, also kopiere ich das einfach und füge es hier ein. Die Größe ist korrekt, 16 mal 16, aber ich möchte dies mit dem Text bündeln. Ich wähle sowohl das Symbol als auch den Text aus. Drücken Sie „Umschalt-A“, um einen weiteren Frame mit automatischem Layout hinzuzufügen , das nur diese beiden Elemente enthält. Ich werde sicherstellen, dass es in der Mitte so ausgerichtet ist . Ich möchte, dass der Text auf der rechten Seite steht. Ich stelle den Abstand auf acht Pixel fest. Ich möchte auch eine leicht gedämpfte Farbe für das Symbol verwenden , etwa 50 Prozent. Auf zwei Arten, wie wir dies tun können : Wir können entweder die Deckkraft der Ebene auf 50 Prozent ändern die Deckkraft der Ebene auf 50 Prozent oder einen neuen Farbstil erstellen , dem die Farbdeckkraft auf 50 Prozent eingestellt ist. Es liegt wirklich an dir. Ich denke, das ist tatsächlich ein bisschen einfacher die Deckkraft auf der Ebene festzulegen denn wenn Sie die zugrunde liegende Farbe ändern, bleibt die Deckkraft gleich. Ich mache das einfach, 50 Prozent mit der schwarzen Farbe. Machen wir dasselbe für die anderen Texte, nämlich dieser. Ich suche nur nach dem Telefonsymbol und benutze dieses Symbol mit der Aufschrift „Telefon“. Dasselbe Deal, ich werde das kopieren und einfügen, und ich habe natürlich die Breite, Höhe auf 16 Deckkraft, 50 Prozent Farbe auf Schwarz geändert Höhe auf 16 Deckkraft, . Jetzt mache ich das Gleiche, was ich mit dem anderen Text gemacht habe. Wählen Sie Text und Symbol Umschalt-A aus, stellen Sie sicher, dass der Abstand acht Pixel beträgt, richten Sie sie in der Mitte und lassen Sie den Text auf der rechten Seite einstellen. Nun möchte ich auch, dass diese beiden Elemente Teil derselben Gruppe sind, also wenn sie ausgewählt sind, Umschalt-A erneut, um einen weiteren Auto-Layout-Frame zu erstellen. Ich stelle den Abstand zwischen ihnen auf 32 Pixel ein, einfach so. Jetzt möchte ich auch ein kleines Randtrennzeichen unten in dieser oberen Leiste hinzufügen . Lassen Sie mich tatsächlich Shift-R , um diese Guides zu verstecken. damit wir sehen können, was wir tun. die obere Leiste ausgewählt ist, kann ich einfach zu Strich gehen , zum Hinzufügen klicken, Wenn die obere Leiste ausgewählt ist, kann ich einfach zu Strich gehen, zum Hinzufügen klicken, ich verwende Schwarz. Ich entscheide mich draußen. Eigentlich ist das Schwarz hier ein bisschen zu viel. Wir müssen seine Deckkraft verringern, damit wir den Stil trennen seine Deckkraft auf 15 Prozent ändern können. Wenn wir wollen, wenn wir wissen, dass wir diese Farbe woanders wiederverwenden werden, können wir dafür einen Farbstil erstellen. Klicken wir tatsächlich auf das „Plus“ und nennen es Black 15. Fünfzehn steht für 15 Prozent Opazität. Jetzt haben Sie beide Methoden, um mit einer Vollfarbe und einer Farbe mit Deckkraft zu arbeiten. Hier auf dem Symbol haben wir der Ebene die Deckkraft hinzugefügt, während wir hier der Farbe die Deckkraft hinzugefügt haben. Sie können sehen, dass Sie beide Methoden verwenden können. Es hängt wirklich davon ab , was Sie tun möchten. Lassen Sie uns abschließend etwas über diese Icons sehen. Sie sind gerade etwas zu groß, also ändern wir sie auf 24 Pixel. Der Facebook-Update hat das Update nicht bekommen. Außerdem ist das Instagram-Symbol etwas schief. Manchmal macht Figma das mit einigen SVG-Symbolen, also lass mich das einfach schnell reparieren. Ich habe gerade eine neue Kopie des Symbols benutzt , um das alte zu ersetzen. Dies sind auch Symbole aus dem Bootstrap-Symbol Set. Wie Sie hier sehen können, sieht das Instagram-Symbol korrekt aus. Lassen Sie uns auch den Abstand oder den Abstand zwischen den Elementen von 24 bis 32 ändern . Ich denke, das wird ein bisschen besser aussehen. Stellen wir sicher, dass die Farben korrekt sind und das sind sie. Ich glaube, wir sind fertig. Das ist jetzt unsere oberste Leiste und Site-Header. Da wir das Auto-Layout verwendet haben, sind sie korrekt positioniert. Die Kopfzeile ist jetzt in der Seite zentriert. Das Logo ist korrekt außerhalb des Navigationsmenüs positioniert. Wir haben auch einige Inhalte aus dem Heldenbereich in diese obere Leiste verschoben , was sich übrigens die obere Leiste jetzt so verhält. Sehen Sie, wie bei der Größenänderung der Seite auch die Größe der oberen Leiste geändert und die Elemente sich automatisch neu positionieren? Das ist super cool. Das ist die Leistungsfähigkeit des automatischen Layouts und die verschiedenen Größenanpassungsoptionen, die wir in Figma haben. Dann, obere Leiste, Site-Header, überprüfen. Jetzt sind Sie an der Reihe, den Site-Header zu erstellen. wenn du mit mir zusammengearbeitet hast, dann großartig. Es bedeutet, dass es bereits fertig ist. Wenn nicht, schauen Sie sich das Video noch einmal an. Pausieren Sie es bei Bedarf. Wenn es etwas gibt, das Sie nicht verstehen oder Sie eine Frage haben, beginnen Sie unten einfach eine neue Diskussion und ich helfe trotzdem aus, was ich kann. Lassen Sie uns damit zum nächsten Abschnitt in unserem Design übergehen, dem Heldenbereich. Kommt hoch. 14. Hero: Der Hero-Bereich ist ein sehr wichtiger Teil einer Website, da er eines der ersten Dinge ist , die ein Besucher sieht. Normalerweise enthält es einen Titel und eine Beschreibung des Dienstes oder Produkts, das präsentiert wird, und eine Art zum Handeln, jetzt kaufen, kostenlos testen, abonnieren und so weiter. Unser Hero-Bereich ist aufgrund der Art der Website, die wir entwerfen, etwas einfacher . Lasst uns dran kommen. Basierend auf dem Wireframe , das wir erstellt haben, ist dies unser Hero-Bereich. Hier drin haben wir das Motto des Restaurants, das als Gast kommt, Urlaub ist ein Freund und wir haben auch die Geschäftszeiten und dann eine Art Bild. Beginnen wir mit dem eigentlichen Bild und Sie finden Links zu allen Bestandsbildern, die ich für dieses Projekt verwendet habe , in der PDF-Datei Ressourcen. Laden Sie diese also von dort herunter oder verwenden Sie Ihre eigenen Fotos. Aber für mich verwende ich für diesen Abschnitt ein Bild, das das Restaurant im Grunde zeigt. Offensichtlich ist dies ein fiktives Restaurant, aber das Bild, das ich benutzen werde , kann als das Innere des Restaurants angesehen werden. Wenn diese Form ausgewählt ist, denken Sie daran, dass es sich nur um ein einfaches Rechteck handelt, ich kann zu Füllen gehen und anstelle einer „Solid“ -Farbe kann ich ein „Bild“ wählen. Ich kann auf diese Schaltfläche klicken, und im Ordner „ Klassenressourcen“ habe ich das Bild , das ich verwenden werde, tatsächlich von Unsplash heruntergeladen . wähle ich einfach aus. Wenn Sie möchten, können Sie hier in Figma mit einigen Bildbearbeitungsoptionen herumspielen . Für mich lasse ich es einfach so wie es ist. Das einzige, was ich damit machen werde, ist eine Overlay-Farbe hinzuzufügen. Dafür kann ich eine weitere Füllung hinzufügen. Für Farbe verwende ich das „Schwarz“ 081826. Ich werde das anstelle der reinen schwarzen Farbe verwenden und ich werde so eine Deckkraft von 25 Prozent hinzufügen. Jetzt möchte ich, dass dieser Hero-Bereich als Trennzeichen zwischen der Oberseite der Website und dem Rest des Inhalts fungiert zwischen der Oberseite der . Eine gute Möglichkeit, dies zu tun, besteht darin, diesen Abschnitt in voller Breite zu machen , damit er die gesamte Breite der Seite beansprucht. Derzeit ist dies eine Gruppe, so haben wir sie erstellt, als wir das Drahtmodell erstellt haben, aber lassen Sie es uns in eine Rahmenbreite verwandeln. Du hast es erraten, Auto-Layout. Klicken wir auf diese Schaltfläche und legen wir Größenänderung auf „ Container füllen “ fest, damit er die gesamte Breite einnimmt. Jetzt möchte ich, dass das Bild auf der linken Seite positioniert wird, also wähle ich es aus und verwende es einfach mit der linken Pfeiltaste, um es zu verschieben. Ich stelle auch seine Breite auf „Container füllen“ ein. Jetzt wähle ich dieses andere Element und setze seine Breite auch auf „Behälter füllen“. Auf diese Weise werden beide Elemente genau die Hälfte des verfügbaren Speicherplatzes einnehmen . Aber es gibt auch eine Lücke zwischen diesen. Ich möchte das nicht, also wähle ich den Rahmen mit Auto-Layout aus, und ich setze den Abstand einfach so auf Null. Jetzt ändere ich auch die Höhe dieses Bildes auf 960 Pixel. Da ich das Bild als Hintergrund für diese Form verwende , der Bildhintergrund in dem Moment, in dem ich die Größe der Form positioniert sich der Bildhintergrund in dem Moment, in dem ich die Größe der Form ändere, automatisch neu , um die gesamte Form auszufüllen. Großartig. Jetzt schauen wir uns genau hier über diesen Abschnitt an. Bevor wir weitermachen, benennen wir dies tatsächlich in Hero um. Benennen wir dies in Image um und benennen wir dies in Hero Content um. der zweite Frame ausgewählt ist, legen wir seine Höhe auf „ Container füllen “ fest und fügen wir ihm auch ein automatisches Layout hinzu, da ich diesen Inhalt zentrieren möchte. Ich möchte auch etwas Polsterung hinzufügen, also lass uns das machen. Auto-Layout, stellen Sie sicher, dass es vertikal ist. Ich ändere den Abstand zwischen Elementen auf 64 Pixel, und dann ändere ich seine Ausrichtung auf Mitte, Mitte, einfach so. Außerdem füge ich links und rechts 128 Pixel Padding hinzu . Dann wähle ich diesen Text aus und setze seine Größenänderung auf „Hug Contents“. Eigentlich sollte es vertikal „Hug Content“ sein , aber horizontal sollte es „Fill Container“ sein. Es geht nur oder füllt nur den verfügbaren Speicherplatz aus. Jetzt fragen Sie sich vielleicht, warum ändert sich die Größe nicht, um das gesamte Feld auszufüllen? Nun, das liegt daran, dass wir diese Polsterung hinzugefügt haben , 128. Sie werden sehen, dass der Text jetzt, wenn wir zum Beispiel die Polsterung entfernen, den gesamten verfügbaren Platz ausfüllt, aber wir möchten dieses Auffüllen tatsächlich verwenden. Das letzte, was Sie hier tun müssen , ist, den Text in die Mitte auszurichten. Wählen wir nun auch den Hero-Inhaltsrahmen aus und füllen ihn mit unserer schwarzen Farbe. Dann können wir unseren gesamten Text auswählen und den Farbstil trennen und unsere eigene Farbe verwenden. Ich werde diesen Rahmen auch ein bisschen transparent machen , 95 Prozent, nur damit das Weiß nicht zu hart ist. Ich senke die Deckkraft nur ein wenig, damit sie sich nur ein wenig mit dem Hintergrund vermischt. Dann haben wir endlich noch die Geschäftszeiten, um die wir uns kümmern müssen. Verwenden wir dafür die „Accent“ -Farbe, und es gibt tatsächlich ein paar Änderungen, die wir hier vornehmen müssen. Zuallererst glaube ich nicht wirklich, dass wir die Worte Geschäftszeiten verwenden müssen , weil es ziemlich selbsterklärend ist, dass dies ein Zeitplan ist, und dann werde ich diese beiden Elemente trennen. Platzieren Sie sie zunächst verschiedenen Zeilen, und zweitens wähle ich dieses Element oder diesen Text aus und schneide es von dort aus. Ich setze ein „Auto Width“ auf dieses Bit. Ich werde es in der Mitte ausrichten und dann dupliziere ich es, befehl D. Dann füge ich die Texte ein, die ich zuvor ausgeschnitten habe. Jetzt wähle ich beide aus, verschiebe A, um einen weiteren Rahmen mit ihnen zu erstellen, und ich stelle den Abstand zwischen ihnen oder den Abstand zwischen ihnen auf 16 Pixel ein, und ich werde sicherstellen sie sind in der Mitte ausgerichtet. Jetzt ist der Text hier etwas zu klein im Vergleich zum großen Titel oben. Derzeit verwende ich 21 Pixel, aber ich möchte etwas Größeres als das. Gehen wir zurück zu Vermögenswerten. Mal sehen, die nächste verfügbare Größe basierend auf unserer Typskala ist 28 Schriftgröße 40 Zeilenhöhe. Lasst uns das machen. Wählen Sie beide aus, 28 und 40, und lassen Sie uns schließlich die erste Zeile jedes Textfelds auswählen und wir werden es „Fett“ machen. Dasselbe dafür, „Bold“, und das sollte es sein. Das ist unser Hero-Bereich. Wenn ich jetzt die Größe meines Bildschirms ändern möchte, sehen Sie natürlich, wie sich das Bild auch ändert und der Text auch die Größe ändert während er in dieser Blackbox immer noch in der Mitte ausgerichtet ist? Sozusagen. Das ist die Leistungsfähigkeit der Optionen für das automatische Layout und die Größenänderung von Figma. Ziemlich cool. Das haben wir bisher und ich habe das absichtlich gemacht. Ich habe die ursprünglichen Wireframes behalten und die Schritte benannt. Sie können den Unterschied zwischen dem ursprünglichen Drahtgitter und dem Zeitpunkt sehen , an wir unsere Typografie zum ersten Mal hinzugefügt haben, wo wir einige der Farben zum endgültigen Design hinzugefügt haben. Hier haben wir angefangen, und hier sind wir gerade. Sehen Sie, welchen Unterschied Sie in einem Design machen können , indem Sie einfach die richtige Typografie, einige Farben und durchdachte Abstände und Größenbestimmungen für Elemente anwenden? Nur um sicherzustellen, dass alles noch richtig ausgerichtet ist, können wir die Führungen aufrufen und prüfen, ob unsere Elemente richtig ausgerichtet sind oder nicht . Wie Sie sehen können, ist dieser Text genau auf 128 Pixel von der Kante entfernt positioniert, da wir hier im übergeordneten Frame für den Hero eine Polsterung , da wir hier im übergeordneten Frame für den Hero ist dieser Text genau auf 128 Pixel von der Kante entfernt positioniert von 128 Pixeln entfernt haben, was genau das ist, was wir wollen. Wie gewohnt sind Sie jetzt an der Reihe, den Heldenbereich zu üben und zu erstellen. Du kannst es auf deine eigene Weise machen, du musst nicht genau replizieren, was ich tue. Wenn Ihnen die Farben oder die Schriftarten, die ich ausgewählt habe, nicht mögen , ändern Sie sie. Verwenden Sie ein anderes Layout, Sie keine Angst zu experimentieren. In dieser Klasse zeige ich Ihnen meine Art, Dinge zu tun, aber offensichtlich ist das nicht der einzige Weg und ich würde gerne einige Variationen meines ursprünglichen Designs sehen . Trotzdem ist es auch vollkommen in Ordnung, meine Schritte genau deshalb zu replizieren , weil Sie lernen, Sie sich daran gewöhnen, Figma für Ihr Design zu verwenden , und das ist auch ein großer Gewinn. Lassen Sie uns damit zum Abschnitt zur Menübeschreibung übergehen . Das steht vor der Tür. 15. Food: Der Abschnitt zur Menübeschreibung hat die Aufgabe das Menü mit wenigen Worten zu beschreiben. Um das gewünschte Aussehen zu erhalten, verwenden wir ein paar verschachtelte Frames mit automatischem Layout. Lass mich es dir zeigen. Dies ist der Abschnitt , den wir in dieser Lektion behandeln werden, und basierend auf dem Drahtgitter haben wir einen Titel, die Beschreibung selbst und ein Bild. Dies ist fakultativ. Wie ich bereits sagte, soll der Drahtgitter als Leitfaden dienen, und unser endgültiges Design muss nicht unbedingt das gleiche Layout verwenden. In diesem Sinne, wenn ich mir die Dinge ansehe, die wir bisher entworfen haben , und die Dinge, die vor uns liegen, den Menübereich, glaube ich nicht wirklich, dass wir dieses Bild genau hier brauchen. Stattdessen halte ich es einfach und verwende einfach den Titel und den Text. Da dies jedoch kein sehr langer Text ist und wir all diesen freien Speicherplatz hier haben, werden wir diese beiden Elemente nebeneinander platzieren, also den Titel links, den Text rechts. In diesem Sinne wählen wir die enthaltene Gruppe aus und nennen wir sie Food Menu Description. Da es sich um eine Gruppe handelt, verwandeln wir sie in einen Frame, indem wir ein automatisches Layout hinzufügen. Ändern wir die Richtung in „Horizontal“. Lassen Sie uns die Gruppierung dieser beiden Gruppen aufheben und legen wir die feste Breite fest, um den Container für diese beiden Elemente zu füllen. Verwenden wir auch den Füllcontainer für das übergeordnete Element. Auf diese Weise nehmen beide Elemente genau die Hälfte des verfügbaren Platzes ein. Das ist ziemlich gut. Nun möchte ich auch, dass dieser Leitfaden als Grenze für die Texte dient. Grundsätzlich muss dieser Text hier beginnen, und dieser Text muss hier enden. zu tun ist sehr einfach. Wir wählen den übergeordneten Frame aus und fügen etwas Polsterung hinzu. Wir sagen 128 und 128. Mir gefällt die Tatsache sehr , dass dieser Text hier genau derselben Zeile beginnt , die diesen Heldenbereich teilt. Aber was ich nicht mag, ist die Tatsache, dass dieser Text zu nah ist oder der Titel meinem Haupttext zu nahe kommt. Um das zu beheben, möchte ich auf der rechten Seite dieses Textes etwas Polsterung hinzufügen . Offensichtlich kann ich das standardmäßig nicht tun, ich muss ein automatisches Layout hinzufügen. Machen wir das mit dem ausgewählten Titel Shift A, um ihn in einem Rahmen mit automatischem Layout zu platzieren, und Figma fügt standardmäßig 10 Pixel Abstand und Polsterung hinzu, aber ich möchte das entfernen. Fügen Sie stattdessen einfach 128 Pixel Polsterung auf der rechten Seite hinzu. Dies hat tatsächlich zu einem unerwarteten Verhalten geführt , bei dem dieses Element den Text zur Seite drückte. Das will ich nicht, weil ich möchte, dass dieser Text genau hier an dieser Mittellinie ausgerichtet ist. Das passiert, denn als wir diesen Frame hinzugefügt haben, hat er seinen Re-Sizing-Modus automatisch in Hub-Inhalte geändert , aber wir wollen dies nicht, wir wollen Container füllen. Außerdem müssen wir den darin enthaltenen Text auswählen und von hier aus Füllcontainer auswählen. Jetzt haben wir den übergeordneten Frame 128 Pixeln und dann den Text , der den Container füllen soll, und er füllt seinen Container bis zu dieser 128-Pixelmarke aus, weil wir diese Auffüllung haben. Durch die Verwendung einiger verschachtelter Auto-Layout-Frames haben wir es geschafft, das gewünschte Aussehen zu erhalten. Außerdem möchte ich einige Änderungen an diesem Text vornehmen , da wir derzeit zu viele leere Zeilen haben und auch die Farbe etwas abseits ist. Es benutzt natürlich unsere schwarze Farbe, unsere schwarze Farbe, aber ich möchte etwas gedämpfteres. Für die meisten Absätze in unserem Design verwenden wir eine schwarze Deckkraft von 75 Prozent. Wie ich Ihnen in einer früheren Lektion gezeigt habe, können Sie dies auf zwei Arten tun. Sie können entweder die Deckkraft der Ebene auf 75 Prozent ändern oder die Deckkraft der Farbe ändern. Lasst uns weitermachen und das machen. Ich tue es, um dir beide Wege zu zeigen, du kannst wählen, womit du dich am wohlsten fühlst. Das erste, was wir tun müssen, ist dass wir einen Farbstil verwenden, den wir trennen und dann die Farbdeckkraft ändern und dann einen neuen Farbstil erstellen müssen und dann die Farbdeckkraft ändern , genau wie wir Schwarz erstellt haben 15. Jetzt werden wir Black 75 erstellen. Jetzt haben wir den schwarzen 75-Farbstil zur Verfügung, wenn wir ihn woanders verwenden möchten. Lassen Sie uns dies auch etwas interessanter aussehen, indem wir genau wie bei diesem Text etwas richtiges Padding hinzufügen , da ich das Gefühl habe , dass dieser Text für diesen Abschnitt etwas zu lang sein könnte. der Text ausgewählt ist, Umschalttaste A, um ein automatisches Layout hinzuzufügen, Wenn der Text ausgewählt ist, Umschalttaste A, um ein automatisches Layout hinzuzufügen, entfernen Sie den Standardabstand und den Standardabstand, fügen Sie den 128-Pixel-Padding auf der rechten Seite hinzu und stellen Sie sicher, dass der übergeordnete Frame auf Füllcontainer und auch der darin enthaltene Text ist so eingestellt , dass er Container füllen soll. Jetzt stimmt der Text immer noch mit Mittellinie überein, die wir im Helden erstellt haben, aber er hat auch eine schöne Trennung hier auf der rechten Seite. Um dies noch besser aussehen zu lassen, ändern wir die Farbe dieses Titels von Schwarz zu Akzent. Ich denke, das bindet einfach alles richtig gut zusammen. Darauf folgt unsere Speisekarte. Um jedoch einen weiteren Grad der Trennung zwischen diesen beiden Abschnitten hinzuzufügen , wir fort und fügen hinzu, was in CSS genannt wird, eine horizontale Regel, im Grunde genommen eine Trennlinie ist. Ich nehme das Zeilenwerkzeug oder drücke L auf der Tastatur und klicke und ziehe einfach eine Linie. Es spielt keine Rolle, welche Größe es hat, weil wir es so einstellen können , dass er den Container so füllt. Was die Strichfarbe angeht, kann ich schwarz 15 wählen. Es teilt genau den gleichen Stil mit der Linie, die wir hier in der oberen Leiste erstellt haben. Jetzt haben wir die Beschreibung des Essensmenüs erstellt. Wenn wir den Bildschirm greifen und einfach mit der Größenänderung beginnen, werden Sie feststellen, dass die Textabschnitte beide entsprechend skalieren, was großartig ist. Jetzt ist es an der Zeit zu üben. Erstellen Sie die Menübeschreibung, wenn Sie das noch nicht getan haben. Hattest du aus Neugier bisher irgendwelche Probleme? Alle Techniken, die Sie nicht verstanden haben, denken Sie vielleicht daran, Sie haben immer die Möglichkeit, mir eine Nachricht im Diskussionsbereich zu hinterlassen , und ich helfe auf jede mögliche Weise aus. Weiter kommen wir zu einem der komplexeren Abschnitte unseres Designs, nämlich dem Lebensmittelmenü. Lasst uns das als Nächstes angehen. 16. Speisekarte für Steaks: Wie ich bereits sagte, ist der Abschnitt „Lebensmittelmenü“ einer der komplexeren Teile unseres Designs. Technisch nicht komplex, aber in Bezug auf den Inhalt, weil es der größte Abschnitt auf der Seite ist, und deshalb teilen wir ihn in drei Teile auf. In diesem ersten Teil beschäftigen wir uns mit der Speisekarte für Steaks. Lass uns gehen. nun zu unserem Design in Figma zurückkehren, können wir sehen, dass der Menübereich laut Drahtgitter einen Titel haben sollte. Dann haben wir die Menükategorien, Steaks, Burger und Sandwiches, Quickies und Salate, die als Tablings präsentiert werden. Wenn wir auf eine dieser Tablings klicken, zeigen wir einen Tab-Inhalt als eigentliche Gerichte an. Obwohl ich Tabs im Drahtgitter verwendet habe, werde ich sie nicht im endgültigen Design verwenden. Ein paar Gründe dafür. Meiner Meinung nach ist die Verwendung von Tabs in Ordnung, wenn Sie Inhalte haben, die ähnlich groß sind. In unserem Fall können wir, wenn wir uns die Projektübersicht ansehen , sehen wir, dass das Menü von Kategorie zu Kategorie sehr unterschiedlich ist . Wir haben 1, 2, 3, 4, 5 Artikel im Einsatz. Wir haben 1, 2, 3, 4, 5, 6, 7, 8 in Burgern und Sandwiches. Wir haben hier nur drei in Quickies und wir haben vier in Salaten. Ich denke, dass das Anzeigen dieser Informationen in einem Tab-Steuerelement etwas komisch aussehen wird. Außerdem ist dies eine einseitige Website und ich möchte die Dinge super einfach und fließend halten. Ich möchte kein komplexes Muster wie ein Tab-Steuerelement einführen . Stattdessen zeige ich einfach das gesamte Menü auf einmal an. Wir werden eine Kategorie haben und wir werden alle Gerichte aus dieser Kategorie und dann die nächste Kategorie und so weiter und so weiter auflisten alle Gerichte aus dieser Kategorie und dann die und dann . Dann kümmern wir uns zunächst um das Einsatzmenü. Das erste, was ich tun werde, ist diese Gruppe auszuwählen, und ich verschiebe A um es in einen Rahmen mit automatischem Layout zu ändern, und ich werde die Richtung in eine Vertikale ändern, und ich stelle die Breite oder die Größenanpassungsoptionen zum Füllen des Behälters. Ich stelle auch einen Abstand zwischen Elementen von 128 Pixeln fest. Dann lassen Sie uns ein paar Elemente bewegen. Wir haben die Speisekarte und dann ist das erste, das wir machen, Steaks. Ich lösche tatsächlich den Rest der Abschnitte und lösche auch einige dieser Inhalte, da wir das Tab-Steuerelement am Ende nicht verwenden . Ich werde die meisten dieser Elemente neu erstellen , wie ich es für richtig halte. Ich füge zunächst die richtige Typografie zum Kategorientitel hinzu . Stakes, gehen wir zurück zu Vermögenswerten. Ich werde diese Größe genau hier verwenden, 37 Schriftgröße 48 Zeilenhöhe. Zurück hier, 37 und 48. Ich setze das Schriftgewicht auf Blockierung und auch minus drei Pixel auf den Buchstabenabstand. Außerdem habe ich mich im ursprünglichen Drahtgitter dafür entschieden, für jedes Gericht ein Bild anzuzeigen. Ich glaube nicht, dass ich diesen Weg für das endgültige Design gehen werde, weil wir zu viele Bilder haben werden. Hier war es sinnvoll, weil wir jeweils nur Gerichte aus einer bestimmten Kategorie ausstellten. Es war in Ordnung, 2, 3, 4, 5 Bilder von Gerichten aus dieser Kategorie zu haben . Aber im endgültigen Design, weil wir alle Gerichte zeigen, denke ich, dass die Webseite einfach zu sehr gedrängt wird. Stattdessen werde ich ein Bild pro Gericht anzeigen . Ein Bild für Steaks, ein repräsentatives Bild, ein Bild für Burger und Sandwiches, eines für Salate, eines für Quickies. Ich verschiebe das Bild tatsächlich nach oben oder über den Titel. Mal sehen. Haben wir das in einer Gruppe? Das tun wir. Lasst uns das tatsächlich so verlegen. Sprechen wir jetzt über das Layout. Während ich das ausgewählt habe, fügen wir dieses Bild tatsächlich hinzu. Ich gehe zu Füllen, ich gehe von Solid zu Bild, wähle Bild. Ich habe alle Bilder heruntergeladen, die Sie in der PDF-Datei für Ressourcen finden. Mal sehen. Ich werde ein schönes Bild benutzen, dieses zum Beispiel ist es ein schönes Bild von einem Steak. Lass uns das benutzen, und im Moment können wir loslegen. Offensichtlich können wir die Größe dieses Bildes nach Belieben ändern. Aber jetzt sprechen wir über das Layout, denn es wäre sehr einfach diesem Abschnitt einfach etwas Polsterung hinzuzufügen , damit der Inhalt gut mit diesen Anleitungen übereinstimmt , die ich hier eingerichtet habe. Aber manchmal ist es eine gute Idee, das Layout ein wenig zu unterbrechen und etwas Unerwartetes zu tun. Wenn wir die Seite nach unten scrollen, können wir sehen, wie die Dinge gemäß diesen Handbüchern ausgerichtet sind . Hier sind sie auch ausgerichtet. Aber um es interessanter zu machen, wie ich hin und wieder sagte, brechen Sie einfach das Layout ein wenig auf und tun Sie etwas Unerwartetes. Das machen wir hier. Wir werden diesen Inhalt tatsächlich um einen angemessenen Betrag nach rechts schieben . Das Menü wird auf der rechten Seite der Seite ausgerichtet. Um das zu tun, lassen Sie uns zuerst etwas aufräumen. Wir werden dieses Essensmenü nennen. Dies ist wie der Hauptabschnitt, und dann wähle ich diese Elemente innerhalb von Shift A für das automatische Layout aus, und ich werde festlegen, dass die Größe geändert wird, um den Container zu füllen sodass die Größe auf die volle Breite von sein Elternteil. Lasst uns nun den Inhalt nach rechts schieben, indem diesem Frame etwas Padding nach links hinzufügen , den wir als Stakes bezeichnen werden. Dafür gehe ich genau hier hin und füge etwas Polsterung hinzu und 260 oder 240 ist ein bisschen zu klein. Lass uns mit 560 Pixeln gehen. Das sollte sein, ich denke ziemlich gut. Ich kann auch eine Anleitung auf 560 ziehen , nur um sicherzustellen , dass alle Elemente, die ich in Zukunft auf die gleiche Weise ausrichte, sie richtig an derselben Anleitung ausgerichtet sind. Nehmen wir nun dieses Bild, lasst uns den Container füllen lassen, also geht es den Rest des verbleibenden Platzes. Stellen wir seine Breite auf 640 Pixel ein. Auch hier verwende ich das Acht-Punkte-System für die Größenbestimmung von Elementen. Dann haben wir den Titel. Dann fangen wir an, die eigentlichen Gerichte zu präsentieren. Aber vorher möchte ich diesem Titel hier etwas kleines Ding hinzufügen , nur damit er eher wie ein Trennzeichen aussieht. Dafür zeichne ich, genau wie eine dekorative Note , ein Rechteck und mache es 128 Pixel mal 4. Für Füllung verwende ich Schwarz. Jetzt nehme ich dies und das Einsatzmenü verschiebt A, um einen weiteren Rahmen mit automatischem Layout zu erstellen, setze seine Richtung auf horizontal. Stellen Sie sicher, dass die Elemente an der Mitte ausgerichtet sind , und legen Sie den Abstand zwischen Elementen auf 32 fest. Einfach so. Jetzt schauen wir uns die Lebensmittel an. Sehen wir uns zuerst den Titel an. Dies verwendet die richtigen typografischen Stile da ich diese bereits festgelegt habe, aber ich bin mir über diesen Text nicht wirklich sicher. Anstatt regelmäßig warum nicht kursiv zu machen. Wechseln wir auch zu Schwarz, 75 für die Farbe. Dies, der Preis, lassen Sie uns fett sehen und lassen Sie uns seine Farbe auf den Akzent anstelle von Schwarz ändern. Nehmen wir das nun an, lassen Sie uns es in einen Rahmen mit automatischem Layout verwandeln und lassen Sie uns den Abstand zwischen den Elementen auf 32 Pixel einstellen , genau so. Das ist gut. Jetzt fangen wir an zu bevölkern. Nennen wir dieses Gericht. Fangen wir an, mit dem eigentlichen Inhalt für Einsätze zu füllen . Wir haben das. [NOISE] Wir haben den Inhalt und wir haben auch den Preis 29. Großartig. Jetzt werde ich auch die Größenanpassungsoptionen für den Titel und den Inhalt des Gerichts ändern für den Titel und den , um den Füllbehälter zu füllen, und ich werde auch das Gericht so einstellen , dass es sich um einen Füllbehälter handelt. Es nimmt den gesamten verfügbaren Speicherplatz ein. Ich mache das, weil ich irgendwann zwei Spalten in diesem Abschnitt verwenden werde . Jede dieser Spalten nimmt genau die Hälfte des verfügbaren Platzes ein. Aber im Moment sieht hier alles in Ordnung aus. Lassen Sie uns das Gericht tatsächlich duplizieren. Mal sehen, wie viele Gerichte wir für Steaks haben, also 1, 2, 3, 4, 5, also brauchen wir noch vier weitere. Duplizieren Sie das ist 2, 3, 4 und 5. Jetzt geht es einfach darum, den richtigen Inhalt zu verwenden, einfach so. Nun, da wir hier viel Platz haben, mit dem wir arbeiten können, trennen wir diesen Inhalt natürlich hier viel Platz haben, mit dem wir arbeiten können, in zwei Spalten. Die erste Spalte enthält drei Elemente, die zweite Spalte enthält zwei Elemente. So werden wir das machen. Wir haben den Steaks-Elternteil, der die Gerichte enthält, aber auch den Titel, das Bild hier und den Menütitel. Lassen Sie uns das Geschirr tatsächlich trennen und in ihren eigenen Rahmen stellen. Wir werden das Geschirr nennen. Auch hier haben wir das automatische Layout angewendet. Aber anstelle von 128 Pixeln Abstand werde ich 64 verwenden, also die Hälfte das. Um diese in zwei Spalten zu trennen, ist es eigentlich sehr einfach. Wir wählen die ersten drei aus. Wir werden Shift A machen. Wir nennen sie Spalte 1 und die anderen beiden, Shift A Spalte 2. Jetzt nehme ich den Elternteil des Geschirrs, und ich schalte die Richtung auf Horizontal um, und ich werde sicherstellen Größe so eingestellt ist, dass die Behälter gefüllt werden, also geht es nur bis hier. Als Nächstes wähle ich auch Spalte 1 und Spalte 2 aus und stelle deren Größenänderung fest, um den Container zu füllen. Dadurch können sie genau die Hälfte des verfügbaren Platzes einnehmen . Lassen Sie uns diesen Abstand zwischen diesen Spalten etwas größer machen. Im Moment sind es 64 Pixel, aber ich kann Geschirr auswählen, und ich kann dies auf 128 erhöhen, und schließlich kann ich jedes Gericht auswählen und die Größe ändern, um den Behälter zu füllen, und dasselbe tun für diese. Beachten Sie jedoch, dass der Text hier über meine Leitfäden hinausgeht. Das will ich nicht. Ich möchte, dass alles gut in diesem Leitfaden und diesem Leitfaden enthalten ist. Der Text hier sollte mit diesem Leitfaden enden. Es ist eigentlich wirklich einfach zu machen, weil wir mit Auto-Layout arbeiten. Wir haben den übergeordneten Rahmen des Geschirrs und ich kann einfach eine Polsterung rechts von 128 Pixel hinzufügen. Dadurch wird die Polsterung in diesem Bereich genau hier hinzugefügt. Dann nehmen die beiden Spalten den Rest des Platzes und sie haben die gleiche Breite. Ziemlich cool. Sehen Sie, wie leistungsstark Auto-Layout ist. Es ermöglicht Ihnen, relativ komplexe Layouts mit Leichtigkeit zu erstellen . Dann wollte ich das letzte, was ich hier machen wollte ein paar Trennlinien zwischen jedem Gericht hinzuzufügen. Um dies zu tun, ziele ich auf die Spalten und verwende das Linienwerkzeug oder L auf der Tastatur und zeichne einfach eine Linie wie diese. Ich stelle fest, dass die Größe geändert wird, um den Container zu füllen. Der Schlaganfall wird schwarz sein. Vielleicht nur schwarz nicht schwarz 75. Aber ich möchte es punktieren lassen, so wie Sie diese gepunktete blaue Linie hier sehen können. Ich denke, gepunktet würde viel besser aussehen. Dann öffnen wir die erweiterten Stricheinstellungen, und ich wähle Dash 2, 2, und dann dieses Ding für die Strichlücke, mal sehen, wie es aussieht. Das ist ziemlich gut. Aber ich denke, ich könnte mich für eine gedämpftere Farbe entscheiden. Ich werde das Schwarz behalten, aber ich senke die Deckkraft der Ebene auf 50 Prozent. Ich denke, das sieht ziemlich gut aus. Jetzt geht es nur darum, dies noch einmal zu duplizieren und unter den zweiten Gegenstand zu verschieben , um den zweiten und den dritten Gegenstand zu trennen. Dann kopieren wir dies einmal und gehen Sie zu Spalte 2, fügen Sie das in ein, verschieben Sie es nach oben, so dass es das erste und das zweite Element in der zweiten Spalte trennt . Damit haben wir gerade den Menübereich für Steaks fertiggestellt . Wie Sie gesehen haben, haben wir einen anderen Ansatz gewählt. Wir haben das Layout aufgeteilt, indem wir all diesen Inhalt auf die rechte Seite der Seite verschoben haben, und wir haben auch etwas völlig anderes gemacht als das, was wir ursprünglich in unserem Drahtrahmen skizziert haben. Anstatt Tabs zu verwenden, haben wir uns entschieden, den gesamten Menüinhalt gleichzeitig anzuzeigen. Deshalb haben wir uns entschieden , jedes Gericht in seiner eigenen Kategorie zu organisieren und auszustellen. Anstatt für jedes Gericht ein Bild anzuzeigen, zeigen wir für jede zeigen wir Kategorie ein repräsentatives Bild an. Dies sind die bisherigen Ergebnisse. Wie du es jetzt gewohnt bist, ist dies die Zeit für dich zu üben. Machen Sie weiter und erstellen Sie den Steak-Bereich im Speisenmenü. Sobald du das getan hast, können wir weitermachen. Jetzt ist mir klar, dass ich das Auto-Layout in dieser Lektion ziemlich stark verwendet habe, und ich verwende es, um einige Layouts zu erstellen, die für Sie möglicherweise etwas schwieriger zu verstehen sind, besonders wenn Sie ein Anfänger in Figma. Aber sieh dir die Lektion noch einmal an, wenn du sie nicht verstanden hast. Wenn du immer noch nicht verstehst, was ich dort gemacht habe, schreib mir einfach eine Zeile im Diskussionsbereich und ich werde mein Bestes tun, um zu helfen. Jetzt, indem wir das Steak-Menü erstellt haben, haben wir den größten Teil der Arbeit für die anderen Unterabschnitte des Food-Menüs erledigt, da wir jetzt nur noch die Steak-Elemente einfügen und einfach den Inhalt ersetzen müssen. Es ist ganz einfach. Im nächsten Schritt kümmern wir uns um die Burger und Sandwiches. Kommt hoch. 17. Lebensmittelkarte für Burger und Sandwelten: Für die anderen Bereiche des Menüs können wir einfach das Menü für Steaks kopieren und den Inhalt ändern. Es hat keinen Sinn diese Abschnitte immer wieder neu zu erstellen. Gehen wir weiter und machen das, ich zeige Ihnen auch die Lösung, die ich für die Navigation des Essensmenüs ausgewählt habe . Lass uns gehen. Zuerst müssen wir das Steaks-Menü kopieren und einfügen, also lassen Sie uns das duplizieren, und da es sich immer noch im Food-Menü befindet, das Steaks-Menü kopieren und einfügen, also lassen Sie uns das duplizieren, und da es sich immer noch im Food-Menü befindet, wird es einfach weiter nach unten eingefügt. Es wird gut ausgerichtet sein. Alles wird automatisch für mich erledigt. Beachten Sie, dass, wenn ich an dieser Seite arbeite und Elemente erstelle und Elemente hinzufüge und dupliziere und so, die Seite, mein Hauptrame sich einfach selbst ändert und alle Elemente nach unten gedrückt werden entsprechend, wobei natürlich der gleiche Abstand oder Abstand von 240 Pixel beibehalten wird. liegt daran, dass wir, wenn Sie sich erinnern, dass wir unserem Hauptrahmen ein automatisches Layout hinzugefügt haben . Alles wird automatisch für uns erledigt. Nennen wir es für diesen Abschnitt tatsächlich Burgers und Sandwiches. Lassen Sie uns zuerst diesen Menütitel löschen. Lass uns das Bild ändern, Lass uns dieses wählen. Großartig. Lassen Sie uns den Namen ändern und dafür öffnen wir tatsächlich die Projektübersicht. Wir haben Burger und Sandwiches. Großartig. Jetzt aktualisieren wir den Inhalt hier drin. Mal sehen, wir haben, ich glaube acht, also 1, 2, 3, 4, 1, 2, 3, 4, also haben wir acht Gegenstände, vier in jeder Spalte. Lassen Sie uns dieses Gericht duplizieren und auch einen der Separatoren duplizieren und dazwischen legen, und dann duplizieren wir dies ein- und zweimal und platzieren Sie dann einfach die Trennzeichen in die richtigen orte. Jetzt ist es einfach eine Frage des Kopierens von unserer Projektübersicht in unser Design. Lasst uns weitermachen und diesen Prozess beschleunigen. Wir sind fertig mit dem Kopieren und Einfügen des Inhalts aus unserer Projektübersicht in unser fertiges Design. Nun, im Intro zu dieser Lektion, habe ich etwas über eine Navigation im Food-Menü erwähnt. Ich denke, das ist eine ziemlich wichtige Funktion, die hinzugefügt da dies ein ziemlich großer Abschnitt ist, das Menü. Es würde helfen, eine Navigation zu haben , die es uns ermöglicht automatisch zu scrollen bestimmte Kategorien wie Steaks, Burger und Sandwiches und die anderen, die wir besuchen, zu klicken und hinzufügen. Da wir all diese Leerzeichen auf der linken Seite haben, verwenden wir das für ein Menü, das scrollt, während die Seite scrollt, also wird es ein festes Menü sein. Für dieses Design denke ich, dass die Burger - und Sandwiches-Sektion ein guter Ort sein wird, um es unterzubringen. Dann werden wir hier ein paar Änderungen vornehmen. Wir werden diesen Rahmen in einen anderen Frame mit automatischem Layout umwickeln . „Shift“ „A“ wieder, und das werden Burger und Sandwiches sein. Benennen wir dies in Burger - und Sandwiches-Inhalt um. Entfernen wir den Abstand und die Polsterung, die wir hier hinzugefügt haben. Für diesen werden wir tatsächlich das Polster entfernen , das wir links hinzugefügt haben da wir einen weiteren Abschnitt hinzufügen werden. Dann fügen wir zunächst etwas Text in diesen Rahmen ein, und wir beginnen mit den Steaks. Schneiden wir das aus und fügen es genau im übergeordneten Frame hinzu. Einfach so. Dann wickeln wir dies in einen anderen Frame mit automatischem Layout ein, das wir jetzt zur Navigation als Food-Menü aufrufen werden. Hier ist was wir tun werden, Burgers und Sandwiches. Dieser Abschnitt wird natürlich in horizontaler Richtung sein. Stellen wir einen Abstand von 128 zwischen den Elementen ein. Wählen wir dann den Hauptabschnitt aus und alles, was wir tun werden, ist die Größenänderung auf Container füllen festzulegen . Wählen wir dann erneut den Hauptrahmen und wählen Sie erneut Container füllen aus dem Dropdown-Menü anstelle der festen Breite. Das ist etwas, das Sie ab und zu tun müssen. Wenn Sie sich neu verpacken andere Frames mit automatischem Layout neu rahmen, mit automatischem Layout neu rahmen, Figma manchmal automatisch wechselt Figma manchmal automatisch von Container füllen zu Feste Breite. Behalten Sie das einfach im Auge, um sicherzustellen , dass Sie Ihre Layouts nicht brechen. Jetzt möchte ich auch, diese Navigation von hier aus beginnt. Aus diesem Leitfaden , der bei 128 liegt. Wählen wir das Food-Menü aus. Lassen Sie uns vorerst den Abstand auf Null setzen, auf Null auffüllen, und fügen wir eine linke Polsterung von 128 hinzu. Das ist sehr gut. Dann werde ich auch die Größe des Essensmenübereichs so , dass mein Hauptbereich richtig mit den anderen übereinstimmt. In diesem Fall beträgt meine Navigation jetzt 432 Pixel und es ist eine feste Breite. Jetzt kann ich den Text auswählen und ihn auf Container füllen einstellen, und ich kann diesen Text noch dreimal duplizieren. Während ich dabei bin, wir sicher, dass meine Richtung vertikal eingestellt ist. Dies ist wieder eine andere Sache, die man im Auge behalten sollte. Manchmal, wenn Sie die Richtung in einem automatischen Layout-Frame ändern , wechselt die Größenänderung von Fixed zu Hug-Inhalt In diesem Fall müssen Sie diesen Wert zurücksetzen. Lassen Sie uns auch die Höhe auf Hug-Inhalt einstellen. Wählen wir auch diesen ganzen Text aus und legen die Höhe auf Inhalt Hug und die Breite auf Container füllen fest. Jetzt sollten wir loslegen. Ersetzen wir den Text hier durch die tatsächlichen Namen der Abschnitte. Also Burger und Sandwiches, wir hatten welche Quickies und Salate. Die Idee hier ist, dass dieses Menü repariert wird. Sobald ich zum eigentlichen Menü komme, während ich nach unten scrolle, bleibt dieses Menü am selben Ort. Das ist in CSS wirklich einfach, aber weil wir es mit dem Designteil zu tun haben, werden wir es gerade hier platzieren, an diesen zweiten Abschnitt angehängt ist. Lasst uns das ein bisschen hübscher aussehen lassen. Nehmen wir an, dass wir zu diesem Abschnitt navigieren, zu Burgern und Sandwiches, und wir brauchen eine Möglichkeit , das Menü diesen speziellen Abschnitt hervorzuheben, in dem wir uns befinden. Dafür ist es wirklich einfach zu machen, wir können einfach die Farbe dieses Abschnitts auf Akzent ändern. Dann den Rest setzen wir sie einfach auf Schwarz. Machen wir es sozusagen auch etwas luftiger, indem wir einen sozusagen auch etwas luftiger, indem Abstand zwischen all diesen Elementen hinzufügen. Fügen wir diesem Artikel auch eine Zeile hinzu, damit er mit der Zeile übereinstimmt, die wir hier hinzugefügt haben. Eigentlich wurde festgestellt, dass ich die falsche Methode verwendet habe , um dies zu erstellen. Oder eigentlich ist es nicht falsch, das ist eine Möglichkeit, es mit einem Rechteck zu machen, aber Sie können es auch mit einer Linie machen. Ich zeige dir gerade beide Wege. Aber bevor wir das tun, lassen Sie mich tatsächlich ein paar abgerundete Ecken an diesem Element setzen. Es ist nicht nur ein einfacher Balken, es hat schöne abgerundete Ecken, nur ein kleines Detail. Machen wir das Gleiche hier, acht Pixel. Machen wir ungefähr das Gleiche hier. Aber ich werde stattdessen ein Linienelement verwenden, nur um Ihnen eine andere Möglichkeit zu zeigen. Mit dem L- oder Linienwerkzeug zeichne ich nur eine Linie mit einer Breite von 48 Pixel. Ich setze die Strichstärke auf vier. Von hier aus wähle ich Round. Es beginnt rund und es endet rund. Außerdem ändere ich die Farbe auf Akzent. Jetzt können wir die Zeile und diesen Text verwenden, Umschalttaste A, um einen neuen Rahmen zu erstellen, Richtung ändern und die Größenänderung auf Container füllen festlegen. Verschieben wir auch die Zeile , um sie zuerst anzuzeigen. Richten wir alles in der Mitte aus, so. Ändern wir den Abstand zwischen diesem auf 16 Pixel. Zwei Probleme mit diesem Layout. Zuallererst ist der Text ein bisschen zu groß. Es geht hier über die Ränder meines Elternrahmens hinaus. Zweitens, obwohl diese Zeile auf dem Papier korrekt mit dem Text ausgerichtet ist, ist dies optisch nicht der Fall. Das passiert aufgrund der Höhe des Textes. Wir haben hier oben viel mehr Platz als unten. Der Text ist optisch in seiner Linie nicht perfekt ausgerichtet . Deshalb haben wir auch diese Fehlausrichtung. Aber das ist wirklich einfach zu beheben. Wir müssen dieses Element nur ein paar Pixel nach unten drücken . Normalerweise wäre das ziemlich einfach zu machen. Da wir jedoch mit dem automatischen Layout arbeiten und Elemente automatisch ausrichten, dieses Element nur nach unten verschieben , indem Sie Padding hinzufügen. Die einzige Möglichkeit, dies zu tun, besteht darin , das automatische Layout anzuwenden. Umschalttaste A, um einen Rahmen mit nur diesem Element zu erstellen, setzen Sie den Abstand und das Auffüllen und fügen Sie einfach eine Polsterung über, sagen wir, vier Pixel hinzu. Das wird es nur leicht nach unten drücken, so dass es jetzt visuell am Text ausgerichtet ist. Was machen wir mit dieser Situation, in der der Text unsere Navigation im Lebensmittelmenü überläuft? Denken Sie daran, dass wir uns entschieden haben, einen Abstand von 128 Pixeln hinzuzufügen , um mit dem anderen Abstand übereinstimmen zu können. Wir könnten es kleiner machen , aber das will ich nicht. Ich will genau diesen Raum. Mal sehen. In diesem Rahmen haben wir den Text und die Zeile. Der Text ist derzeit auf Feste Breite eingestellt. Aber setzen wir es auf Container füllen. Dadurch wird die Größe des Textes automatisch so geändert, dass er in die Grenzen seines übergeordneten Rahmens passt . Aber jetzt wird der Text zwei Zeilen angezeigt, was in Ordnung ist. Aber jetzt stimmt die Linie nicht überein. Was wir tun werden, ist dies auszuwählen, und anstatt uns an der Mitte auszurichten, richten wir es nach oben aus. Dann wählen wir den eigentlichen Linienrahmen und ändern seine obere Polsterung. Versuchen wir es mit 16. Vielleicht ein bisschen mehr,18. Ich mache das, bis die Linie optisch mit diesen beiden Wörtern übereinstimmt. Jetzt haben wir die Navigation repariert. Natürlich kann der Entwickler bei der Entwicklung dieser Website das notwendige CSS und JavaScript schreiben, kann der Entwickler bei der Entwicklung dieser Website das notwendige CSS und JavaScript schreiben um diesen aktiven Stil auf die anderen Abschnitte anzuwenden , während wir zu ihnen scrollen. Wenn ich zum Beispiel gerade auf der echten Website wäre, wenn ich zurück zu Steaks scrollen würde , würde dieses Menü mit Steaks an diesem Bereich ausgerichtet sein . Der hervorgehobene Menüpunkt wäre dieser anstelle dieses. Ich hoffe, das ergibt Sinn. Aber ja, damit haben wir den zweiten Abschnitt unserer Speisekarte beendet. Hoffentlich läuft alles gut und Sie machen Fortschritte mit Ihrer Version des Designs oder des Klassenprojekts. Wenn du nicht mit mir zusammenarbeitest und dir einfach lieber den Kurs ansiehst, dann ist das wohl auch in Ordnung, aber ich empfehle die Übung. Ich empfehle die Praxis. Es wird Ihnen nur ermöglichen Ihre Fähigkeiten zu verbessern und viel schneller in Figma zu arbeiten, als nur auf die Theorie zu verlassen. Jetzt haben wir zwei Abschnitte im Menü erstellt. Wir müssen nur spülen und wiederholen, um die anderen beiden zu erstellen. Lass uns das in der nächsten Lektion machen. 18. Lebensmittelkarte für Quickies und Salate: Wir sind fast im Ziel mit dem Food-Menü, wir müssen nur die Abschnitte für Quickies und Salate erstellen . Lasst uns das jetzt machen. Lassen Sie uns zunächst den Steak-Frame duplizieren , da er ohne die Menüführung das richtige Layout hat. Kommando einfach D, um es zu duplizieren, und ich werde es einfach unter die Kategorie Burger und Sandwiches verschieben . Du musst AutolayOut lieben. Es ist super einfach. Das werden vier Quickies sein, so. Lassen Sie uns das Hintergrundbild in die Flügel ändern. Inhaltlich haben wir nur drei Punkte. Wir werden zwei in der ersten Spalte haben. Lassen Sie uns dies und dies und dies und das löschen , also zwei und eins. Dann geht es einfach darum , den Inhalt zu ersetzen. Das sind die Quickies. Wählen wir nun diesen Abschnitt aus und benennen wir ihn um. Lassen Sie es uns duplizieren und wir werden den Abschnitt für Salate erstellen. Ersetzen wir das Bild auch hier durch dieses Bild. Dann haben wir vier Elemente, also lassen Sie uns diesen duplizieren und lassen Sie uns auch eines dieser Trennzeichen dazwischen platzieren. Lassen Sie uns jetzt spülen und wiederholen. Das ist es, super einfach. Durch Kopieren und Einfügen des ersten Abschnitts, den wir für Steaks erstellt haben , und einfach nur ein Bild, einen Titel und die eigentlichen Gerichte änderten , konnten wir das Food-Menü zusammen mit seiner Navigation. Das haben wir bisher. Werfen wir einen kurzen Blick auf die bisherige Seite unseres Designs. Wir haben die obere Leiste, den Header, den Heldenbereich und dann die Beschreibung des Essensmenüs und dann das eigentliche Food-Menü. Ich denke, dies ist ein bisschen sinnvoller diese Website das Menü auf einmal so angelegt hat , anstatt Tabs zu verwenden, wie wir ursprünglich in der Wire-Framing-Phase besprochen haben. Was kommt als Nächstes? Nun, als nächstes ist das Üben von dir. Sie haben gesehen, dass wir gerade den größten Abschnitt auf der Seite abgeschlossen haben, der das Food-Menü ist. Obwohl es am Anfang wegen all dieses Inhalts entmutigend erscheinen mag , sahen Sie am Ende, dass es wegen AutoLayout super einfach war . Das hat unsere Arbeit viel einfacher gemacht. Mit diesem Hintergrund hoffe ich, dass Sie mitmachen und dass Sie Ihre Version des Lebensmittelmenüs für Ihr Design fertiggestellt haben . Wenn du fertig bist und wenn du bereit bist weiterzumachen, kümmern wir uns um den About-Abschnitt, der kommt. 19. Über Abschnitt: In Ordnung, kümmern wir uns um den Abschnitt About. Dies ist ziemlich einfach und es wird ein Layout verwenden , das dem Hero-Bereich sehr ähnlich ist. Lasst uns gehen. Basierend auf dem Drahtgitter ist dies die Struktur der About Seite. Wir haben einen Titel, den beschreibenden Text und dann ein oder zwei Bilder. Wenn ich mir das Design aus der Vogelperspektive ansehe, möchte ich eine Trennung zwischen dem Menüabschnitt und dem Rest der Website schaffen . Dieser About Abschnitt bietet mir tatsächlich eine großartige Gelegenheit, dies zu tun, da ich ein Layout verwenden kann , das diesem sehr ähnlich ist und ich denke, dass das die Trennung ziemlich gut erreichen wird das die Trennung ziemlich gut erreichen weil wir ein Bild haben werden, das eines der ist, nennen wir es Anforderungen für den Abschnitt About. Aber wir verwenden auch diesen dunklen Hintergrund und das wird als schönes visuelles Trennzeichen zwischen den Abschnitten oben und den unten dienen schönes visuelles Trennzeichen zwischen den Abschnitten . Lass uns weitermachen und den Hero-Bereich duplizieren. Mit den Pfeiltasten verschiebe ich es einfach unter dem Menübereich in Position und benenne es in „Über uns“ um. Jetzt zoomen wir hinein. Es gibt ein paar Änderungen , die wir hier vornehmen müssen. Zuallererst, das Bild, ich werde es auf die rechte Seite verschieben und es in etwas anderes ändern. Mal sehen, welche Art von Bildern wir hier haben. Ich denke, das könnte sehr gut funktionieren. Lasst uns das benutzen. der Inhalt hier muss sich ändern. Ich benutze diesen Text. Ich füge das einfach ein. Lassen Sie uns tatsächlich die Akzentfarbe verwenden. Es gibt tatsächlich einen kleinen Tippfehler hier. Damit kann ich dieses Bit löschen. Ich werde diesen Rahmen auch löschen, weil ich diesen Text nehme und ihn hier einfüge. Lasst uns Weiß benutzen. Aber ich werde auch kein reines Weiß verwenden. Ich werde weiße 95-prozentige Deckkraft verwenden genau wie ich es hier im Hero-Bereich getan habe. Weil ich nicht möchte, dass dieser Kontrast zu hart ist. Also lasst uns mit 95 Prozent gehen. Für den Text können wir tatsächlich mit 90 Prozent gehen. Ich denke, das wird sich noch besser in den Hintergrund einfügen . Ich denke, wir haben hier eine zu viele leere Zeilen, also lasst uns das loswerden. Auch wenn ich die Guides aufrufe, können wir sehen, dass wir das nicht genau richtig ausrichten. Wenn wir also zum Heldeninhalt gehen, verwenden wir 128 und 128 Padding. Das ist richtig. Aber ich schätze, diese beiden haben eine feste Breite, also wechseln wir sie in den Füllcontainer. Jetzt sind sie gut auf unseren Guide ausgerichtet und wir können loslegen. Das ist der Abschnitt „About“. Jetzt können wir den Split einfach löschen. Wir sind bereit weiterzumachen. Jetzt ist es natürlich an der Zeit zu üben. Erstellen Sie also Ihren About Bereich, und wenn Sie das tun, wir zu den Instagram-Fotos übergehen. Das kommt in der nächsten Lektion. 20. Instagram: Der Instagram-Bereich ist im Grunde eine große Bildergalerie. Dies gibt mir tatsächlich eine großartige Gelegenheit, Ihnen zu zeigen, wie Sie mit Bildern und Auto-Layout so arbeiten , dass diese Bilder entsprechend skalieren können , wenn Sie die Größe der Galerie ändern. Lass uns gehen. Mal sehen, was wir auf unserem Drahtgitter basieren. Wir haben den Titel, einen Button für Instagram folgen und dann ein paar Bilder. Das erste, was wir hier tun werden, ist, dass wir dies in einen Frame mit automatischem Layout verwandeln werden. Aber lassen Sie mich zuerst diese Reihe von Bildern loswerden. Lassen Sie mich einfach eine Umschalttaste A machen, um diesen drei zukünftigen Bildern ein automatisches Layout hinzuzufügen , und dann mache ich eine Umschalttaste A für diese beiden. Abschließend heben wir die Gruppierung auf. Eigentlich nur ein bisschen Aufräumen. Nennen wir diese Bildergalerie, aber machen wir sie zuerst in einen Frame mit automatischem Layout und nennen es Instagram, eigentlich Instagram-Fotos. Lassen Sie uns als Nächstes die Anleitungen aufrufen, um sicherzustellen , dass wir alles richtig ausrichten. Ich stelle seine Breite auf einen Füllcontainer ein. Fügen wir links und rechts 128 Polsterungen hinzu. Dann Frame bei 10 und Frame 11, beide werden so eingestellt, dass sie den Behälter füllen. Fangen wir hier mit dem Text an. Lassen Sie uns die Farbe dieser beiden Akzente setzen. Wählen wir dann den übergeordneten Frame aus. Anstatt einen festen Abstand zwischen diesen beiden Elementen festzulegen , legen wir die Artikelverteilung auf Abstand dazwischen fest. Da wir nur zwei Elemente haben, wird einer von ihnen links vom Element gesendet, einer rechts neben dem Element. Lassen Sie uns auch alles in der Mitte ausrichten. Lassen Sie uns als Nächstes an diesem Button arbeiten, denn jetzt ist es hässlich, also zuerst den Text Poppins, fett, 21, 32, schwarz. Das ist richtig. Der Text ist so, wie er sein sollte. Lassen Sie uns dieses Symbol aktualisieren, da es eine leicht ausgebugte Version des Instagram-Symbols verwendet . Lassen Sie uns das kopieren. Übrigens kannst du dich so auf der Leinwand bewegen indem du die Leertaste auf deiner Tastatur gedrückt hältst , bis dein Cursor zu einer Hand wird, und dann kannst du einfach klicken und ziehen, um dich zu bewegen. Dann lasst uns das einfügen. Dann lassen Sie uns diesen Hintergrund loswerden da wir unseren eigenen Hintergrund erstellen , indem wir diesen in einen Auto-Layout-Frame verwandeln . Wir werden eigentlich keinen Hintergrund verwenden, wir werden einen Strich verwenden. Wir werden es auf Schwarz setzen, ein Pixel darin. Perfekt. Jetzt fügen wir etwas Polsterung hinzu. Ich denke, dass rund 24 Pixel angemessen wären. Stellen wir 16 Pixel Abstand zwischen dem Text und dem Symbol ein. Richten wir beide in der Mitte so aus. Das ist unser Button, super einfach. Als Nächstes sehen wir uns die Bilder an. Aber lassen Sie uns den Abstand zwischen dem Titel und den tatsächlichen Bildern vergrößern . Im Moment ist es eine Zufallszahl. Wir müssen das auf 128 einstellen, indem wir den Abstand auf dem übergeordneten Frame festlegen , also dann die Bilder. Alle drei werden als Hintergründe für diese Rechtecke verwendet . Ich denke, dies ist die richtige Art, sie für so etwas in Figma zu verwenden so etwas in Figma denn wenn sich die Form ändert, wird der Hintergrund sich neu positionieren und seine Größe ändern. Sie werden immer einen Teil des Bildes sehen. Da der übergeordnete Frame ausgewählt wurde, habe ich hier einen Fehler gemacht. Die Bilder werden tatsächlich von Kante zu Kante gehen, sie haben diese 128-Pixel-Pixel-Polsterung nicht wie der Text. Aber ich habe dieses Padding genau hier auf die übergeordneten Elemente angewendet . Lasst uns das entfernen. Stattdessen werden wir es hier zu diesem oberen Frame hinzufügen , 128, 128. Auf diese Weise kann ich festlegen, dass der Bildcontainer mithilfe des Füllbehälters von Kante zu Kante wechselt. Dann wird jedes einzelne Bild so eingestellt, dass er den Container füllt. Lassen Sie mich auch den Abstand hier entfernen. Lassen Sie uns das auf 0 setzen und auf gepackt setzen. So. Lassen Sie uns nun die Bilder so einstellen, dass sie Container füllen, damit sie jeweils genau ein Drittel des verfügbaren Platzes einnehmen . kannst du wahrscheinlich nicht gut sehen , weil sie alle grau sind. Fügen wir ihnen ein paar Bilder hinzu. Ändern wir die Füllfarbe von Solid zu Bild. Mal sehen, welche Art von Bildern wir hier verwenden werden. Vielleicht das hier. Wichtig dabei ist, dass Sie die Bilder hier ausfüllen. Nicht geeignet für Zuschneiden oder Fliesen, stellen Sie sicher, dass sie gefüllt sind. Lassen Sie uns abschließend das dritte Bild machen. Lasst uns das hinzufügen. Jetzt ändern wir auch ihre Höhe auf 480 Pixel, einfach so. Das ist unsere erste Bildreihe. Lassen Sie es uns duplizieren, Zeile 2. Lassen Sie uns diese tatsächlich in einen neuen Frame namens images verschieben . Hier entfernen wir einfach den Abstand. Jetzt ändern wir einfach die Bilder. Benutze das und hier, wo wir vielleicht das benutzen werden. Hier können Sie übrigens auch doppelklicken. Dies ist eine Verknüpfung, sodass Sie auf ein Bild doppelklicken können , um dieses Dialogfenster zu öffnen. Warum nicht das? Indem wir solche Bilder als Hintergründe verwenden, können wir jetzt diese Seite aufnehmen und beobachten, was passiert. Ups. Das war nicht so dramatisch wie ich dachte. Lassen Sie uns dies ändern , um den Container zu füllen. Behältnis füllen. Jetzt sollten wir gut sein. Jetzt haben Sie auch die Zeilen geändert, um den Container zu füllen. Dies sollte so eingestellt sein , dass der Behälter gefüllt wird. Wie ich schon sagte, wenn Sie jetzt den Bildschirm greifen und mit der Größenänderung beginnen, werden Sie feststellen, dass diese Bilder ebenfalls angepasst werden. Natürlich haben sie die gleiche Höhe , weil sie gerade so als feste Höhe eingestellt sind . Aber in Bezug auf die Breite, die tatsächlichen Formen, ändern die Rechtecke ihre Breite. Die Bilder, weil sie als Hintergründe festgelegt sind , können wir nur bestimmte Teile davon sehen, was genau das Verhalten ist, das Sie erhalten würden, oder Sie können auf eine echte Website gelangen. Bringen wir das einfach dahin zurück, wo es war. Das ist der Instagram-Bereich. Da der Instagram-Bereich fertig ist, sind wir wirklich nah dran , unser Design jetzt fertigzustellen. Wir müssen nur zwei weitere Abschnitte fertigstellen, und dann können wir zum Responsive Design-Teil der Klasse übergehen . Aber im Moment sehen wir uns diese beiden Abschnitte an. Der erste ist der Kontakt, und in der nächsten Lektion kümmern wir uns um den Kontakt-Header und die Seitenleiste. Wir sehen uns dort. 21. Contact und Seitenleiste: Es ist an der Zeit, den Kontaktbereich zu erstellen, und da er etwas größer als sonst ist, teile ich ihn in Teile auf. In dieser Lektion erstellen wir Header und die Seitenleiste. Fangen wir an. Werfen wir einen Blick auf das Layout, das wir während des Wireframings erstellt haben. Wir können sehen, dass wir einen Titel haben, eine Karte, die Adresse, Telefonnummer, Geschäftszeiten und dann das eigentliche Kontaktformular haben. Jetzt, kurz zuvor, habe ich gesagt, dass wir in dieser Lektion die Kopfzeile und die Seitenleiste des Kontaktabschnitts erstellen werden. Das denke ich, ich werde ein Layout verwenden das dem des Menüs ähnelt. Ich werde hier den Kontakttitel haben, ich werde die Karte hier und das Kontaktformular hier haben, und in der Seitenleiste, in der ich das Navigationsmenü platziert habe, werden wir die anderen Informationen haben; die Adresse, die Telefonnummer und die Geschäftszeiten. Um uns die Dinge viel einfacher zu machen, lassen Sie uns diesen Abschnitt duplizieren. Ich kopiere es und wähle mein Hauptrame und füge es ein und verschiebe es dann einfach so nach oben. Lassen Sie mich auch diesen Titel mitbringen oder tatsächlich kann ich ihn von hier aus einbringen, von dort ausschneiden und ihn genau dort in diesen Rahmen einfügen. Wo Kontakt steht, stellen wir sicher, dass der Abstand korrekt ist, 128 dort und dann 128 da, und wir können diesen löschen. Ich kann das Kontaktformular annehmen und das kann ich hier einfügen, wir werden uns später damit befassen. Anstelle des Navigationsmenüs hier hole ich mir die Kontaktinformationen, schneide sie von dort aus und füge sie genau hier ein. Dann werde ich diese Gegenstände einfach los. Nun, ein paar Dinge, die wir hier tun müssen. Lassen Sie uns zunächst dieses Bild in eine tatsächliche Map ändern. Dafür könntest du ein Bild von einer Karte aus dem Internet machen, aber Figma hat ein Plugin , das Mapsicle heißt. Lasst uns weitermachen und schnell danach suchen . Lass es uns installieren. Großartig. Gehen wir nun zurück zu unserer Figma-Datei, und was wir tun werden, ist, dass wir dieses Rechteck auswählen, wir öffnen das Plugin. Übrigens haben Sie gerade gesehen, dass ich die QuickFind Funktionalität in Figma verwendet habe, auf die Sie mit Befehl und Backslash zugreifen können. Dann können Sie Namen von Plugins, verschiedene Befehle eingeben , in Figma ist es sehr einfach zugänglich. Wir schauen uns Tastenkombinationen an. Mal sehen. Wo es schnelle Aktionen gibt, finden Sie die Tastenkombination für Ihr Betriebssystem. Dann lasst uns Mapsicle öffnen. Lassen Sie uns hier eine zufällige Map erstellen, das spielt keine Rolle. So etwas vielleicht. Wir erstellen einfach die Map hier, und das wird sie genau dort als Hintergrundbild platzieren , und wir sind fertig. Lassen Sie uns auch diesen Titel loswerden , wir brauchen ihn gerade nicht. Richten wir unsere Aufmerksamkeit auf die Seitenleiste. Jetzt möchte ich tatsächlich, dass die Seitenleiste an mein Kontaktformular ausgerichtet wird. Das bedeutet, dass wir hier einige Änderungen an unseren Frames vornehmen müssen . Werfen wir einen Blick auf die Struktur. Wir rufen diesen Kontakt an, und dann haben wir hier einen Rahmen, nennen wir diese Seitenleiste. Nennen wir diesen Inhalt. Wir haben die Sidebar hier und den Inhalt hier. Wie wäre es, wenn wir das machen, wir nehmen die Seitenleiste und gruppieren sie mit dem Kontaktformular, nämlich Gruppe 23. Mal sehen. Wir nehmen Gruppe 23, wir bringen sie nach draußen. Wir können diesen Abschnitt hier tatsächlich löschen , wir brauchen ihn nicht. Mal sehen, wir nehmen dies und das, wir erstellen einen neuen Rahmen mit den beiden, und wir werden die Richtung in vertikal ändern. Ändern wir hier die Höhe, um den Inhalt zu umarmen. Wählen wir nun den Inhalt aus, ändern die Höhe in Umarmung und Frame 16. Jetzt kommen wir irgendwohin. Lasst uns den Kontakt so nach oben verschieben. Dies sollte so nach links platziert werden. Lasst uns die Guides aufrufen, nur um sicherzustellen , dass wir die Dinge richtig machen. Wählen wir nun den Inhalt und legen wir die Füllung oder die Größenänderung als Füllcontainer fest. Lassen Sie uns eine Polsterung von 560 Pixeln hinzufügen. Cool. Jetzt ist dieser Abschnitt ordnungsgemäß darauf ausgerichtet. vorwärts gehen, ist das Kontaktformular ebenfalls richtig ausgerichtet und dies ist ebenfalls richtig ausgerichtet. Jetzt kommen wir irgendwohin. Um diesen Kontaktinformationsbereich etwas interessanter zu gestalten , wie wäre es, wenn wir Icons verwenden, wie wir es hier in der oberen Leiste getan haben? Wir können diese Informationen tatsächlich kopieren und unten einfügen, sodass wir diese Symbole nicht neu erstellen. Wählen wir den Rahmen der Seitenleiste aus, lassen Sie uns einfügen und lassen Sie uns die Hilfslinien noch einmal aufrufen. Stellen wir das auf vertikal ein. Wir haben einen Gegenstand, zweiten Artikel. Lassen Sie uns diese als Container füllen setzen und dann wählen wir den eigentlichen Container und setzen diesen auf den Container füllen. Mal sehen, warum verhält sich dieser Text nicht richtig? Container, los geht's. Kopieren wir dieses Element, wir werden es verwenden, um die Geschäftszeiten hinzuzufügen. Wir sagen Montag bis Donnerstag 12:00 Uhr bis 22:00 Uhr und Freitag bis Sonntag 10:00 Uhr bis 23:00 Uhr. Großartig. Jetzt ändern wir tatsächlich die Farbe dieser Symbole in Akzent und ich denke zu 100 Prozent auf die Deckkraft. Machen wir das Gleiche für diesen. Dafür müssen wir für das dritte tatsächlich ein anderes Icon auswählen. Öffnen wir die Augenkonzept-App erneut, um eine andere Farbe auszuwählen. Während wir darauf warten, ändern wir tatsächlich die Deckkraft oder erkennen die Deckkraft dieses Textes auf Schwarz 75. Da sind wir los. Nachdem das geöffnet ist, suchen wir nach einer Uhr in unserem Bootstrap-Symbol-Set. Schnappen wir uns dieses und ersetzen das vorhandene Icon genau so. Wir löschen das alte und machen die Icons auch ein bisschen größer. Derzeit sind sie 16 mal 16, aber ich möchte, dass sie 24 mal 24 sind. Eigentlich mag ich hier nicht, dass sie in der Mitte mit Texten ausgerichtet sind, die sich über zwei Reihen erstrecken. Ich möchte, dass sie oben ausgerichtet sind. Lasst uns das hier und hier ändern. Aber offensichtlich sind sie jetzt nicht optisch richtig ausgerichtet. Was wir tun müssen, ist die gleiche Technik anzuwenden, die wir verwendet haben, als wir das Menü hier oben erstellt haben. Denken Sie daran, dass wir dieser Zeile etwas Top-Padding hinzugefügt haben dieser Zeile etwas Top-Padding hinzugefügt indem wir sie mit einem Rahmen mit automatischem Layout umwickelt haben. Lass uns weitermachen und das Gleiche hier machen. Was wir tun müssen, ist es mit einem anderen Frame umzuwickeln , indem wir ein automatisches Layout hinzufügen. Umschalt A. Hier ist etwas Seltsames passiert , weil dies bereits ein Frame war. Siehe das Icon. Durch das Hinzufügen eines automatischen Layouts werden diese beiden Elemente in eine bestimmte Richtung ausgerichtet , und das wollen wir nicht. Ein paar verschiedene Möglichkeiten, dies zu überwinden, können wir mit der rechten Maustaste klicken und zur Frameauswahl gehen. Wir haben einen Rahmen darüber erstellt. Wir haben es in einen anderen Rahmen gewickelt. In diesem Fall können wir hier einfach Shift A in diesem Frame ausführen , um ein automatisches Layout hinzuzufügen, und dann können wir die gewünschte Menge an Polsterung hinzufügen. Sagen wir vielleicht vier oder zwei. Mal sehen, was am besten aussieht. Ich denke, zwei wären der angemessene Betrag, und wir werden dasselbe für dieses Symbol tun. Klicken Sie mit der rechten Maustaste auf die Rahmenauswahl, Umschalttaste A, um ein automatisches Layout hinzuzufügen, und sehen wir uns dann vier Ich denke, das sieht ziemlich gut aus. Denken Sie auch daran, wie ich gesagt habe , dass wir hin und wieder das Layout durchbrechen müssen. Nun, das können wir auch hier tun. Lassen Sie mich zuerst Elemente loswerden. Die ganze Gruppe sollte weg sein. Um das Layout ein wenig zu unterbrechen, wie wäre es mit der Ausrichtung der Textbreite? In diesem Handbuch richten wir die Symbole an dieser Anleitung aus. Das sollte interessant sein. Um das zu tun, schauen wir mal, was wir haben. Wir haben einen Rahmen mit 128 linker Polsterung. Setzen wir das auf 64. Jetzt müssen wir den Text drücken , um ihn an dieser Anleitung anzupassen. Wie machen wir das? Es ist eigentlich ziemlich einfach. Der Abstand zwischen hier und hier beträgt 64 Pixel. Was wir tun, ist, dass wir die Größe des Symbols berechnen und den Rest als richtige Polsterung hinzufügen. Dadurch wird der Text nach rechts verschoben, oder da dies ein Rahmen ist und wir den Abstand zwischen den Elementen verwenden, kann ich den Abstand dort einfach vergrößern , bis wir die richtige Zahl erreicht haben. Ich denke, das ist eigentlich der einfachste Weg, dies zu tun. Lass uns 40 gehen. Es kommt wirklich darauf an. Ich denke, 40 ist tatsächlich der richtige Betrag. Machen wir das Gleiche hier, 40 und hier, großartig. Jetzt ist alles richtig ausgerichtet. Genau wie ich es will. Symbole mit dieser Anleitung, Text mit dieser Anleitung und dann die Kopfzeile, Karte und das Kontaktformular werden an dieser Anleitung ausgerichtet, was genau das Gleiche ist, was wir für das Menü getan haben. Das war nicht ziemlich schwer, oder? Im Moment ist das einzige, was hier noch zu tun ist, das Kontaktformular. Nun, hoffentlich läuft Ihr Designprozess reibungslos und Sie machen Fortschritte bei Ihrer Version der Website. Wenn Sie die Kopfzeile und die Seitenleiste des Kontaktabschnitts abgeschlossen haben , können wir zum Kontaktformular übergehen, das wir in der nächsten Lektion abschließen werden . Wir sehen uns dort. 22. Kontaktformular: Es ist an der Zeit, am Kontaktformular zu arbeiten und es zu glauben oder nicht Entwerfen von Formularen ist eines meiner Lieblingsbeschäftigungen, da mir die Standarddarstellung von Formularen im Internet einfach nicht gefällt. Ich versuche immer, sie besser aussehen zu lassen und brauchbarer zu sein. Lassen Sie mich Ihnen zeigen, wie ich dieses Formular entwerfen würde. Zuallererst brauchen wir einen Titel für dieses Formular. Schnappen wir uns etwas Text und ich gehe gleich hier unter die Formulargruppe. Wissen Sie was, lassen Sie uns das zuerst von einer Gruppe zu einem Frame ändern, also „Umschalt A“, um ein automatisches Layout hinzuzufügen, und lassen Sie uns den Abstand hier auf 32 ändern , das sollte es tun. Wir werden mit dieser Ebene herumspielen, wenn wir das Padding erhöhen müssen oder was nicht, aber nennen wir das senden Sie uns eine Nachricht. Los geht's Poppins 21, 32, fett, und benutze hier einfach Schwarz. Nun, für die eigentlichen Formularfelder denke ich, anstatt eines Feldes mit solidem Hintergrund, verschieben wir das Label etwas weiter nach oben, und dann haben wir den Feldwert. Dann haben wir nur eine kleine Ein-Pixel-Linie als Rahmen, um das Feld von den anderen zu trennen. Es wird ungefähr so aussehen. Kümmern wir uns zuerst um die Linie, wir füllen sie mit Schwarz und wir werden eine Deckkraft von 50 Prozent erreichen. Lassen Sie uns die Gruppe in einen Rahmen mit automatischem Layout ändern, wählen wir den Rahmen erneut aus und ändern ihn in Füllcontainer und ändern ihn auch in Füllcontainer. Stellen wir den inneren Abstand der Elemente auf 16 ein. Dies ist der Feldwert, also sollte er 21, 32 normal und schwarz sein , und lassen Sie ihn auch duplizieren, um das Label zu erstellen. Dafür verwenden wir einen viel kleineren Text und den kleinsten, den wir hier definiert haben, als 16, 24, also 16 Schriftgröße, 24 Zeilenhöhe. Lass uns das machen, also 16, 24. Nennen wir das deinen Namen. Lassen Sie uns hier tatsächlich ein paar Werte einsetzen. Reduzieren wir die Deckkraft dieses Textes, verwenden wir schwarz, 75. Ich denke vielleicht etwas Buchstabenabstand minus 3 Prozent, nur um es ein bisschen anders aussehen zu lassen als der Text darunter, und das ist eines unserer Felder. Um uns die Dinge einfacher zu machen, duplizieren wir diesen Frame einfach noch 1, 2, 3 mal. Hier haben wir Ihre E-Mail-Adresse. Fügen wir hier meine E-Mail-Adresse hinzu. Was dann sonst noch? Die Telefonnummer. Lasst uns das machen. Offensichtlich ist dies nicht meine echte Telefonnummer, und hier wird es Ihre Nachricht sein. Lasst uns die Botschaft ändern, so etwas. Schließlich müssen wir diese nur löschen. Lassen Sie uns auch den Knopf ändern. Wir haben hier tatsächlich einen netten Button erstellt, können wir einfach kopieren und wir können ihn einfügen. Wir müssen nur das Icon entfernen, die Texte ändern. Wir können die Größenänderung so einstellen , dass der Container gefüllt wird, und wir können auch die Ausrichtung ändern, damit der Text zentriert ist. Eine Sache, die ich tatsächlich ändern möchte, ist der Abstand, ich denke, 32 ist etwas zu niedrig, also sollten 64 Pixel den Trick machen. Außerdem möchte ich einschränken, wie breit diese Form wirklich ist. Lassen Sie uns dazu sehen, welche Möglichkeiten unsere Möglichkeiten hier sind. Wir haben einen Rahmen, der tatsächlich darauf eingestellt ist, Inhalte zu umarmen. Was passiert, wenn ich es so setze, dass der Container gefüllt wird. Es wird seine Größe vergrößern. Dann haben wir diesen Rahmen , den wir einstellen können, um den Container zu füllen, und dann können wir den ersten Frame nehmen und wir können eine Polsterung auf der rechten Seite hinzufügen, sagen wir 560, was genau der gleiche Betrag ist der Polsterung, die wir hier benutzt haben. Um die Map und den Menüinhalt vom linken Rand aus zu schieben. Ich denke, das sieht ziemlich gut aus. Die einzige Änderung hier, lassen Sie uns diesen Textfüllcontainer machen, und ich denke, der Rest sollte einfach zusammenfallen. Lassen Sie uns dies ändern, um den Container zu füllen, und ändern wir dies auch. Das ist so ziemlich genau das. Der Kontaktbereich ist jetzt abgeschlossen. Zuvor haben wir den Header mit dem Titel und der Map sowie der Seitenleiste erstellt , die Kontaktinformationen enthält. In dieser Lektion haben wir das Kontaktformular erstellt. Wenn Sie mitgemacht haben, hoffe ich, dass Ihr Kontaktbereich ebenfalls vollständig ist, und wenn nicht, dann erstellen Sie ihn, damit wir weitermachen können. Wenn wir uns nur unsere Seite ansehen, können wir sehen, dass die einzigen unpolierten Teile die Newsletter - und Fußzeilenbereiche sind. Kümmern wir uns als Nächstes um die. 23. Newsletter und Fußzeile: Newsletter und Fußzeile, dies sind die letzten beiden Abschnitte auf unserer Website, die wir noch nicht entworfen haben. Machen wir das jetzt und beenden wir dieses Website-Design. Lass uns gehen. Kümmern wir uns zuerst um die Fußzeile , da dies am einfachsten ist. Ich wähle diese gesamte Gruppe aus und nenne sie Newsletter und Fußzeile und natürlich Shift A, um das automatische Layout zu verwenden. Lassen Sie uns den Abstand zwischen den Elementen auf 128 ändern. Richten wir alles in der Mitte aus und lassen Sie uns natürlich den Container füllen. Fügen wir auch unten eine 128 Polsterung hinzu , damit der Abstand zwischen diesem Abschnitt und dem unteren Abschnitt der gleiche ist wie zwischen diesem Abschnitt und dem Newsletter-Formular. mir dieses Layout anschaue, bin ich mir nicht sicher, ob das Logo hier reinpasst, weil ich dies als einen sehr sauber aussehenden Abschnitt sehe, also denke ich nicht, dass wir das Logo verwenden sollten. Obwohl wir es im Wireframing benutzt haben. Aber wie ich schon sagte, ist das Drahtgitter nur ein Leitfaden. Wir können Layouts ändern, wir können bestimmte Elemente entfernen, wenn sie natürlich nicht kritisch sind, wie sehr wichtige Inhalte. Aber das Logo hier ist hauptsächlich aus ästhetischen Gründen. Also werde ich einfach weitermachen und das löschen und lass uns auch die Gruppierung dieses Textes aufheben. Für den Text verwenden wir schwarz 75, 16, 24, das stimmt. Wir haben diese Typografie bereits festgelegt. Jetzt, wenn die Fußzeile fertig ist, schauen wir uns über diese Newsletter-Anmeldung an. Zuerst nehme ich diese Gruppe, verwandle sie in einen Rahmen, nenne es uns Newsletter-Inhalt, füge eine Füllfarbe als schwarz und lass uns den verfügbaren Platz ausfüllen. Lassen Sie uns den Abstand hier entfernen und lassen Sie uns eine obere Polsterung und eine untere Polsterung von 128 Pixeln festlegen eine untere Polsterung von und den Inhalt auch in der Mitte ausrichten. Jetzt machen wir diesen Text weiß und auch diesen Text weiß. Ich denke, etwa 90% sollten einen Trick machen. Also 90% Deckkraft und anstatt hier zwei separate Elemente zu haben, wie wäre es, wenn wir es einfach zu einem einzigen kombinieren. Wir werden sagen, abonnieren Sie unseren Newsletter für Neuigkeiten und besondere Ereignisse und jetzt können wir dieses Bit löschen , damit wir diese beiden ausgewählt haben, tatsächlich in einen Frame verwandeln. Fügen wir etwas Abstand hinzu, 64 Pixel sollten den Trick machen. Vielleicht 95% Deckkraft für diesen Text, weil es sich um eine Überschrift auf dunklem Hintergrund handelt und wenn ich mich richtig an den Helden erinnere, wo wir auch eine Überschrift auf dunklem Hintergrund haben, haben wir 95% Deckkraft verwendet. Es geht also nur darum, die Dinge konsistent zu halten. dann anstelle dieser beiden Felder, Wie wäre es dann anstelle dieser beiden Felder, die wir hier erstellt haben. Also lasst uns das kopieren. Lasst uns das einfügen. Lassen Sie uns das tatsächlich löschen und wir brauchen auch einen Button. Lasst uns das auch einfügen. Offensichtlich können wir im Moment nichts sehen , weil alles dunkel ist. Also schwarze Farbe auf schwarzer Farbe. Lassen Sie uns tatsächlich beide auswählen und Umschalttaste A , um sie in ihrem eigenen separaten Frame hinzuzufügen. Lasst uns weitermachen und die Farben ändern. Anstelle von Schwarz lassen Sie uns die Farben von hier aufheben. Lass uns Weiß benutzen. Das ist besser. Ändern wir nun die Richtung dieses Rahmens Horizontal“ und ändern wir den Text innerhalb der Schaltfläche zum Abonnieren. Dann ändern wir die Größenänderung, um den Inhalt zu umarmen. Der Text hier ist Füllcontainer. Dieser Rahmen hat eine feste Breite, also wie wäre es, um ihn auch zu füllen. Lassen Sie uns tatsächlich den Knopf dorthin bewegen und lassen Sie uns dies als Umarmungsinhalt einstellen und tatsächlich denke ich, dass eine feste Breite dafür besser wäre. Wie wäre es, wenn wir diese 640 Pixel in der Breite machen. Das sollte viel Platz für eine E-Mail-Adresse sein und lassen Sie uns diesen Füllcontainer so erstellen , dass er in den dort verfügbaren Speicherplatz passt. Das sollte es tun. Lass uns hier etwas über den Button sehen. Wir haben eine kleine Fehlausrichtung. Die Schaltfläche ist oben mit dem Frame-Element ausgerichtet. Wie wäre es, wenn wir sie unten so ausrichten. Ich denke, das sieht viel besser aus, weil wir eine klare Fortsetzung zwischen dieser Zeile oder dem Strich oder dem Rand des Knopfes haben. Das sollte unser Newsletter und unsere Fußzeile sein. Dann lasst uns sehen, wo wir angefangen haben. Dies ist das ursprüngliche Drahtmodell und dann haben wir begonnen einige Typografieeigenschaften hinzuzufügen indem wir die Schriftfamilie, die Schriftgrößen und auch Zeilenhöhen, Buchstabenabstände, Schriftgewichte usw. geändert haben. Dann haben wir ein bisschen Farbe hinzugefügt und dann haben wir damit gelandet. Lassen Sie mich das tatsächlich verstecken. Wir haben mit jedem Abschnitt begonnen und den oberen Menükopf erstellt, dann gingen wir zum Heldenbereich, Beschreibung des Essensmenüs, wir haben das Food-Menü zusammen mit einem Food-Menü erstellt Navigation, und dann sind wir zum About Bereich, zur Instagram-Bildergalerie und dann zum Kontakt gekommen zur Instagram-Bildergalerie und schließlich haben wir in dieser Lektion das Abonnementformular und die Fußzeile erstellt und das ist unser fertig design oder zumindest meine Version davon. Ich hoffe, du hast dein Design auch fertiggestellt. Ich hoffe, du hattest bisher keine Probleme und hoffentlich hast du bisher etwas Nützliches in diesem Kurs gelernt. Nun, wie ich während dieser Klasse gesagt habe, empfehle ich Ihnen, mit mir zusammenzuarbeiten und Ihre eigene Version des Projekts zu erstellen. Außerdem empfehle ich Ihnen, dies in der Klassenprojektgalerie zu posten der Klassenprojektgalerie da andere Leute sehen können, was Sie getan haben, und wenn Sie möchten, kann ich Ihnen auch Feedback geben. Jetzt könnten Sie an dieser Stelle versucht sein, es einen Tag anzurufen und das Design an Ihren Kunden oder Ihren Entwickler zu senden, aber die Arbeit ist noch nicht erledigt weil ein Aspekt, der von viel vernachlässigt wird von Menschen ist ansprechendes Design oder wie wird Ihr Design auf verschiedenen Bildschirmgrößen aussehen? Nun, ich möchte dir in der nächsten Lektion mehr darüber erzählen. 24. Design für mittlere Bildschirme: Was ist mit einem ansprechenden Webdesign los? Ich bin sicher, dass die meisten von Ihnen diesen Begriff schon einmal gehört haben, aber falls Sie es nicht getan haben, lassen Sie mich Ihnen eine kurze Anleitung geben. Responsive Design ist die Praxis, eine Website oder eine Web-App auf das Verhalten und die Umgebung des Benutzers reagieren zu lassen . Mit anderen Worten, Responsive Design stellt sicher , dass diese Website oder Web-App auf jeder Bildschirmgröße, Plattform oder Geräteausrichtung verwendet werden kann auf jeder Bildschirmgröße, Plattform oder Geräteausrichtung verwendet . Hier ist ein Beispiel. Nehmen wir die Website von figma.com. Derzeit verwende ich den Bildschirm hier, das ist 1920 bis 1080. Ein typischer Desktop-Bildschirm. Und in Bezug auf die Größe sieht die Figma-Website so aus. Sobald wir jedoch anfangen, das Browserfenster zu verkleinern, um zu simulieren, wie die Website auf einem kleineren Gerät aussehen würde , werden Sie einige Änderungen sehen. Wie zum Beispiel sind einige dieser Bilder jetzt in voller Breite geworden. Wenn wir noch weiter gehen, werden Sie sehen, dass das Menü verschwindet sich in eines dieser Flyout- oder Dropdown-Menüs verwandelt, und wenn wir noch weiter gehen, werden Sie sehen, dass die Größe der Bilder automatisch geändert wird. Der Text wird, wie zum Beispiel in dieser Überschrift, kleiner und noch kleiner. Die gesamte Website passt ihr Layout und ihre Topographie so an, dass sie immer noch gut aussieht und auf kleineren Bildschirmgrößen verwendbar ist . Darum geht es bei einem ansprechenden Webdesign. Es stellt sicher, dass Sie eine Version Ihrer Website entwerfen oder erstellen , die unabhängig von der Umgebung gut aussieht. Wird es also auf einem großen Desktop-Bildschirm wie diesem angezeigt? Oder vielleicht ist es in einer Landschaft oder einem Tablet und Portrait oder vielleicht sogar auf einem Smartphone. Dieses Layout muss sich anpassen. Ich hoffe, das macht Sinn und Sie verstehen , warum Responsive Webdesign ein so wichtiger Aspekt jeder Website oder Web-App ist. Jetzt ist das Design, das wir erstellt haben, für große Bildschirme. Wir haben mit einer relativ normalen Bildschirmgröße angefangen, aber jetzt müssen wir sicherstellen, dass es auf kleineren Bildschirmen genauso gut aussieht . Um dies zu tun, werden kleine Änderungen an verschiedenen Elementen vorgenommen. Diese Änderungen reichen von der Änderung von Position und Größe bis hin zum Ausblenden bestimmter Elemente und dem Anzeigen anderer. Erstellen wir nun das ansprechende Design für mittlere Bildschirme. Da es sich um relativ kleine Bildschirme handelt, müssen wir einige Änderungen vornehmen. Fangen wir an. Das erste, was ich in Figma mache, ist, den Frame namens große Bildschirme zu duplizieren , und ich benenne ihn in mittlere Bildschirme um. Um festzustellen, welche Änderungen Sie vornehmen müssen, müssen Sie bestimmen, an welchem Zeitpunkt Änderungen erforderlich sind. Wann ist das Layout klein genug, damit wir Änderungen vornehmen müssen? Was ich tun werde, ist einfach die Größe des übergeordneten Frames zu ändern und weil wir das automatische Layout verwenden und für den gesamten Rahmen alle verschiedenen Elemente in unserem Design mit automatischem Layout erstellt werden, macht dies Es ist sehr einfach für uns weil es wirklich einfach ist, die Elemente in Echtzeit zu sehen , da ich diesen Hauptrahmen automatisch skaliere. Wenn ich an einen Punkt komme, an dem ich das klar sehen kann , stimmt etwas nicht mit dem Layout und wir müssen einige Änderungen vornehmen. Nun, da werden wir die Änderung vornehmen. Aus meinen Tests habe ich herausgefunden, dass wir rund 1400 Pixel 1400 Pixel einen sogenannten Haltepunkt hinzufügen müssen. Das ist nur ein Punkt, an dem wir anfangen müssen, Änderungen vorzunehmen. Das Layout, das wir hier für große Bildschirme erstellt haben, ist 1800 Pixel. Dieser Rahmen sollte ein Layout enthalten , das für Geräte mit Breiten zwischen 1400 und 1800 Pixeln geeignet ist . Ich hoffe, das ergibt Sinn. Um die Dinge ein bisschen klarer zu machen, benennen wir dies in 1800 plus um. Dieses Layout verwendet es für Bildschirmgrößen von 1800 Pixeln und mehr. Die mittleren Bildschirme verwenden wir für 1400-1800. Der Grund, warum ich mich für 1400 entschieden habe, ist, dass dieser Text beispielsweise im Helden dieser Text nur ein bisschen zu eng wird. Ich zeige im Grunde zwei, drei Wörter pro Zeile an, und das reicht für Lesbarkeitszwecke nicht aus. Auch dieser Abschnitt hier sieht etwas zu laut aus. Schauen wir uns die anderen Elemente an. Die Speisekarte. Dieses Layout hier wo wir den Menüinhalt versetzen. Es funktioniert ziemlich gut auf dem größeren Bildschirm, aber hier nicht so sehr. Ich würde viel lieber den verfügbaren Platz hier nutzen. Denn wieder wird der Text etwas zu kurz und so wird die Seite sehr lang und ich möchte das vermeiden. Außerdem werden wir uns wahrscheinlich von diesem Menü fernhalten, wir werden es wahrscheinlich komplett auf mittleren Bildschirmen ausblenden. Mal sehen, was wir sonst noch haben. Hier ist ein weiteres Problem mit diesem Layout. Wir haben hier viel Text, aber die Seite ist jetzt viel kleiner, also habe ich nicht die obere und untere Polsterung , die ich hier habe. Der Text berührt hier die Kanten, also möchte ich das auch beheben. Die Instagram-Fotos sind geschrumpft. Natürlich wurden sie in Bezug auf die Breite kleiner, aber jetzt sind sie etwas zu groß. Idealerweise möchte ich ein Verhältnis zwischen Breite und Höhe nahe an etwas halten , das ich hier auf den großen Bildschirmen habe. Wir müssen diese etwas weniger groß machen. Dann ist der Kontaktbereich. Auch hier sieht diese Karte fehl am Platz aus , weil es ein seltsames Verhältnis ist. Ich möchte diese volle Breite machen. Das Formular könnte etwas kleiner sein. Denken Sie daran, dass wir hier zuvor viel richtige Polsterung hinzugefügt hier zuvor viel richtige Polsterung weil wir viel Platz zum Arbeiten hatten, aber hier existiert diese Polsterung immer noch und wir müssen es loswerden. Es sind solche Änderungen , die ein ansprechendes Webdesign definieren. Es durchläuft die verschiedenen Bildschirmbreiten und sieht, was funktioniert und was nicht funktioniert dieser bestimmten Breite funktioniert und was nicht funktioniert und was nicht, und nimmt die notwendigen Änderungen vor. dieser Frame auf 1400 Pixel eingestellt ist, fangen wir an, Änderungen vorzunehmen und wir beginnen mit dem Helden. Um dieses Problem zu beheben bei dem der Text hier nicht genug Breite hat, ändern wir die Richtung der Heldenelemente. Im Moment ist es waagerecht eingestellt. Lassen Sie es uns in vertikal ändern, damit sich das Bild oben befindet und der Inhalt unten liegt. Lassen Sie uns zunächst die Breite des Bildes oder die Größenänderung ändern, die Breite des Bildes oder die Größenänderung ändern um gefüllte Container zu füllen, damit es den verfügbaren Platz ausfüllt. Dann lassen Sie uns hier auch die Guides aufrufen. Ich werde die gleichen Führungen von 64 Pixeln und 128 Pixeln behalten , aber wir haben hier auch einige Hilfslinien außerhalb unseres Rahmens, aber weil wir die Größe ändern, können wir sie nicht mehr sehen. Lassen Sie uns tatsächlich ein paar neue Leitfäden erstellen. Mal sehen. Wir werden sie genau hier platzieren und noch eine, also ist dies 64 Pixel von der Kante und diesem entfernt. Mal sehen, ob ich es visuell schaffe. Wenn wir hier eine schnelle Messung durchführen, sind es 67. Aber wir können tatsächlich eine einfache Berechnung durchführen, also 1400 minus 128, das sind 1272. Jetzt wissen wir, dass diese Anleitung genau 128 Pixel vom Rand entfernt ist . Wir werden diese verwenden, um sicherzustellen, dass wir Elemente richtig ausrichten. Wählen wir nun diesen Heldeninhalt aus. Dies ist immer noch auf vertikal eingestellt, was in Ordnung ist. Es ist das, was wir wollen, aber fügen wir oben und unten etwas mehr Polsterung hinzu . Die seitliche Polsterung ist genau das, was wir brauchen , 128, aber oben füge ich 96 und wieder 96 hinzu. Stellen wir auch sicher , dass dieser Inhalt so eingestellt ist , dass er die Größe zusammen mit seinem Inhalt ändert. Da wir all diesen horizontalen Raum haben, verwandeln wir dieses einspaltige Layout für die Geschäftszeiten in zwei Spalten. Dies ist ein Rahmen mit automatischem Layout. Das ist in Ordnung. Lasst uns einfach diese Richtung ändern. Lassen Sie uns eine Lücke zwischen diesen beiden Spalten auf 64 setzen. wir einfach sicher , dass diese richtig eingestellt sind, richten Sie die Mitte aus. Das ist gut. Auch diese Anleitung hier, die wir zuvor verwenden , um den Menüinhalt auszurichten, nun, wir brauchen ihn nicht mehr. Sie können es einfach auswählen und wenn es blau ist, klicken Sie auf „Löschen“. Das ist die erste Änderung, die wir vorgenommen haben, sobald wir nicht genug Platz hatten, um diese Informationen vertikal anzuzeigen, diese Informationen horizontal anzuzeigen, haben wir uns auf vertikale Weise geändert. Jetzt wird der Text in zwei Zeilen gut angezeigt. Es ist viel einfacher zu lesen als das, was wir zuvor hatten. Sehen wir uns als Nächstes den Abschnitt an, die Beschreibung des Essensmenüs. In dieser Bildschirmgröße ist nicht genug Platz, ist nicht genug Platz um diese beiden Elemente nebeneinander anzuzeigen , da der Überschriftentext einfach zu klein wird und es das gleiche Problem ist, das wir hier hatten . Es ist in viele Zeilen aufgeteilt und es ist schwieriger zu lesen, außerdem sieht es nicht sehr gut aus. Die offensichtliche Lösung besteht also darin, den Titel über dem Text unter anzuzeigen. Anstatt Seite an Seite zu sein, werden sie gestapelt. Dafür müssen wir jedoch ein paar Änderungen vornehmen, da hier Rahmen in Rahmen verschachtelt sind , da wir hier ein etwas kompliziertes Layout mit vielen Polstern hatten ein etwas kompliziertes Layout . Das erste, was wir tun werden, ist den übergeordneten Frame auszuwählen, seine Layoutrichtung in vertikal zu ändern und den Abstand zwischen Elementen auf etwa 64 Pixel festzulegen . Dann wählen wir jedes Element, jedes Element aus und heben die Gruppierung auf , um den Rahmen loszuwerden. Dann ändern wir die Größenänderung, um den Container zu füllen und den Inhalt zu umarmen. Tun Sie das Gleiche dafür, füllen Sie Behälter. Horizontal füllt es den gesamten verfügbaren Platz aus und umarmt auch den Inhalt vertikal. Es ist also nur so groß wie sein Inhalt. Das sieht ziemlich gut aus. Aber dieser Text ist wahrscheinlich ein bisschen zu lang. Wie wäre es, wenn wir auf dieser Seite etwas zusätzliches Padding hinzufügen , damit sowohl die Texte der Titel nur ein bisschen kürzer sind. Dies verbessert tatsächlich die Lesbarkeit des Textes. Wir wählen den übergeordneten Frame erneut aus und für das Padding rechts fügen wir etwas Größeres hinzu, etwa 400 oder vielleicht etwas Kleineres. Wie wär's mit 360? Oder etwas, das gut für dich aussieht. Für mich macht 360 den Job, also behalte ich ihn einfach so. Bevor wir fortfahren, lassen Sie uns nun eine weitere Änderung für dieses Layout vornehmen, denn wenn die Bildschirmbreite kleiner wird, wird der Inhalt offensichtlich länger oder größer. Auf einem kleineren Gerät müssen Sie viel mehr scrollen. Deshalb machen wir das nicht zu einer super langen Webseite. Reduzieren wir tatsächlich den Abstand zwischen Elementen. Wenn Sie sich erinnern, haben wir auf den großen Bildschirmen 240 Pixel verwendet. Wir haben das getan, indem wir 240 als Abstand zwischen Elementen im Hauptrahmen angewendet haben , der ein automatisches Layout hat. Lassen Sie uns auf mittleren Bildschirmen diesen Wert ein wenig verringern, etwa etwa 160. Das sieht ein bisschen besser aus. Vielleicht etwas Größeres, 176, das auch funktionieren könnte. Man sieht das schon, dass wir dadurch vertikal viel Platz gewonnen haben. Außerdem brauchen Sie keine Tonnen und Tonnen Leerzeichen auf einem kleineren Bildschirm. Es funktioniert hier auf dem großen Bildschirm gut, aber da der Bildschirm immer kleiner wird, müssen wir diesen vertikalen Raum beibehalten. Lasst uns jetzt weitermachen. Bisher haben wir den Helden gemacht und diese Essensmenü-Beschreibung gemacht. Mal sehen wir uns das eigentliche Menü an. Das Wichtigste zuerst: Lassen Sie uns diese Navigation loswerden. Wir brauchen es nicht, und wählen wir den Abschnitt Burger und Sandwiches aus, und sagen wir, ich möchte das Bild an dieser Anleitung hier und dem Text ausrichten , aber ich möchte nur das Bild gehe die gesamte Länge der Seite auf der rechten Seite. Um das zu tun, sehen wir, wir wählen den Hauptrahmen aus und dann gehen wir hierher und fügen 128 Padding hinzu. Das sollte es sein. Der Rest des Inhalts ist immer noch richtig ausgerichtet, da wir das Polsterset aus dem vorherigen Design haben . Das sieht gut aus. Kümmern wir uns um die anderen Abschnitte. Mal sehen, Steaks, lass uns 128, Quickies, 128 und Salate, eins. Großartig. Das sieht gut aus. Gehen wir nun zum About-Abschnitt über und wir werden etwas Ähnliches wie den Helden machen, in dem wir das Bild und den Textinhalt stapeln. Wählen wir den Rahmen ändern Sie die Layoutrichtung in vertikal. Verschieben wir das Bild nach oben, lassen Sie uns wechseln, um den Container zu füllen. Ich werde die gleiche Höhe von 480 beibehalten, und in diesem Abschnitt werde ich ihn so einstellen, dass er den Container füllt, Inhalt umarmt, und ich werde die Polsterung oben, unten auf 96 ändern , den gleichen Wert , den wir verwendet haben die Helden-Sektion. Beachten Sie, dass das Bild gerade erheblich kleiner geworden ist. Das liegt daran, dass ich dies auf eine feste Höhe einstellen muss. Der Gesamtinhalt oder Rahmen muss so eingestellt werden, dass er Inhalte wie folgt umarmt. Das ist der Abschnitt „About“, lass uns weitermachen. Instagram-Fotos. Die einzige Änderung , die hier vorgenommen wird ist die Höhe dieser Bilder. Im Moment gibt es 480, aber lassen Sie uns das auf 400 ändern. Das sollte uns ein viel besseres Verhältnis von Breite zu Höhe geben. Als Nächstes sehen wir uns das Kontaktformular an. Hier sind die Dinge sehr einfach, wir müssen diese und die Karte mit unserem Leitfaden ausrichten, und wir müssen dieses Formular in voller Breite machen. Da ich dies ausgewählt habe, ändern wir diesen Wert tatsächlich auf 128. Sie müssen hohles Layout lieben, weil der Formularrahmen den Füllcontainer verwendete, er füllte einfach den gesamten verfügbaren Platz und der verfügbare Platz wurde gerade größer, weil wir entfernt haben ein großer Teil dieser Polsterung. Sprechen wir nun über diese Elemente. Lasst uns das einfach auf 128 ändern, und wir können loslegen. Lassen Sie uns abschließend hier um diesen Abschnitt kümmern . Der Newsletter-Inhalt und hier müssen wir eigentlich nichts tun, da dies auf mittleren Bildschirmen immer noch gut aussieht. Sie können es in voller Breite machen, damit es zwischen diesen Leitfaden und diesem Leitfaden passt. Aber persönlich glaube ich nicht, dass es irgendeine Änderung braucht, also lasse ich es einfach so. Wir müssen einige Änderungen vornehmen wenn wir zu den kleinen Bildschirmen kommen, aber auf dem Medium sieht das gut aus. Lassen Sie uns eine kurze Zusammenfassung dessen machen, was wir in dieser Lektion in Bezug auf das responsive Webdesign getan haben , und ich werde diese tatsächlich nebeneinander zeigen, damit Sie die Änderungen sehen können, die wir vorgenommen haben. Zunächst haben wir den Abstand zwischen den Elementen im Mainframe verringert . Wir hatten 240 hier, wir sind mit 176 gegangen, glaube ich. Dann haben wir den Helden von diesem horizontalen Layout in ein vertikales geändert und die Geschäftszeiten von einem vertikalen auf ein horizontales Layout geändert, nur um das Beste aus dem verfügbaren Platz herauszuholen. Wir ändern diesen Abschnitt auch von horizontal in vertikal. Wir haben das Menü geändert, indem wir zuerst die Menüführung entfernt haben und dann auch den großen Offset entfernt haben, den wir auf der linken Seite hatten. Jetzt stimmt alles richtig aus. Was sonst noch? Lass uns weitermachen. Wir haben auch den Abschnitt „About“ geändert. Genau wie wir es mit dem Helden gemacht haben, sind wir von einem horizontalen zu einem vertikalen Layout übergegangen. Dann haben wir im Instagram-Bereich die Höhe der Fotos von 480 auf 400 geändert. Dann haben wir auf dem Kontaktformular die Karte natürlich vergrößert oder größer erscheinen lassen , indem wir sie an den Hilfslinien ausgerichtet haben. Wir haben auch dazu geführt, dass das Kontaktformular den gesamten verfügbaren Platz einnimmt , indem wir die hier eingestellte Polsterung geändert oder gesenkt haben. Das ist unsere Responsive Designversion für mittlere Bildschirme. Wie du es jetzt gewohnt bist, Zeit zum Üben. Also machen Sie weiter und erstellen Sie das ansprechende Design für die mittleren Bildschirme für Ihre Version des Designs. Sobald Sie fertig sind, können wir weitermachen, weil wir tatsächlich auf der letzten Strecke sind. Wir sind sehr nah an der Ziellinie, aber wir müssen uns immer noch um die kleinen Bildschirme kümmern oder wie die Website auf kleineren Bildschirmen aussehen wird. Dies erfordert aufgrund der Größe dieses Bildschirms die größte Anzahl von Änderungen. Kümmern wir uns in der nächsten Lektion darum. 25. Design für kleine Bildschirme: die Type ändern: Wenn es darum geht, das Design für kleine Bildschirme anzupassen, müssen wir einige Dinge tun. Wir müssen die Schriftgrößen und das Layout ändern und auch ein neues Element in Form eines Overlay-Menüs einführen . Aus diesem Grund werden wir die kleinen Bildschirmanpassungen in drei Lektionen aufteilen . In diesem kümmern wir uns um die Schriftgrößen. Lass uns gehen. Lassen Sie uns zunächst zu Figma zurückkehren und die mittleren Bildschirme duplizieren, entwerfen und in kleine Bildschirme umbenennen. Der Bereich, den wir wählen, liegt knapp unter 1.400 Pixel. Jede Änderung, die an diesem Layout vorgenommen wird, wird auf Bildschirmen angewendet, die 1.400 Pixel oder niedriger sind. Um einige dieser Änderungen zu sehen, ändern wir den Bildschirm tatsächlich auf eine Größe, die für einen kleinen Bildschirm wie ein Smartphone oder ähnliches typisch ist für einen kleinen Bildschirm wie . Lassen Sie uns etwas wie 540 Pixel wählen, was eine hübsche, ziemlich kleine Größe ist. Wie Sie auf dieser Größe sehen können, haben wir eine Menge Sachen zu tun. Elemente überlappen sich nur. Wir haben nicht genug Platz für den Text des Navigationsmenüs ist einfach zu groß. Die Speisekarte sieht ganz seltsam aus. Wir haben eine Menge Dinge zu tun. Aber lassen Sie uns das ein bisschen größer machen , damit wir immer noch Zugriff auf einige dieser Elemente haben. Es wird uns einfach die Arbeit erleichtern. Nun, wie ich in dieser Lektion sagte, kümmern wir uns um die Schriftgrößen denn hier ist das Ding. Auf einem kleinen Bildschirm sollten Sie nicht wirklich die gleichen Schriftgrößen verwenden , die Sie auf einem großen Bildschirm verwenden. Denn auf einem großen Bildschirm hat man viel Platz. Sie haben viel Bildschirm, Immobilien, aber auf einem kleinen Bildschirm ist das nicht der Fall. Eine der Methoden, mit denen Sie sicherstellen können , dass Ihr gesamter Inhalt richtig passt und angezeigt wird, besteht darin , die Schriftgrößen zu reduzieren. Wenn Sie sich an die Topographiestunde erinnern, haben wir eine Typskala verwendet. Wir verwenden diese mit einer Basisschriftgröße von 21 Pixeln. Wenn ich mich richtig erinnere, war es ein perfekter Vierter. Mal sehen, ob die Schriftgrößen übereinstimmen, 88, 66, 50. Dieser war Basis-21-Verhältnis 1, 3, 3, 3. Was ich jetzt gerne für kleinere Bildschirme mache, ist, die gleiche Basisschriftgröße beizubehalten, aber das Verhältnis zu die gleiche Basisschriftgröße beizubehalten, aber ändern, denn schauen Sie, was passiert, wenn Sie das Verhältnis auf nur einen Schritt tiefer ändern. Die Schriftgrößen werden ebenfalls niedriger, insbesondere die großen, die Überschrift eins, die Überschrift zwei. Ich denke, dies ist eine großartige Möglichkeit die Typografie auf einer reaktionsschnellen Website zu kontrollieren. Auf kleinen Bildschirmen verkleinern Sie die Schrift einfach , indem Sie die Typskala ändern. Dann duplizieren wir diesen Rahmen. Machen wir hier etwas Platz dafür. Nennen wir diese Typskala für kleine Bildschirme und höher. Nennen wir diese Typskala für kleine Bildschirme. Dies wird Basis 21 sein, also 21 Pixel. Dies ist der Ausgangspunkt, aber für die Skala werden wir diese 1.250 oder das Hauptdrittel verwenden. Benennen wir das auch um. Jetzt gehen wir weiter und ändern hier die Schriftgrößen. Mal sehen, wir haben 21 Pixel als Basis, wir behalten die 16 als Abstieg in der Skala, also 1624. Aber bei den größeren Schriftgrößen haben wir die folgenden 26. Dann 33, 41, 51 und 64. Jetzt werde ich auch hier die Schriftgrößen ändern , also 26. Während ich dabei bin, werde ich auch die Linienhöhen ändern. Lassen Sie uns das bei 40, 33. Stellen wir das auf 48 ein. Das ist 41. Wenn Sie sich fragen, warum ich diesen Zeilenhöhenwert lösche und auf auto setze, wenn er automatisch aktiviert ist und ich darauf klicke, berechnet Figma ihn automatisch für mich basierend auf einem voreingestellten Verhältnis. Ich kann diesen Wert von 62 verwenden oder ich kann meinen eigenen hinzufügen. In diesem Fall denke ich, dass ich einfach meine eigenen hinzufügen werde, also werden wir wahrscheinlich mit 56 gehen. Während ich dabei bin, werde ich den Text auch hier aktualisieren. Der nächste ist 51. Lasst uns das auf 72. ändern. Schließlich ist dieser 64, und ändern wir ihn für die Zeilenhöhe so auf 80. Jetzt, da wir die neuen Größen an Ort und Stelle haben, wenden wir sie auf unsere Seite an, und um es mir ein bisschen einfacher zu machen, mache ich nur einen Screenshot dieser Werte und ich werde es anheften es auf meinen Bildschirm. So etwas. Wechseln wir zu unserem Design für die kleinen Bildschirme. Übrigens, wenn Sie sich fragen, wie ich das machen kann, ist es eine App in macOS namens Clean Shot. Mal sehen, was über die Topographie geht. Grundsätzlich müssen wir hier den alten Wert mit dem neuen Wert ändern. Jetzt, da ich das sage, denke ich, dass wir auch wissen müssen, worum es bei den alten Werten ging. Machen wir auch einen Screenshot davon. Lasst uns auch die Screenshots anheften, also lasst es uns hier ein bisschen organisieren. Ich kann diese auch ändern. Ich werde den alten Wert und dann die neuen Werte genau hier haben . Lassen Sie uns nun das Design durchgehen und diese Werte entsprechend ändern. Dieser Text hier, das ist 16 er bleibt gleich. Die Navigation 21, es bleibt gleich. Dieser, 88.104, das ist der H1. Lasst uns es auf 64 und 80 ändern. Das sind 28 und 40. Sehen wir uns hier Position 3 an. Wir müssen es für 26 und 40 ändern, so. Als Nächstes 66, 80, ist das ein H2. Ändern wir es auf 51, 72. So. Dies ist ein Absatz, also bleibt er gleich. Dies und da wir dabei sind, dies wieder 66, 80. Wir müssen es für 51, 72 ändern. So. Dieser benutzt den Stil also 37, 48. Nummer 4 hier auf der Liste. Wir müssen es mit 33, 70 oder 48 ändern , also 33. Dieses und das, lassen Sie uns tatsächlich all diese auswählen. Ich halte nur Befehl und Umschalttaste gedrückt, um alle diese Elemente auszuwählen. Diese verwenden 28, 40. Nummer 3 hier, ersetzen wir durch 26, 40. Wir werden uns nicht damit beschäftigen, aber wir brauchen es immer noch. Lassen Sie uns diesen Stil wählen Eigenschaften kopieren. Wählen Sie dies aus, und fügen Sie Eigenschaften ein, um die neuen Schriftgrößen anzuwenden. Wählen wir nun sowohl diese als auch diese aus und ändern diese beiden, 51, 72. Dies ist normaler Text, der den gleichen Stil behält. Das auch. Dieser, 51,72 auch dort, und der Rest sollte ziemlich gleich sein, außer vielleicht dieser. 37,48, ändern wir es auf 33, 48. Das sollte es sein. Als kurze Zusammenfassung haben wir hier eine andere Typskala verwendet. Jetzt können wir diese Screenshots tatsächlich loswerden. Wir haben uns von einem Verhältnis von 1,333 auf ein Verhältnis von 1,250 geändert , was die Schriftgrößen auf kleinen Bildschirmen tatsächlich verkleinerte. Basierend auf diesen neuen Werten haben wir einfach alle Textelemente ausgewählt und die Schriftgrößen geändert, wo wir es mussten. Dies hatte, wie Sie bereits sehen können, einen großen Einfluss auf die Gesamtgröße unserer Seite. Denn obwohl dies viel kleiner ist, ist es fast gleich hoch. Natürlich wird es größer oder größer , weil wir anfangen, einige Elemente zu stapeln. Aber jedes bisschen hilft. Das Ändern der Topographie oder der Schriftgrößen auf kleinen Bildschirmen ist definitiv etwas, das ich wärmstens empfehlen kann. Jetzt sind Sie an der Reihe, die Typskala zu ändern und die neuen Schriftgrößen auf Ihre Version des Designs anzuwenden . Wenn du das schon gemacht hast, großartig, bist du bereit weiterzumachen. Aber wenn nicht, sollten Sie es jetzt tun , damit wir in Bezug auf den Fortschritt unseres Designs auf dem gleichen Niveau sind und sicherstellen , dass Sie verstehen, warum wir das tun. Ich habe versucht, es so gut ich konnte im Video zu erklären. Aber wenn Sie immer noch nicht verstehen, warum wir diese Änderungen in einem Responsive Design vornehmen müssen . Dann schreib mir eine Zeile im Diskussionsbereich und ich werde versuchen, es auf andere Weise zu erklären. Wenn Sie jetzt bereit sind, sehen wir uns in der nächsten Lektion, in der wir das Layout unserer Website auf kleinen Bildschirmen ändern werden . 26. Design für kleine Bildschirme: Layout ändern: Der nächste Schritt zur Anpassung oder Gestaltung kleine Bildschirme besteht darin, das Layout zu ändern, und die größte Änderung besteht darin, alles auf ein Einspalten-Layout zu verschieben . Aufgrund der Bildschirmgröße ist es selten der Fall, dass Sie zwei Inhaltsspalten anpassen können. Wenn Sie also eine Website auf Ihrem Telefon öffnen, werden Sie normalerweise feststellen, dass alles in einer einzigen Spalte übereinander gestapelt ist . Lass uns weitermachen und das auch machen. Fangen wir von oben an. Da es sich um kleine Bildschirme handelt , beachten Sie, dass sich diese Elemente überschneiden, wenn wir eine kleinere und kleinere Größe erreichen. Lassen Sie uns hier etwas Intelligentes machen und diesen Bereich vollständig loswerden und ihn stattdessen in einen eigenen Overlay-Container verschieben , den wir in der nächsten Lektion erstellen werden. Grundsätzlich möchte ich diesen Inhalt durch das Logo und ein kleines Symbol für das Menü ersetzen , und die Idee ist, wenn wir auf dieses Menüsymbol klicken, erhalten wir ein Pop-up oder einen Overlay-Container Anzeige des Menüs und auch dieser Informationen, die wir von hier entfernen, denn hier ist ein kurzer Tipp, wenn Sie reaktionsschnelle Designs oder reaktionsschnelle Versionen für Ihr Layout erstellen , ist es in Ordnung zu entfernen bestimmte Elemente, aber die meiste Zeit sollten Sie diese zurückbringen, insbesondere kritische Elemente wie die Navigation. In unserem Fall auf einem sehr kleinen Bildschirm ist die Navigation auf einem sehr kleinen Bildschirm zu lang, also werden wir sie aus diesem Layout entfernen, aber wir werden es später in einem separaten Element hinzufügen , das bei Bedarf geöffnet wird. Lass uns weitermachen und das machen. Ich entferne das. Ich kopiere auch das Logo und entferne dieses Bit. Ich werde das tatsächlich umbenennen, nun, eigentlich können wir es als oberste Leiste behalten. Es ist in Ordnung. Ich füge das Logo ein, aber ich werde es kleiner machen. Ändern wir seine Höhe auf 48 Pixel, etwa so. Dies sollte gut genug Höhe für einen kleinen Bildschirm wie ein Smartphone sein. Sie können das Logo immer noch klar sehen, aber es nimmt nicht zu viel Platz ein. Bringen wir es dann auf diese Seite. Lasst uns diese Elemente loswerden. Fügen wir hier auch ein weiteres Symbol hinzu, das als Menüsymbol dient, und ich öffne das Symbol erneut, und ich suche nach List unter dem Bootstrap-Symbol. Dies ist diejenige, die wir benutzen werden. Lass uns weitermachen und es zu unserer Seite hinzufügen. Einfach so. Ich habe es einfach mit ausgewählter oberer Leiste eingefügt und die Größe auch auf 32 Pixel geändert. Jetzt kann ich einfach die Social Icons entfernen. Wir werden sie gerade nicht brauchen, und ich habe auch dafür gesorgt, dass unsere Navigation die schwarze Farbe verwendet. Auf diese Weise stelle ich sicher, dass selbst auf den kleinsten Bildschirmen wir selbst auf den kleinsten Bildschirmen immer noch ein gutes Layout für unseren Header erhalten. Nun, ein paar Änderungen hier. Zunächst einmal die Polsterung, oben und unten, lassen Sie uns das ein wenig erhöhen denn jetzt haben wir nur ein einziges Element. Lassen Sie uns diese Anleitung auch entfernen weil wir ihn nicht mehr verwenden werden , und heben wir auch dieses Element auf, den Helden mit der oberen Leiste , damit wir diese Lücke zwischen ihnen beseitigen. Lassen Sie uns einfach A verschieben und nennen wir es Header und Held, und lassen Sie uns den Abstand zwischen ihnen vollständig entfernen. Lass uns weitermachen. Wählen wir den Hauptrahmen aus und ändern den Abstand zwischen Elementen von 176 bis 128, und wie Sie sehen können, haben wir hier einige sehr seltsame Dinge vor sich. Ich frage mich eigentlich, warum das auf den Kopf gestellt wird. Es ist so seltsam. Lass es uns umdrehen. Aber das werden wir in ein bisschen erreichen. Machen wir diesen Füllbehälter. Machen wir diesen Füllbehälter und machen wir diesen Füllbehälter so. Lassen Sie uns die Größe auf ungefähr dort ändern. Jetzt schauen wir uns über diesen Heldenbereich an. Wir können die Größe dieses Bildes tatsächlich auf etwa 480 erhöhen . So etwas, und was diesen Abschnitt angeht, legen wir die Höhe fest, um den Inhalt zu umarmen, und schauen wir uns den Heldeninhalt an, wo ich die linke und rechte Polsterung ändern werde 64 Pixel Das wird richtig mit diesem Leitfaden übereinstimmen. Dies wird genau den gleichen Platz links und rechts haben . Diese beiden sind gleich, richten aber auch alles nach links aus, und dies wird sicherstellen , dass es nach links ausgerichtet ist. Auf einem kleinen Bildschirm ist es einfach sinnvoller , damit alles gut nach links ausgerichtet ist. Wählen wir auch diese beiden aus, richten sie so nach links aus, und ich denke, wenn wir etwas mehr Platz sparen möchten, können wir die Polsterung hier auf 64 ändern. Es wird rundum 64 sein. Es liegt wirklich an dir. Ich denke immer noch 96, sieht gut aus, weil dies ein ziemlich wichtiger Abschnitt ist, und ich möchte nicht, dass es zu vollgestopft aussieht, aber wie gesagt, es liegt an dir. Das ist der Held. Es sind sehr, sehr einfache Änderungen. Wie Sie jetzt sehen können, sieht es immer noch ziemlich gut aus, wenn wir die Größe sogar auf eine sehr kleine Größe ändern . Lassen Sie uns das sehen, die Beschreibung des Essensmenüs. Lassen Sie uns zunächst zu umarmen Inhalt wechseln , Container füllen. Stellen Sie sicher, dass wir die Polsterungen hier auf 64 ändern. Dies wird wieder auf den Kopf gestellt. Wahrscheinlich ein Bug in Figma. Lass es uns zurückdrehen, und das sollte es sein. Dafür ändern wir einfach die Polsterung. Als Nächstes. Schauen wir uns das Menü an, und die größte Änderung für das Menü wird darin bestehen, dass wir stapeln oder ein einzelnes Spaltenlayout verwenden da der Text gerade in zwei Spalten, wie Sie sehen können, ein wenig ist etwas zu vollgestopft. Es ist ein bisschen zu kurz für eine ordnungsgemäße Lesbarkeit. Lass uns weitermachen und das machen. Zuerst wähle ich das Essensmenü und ändere den Abstand zwischen den Artikeln oder den Abstand auf 96, nur um mit dem von uns verwendeten Platz etwas vorsichtiger zu sein. Dann ändern wir dies auf den Steaks auch auf 96 und dies auf 64 und dann auf dem Geschirr, dass wir eine Spalte und zwei Spalten haben. Nun, das brauchen wir nicht mehr, also lasst uns die Gruppierung aufheben und lassen Sie uns auch die Gruppierung von Spalte 2 aufheben. Jetzt wird das Geschirr einfach übereinander gestapelt angezeigt. Nehmen wir jetzt hier ein paar Änderungen vor. Wir müssen auch eine Polsterung auf der rechten Seite hinzufügen. Ich denke, wir haben etwas zu viel Abstand zwischen den Gerichten. Wie wäre es, wenn wir es auf 64 ändern, so etwas. Das sieht ziemlich gut aus. Wir können versuchen, dies etwas weiter zu erschweren, indem wir separate Abstände zwischen dem Steaktitel und dem ersten Element schaffen. Aber ich denke, das sieht genauso gut aus wie es ist. Ich werde wahrscheinlich nur die Größe dieses Bildes auf 480 ändern, weil es ein bisschen zu groß war . Das sieht ziemlich gut aus. Machen wir das auch in den anderen Abschnitten. 96, Abstand hier, 64 und 64 Polsterung links und Padding rechts. Dann haben wir auch den Inhalt, lassen Sie uns das ändern, und dann haben wir für die Gerichte auch Spalte 1 und Spalte 2. Lassen Sie uns weitermachen und die Gruppierung aufheben und aufheben, und dann stellen wir unter dem Geschirr sicher, dass alles auf vertikal eingestellt ist. Wie Inhalte auf dem Elternteil. 64 Pixel, Padding auf der rechten Seite. 64 Pixel Abstand dazwischen, und dann muss jedes Gericht tatsächlich die volle Länge haben. Warum macht es das nicht? Mal sehen. Lasst uns das auf 480 ändern. Burger und Sandwiches, hier haben wir 64 und 64 angewendet, und dann hat der Inhalt keine Polsterung. Das ist richtig, und dann kam das Geschirr, von dem die zusätzliche Polsterung herkam. Das ist der zweite Menüabschnitt. Machen wir dasselbe für die anderen, genau das Gleiche, 96, 64 und 64. Dann Geschirr wieder, wir haben sie in Spalten, also lasst uns die Gruppierung aufheben, die auf vertikal eingestellt ist, Inhalt 64 zwischen Null umarmen, und das sollte es für diesen Abschnitt sein, und schließlich für Salate lassen Sie uns die Säulen wegwerfen. Ich möchte das Hauptelement auswählen. Verwenden wir dort 96 und 64 und 64 hier rechts, und lassen Sie uns dieses Bild auf 480 in der Höhe ändern. Haben wir das geändert? Nein, haben wir nicht. Machen wir das jetzt und ich denke, das war's schon. Fast. Uns fehlen tatsächlich einige dieser Separatoren. Lass mich wieder hochgehen und genau sehen, was uns fehlt. Denn denken Sie daran, als wir Spalten verwendeten, das letzte Element in hatte das letzte Element in einer Spalte kein Trennzeichen darunter. Als wir die Spalten loswurden, bleiben einige dieser Elemente offensichtlich ohne Trennzeichen. Lassen Sie uns das Trennzeichen einfach duplizieren und dort positionieren , wo es sein muss. Mal sehen, ich brauche noch einen hier. Für Quickies brauchen wir noch einen, und für Salate brauchen wir noch einen solchen. Jetzt haben wir tatsächlich etwas zusätzlichen Platz hier. Mal sehen , worum es geht. Dies ist das Essensmenü und es ist eingestellt, den Inhalt zu umarmen. Einer seiner Inhalte ist zu groß. Mal sehen welches. Salate? Salate sind tatsächlich darauf eingestellt, Inhalte zu umarmen , also ist es das nicht. Quickies? Alle von ihnen sind bereit, Inhalte zu umarmen, sind aber wahrscheinlich immer noch in Salaten. Mal sehen, ja, das Geschirr hier. Feste Höhe statt Umarmung Inhalt. Also lasst uns das ändern und alles ist da, wo es sein sollte. Es gibt einen Tippfehler hier. Das ist die Speisekarte. Wir sind gerade von zwei Spalten auf mittleren Bildschirmen zu einer Spalte auf den kleineren Bildschirmen gegangen zwei Spalten auf mittleren Bildschirmen zu einer Spalte auf und haben auch die Höhe der Bilder geändert und wir haben auch mit verschiedenen Polstern oder Abständen herumgespielt zwischen Elementen. Lasst uns weitermachen, wir sind kurz davor, das zu beenden. Der Abschnitt „About“. Eigentlich glaube ich hier nicht, dass wir irgendetwas tun müssen. Ich behalte die gleiche Bildgröße bei, Abstand ist korrekt oder eigentlich nein, den Heldeninhalt ändern wir hier die Polsterung von 128 auf 64. Jetzt richtet es sich richtig aus. Als Nächstes sehen wir uns Fotos von Instagram an. Das ist etwas schwieriger. Zuerst wählen wir dies aus, ändern die Polsterung, und dort fangen wir an, und dann ändern wir die Richtung von horizontal in vertikal. Lassen Sie uns die Verteilung in gepackt ändern alles nach links ausrichten. Lassen Sie uns den Inhalt umarmen und lassen Sie uns einen Abstand oder einen Abstand zwischen Elementen von 64 festlegen . Lassen Sie uns auch diese Schaltfläche in voller Breite machen , also füllen Sie den Container. Lassen Sie uns alles in der Mitte ausrichten und los geht's. Reduzieren wir auch den Abstand zwischen der Fotogalerie und dem Titel. Anstelle von 128 setzen wir 96 ein, und anstelle des dreisäultigen Layouts, das bei bestimmten Breiten möglicherweise nicht verwendbar ist, machen wir ein zweispaltiges Layout. Aber eigentlich sollte es so eingestellt sein, dass der Container so gefüllt wird. Zweispaltiges Layout für die Fotos anstelle von drei Spalten. Mal sehen, wie wir das machen können. Wir haben ein paar Bilder und sie sind in Reihen organisiert. Es ist ziemlich einfach. Wir müssen nur eine Zeile duplizieren und die Bilder einfach verschieben. Ich werde löschen oder tatsächlich verschiebe ich diesen von Zeile 1 in Zeile 2, und ich werde diesen löschen und dieses löschen, und jetzt sollten wir verschiedene Bilder haben. Löschen Sie diesen auch, und jetzt sollten wir gut sein. Ändern wir auch die Höhe dieser Bilder auf 240 Pixel. Dies ist ein viel geeigneteres Layout für einen kleinen Bildschirm. Dann gehen wir mit dem Kontakt fort. Ändern wir den Abstand hier auf 96. Das ist gut, ändern wir die Polsterung auf 64. Wenn du willst, kannst du hier auch 64 hinzufügen. Wenn Sie nicht möchten, dass die Map in voller Breite wird, denke ich, dass ich das einfach ignoriere. Lassen Sie uns die Map auch etwas kleiner machen 480 und sehen, was wir mit diesen beiden Elementen tun können. Wie wäre es, wenn wir diese Seitenleiste hier nach oben verschieben und die Polsterung genau dort loswerden, und lassen Sie uns die Größe festlegen, um den Container zu füllen. Fügen wir tatsächlich einen Abstand von 64 Pixeln auf der rechten Seite hinzu , damit wir, wenn wir die Größe ändern oder die Größe des Elternteils ändern, noch etwas Platz auf der rechten Seite haben. Stellen wir sicher, dass der Abstand korrekt ist und das ist. Lassen Sie uns diesen Rahmen tatsächlich auswählen und lassen Sie uns den Abstand zwischen dem Symbol und dem Text in etwas Besseres ändern den Abstand zwischen dem Symbol und , wie 32, wie zum Beispiel 32. Dann haben wir die Karte und dann das Kontaktformular. Fügen wir links und rechts etwas Polsterung hinzu. Ändern wir den Abstand auf 96, und jetzt, da ich ihn sehe, brauchen wir hier nicht wirklich zwei Frames. Wir müssen nur sicherstellen, dass der Abstand korrekt ist, aber wir können dies untergruppieren und haben nur den einen Frame, auf den wir als gefüllten Behälter 64 einstellen, wieder 64 auffüllen, und das sollte es für den Kontaktbereich und schließlich sehen wir uns die Fußzeile und den Newsletter an. Zuallererst sollte die Fußzeile so eingestellt werden, dass sie den gesamten Container füllt, und lassen Sie ihn tatsächlich in einen Rahmen legen , damit ich etwas Polsterung hinzufügen kann , 64, 64. wir das fest, um den Container zu füllen und sicherzustellen, dass der Text links ausgerichtet ist, und dann ändern wir für den Newsletter die obere und untere Polsterung auf 96 und dann auf die Framing-Seite ändern wir es, um den Container zu füllen. Fügen wir hier etwas Polsterung zu 64 und sehen wir uns unseren Text an. Es füllt den Container, also ist das gut. Aber dieses hier tut das Formular nicht. Wie wäre es, wenn wir dazu bringen, dass man den Container füllt und dann sehen wir uns diesen die Eingabe muss auch den Container füllen. Die Schaltfläche ist so eingestellt , dass er Inhalte umarmt, also wird er nur so groß sein wie der darin enthaltene Text, aber die Eingabe kann wachsen oder es kann schrumpfen also stelle ich das als Füllcontainer fest. Wenn ich den Bildschirm neu skaliere, ist dies das Verhalten, das er hat, das genau das ist, was wir wollen. Schließlich haben wir hier in der Fußzeile einige Entfernungen oder einen Abstand, der etwas zu groß ist , also ändern wir das in 96 und 96 dafür, und das war's. Das sind alle Layoutänderungen, die an der responsiven Version der Website auf kleinen Bildschirmen vorgenommen werden. Werfen wir einen schnelleren Blick darauf was wir im Vergleich zu den mittleren Bildschirmen gemacht haben. Zunächst haben wir die obere Leiste entfernt, in der wir den Inhalt tatsächlich durch das Logo und ein Menüsymbol ersetzt haben . Wir haben diese Elemente, die Adresse, die Social-Media-Symbole und die Navigation losgeworden die Adresse, die Social-Media-Symbole , aber wir werden diese später in einer anderen Form hinzufügen . Wir haben diese Elemente hier zusammengeführt , so dass der Header mit dem Heldenbereich ziemlich alle Elemente auf der Seite linksbündig ausgerichtet ist. Wir haben auch den Abstand zwischen Elementen auf globaler Ebene oder auf oberster Ebene von 176-128 verringert . Dann haben wir auch das Menü ein wenig geändert. Wir gingen von zwei Spalten für die Menüpunkte zu einer Spalte. Wir haben die Bilder auch etwas kleiner gemacht, und auch global haben wir von einem Abstand von 128 Pixeln zwischen den Elementen und der linken und rechten Kante zu einem Abstand oder Abstand von 64 Pixeln übergegangen und so kann der Inhalt nur ein bisschen horizontaler wachsen , sodass er Regel vertikal etwas weniger Platz beansprucht. Wir haben das Gleiche für den About-Abschnitt gemacht. Auf dem Abschnitt Fotos für Instagram haben wir tatsächlich den Titel und die Follow-Button gestapelt und von einem dreispaltigen Layout zu einem zweispaltigen Layout für die Fotogalerie migriert einem dreispaltigen Layout zu einem zweispaltigen . Dann haben wir beim Kontakt tatsächlich einige Elemente bewegt. Wir haben die Sidebar von hier genommen und wir haben sie über die Karte verschoben. Wir haben auch das Kontaktformular in voller Breite gemacht, und dann haben wir einige intelligente Größenanpassungsoptionen auf das Abonnementformular angewendet , damit es je nach Bildschirmgröße automatisch geändert je nach Bildschirmgröße automatisch wird, und das war's. Jetzt bist du dran. Erstellen Sie die responsive Version für kleine Bildschirme, damit wir uns auf derselben Seite befinden. Jetzt haben Sie gerade gesehen, dass wir durch das Ändern des Layouts einige ziemlich wichtige Elemente in unserem Design beseitigt haben , wie die Adresse, die sozialen Symbole und die Navigation , die die große ist. Wir brauchen also eine Möglichkeit, sie wieder hinzuzufügen , damit sie für den Benutzer zugänglich sind. Macht das mit einem Overlay-Menü und das wird in der nächsten Lektion angezeigt. 27. Design für kleine Bildschirme: Das Overlay-Menü erstellen: Es ist erstaunlich, dass du es so weit geschafft hast, Lektion 27. Es war eine lange Reise, aber wir sind fast am Ende. Alles was ich jetzt tun muss, ist das Overlay-Menü für die kleinen Bildschirme zu erstellen , und wir sind fertig. Lasst uns weitermachen und das machen. Dies wird eine wirklich einfache Aufgabe sein, und das Overlay-Menü ist im Grunde ein Container , der angezeigt wird , wenn wir auf kleinen Bildschirmen auf dieses Menüsymbol klicken , da wir die Navigation und all diese Informationen benötigen wir eine Möglichkeit, sie zurückzulegen , damit es für den Benutzer zugänglich ist. Wenn wir auf diese Schaltfläche klicken, schieben wir einfach einen Container nach unten , der all diese Informationen enthält. Lassen Sie uns hier einen neuen Rahmen erstellen, es spielt keine Rolle, um welche Größe es geht, ich weiß nicht, vielleicht 600 Pixel. Behalte es einfach unter 1.400 Pixel. Dann nennen wir diese kleinen Bildschirme, Modal/Overlay-Menü. Kopieren wir die obere Leiste, das brauchen wir. Wenden wir auch ein automatisches Layout auf diesen Rahmen an, damit es auf Hug-Inhalt eingestellt ist. Lassen Sie uns den Abstand dort entfernen. Was müssen wir dann anzeigen? Nun, die brauchen wir im Grunde. Wir brauchen die sozialen Icons, also fangen wir damit an. Wir brauchen auch die Menüführung, also kopiere das und lass es uns einfügen. Die Navigation sollte zuerst gehen, die sozialen Symbole als nächstes, und diese werden ganz am Ende sein. So werden wir das machen. Zuerst wählen wir diese drei aus, ich sollte sagen und „Shift A“, um einen anderen Frame zu erstellen. Fügen wir einen Abstand von 96 Pixeln zwischen ihnen hinzu. Stellen wir die Polsterung auf 64 ein, so etwas. Lassen Sie uns die Größenänderung für dieses Element auf Container füllen festlegen. Wählen wir dann das Menü aus, ändern seine Richtung in vertikal und setzen wir dieses auf Container füllen. Als Nächstes wählen wir diese Symbole aus. Weil wir hier für kleine Bildschirme entwerfen denen Sie höchstwahrscheinlich Finger auf Elemente tippen, erhöhen wir die Größe der Symbole auf 32 um 32. Wenn es ausgewählt ist, legen wir die Größenänderung auf Container füllen fest. Lassen Sie uns die Verteilung in Space dazwischen ändern, damit sie mit gleichem Abstand zwischen ihnen gut angezeigt werden . Schließlich wählen wir dieses Bit aus, lassen Sie es uns auch vertikal machen, 32 Pixel sehen ziemlich gut aus, setzen es auf Container füllen, und das sollte es sein. Vergessen wir nicht, das Symbol hier zu ändern , also zeigen wir anstelle des Menüsymbols ein x an. Gehen Sie zurück zu unserem Icon eingerichtet, sehen wir, habe ich hier ein x zum Schließen? Das sollten wir und das tun wir. Wir schnappen uns dieses x hier und fügen es ein. Stellen wir sicher, dass unsere Farbe schwarz ist und im Vergleich zum Menüsymbol etwas kleiner aussieht , also lassen Sie uns die Größe leicht auf 40 Pixel erhöhen, einfach so. Lasst uns das entfernen und ich denke, wir sollten bereit sein zu gehen. Lassen Sie uns auf Reaktionsfähigkeit testen, wenn wir die Größe ändern , nein, etwas stimmt nicht. Dies sollte auf Container füllen eingestellt sein. Jetzt wird es richtig angezeigt. Mal sehen, auch diese sollten auf Container füllen eingestellt sein, dies auch auf den übergeordneten Frame. Jetzt sollten sie auch die Größe ändern, aber was passiert hier nicht? Warum ändern sich diese nicht? Mal sehen, Frame 27, 64 Pixel, Container füllen, also ist das richtig. Dies ist Frame 3 und dies ist auf Container füllen eingestellt. Wir haben einen zusätzlichen Rahmen im Inneren, also legen wir den Füllcontainer fest. Das ist gut. Jetzt sollte alles so aussehen , wie es soll. Das ist das Overlay-Menü, es enthält Informationen, die für die Benutzerfreundlichkeit unserer Website sehr wichtig sind, wie die Navigation. Es ist nur auf kleinen Bildschirmen zugänglich , wenn wir auf das Menüsymbol klicken. Dies ist tatsächlich etwas, das viele Leute beim Entwerfen vernachlässigen Sie werden dieses Menüsymbol einfach hier platzieren und ihr Design an den Entwickler senden aber der Entwickler weiß nicht, was passiert, wenn ich auf dieses Menüsymbol klicke , denn wenn Sie das Modell, das Overlay-Menü, wie auch immer Sie es nennen möchten, nicht entworfen haben , weiß der Entwickler nicht, was er hineinlegen soll oder wie es aussehen sollte. Wenn Sie also reaktionsschnelle Versionen für Ihre Website erstellen und die kleinen Bildschirme bearbeiten, stellen Sie sicher, dass Sie auch für alle Elemente entwerfen, nach einer Benutzerinteraktion wie Wenn Sie auf einen Button klicken, öffnet sich das eine Art von Elementen, ein Fenster, ein Modal? Wenn dies der Fall ist, stellen Sie sicher, dass Ihr Design dies berücksichtigt. Dann lasst uns eine letzte Zusammenfassung machen um zu sehen, wo wir angefangen haben und wo wir gelandet sind. Wir haben mit dem Drahtrahmen angefangen. Das ist nur eine Darstellung des Designs mit geringer Wiedergabetreue. Dann haben wir den Designprozess begonnen, indem wir Typografie, einige Farben hinzugefügt haben, und dann haben wir das endgültige Design für große Bildschirme erstellt, das Sie hier sehen können. Dann mussten wir natürlich kleinere Bildschirme und mittlere Bildschirme berücksichtigen . An jedem von diesen haben wir verschiedene Änderungen vorgenommen. Wir haben Elemente verschoben, wir haben sie kleiner gemacht, wir haben die Schriftgrößen geändert. Wir sind von zwei Spalten zu einer Spalte übergegangen. Wir gingen von horizontalen Layouts zu vertikalen Layouts und so weiter und so fort. Auf diese Weise stellen wir sicher, dass unser Design auf jeder Bildschirmgröße gut aussieht. Herzlichen Glückwunsch, ich nehme an, Sie das Design auch fertiggestellt und Sie haben jetzt ein komplettes einseitiges Restaurant-Website-Design sowie alle notwendigen Anpassungen an kleine und mittlere Bildschirmgrößen. Arbeit gut gemacht und wie ich schon sagte, war es eine lange Reise, aber hoffentlich auch eine sehr informative für Sie und dass Sie etwas Nützliches gelernt haben. Jetzt schauen Sie sich bitte die Schlussfolgerungsstunde für meine Endgedanken an und auch eine Ankündigung, Sie interessiert sein könnten. Wir sehen uns dort. 28. Die epische Schlussbemerkung: Sie haben den Kurs beendet, Glückwunsch und vielen Dank, dass Sie die Geduld haben , 28 Lektionen zu absolvieren. Jetzt fragen Sie sich vielleicht, was Sie als Nächstes tun sollten. Zuallererst sollten Sie an dem Klassenprojekt arbeiten. Wenn du mit mir zusammengearbeitet hast während du den Kurs siehst, ist das großartig. Aber wenn nicht, denke ich, dass Sie die Klassenprojekte wirklich machen sollten , also schauen Sie es noch einmal an und versuchen Sie sozusagen meiner Führung zu folgen. Wenn ich mich um einen anderen Abschnitt im Design kümmere, mach das auch, bis du den Dreh raus hast und du wirst in Figma viel komfortabler arbeiten. Die Idee hier ist , einfach zu üben. Zweitens ermutige ich Sie, Ihr Design in der Klassenprojektgalerie zu veröffentlichen . Wie Sie meinen anderen Figma-Designkursen entnehmen können, haben viele Schüler ihre Arbeit in der Projektgalerie eingereicht ihre Arbeit in der Projektgalerie und ich habe Feedback für alle gegeben, die das wollten. Ich denke, das ist eine großartige Art zu lernen, weil man üben kann und sofort weiß, was man verbessern kann. Es gab auch Projekte, die sehr wenig bis gar kein Feedback von mir erforderten. Sie waren so gut und ich spreche nicht von genauen Kopien meiner Arbeit. Ich beziehe mich auf Projekte , die auf meiner Arbeit basierten, aber sie hatten ihren eigenen Stil , der mich sehr glücklich machte, es zu sehen. Sie zeigten mir auch eine andere Art , ein Projekt wie dieses zu betrachten, was für mich als Instruktor fantastisch war. Ich empfehle dir, das Gleiche zu tun. Machen Sie weiter und posten Sie Ihr Projekt, auch wenn Sie nicht das Gefühl haben, dass es gut genug ist, auch wenn Sie nur ein Anfänger sind weil wir irgendwann alle Anfänger sind. Jetzt möchte ich Sie einladen, sich meine anderen Kurse hier auf Skillshare anzusehen, und zum Zeitpunkt dieser Aufnahme habe ich tatsächlich einen weiteren Figma-Designkurs veröffentlicht. Es ist ähnlich wie dieses , aber kürzer und deckt auch eine andere Art von Design ab. Sie können eine Landingpage genauer erstellen. Ich habe für diesen einen etwas anderen Workflow verwendet Wenn Sie also weitere Optionen zur effizienteren Arbeit erforschen möchten, sollten Sie sich diese Klasse auch ansehen. Je nachdem, wann Sie sich dieses Video ansehen, habe ich möglicherweise noch mehr Kurse auf Skillshare veröffentlicht Schauen Sie sich also unbedingt mein Profil an , um alles zu sehen , was ich veröffentlicht habe. Während dieses Kurses habe ich Sie ein wenig wegen einer Ankündigung geärgert , die ich in der Schlussfolgerung machen würde , also hier ist es. meinem nächsten Skillshare-Kurs wird es darum gehen, die Website des Birdhouse Restaurants zu programmieren Website des Birdhouse Restaurants , die wir in dieser Klasse entworfen haben. In dieser Klasse geht es um das Entwerfen. Im nächsten geht es darum , dieses Design mit HTML, CSS und JavaScript zu codieren . Cool. Ich hoffe, Sie sind genauso aufgeregt wie ich über die neue Klasse und ich werde weitere Details teilen wenn ich näher dran bin. Stell sicher, dass du mir hier auf Skillshare sowie in meinen sozialen Medien folgst . diesem Fall ist es an der Zeit, sich für diesen Kurs zu bedanken , und ich freue mich darauf, Sie im nächsten zu sehen. Pass auf und sei sicher. Ich melde mich schon ab.