Wie man einen Responsive Website-Header in Figma entwirft und erstellt (Schritt für Schritt)

1. Willkommen im Kurs: Der Website-Header ist eines der ersten Dinge, die Menschen sehen , wenn sie auf einer Website landen. Dort finden sie Ihr Logo, Ihre Hauptnavigation und oft den wichtigsten Aufruf zum Handeln. Es ist auch eines der Elemente, die jeder Designer irgendwann erstellen muss, und genau das werden wir in diesem kurzen Kurs tun. Willkommen, alle zusammen. Ich bin Adi. Und heute entwerfen und entwickeln wir Prototypen einen responsiven Website-Header, der gut aussieht und auch auf allen Bildschirmgrößen wunderbar funktioniert Wir werden uns mit bewährten Methoden befassen, mit verschiedenen Layouts für mehrere Breakpoints arbeiten und das automatische Layout verwenden, damit sich alles gut anpasst Wir werden auch Figma Make verwenden, um einen interaktiven Prototyp des Headers zu erstellen Und für unseren Aufruf zum Handeln werde ich den intelligenten, wiederverwendbaren Button aus einem meiner vorherigen Kurse verwenden aus einem meiner vorherigen Kurse Wenn du also lernen möchtest, wie man das von Grund auf neu macht, gibt es in der Kursbeschreibung einen Link für dich. benötigen dafür keine fortgeschrittenen Figma-Kenntnisse, eine neue Datei, etwa 15 Minuten Ihrer Zeit, und wir werden sie Schritt für Schritt erstellen Natürlich gibt es auch ein Klassenprojekt, damit Sie diese Ideen in die Praxis umsetzen können Also lasst uns Figma öffnen und loslegen. 2. Effektive Überschriften verstehen: Bevor wir mit der Gestaltung unseres eigenen Headers beginnen, werfen wir einen kurzen Blick auf einige Beispiele aus der Praxis und erläutern die vier wichtigsten Prinzipien, die einen Header sowohl schön als auch effektiv machen einen Header sowohl schön als auch effektiv Zunächst ein klares Branding. In einer großartigen Kopfzeile ist das Logo sofort sichtbar, normalerweise in der oberen linken Ecke. Und das ist nicht nur Tradition, es ist das, was die Nutzer erwarten, und es hilft ihnen, die Marke sofort wiederzuerkennen. Als nächstes einfache Navigation. Sie sollten die Anzahl der Links immer überschaubar halten. Gruppieren Sie verwandte Artikel und achten Sie darauf, dass der Text klar und leicht lesbar ist Zu viele Links, und die Kopfzeile fühlt sich unübersichtlich an, zu wenige, und Besucher haben Schwierigkeiten, das zu finden, was sie benötigen Das Ziel ist ein Gleichgewicht zwischen den beiden. Dann haben wir eine starke Call Action, etwas, das sich visuell abhebt, oft ein Knopf in einer kontrastierenden Farbe. Dies ist das Element, das die Leute dazu bringt, den nächsten Schritt zu tun, sei es, sich anzumelden, einen Kauf zu tätigen oder Sie zu kontaktieren. Endlich mobilfreundliches Design. Ein Header sollte auf allen Bildschirmgrößen problemlos funktionieren. Auf Mobilgeräten bedeutet das oft, zu einem Hamburger-Menü zu wechseln und die Abstände anzupassen, damit das Design sauber und funktionell bleibt Wenn Sie diese vier Prinzipien im Hinterkopf behalten, also ein klares Branding, eine einfache Navigation, eine starke Kaltwirkung und ein mobilfreundliches Design, Sie auf dem besten Weg, Header zu erstellen , die nicht nur gut aussehen, sondern auch funktionieren Großartig. Nehmen wir also diese Ideen und beginnen unseren eigenen responsiven Header in Figma zu erstellen 3. Entwerfen des Website-Headers für Desktop: Dies ist die Startdatei , die Sie herunterladen können indem Sie auf die Links in der Kursbeschreibung klicken. Sie enthält einige Anweisungen dazu, enthält einige Anweisungen was Sie für einige Projektelemente benötigen. Das ist im Grunde eine Liste von Komponenten, die Sie verwenden können. Diese sind größtenteils aus meinem vorherigen Kurs zur Erstellung der SMR-Komponente entlehnt meinem vorherigen Kurs zur Erstellung der SMR-Komponente Und ich habe einige kleine Anpassungen an der Button-Komponente Im Grunde habe ich eine sekundäre Variante geändert und zwei weitere Varianten hinzugefügt, die im Grunde kleinere Versionen der ersten beiden sind. Und dann haben wir ein Dummy-Logo , das wir in unserem Design verwenden können Außerdem habe ich einige vordefinierte Layouts hinzugefügt. Wir haben ein Desktop-Layout mit einer Breite von etwa 1.400 Pixeln und dann zwei mobile Layouts mit einer Breite von 400 Pixeln Und in der Desktop-Version haben wir den Inhalt, den wir aufnehmen müssen Lassen Sie uns also gleich loslegen. Ich werde damit beginnen, das Logo zu ersetzen. Also werde ich diese Komponente kopieren. Ich wähle hier den Platzhalter aus und drücke Strg+Shift R, um ihn zu ersetzen Oder wenn Sie auf einem Mac arbeiten, können Sie Command Shift R verwenden. Und ich gehe sofort zum Layoutbereich Ich überprüfe das Sperr-Seitenverhältnis und ändere die Höhe auf 48 Pixel. Als Nächstes haben wir diese Links. Da wir also einen sehr einfachen, sehr unkomplizierten Header entwerfen , werden wir unsere Typografie schön und einfach halten, gut lesbar sein und wir werden Inter verwenden Standardmäßig verwenden diese zwischen den regulären 16 Pixeln. Wir werden die Dinge ein wenig ändern. Ich werde Medium verwenden, weil ich möchte, dass diese Links ein bisschen besser hervorstechen, und ich werde die Schriftgröße auf 14 Pixel reduzieren und eine Zeilenhöhe von 140% verwenden Auch wenn diese ausgewählt sind, drücke ich Shift A, um sie zu ihrem eigenen automatischen Layoutrahmen hinzuzufügen ihrem eigenen automatischen Layoutrahmen Lassen Sie uns das noch einmal machen, Shift A, und ich werde 32 Pixel als Abstand zwischen den Elementen festlegen , einfach so. Und ich werde sicherstellen, dass alles auf die Mitte ausgerichtet ist , also so. Lassen Sie uns abschließend den Platzhalter „Kostenlose Testversion starten“ auswählen. Wir müssen ihn durch eine Schaltfläche ersetzen . Ich werde die primäre kleine Variante dieser Button-Komponente verwenden . Kopieren Sie also das Steuerelement Shift R erneut, um es zu ersetzen. Und genau hier werde ich die Bezeichnung der Schaltfläche ändern, um die kostenlose Testversion zu starten, und ich werde einen Pfeil nach rechts als mein Symbol verwenden. Nehmen wir nun diese drei Elemente und drücken Shift A, um sie zu ihrem eigenen automatischen Layoutrahmen hinzuzufügen . Dann richte ich im Inspektor alles in der Mitte aus, und ich möchte, dass sich dieser Header über die gesamte verfügbare Breite meines übergeordneten Frames erstreckt. Nicht nur das, ich wollte in der Lage sein, seine Größe anzupassen, um seine Größe an die Größe des übergeordneten Elements anzupassen. Wenn also das übergeordnete Element kleiner wird, wird auch der Header kleiner. Das können wir mit dem automatischen Layout machen. Also wähle ich den Desktop-Rahmen und füge ihm einfach so ein automatisches Layout hinzu. Und ich werde einfach diese Standardeinstellungen zurücksetzen, die Abstände, die Polsterung Ich werde alles auf Null setzen. Jetzt, wo mein Desktop ausgewählt ist, werde ich einfach seine Höhe erhöhen damit wir sehen können, was hier vor sich geht. Und ich werde meinen Header auswählen. Und ich werde sicherstellen, dass die Größe hier so eingestellt ist, dass der Behälter gefüllt wird. Lassen Sie uns nun hier ein paar Dinge ändern. Zuallererst möchte ich, meine Navigation und meine Schaltfläche gruppiert werden. Ich nehme die Schaltfläche, schneide sie aus, also Strg- oder Befehls-X, und wähle dann eines der Elemente in der Navigation aus und füge es dort ein. Dadurch wird im Grunde das Element innerhalb meines Navigationsrahmens verschoben innerhalb meines Navigationsrahmens das das automatische Layout angewendet wurde. Und das stellt sicher, dass ich den gleichen Abstand von 32 Pixeln zwischen dem Menü und der aufgerufenen Aktion habe. Als Nächstes wähle ich hier den Abstand zwischen den Elementen und ändere diesen Wert von aus und ändere diesen Wert von einem festen Wert auf Auto. Und das wird es mir ermöglichen, jetzt die Größe des Desktops zu ändern. Frame, und die Größe der Kopfzeile wird zusammen geändert. Lassen Sie uns ein paar letzte Handgriffe machen. Fügen wir rund um den Header etwas Platz hinzu. Also füge ich 64 Pixel, horizontale Polsterung, 20 Pixel, vertikale Polsterung hinzu Und lassen Sie uns das etwas sichtbarer machen. Also werde ich im Füllbereich eine Füllfarbe Weiß hinzufügen. Und ich werde auch einen Strich hinzufügen . Also lass mich dir das zeigen. Der Strich wird E vier, e6e7 sein , und ich werde das nur auf die Unterseite anwenden Dadurch entsteht eine schöne Trennung zwischen dem Hintergrund unserer Seite, der sehr hellgrau ist , und der Kopfzeile, die einfach weiß ist Wählen Sie abschließend die Kopfzeile aus, und ich werde das reine Schwarz, das ich für den Text und das Logo verwende, durch 27292 A ersetzen , was ein dunkleres Grau ist Und genau da ist unser fertiges Header-Design für den Desktop Der Grund, warum wir einen Header responsiv machen müssen, ist nicht jeder dass nicht jeder auf einem Desktop-Bildschirm mit derselben Größe im Internet Wenn Leute also auf einem Mobilgerät surfen , das einen kleineren Bildschirm hat , wird das irgendwann passieren Unser Bildschirm wird immer kleiner und kleiner und die Elemente werden sich überlappen und Layouts werden anfangen, kaputt zu gehen Deshalb müssen wir uns ein anderes Layout für die kleineren Bildschirme einfallen lassen ein anderes Layout für die kleineren Bildschirme einfallen Lass uns das in der nächsten Lektion machen. 4. Entwerfen des Website-Headers für Tablets und Mobilgeräte: Lassen Sie mich Ihnen zunächst eine der einfachsten Möglichkeiten zeigen , wie Sie einen responsiven Header oder eine ansprechende Navigation erstellen können einen responsiven Header oder . Wir sind also auf der Website cleanshot.com und sie haben einen sehr einfachen Header, der unserem sehr ähnlich ist, mit einem Logo, Navigation und dann einer aufgerufenen Beobachten Sie also, was passiert, wenn wir die Größe ändern. Richtig? Die Navigation und die kalte Aktion verschwinden, und stattdessen haben wir diese Menüschaltfläche, die uns, wenn wir darauf klicken, im Grunde wenn wir darauf klicken, im Grunde das Menü anzeigt, das gerade verschwunden ist. Wir können also darauf klicken, um es auszublenden. Wir können klicken, um es anzuzeigen. Und wenn wir uns das auf einem größeren Bildschirm ansehen, erhalten wir das volle Erlebnis. Das ist es also, was wir im Grunde schaffen müssen. nun zu Figma zurück und beginnen damit, wir nun zu Figma zurück und beginnen damit, unser Header-Element zu kopieren und zum geschlossenen mobilen Frame zu wechseln , der 400 Pixel breit ist Und das entspricht in etwa dem Bereich mobiler Bildschirme, was die Bildschirmbreite angeht Es gibt natürlich Bildschirme, die größer sind, manche sind sogar kleiner, aber 400 Pixel sind eine gute Menge. Wenn wir das also einfügen, werden Sie feststellen, dass sich die Dinge überschneiden. Offensichtlich wollen wir das nicht. Lassen Sie uns also tatsächlich diesen Frame auswählen , der die Navigation und die Kult-Action enthält, und wir löschen ihn einfach. Jetzt gehe ich zurück zu meinen Buttons. Ich nehme eine dieser sekundären kleinen Schaltflächen, kopiere, wähle die Kopfzeile aus und füge sie ein. Das wird es einfügen. Und ich werde das Symbol hier einfach in ein Hamburger-Menüsymbol ändern Und ich wähle das Etikett aus und drücke einfach auf Löschen. Außerdem werde ich diese Schaltfläche auswählen und ihre Breite auf 44 Pixel einstellen, was genau der Höhe entspricht, und ich werde die Ausrichtung auf Mitte ändern. Als Nächstes wähle ich die Kopfzeile aus, und ich ändere den seitlichen oder horizontalen Abstand auf 24 Pixel, da wir auf Mobilgeräten so viel Platz wie möglich beibehalten müssen Wir müssen die Dinge also etwas kompakter gestalten als auf dem Desktop Ich werde auch einfach so den vertikalen Abstand auf 16 Pixel ändern einfach so den vertikalen Abstand auf 16 Pixel Die Idee ist auf Mobilgeräten, dieses Element wird durch diese Schaltfläche ersetzt Wenn wir also auf diese Schaltfläche tippen, müssen wir die Navigation und die aufgerufene Aktion anzeigen. Lass uns das im nächsten Frame genau hier machen. Kopiere das, füge es ein. Wenn hier auf die Schaltfläche getippt oder geklickt wird, möchten wir das Symbol einfach so vom Menüsymbol in ein Schließen-Symbol ändern einfach so vom Menüsymbol in ein Schließen-Symbol Weil wir den Benutzern mitteilen möchten, dass, okay, Sie auf diese Schaltfläche getippt haben und die Aktion erfolgreich war, und wir werden auch ihren Inhalt ändern damit sie wissen, dass sie das Menü schließen werden, wenn sie das nächste Mal darauf tippen schließen werden, wenn sie Lassen Sie uns jetzt das eigentliche Drop-down-Menü erstellen, oder? Also werden wir das kopieren. Wir werden es einfügen und ein paar Änderungen daran vornehmen. Zunächst ändern wir die Richtung auf vertikal, sodass alle Elemente vertikal angezeigt werden, und dann füge ich eine Füllfarbe weiß hinzu. Ich werde einstellen, lassen Sie mich das tatsächlich ein wenig verschieben. Ich werde die Breite so einstellen, dass der Container gefüllt wird, sodass sie die gesamte Breite des übergeordneten Frames einnimmt, und wir werden alles einfach so oben und in der Mitte ausrichten . Und zum Schluss füge ich etwa 24 Pixel, horizontale Polsterung und 32 Pixel Mit einer vertikalen Polsterung, also oben und unten. Ich werde auch die Strichfarbe, die ich hier verwendet habe, kopieren und sie auch diesem Element hinzufügen Und wir werden sicherstellen , dass wir das nur auf den unteren Rand des Elements anwenden , also so. Das ist also im Grunde der Flow. Wir gehen vom Desktop aus, wo unser Header so aussieht. Wenn der Desktop zu klein wird , um all diese Elemente aufzunehmen, wechseln wir zur mobilen Ansicht, in der dieses Menü zunächst ausgeblendet ist. Wir können jedoch darauf zugreifen, indem wir auf die Menüschaltfläche klicken oder tippen Das ist cool und aus gestalterischer Sicht ist unsere Arbeit quasi abgeschlossen, aber wir können noch einen Schritt weiter gehen und tatsächlich einen funktionierenden Prototyp davon erstellen Lassen Sie mich Ihnen in der nächsten Lektion zeigen, wie das geht. 5. Prototyping des mobilen Menüs mit Figma Make: Nachdem wir unser Header-Layout für Mobilgeräte erstellt haben, machen wir es interaktiv und erstellen einen Prototyp für das Hamburger-Menü, sodass es mit Figma Make geöffnet und geschlossen wird Und falls Sie es nicht wissen, Figma make ist ein neues KI-Power-Tool in Figma make ist ein neues KI-Power-Tool in FigMA, mit dem Benutzer funktionale Prototypen sowie Web-Apps und Websites anhand von Textaufforderungen und vorhandenen Figma-Designs erstellen funktionale Prototypen sowie Web-Apps und Websites anhand von Textaufforderungen und vorhandenen Websites anhand von Textaufforderungen Und der Einstieg in Figma Make ist wirklich einfach. Alles was Sie tun müssen, ist hier auf das Figma-Symbol zu klicken, zu Datei Neu zu gehen und M auszuwählen. Und schon sind Sie dabei und können loslegen Das allererste, was wir tun wollen, ist die Figma-Frames zu kopieren und in Make einzufügen , damit die KI weiß, was sie bauen muss Also werden wir hin und her gehen. Wählen Sie also den Desktop aus, kopieren und gehen Sie dann hier unten rein und fügen Sie ihn einfach ein, und wir machen dasselbe für das Handy. Also kopiere das, füge es ein und dann öffne das Handy, kopiere das, füge es ein. Und dann musst du deine Idee beschreiben. Was soll die KI damit machen? Also werde ich sagen, erstellen Sie einen P-Typ des responsiven Headers Und ich werde einfach die Eingabetaste drücken und das war's. Ich habe der KI den Befehl gegeben. Jetzt denkt es nach. Es denkt nach, weißt du, und bestimmt, was es tun muss Und schon bald wird es mit dem Bau beginnen. Also da hast du's. Es hat unseren Header hier erstellt. Ich habe hier einige zusätzliche Inhalte hinzugefügt, die wir, weißt du, jederzeit entfernen können. Aber was uns im Wesentlichen interessiert, ist die Funktionalität, oder? Also werde ich die mobile Vorschau öffnen , und wie Sie sehen können, wenn ich die Größe ändere, ja, wenn ich ungefähr an diesem Punkt angelangt bin, ändert es sich zur mobilen Ansicht Und wenn wir auf dieses Symbol klicken, wird mir das mobile Design angezeigt, das ich erstellt habe Klicken Sie darauf, um das Backup zu schließen, seine Größe zu ändern. Wenn Sie zu einem bestimmten Zeitpunkt Änderungen vornehmen möchten, können Sie die KI um Änderungen bitten Ich kann ihr zum Beispiel sagen, dass sie früher zur mobilen Ansicht wechselt Ich trete ein und jetzt macht es dasselbe. Noch einmal, es wird einige Dinge im Code ändern, und es wird im Grunde das tun, wonach Sie normalerweise fragen. Okay, Version zwei ist jetzt fertig, und wenn wir die Größe ändern, können Sie sehen, dass die Änderung viel früher erfolgt, was genau das ist, was ich wollte, und es ist immer noch ein voll funktionsfähiger Prototyp Ordnung. Jetzt bist du dran Ihr Projekt besteht darin, Ihren eigenen responsiven Website-Header in FIGMA zu entwerfen Ihren eigenen responsiven Website-Header in FIGMA Oder wenn Sie möchten, können Sie den ich in dieser Klasse gebaut habe, neu erstellen Für die CTA-Schaltfläche können Sie Ihre eigene entwerfen oder die von mir bereitgestellte verwenden Wenn du neugierig bist, wie ich diesen intelligenten Button von Grund auf neu erstelle, schau dir meinen anderen Skillshare-Kurs an In der Beschreibung gibt es einen Link für dich, oder du kannst mein Profil durchsuchen, um alle meine Design-Kurse zu sehen Du bist fertig, bitte teile dein Header-Design in der Klassenprojektgalerie. Ich würde gerne sehen, was dir einfällt. Okay, danke fürs Zuschauen. Viel Spaß beim Entwerfen und wir sehen uns in der nächsten Klasse. Tschüss fürs Erste.