Gestalten Sie Ihre Website mit Figma ⁇ Webdesign

1. Kurs-Einführung: Wenn Sie in einem Startup sind oder gerade ein neues Unternehmen gründen, war für Sie in der Regel sehr wenig Kapital der Star. In der heutigen Welt ist es sehr schwierig, ein Unternehmen zu führen , ohne eine Online-Präsenz zu haben. Deshalb haben wir das Prototyping übertroffen. Tools wie Figma erweisen sich als praktisch und ermöglichen es Ihnen, die Website oder den App-Prototyp mit den geringsten Ressourcen kostenlos zu erstellen App-Prototyp mit den geringsten . Nehmen wir an, Sie arbeiten beispielsweise an einem Bildungs-Startup und Ihr Team bittet Sie, eine Website mit HTML, CSS und JavaScript zu erstellen . Nehmen wir an, Sie sind ein Pro-Quarter und erstellen diese Zielseite für Bildungs-Startups in zwei Tagen. Nachdem Sie Ihre Arbeit überprüft haben, fordert Sie eines Ihrer Teammitglieder die Hintergrundfarbe zu ändern. Sie müssten Ihre Codebasis durchgehen. Sie müssen Änderungen am Cascading Stylesheet vornehmen und den Code erneut bereitstellen, was sehr ineffizient ist und viel Zeit verschwendet. Dieselben Änderungen Figma ist jedoch sehr einfach. Sie können den Hintergrund ändern, indem Sie jedoch zu Ihrem gehen , die Pipette auswählen und die Farbe auswählen, die Ihr Hintergrund haben soll. Dies ist nur ein sehr einfaches Beispiel, und wenn die Dinge voranschreiten, ist es möglicherweise nicht so einfach. Ihr Ziel als neues Startup oder als neuer Besucher sollte es sein, etwas aufzubauen, indem Sie die geringsten Ressourcen mit Software wie Figma verwenden, die das Spiel verändern. Ja. Dann wiederholt jemand, der in den letzten 20 Jahren als Softwareingenieur gearbeitet hat . Und in einem seiner Artikel wurde erwähnt, dass Investitionen in den Designprozess, sei es durch UX-Designer oder einfach dadurch, dass Sie sich weiterbilden, enorme Dividenden bringen werden. Langfristig. Hier kommt Figma ins Spiel. Es ermöglicht Ihnen, in den Designprozess zu investieren und was Sie mit Ihren Kollegen entwickelt haben, zu validieren. Dieser Kurs richtet sich an Startup-Gründer, neue Unternehmen oder alle, die Figma lernen und dieses Wissen nutzen möchten, um eine Website oder Landingpage zu entwerfen. Obwohl der Schwerpunkt dieses Kurses auf Sigma liegen würde, würden wir uns auch mit anderen wichtigen Webdesign-Aspekten wie Ausrichtung, Farbpalette, Topographie , Inspiration, Logo, Wireframing. Mein Name ist Otto und ich werde dein Lehrer auf dieser Reise sein. Und wenn Sie bereit sind, lassen Sie uns beginnen. 2. Erste Schritte mit Figma: Willkommen zurück, alle zusammen. Wir werden jetzt mit Figma beginnen. Wenn Sie das auf Ihrem Gerät schon sehr durcheinander gebracht haben und auch etwas Erfahrung damit haben. diesen Teil des Videos gerne überspringen, vorausgesetzt, Sie verwenden Figma zum ersten Mal. Lassen Sie uns beginnen, indem Sie Sigma in unserem Webbrowser hinzufügen. Stellen Sie sicher, dass Sie in der Mitte meiner Website auswählen , die angezeigt wird. Dadurch werden Sie zur Figma-Homepage weitergeleitet. Und wenn Sie bereits ein Konto haben oder sich anmelden müssen. Wenn Sie jedoch kein Konto haben, klicken Sie auf Erste Schritte“ und melden Sie sich bei Google an oder geben Sie Ihre Daten ein und erstellen Sie ein Konto, sobald Sie angemeldet sind So sollte es aussehen. Oft ist es nicht nötig, etwas von Grund auf neu zu erstellen. Wir können immer auf dem aufbauen, was andere bereits geschaffen haben. Wenn du zum Beispiel in die Community gehst, kann Ginny Ressourcen finden, von Icons bis hin zu Wireframes und allem dazwischen. Nehmen wir zum Beispiel an, Sie suchen nach einer Startup-Landingpage. Sie können auf Web klicken und die Start-Landingpage eingeben . Und da hast du es. Wir haben eine Vielzahl von Designs zur Auswahl. Dieser hat viele Reaktionen, also muss er gut sein. Er kann eine Kopie erhalten, indem er auf „Kopie holen“ drückt. Sobald du es geöffnet hast. Wenn wir zum Beispiel nur zur Helden-Sektion gehen, gibt es viele verschiedene Designs, von Grund auf neu zu erstellen , die jedoch mit Hilfe der Community viel mehr Zeit in Anspruch genommen haben jedoch mit Hilfe der Community Sie können die Landingpage Ihres Startups erstellen und das in viel kürzerer Zeit. Unser Hauptprojekt für diesen Kurs ist die Erstellung einer Startup-Landingpage. Um Ihnen jedoch den vollen Überblick zu geben, werden wir die meisten Dinge von Grund auf neu erledigen. 3. Projekt 1 Startup: Willkommen zurück, alle zusammen. Das erste Projekt für diesen Kurs besteht darin , eine Start-Landingpage mit dieser Sigma-Datei zu erstellen , die in der Community geteilt wurde. Der Zweck dieser Übung ist es, Ihnen zu helfen, eine Start-Landingpage zu erstellen und von der Figma-Community erstellten Ressourcen in kürzester Zeit zu nutzen. für diese Übung an, Nehmen wir für diese Übung an, wir möchten eine Landingpage für einen No-Code-Website-Builder unter pH erstellen . Wenn wir hier oder in den Abschnitt gehen und durch den Hero-pH-Wert navigieren, können wir eine Vielzahl von Designs sehen. Geben Sie zehn ein, sieht gut aus oder eine Website ohne Code. Header 15, der Titel ist jedoch viel kleiner. Also wähle ich das für diese Übung aus, indem nach links gehe und du einfach in der Kopfzeile 15 auswählst, ich drücke Strg C, damit es kopiert wird. Gehen wir zum Komponentenbereich und lassen Sie uns eine neue Seite darunter erstellen indem wir auf diese Plus-Schaltfläche drücken, die von Seite 17 in Landingpage umbenannt wurde, von Seite 17 in Landingpage umbenannt wurde und Strg V drücken Gehen wir zu Feature-Seite und schau, ob wir etwas finden, das zu unserer Heldenabteilung passt. Feature 37 scheint dem Titel zu entsprechen, den wir in unserer Helden-Sektion haben. Wir können das also kopieren, indem wir von hier aus zu Feature 37 wechseln. Drücken Sie Strg C und fügen Sie es zurück auf unsere Landingpage ein und stellen Sie sicher, dass sie aufeinander abgestimmt sind. Es ist auch gut, eine Seite zu haben, auf der wir zeigen können, was wir anbieten. Und von hier aus, wenn wir zum Strich gehen ist P, finden Sie, dass ausgewählte Kekse sechs ausgewählt haben . Es sieht toll aus, großartig. Also hoffentlich zurück zu unserer Landingpage. Nehmen wir an, dass wir ein abonnementbasiertes Unternehmen sind. Und wenn wir uns die Preistabellen für Minderjährige ansehen, stehen eine Vielzahl von Optionen zur Auswahl. Die Preistabelle A3 sieht toll aus. Um die Dinge einfach zu halten, bleibe ich bei der fünften Preistabelle. Also lasst uns das auch zurück auf unsere Landingpage kopieren. Lassen Sie uns nun einen Themenbereich hinzufügen. Gehen wir zur Seite des Teams. Vier wären großartig. Ich sagte, das würde es uns ermöglichen, mit den Farbpaletten konsistent zu bleiben . Wir haben bereits das Green-Button-Copy-Team für die Rückkehr zur Landingpage. Fügen wir zwei weitere Artikel hinzu und wir sind so ziemlich fertig oder eine einfache Start-Landingpage. Gehen wir zum Kontaktbereich. Und nachdem ich durchgeblättert habe, um zu sehen, was toll aussieht , finde ich Kontakte , Sex sehr nett. Also lassen Sie uns das wieder in unsere p.stance duplizieren. Und zu guter Letzt sind CMS auf unserer Seite. Und hier können wir einen Abschnitt über Unternehmen, einen Ressourcenbereich oder was auch immer für Ihr Unternehmen funktioniert, haben Abschnitt über Unternehmen, einen Ressourcenbereich , je nachdem, was Sie tun. Foot or Five sieht toll aus, da es einen Bereich hat in dem Sie Ihren Benutzern ermöglichen können Newsletter zu abonnieren. Also wähle ich zu Fuß oder zu fünft aus und repliziere das auf unserer Landingpage, damit du deine Designs schnell anderen präsentieren kannst . Sie möchten dies also anderen zeigen. Du kannst es einfach besser aussehen lassen, indem du auf „Anwesend“ drückst. Und sobald es geladen ist, kann ich diese Uhrzeit drücken. Auf diese Weise können Sie Ihre Ideen schnell anderen präsentieren . Und in kürzester Zeit konnten wir dank der Pigma-Community eine Landingpage erstellen , die sehr gut aussieht. Wenn Sie also eine Start-Landingpage oder etwas ganz allgemein erstellen , können einige Dinge hier und da anders sein, aber die Grundlagen bleiben konsistent, je nachdem, was Sie erstellen möchten einige Dinge hier und da anders sein, aber die Grundlagen bleiben konsistent, . Für Websites gibt es z. B. immer eine Navigationsleiste, einen Heldenbereich, einen Kontakt-Bereich. Und ich habe ihr auch gesagt, auch wenn du kein Webdesigner bist, solltest du zumindest versuchen, die Grundrechte zu bekommen. Im kommenden Abschnitt dieses Kurses werden wir uns also mit Dingen wie Farbpaletten, Typografie, Ausrichtung, Moodboards und Wireframes befassen. Und am Ende des Kurses wirst du hoffentlich genug Wissen haben, um deine eigene Landingpage zu gestalten. 4. Leitlinie für Projekteinreichung: Willkommen zurück, alle zusammen. In diesem Video werde ich die Schritte durchgehen, die du befolgen musst, um Hilfe zu erhalten, Fragen Hilfe zu erhalten, Fragen zu stellen und deine Projekte in diesem Kurs zu teilen. Ich fange zunächst damit an, wie man ein Projekt teilt. Sie können ein Projekt mit anderen teilen , um Diskussionen abzukühlen. Und hier, ratlos, kannst du ein Projekt teilen. Sobald du darauf klickst. die Übung einzureichen, haben wir z. B. die Start-Landingpage durchgesehen. Du kannst es teilen, indem du hier nach oben gehst und auf diese blaue Taste mit der Aufschrift Teilen drückst. Und stellen Sie sicher, dass jeder , der diesen Link hatte, ihn sehen und auch auswählen kann . Und kopiere einfach den Link. Und sobald Sie das haben, kehren Sie zum Projektbereich auf Skillshare zurück. Stellen Sie sicher, dass Sie das Projekt angeben, an dem Sie gerade arbeiten. Zum Beispiel ist dieses Projekt das erste, also stellen Sie sicher, dass Sie es so beschriften wie Projekt eins. Landung hoch, Strand. Und klicken Sie auf den Link unten. Und du kannst drücken und einreichen. Wenn du schon immer ein Bild teilen wolltest . Sie können dies auch tun, indem Sie ein Bild hochladen. Wenn Sie Fragen haben, können Sie auch zu diesem Abschnitt gehen, wo es heißt, stellen Sie eine Frage und stellen Sie Ihnen eine Frage. Ich werde persönlich mein Bestes geben, um Ihre Frage zu beantworten. Und zu guter Letzt können Sie zu jeder Zeit dieses Kurses ein Gespräch beginnen . Da die Teilnahme erwünscht ist. Wenn es zum Beispiel etwas gibt, das von Vorteil ist , oder wenn du einen Tipp hast, können wir ihn teilen, indem wir einfach ein Gespräch beginnen und es posten. Wir haben mehrere Projekte in dieser Klasse. Und falls du jemals vergessen solltest, wie du dein Projekt teilst, komm einfach zurück zu diesem Video. 5. Figma um dich zu gründen: Gehen wir nun zurück zu unserer Figma-Homepage, indem wir auf Zurück zu Dateien klicken. Und lassen Sie uns unsere erste neue Datei erstellen indem wir eine InDesign-Datei erstellen. Wenn wir auf Frame oder F wählen wir die Möglichkeit, aus den verschiedenen verfügbaren Frames zu wählen , absolut richtig. Wir können alle verfügbaren Frames sehen. Wenn wir den Desktop-Rand wählen. Das ergibt eine Breite von 0, 14, 40 und eine Höhe von 1024. Wenn Sie in der Drop-down-Liste neben dem Rechtecksymbol oben auswählen , können Sie dies zu Ihrem Rahmen hinzufügen, z. B. wählen Sie diese Option. Und wenn Sie dies in Ihrem gesamten Frame duplizieren möchten, können Sie dies tun, indem Sie Strg C und Strg V drücken Ein besserer Ansatz wäre jedoch, auf das Objekt zu drücken und auf alle zu drücken, während Sie es nach rechts ziehen. Dies kann auch für mehrere Artikel erfolgen. Sobald Sie alles markiert und alle außer einem verloren ausgewählt haben, können Sie es an eine beliebige Stelle verschieben. Und wir können die Farbe der Klingel für unsere Autos ändern , indem wir alles ganz rechts hervorheben. Unter Ausfüllen können wir unsere Farbe auswählen. Wir können ein Rechteck hinzufügen. Und wir können das Rechteck nach hinten schicken, indem wir mit der rechten Maustaste darauf klicken und auf In den Hintergrund senden drücken. Und wir können das Rechteck besser aussehen lassen indem wir den Radius auf falsch einstellen. Und es sieht viel besser aus. Und wenn Sie Text hinzufügen möchten, drücken Sie auf dieses T-Stück oben , damit Sie Text eingeben können. Und wir können uns einen Dummy-Text von einer Dummy-Textgenerator-Website und den Textteil ausfüllen. Das sind viele Texte. Hier ist genug. Sie haben es vielleicht schon erraten, wir bauen als Testimonial-Komponente oder ein Produkt für unser erstes Think My Short Tutorial. Wenn Sie Testimonials bemerkt haben, haben Sie normalerweise eine Person. Lassen Sie uns also einen Cholesterin-Platzhalter für das Bild der Person beginnen . Und das kann geschehen, indem Sie diese Option auswählen und einen Kreis erstellen. Und um diesen Kreis gerade zu sein, können wir einfach, wir können einfach 50 mal 50 eingeben. Und das würde uns eine abgerundete Form geben. Der Kreis geht in die Richtung, also lasst uns ihn nach vorne bringen. Einfach mit der rechten Maustaste darauf klicken und Crestone bringt es nach vorne. Obwohl wir das sehr deutlich haben, konnten wir es nicht sehen, weil es genau dasselbe hat , füllen wir uns, unsere Rechtecke, sodass wir eine schnelle Änderung vornehmen können , indem wir einfach füllen, indem wir wechseln die Farbe zu Weiß. Fügen wir nun den Namen der Person direkt neben dem Avatar hinzu. Sieht sehr groß aus, also können wir die Größe von hier auf etwa acht reduzieren . Wir können auch einen anderen Text in den Titel einer Person einfügen lassen. Lassen Sie uns nun die Größe des Titels weiter minimieren. Angenommen, Sie möchten diese Komponente, die Sie erstellt haben, replizieren . Wie Sie gefragt haben, haben Websites normalerweise mehrere Bewertungen, nicht nur die Bewertung einer Person. Sie können den einfachen Weg gehen, indem Sie alles markieren, Alt drücken und dies nach rechts ziehen. Oder eine andere Möglichkeit, dies zu tun, besteht darin, es zu markieren und auf diese Option mit der Aufschrift Komponente erstellen zu klicken. Und sobald Sie eine Komponente erstellt haben, können Sie auf die Komponente zugreifen, indem Sie zu Ihren Assets gehen. Und direkt von hier aus können Sie es einfach ziehen und platzieren. Dadurch können Sie viel Zeit sparen, insbesondere wenn Sie während des gesamten Projekts immer wieder an derselben Komponente arbeiten des gesamten Projekts immer wieder an derselben Komponente . Und bevor wir es beenden, lassen Sie uns die Stiftfunktion in Figma besprechen , mit der Sie im Grunde Ihre eigene benutzerdefinierte Form entwerfen können Ihre eigene benutzerdefinierte Form Sie können von oben darauf zugreifen, indem Sie Gone Pen auswählen. Und sobald Sie den Stift ausgewählt haben, können Sie die gewünschte Form zeichnen. Und so wie diese Stiftfunktion das übersteht, funktioniert sie, indem Sie klicken und zum nächsten Punkt ziehen. Und sobald Sie alle Punkte miteinander verbunden haben, können Sie sie mit der Farbe Ihrer Wahl füllen indem Sie auf diesem Farbeimer auswählen. Es gibt viel mehr, viel mehr Funktionen als das Sigma. Wir haben jedoch alle Dinge behandelt, die wir für den Einstieg in die Projekte benötigen für den Einstieg in die Projekte , die wir in diesem Kurs behandeln werden. 6. Ausrichtung und Gitter: Bei der Gestaltung unserer Startups oder unseres Unternehmens, dieser Landingpage, ist es unser Ziel, unsere Website visuell ansprechend und benutzerfreundlich zu gestalten . Und die Ausrichtung spielt eine wichtige Rolle, da sie uns hilft, ein Gleichgewicht zwischen den Inhalten herzustellen , und dann haben sie es. Sie haben also eine Vorstellung davon, wie diese Ausrichtung aussieht. Wir werden einige Beispiele durchgehen. Das erste Beispiel, welches ist deiner Meinung nach besser? Die Elemente rechts von uns sind die Elemente zu unserer Linken. Links von uns alles, es sieht ordentlich organisiert aus. Der Abstand sieht zusammen mit der Ausrichtung perfekt aus. Rechts von uns sind die Dinge jedoch überall. Wir sehen keine Ausrichtung oder Ordnung. Obwohl die Foursquares auf beiden Seiten exakt gleich sind, der einzige Unterschied darin, wie sie ausgerichtet wurden und auch in ihren Abständen. Und das machte den Unterschied zwischen einem auffälligen Design und einem Design, das wahr und attraktiv ist. Das gleiche Muster ist in unserem zweiten Beispiel zu sehen. Und auch unser drittes Beispiel. Sie fragen sich vielleicht, wie können Sie sicherstellen, dass die Dinge richtig ausgerichtet sind? Und die Antwort ist, indem Sie Layoutraster für Ihr Design hinzufügen. Lass uns eine neue Seite hinzufügen und einen neuen Frame erstellen. Wählen Sie auf dem Desktop aus. Und im Entwurf. Wählen Sie die Option Layoutraster aus. Und wählen Sie im Layout die Rastereinstellungen aus und konvertieren Sie diese von Klasse zu Spalte und ändern Sie das Konto 5-12. Und wir sehen, dass es keinen Abstand zwischen dem Ende gibt. Schauen wir uns also die Ränder für die Ergänzungen zu 140 und die Dachrinne für 30 an. Hinzufügen eines Layoutrasters erhalten Sie einen klaren Referenzrahmen, der Ihnen hilft , online zu bleiben. ZB können wir eine Navbar erstellen und sicherstellen, dass alles ausgerichtet ist. Kann einen Text für unser Logo haben. Wir können einen Bildplatzhalter haben. Und dann passen Sie das an unseren Textabsatz an. Es sei denn, wir können unten eine Zeile hinzufügen. Wie Sie sehen, konnten wir durch das Hinzufügen von Leo-Brot die richtige Ausrichtung und den richtigen Abstand erreichen. Und das hat uns geholfen, ein Gleichgewicht zwischen Inhalt und Layout herzustellen . Zusammenfassend lässt sich sagen, dass eine Ausrichtung sicherstellt, dass alle Elemente aufeinander ausgerichtet sind. Um sicherzustellen, dass Ihre Landingpage oder Website professioneller und aufgeräumter aussieht. Für weitere Informationen zum Raster habe ich eine von Figma erstellte Referenz zum Layoutraster beigefügt . Diese Rasterwerte wurden auf der Grundlage eines großartigen Webdesigners ausgewählt. 7. Inspiration bekommen: Sie fragen sich vielleicht, ob Sie so etwas wie eine Website von Grund auf neu gestalten sollten . Oder Sie fragen sich vielleicht, wie können andere großartige, großartige Designs entwickeln? Und die beste Antwort ist, sich von anderen inspirieren zu lassen. Jetzt könntest du sagen, nun, wie lasse ich mich inspirieren? Nun, Sie können sich inspirieren lassen, indem Sie Websites wie hier besuchen . Bill.com ist eine Website , auf der Sie großartiges Webdesign, Produktdesign und viele andere gute Dinge sehen können . für diesen Kurs an, Nehmen wir für diesen Kurs an, Sie versuchen, eine Start-Landingpage zu entwerfen . Unter Webdesign können Sie also die Start-Landingpage eingeben. Derzeit bin ich nicht angemeldet, daher kann ich dieses Design nicht speichern. Stellen Sie also sicher, dass Sie Ihr Konto erstellen. Und sobald Sie ein Konto erstellt haben, können Sie Ihr Design speichern. Sobald ich angemeldet bin, kann ich dieses Design speichern. wir für diese Übung an, Nehmen wir für diese Übung an, dass ich an diesem Design interessiert bin. Ich kann eine neue Sammlung erstellen, sie auch benennen. Start-Landingpage. Und klicken Sie auf Sammlung erstellen. Ich werde eine Sammlung haben, die sich auf diese Sammlung bezieht. Nehmen wir an, ich interessiere mich für dieses Design. Ich kann das zur Start-Landingpage hinzufügen. Sie können so viele hinzufügen, wie Sie möchten, aber drei zu haben, reicht aus, um loszulegen. Die Landingpage, die Sie erstellen möchten. Jetzt gehst du unter deinem Profil, du kannst zu deinen Sammlungen gehen. Und unter meinen Sammlungen haben wir die oberste Landingpage und wir können die drei Landingpages mit Peck sehen. Wenn Sie nach einer Website suchen , die weitere Informationen bietet, besuchen Sie die Hand hier. Wenn wir die Start-Landingpage eingeben. Wenn wir nur eines davon öffnen, können wir sehen, dass es im Vergleich zu den Beispielen und der Dribble-Zusammenfassung sehr detailliert ist, bevor wir Ihre App oder Website entwerfen Es wird empfohlen sehen Sie, was andere Personen in Ihrem Bereich tun. Das war, dass Sie nicht alles von Grund auf neu entwerfen müssen . 8. Wireframing Intro: Bevor wir die Landegebühr festlegen, hilft uns ein Wireframe die Website im Voraus zu verstehen und zu sehen, uns auf lange Sicht Zeit spart. Zum Beispiel ist es einfacher, in der Wireframe-Phase zu Königen zu machen, als diese Änderungen nach der Bereitstellung der Site vornehmen zu müssen. Eine einfache Möglichkeit, darüber nachzudenken, ist wie folgt. Dieses Haus hat Baupläne, bevor sie gebaut werden. Wireframe dient als Blueprint für Websites. Gehen wir zurück zur Figma-Community. Drücken Sie auf Wireframes. Lassen Sie uns nach einem minimalen Wireframe-Kit suchen. Und dieser von einer Person namens Bonnie Hong entworfen wurde, sieht gut aus, da er viele Reaktionen hervorruft. Lassen Sie uns also eine Kopie erhalten, indem Sie auf diese Getter-Kopie drücken, die diese automatisch auf Ihrem Figma dupliziert. Sobald wir es geöffnet haben, wenn wir zu Assets gehen und Komponenten öffnen, können wir sehen, dass wir einen Avatar, eine primäre Schaltfläche und alles, was wir benötigen, um mit dem Wireframing unserer Website zu beginnen, was wir im letzten Projektabschnitt dieses Kurses behandeln werden. 9. Main: Willkommen zurück, alle zusammen. Unser letztes Projekt ist der Aufbau einer Startup-Landingpage für Bildungseinrichtungen. Angefangen vom Wireframing bis hin zur Erstellung des endgültigen Figma-Designs. Am Ende dieses Projekts können Sie das, was wir besprochen haben, auf Ihre eigenen Projekte anwenden und das Figma-Webdesign für Ihr eigentliches Startup oder Unternehmen erstellen können . Wir können uns zwar von Websites wie Dribbble oder Behance inspirieren lassen . Ich empfehle Figma zuerst als Community auszuprobieren, besonders wenn du nicht viel Zeit hast. Ich habe gesagt, dass Sie zumindest bereits entworfene Dateien erhalten, die Sie einfach anpassen und sinnvoll verwenden können, wie die, die wir in einem unserer früheren Videos behandelt haben. Nachdem das gesagt ist, lassen Sie uns beginnen. 10. Anfertigen eines Moodboards: Prämien werden im Allgemeinen verwendet, um als Inspiration für neue Ideen zu dienen . Gehe zu behance.net und suche nach Bildungs-Startup oder Webdesign. Und zögern Sie nicht, das überdesignte Äußere von Bildungsgründungen auszuwählen . Weil wir nur darauf aus sind, uns inspirieren zu lassen. Dieses Web wurde von einer Marketingagentur entworfen. Das sieht gut aus. können wir zu unserem Moodboard hinzufügen. Indem du es speicherst. Wir können ein neues Moodboard erstellen und es Landingpage für Bildungs-Startups nennen . Ich mag auch dieses Webdesign. Obwohl es für ein Softwareentwicklungsunternehmen ist. Die Farbpaletten sehen nach Mustern aus und es sieht bisher gut aus. Also füge das auch zu dem Moodboard hinzu, das wir gerade erstellt haben. Lassen Sie uns eine weitere auswählen , die unser Moodboard fertigstellen soll. Vielleicht suchen wir für unsere letzte Seite nach der Start-Landingpage. Das sieht bisher gut aus. Also lasst uns diesen zu unserem Moodboard hinzufügen. Also jetzt, wenn wir zu unserem Behance-Profil zurückkehren und zum Moodboard-Bereich gehen. Wir können die Moodboards sehen, die wir gerade gespeichert haben. Unser letzter Schritt besteht darin, all dies auf Figma zu übertragen, sodass wir einen einzigen Ort haben , an dem wir alles auf einmal visualisieren können. Und jetzt werde ich das alles einfach auf Figma eintragen. Und wenn Sie gerade zuschauen und noch kein Moodboard gemacht haben , Sie sich gerne die Projektdateien herunterladen und die Figma-Datei herunterladen , die das Moodboard enthält, das wir gerade erstellt haben. 11. Homepage Wireframe: Lassen Sie uns nun ein Wireframe erstellen, indem wir das minimale Wireframe-Kit verwenden , das wir zuvor dupliziert haben. Sobald Sie das minimale Wireframe-Kit haben, öffnen Sie sie Figma. Beginnen wir damit, eine Seite hinzuzufügen und sie in Wireframe umzubenennen. Für Start-Landingpage nach Auswahl auf Grün. Und gerade entwerfen wir für einen Desktop. also unter dem Desktop in der Dropdownliste Desktop aus. Wir beginnen mit der Erstellung unserer Navbar. Im vorherigen Video haben wir ein Moodboard erstellt und es zu unserer Figma-Datei hinzugefügt. Also lass uns das hier holen. Wir haben alles an einem Ort, also gib Stimmung, Moodboard ein. Und ich kann das duplizieren, indem ich zu unserem Moodboard gehe. Und unter Ebenen, wenn du sie einfach auswählst, Bild eins, Steuerung C. Und wenn du zurück zum Moodboard gehst, kannst du es einfach duplizieren. Drücken Sie Strg V. Wir beginnen mit der Erstellung unserer Navigationsleiste. Und bevor wir das tun, lassen Sie uns ein Layoutraster erstellen , damit alles ausgerichtet bleibt. Wenn wir zu unserem Moodboard zurückkehren, das, was Sie zusammen mit Coleman finden würden ist das, was Sie zusammen mit Coleman finden würden, jetzt eine Bar mit dem Firmenlogo. Kontaktbereich über uns. Und je nach Art Ihres Startups oder Unternehmens würden Sie geringfügige Anpassungen vornehmen. Ich habe keinen Aufruf zum Handeln in deiner Navbar erhalten. Wir wären auch eine gute Idee, unsere Navbar zu bekommen. Gehen wir zu Assets. Und unter Assets enthält dieses Wireframe-Kit eine Navbar, die bereits erstellt wurde. Also alles, was wir tun müssen, ist diese zwei Stunden zu ziehen. Wir sehen, dass sich die Schaltfläche „ Erste Schritte“ außerhalb des Rasters befindet , was uns gefreut hat. Und wir können das beheben, indem wir auf Get Started doppelklicken. Und zu unserer Rechten. Wenn Sie auf diese drei Punkte drücken, trennen Sie die Instanz. Sobald Sie es gelöst haben, können Sie es einfach aus dem Navbar-Frame entfernen . Und wir können dasselbe für unsere Header-Komponente tun. Wenn Sie es nach draußen bringen, können wir dasselbe für das Logo tun. Wir können diesen Rahmen entfernen. Jetzt ist es einfacher zu navigieren. Wir können unser Logo oben haben. Wir können sicherstellen, dass alles ausgerichtet ist, indem Elemente in unserer Navigationsleiste markieren anschließend die Option Vertikale Mittelpunkte ausrichten auswählen. Und ja, es sieht besser aus. Statt eines guten Starts. Ich ersetze das einfach durch „Kontakt aufnehmen“. Und jetzt können wir zu den Ebenen zurückkehren und gehen. Tatsächlich haben alle Landingpages Bild auf ihrer Homepage. Gehen wir zurück zur Wireframe-Seite. Kann zu Vermögenswerten gehen. dar, dass wir ein Bild platzieren würden . Ein komisches. 598 mal vier oder 46 sollten also gut genug sein. Wenn wir nun zu unserem Moodboard zurückkehren, können wir sehen, dass alle Unternehmen dies getan haben. Ich beschreibe kurz, was sie für den Text anbieten. Mal sehen, ob wir Ressourcen in unserem Vermögen haben. Wenn wir zu Assets und unter Wireframe-Kit gehen, können wir sehen, dass es unterschiedliche Inhalte gibt. Und es gibt zufällig eine Heldenabteilung, die wir nutzen können. Im Moment haben wir also bereits einen Bildplatzhalter überwacht. Also können wir diese Portion einfach per Copia nehmen. Sie können Control C bekommen. Gehen Sie zurück zu unserem Wireframe und fügen Sie es wieder ein und stellen Sie sicher , dass es ausgerichtet ist. Ja, das sieht gut genug aus. Wir brauchen diesen zweiten Button nicht, damit ich ihn löschen kann. Wenn wir zu unserem Moodboard zurückkehren, können wir so etwas wie dieses haben und den Namen unseres Unternehmens vorerst angeben. Nehmen wir an, unser Firmenname ist UB Event. Also, vor dem Absatz, Herr, bewegen Sie das. Und bitte etwas zu sagen , das für ein Bildungs-Startup Sinn machen würde . Ich schlage vor, erfolgreich zu sein, indem du effizient lernst. Lernen sollte nicht als verwandtes Ereignis gesehen werden, sondern als Teil des Lebens und Wachsens. Anstatt besser zu primieren und die Texte durch etwas wie mehr erfahren zu ersetzen . Es ist sehr schwierig, Dinge in diesem Frame zu verschieben, daher ist es besser, jede Instanz zu trennen. Platzieren wir einen Pfeil. Mir ist aufgefallen, dass die Navigationsleiste etwas niedrig ist Lassen Sie uns das etwas nach oben verschieben, indem wir alles markieren und einfach nach oben gehen. Ja, das ist gut. Wir können das Bild und den Text auch ein wenig nach oben verschieben . 12. Über uns Wireframe: Für den Abschnitt Über uns ist alles ziemlich ähnlich wie das, was wir gemacht haben. Wir können dies kopieren indem wir beim Ziehen nach unten die Alt-Taste drücken. Lassen Sie uns eine kleine Überschrift für uns haben, gefolgt von einem kurzen Logan und einem Absatz, in dem erklärt wird, was wir anbieten. Das können unsere Shorts sein, Logan. Hochwertige, erschwingliche Bildung. Anstatt dieses Dummy-Textes wird er durch etwas ersetzt , das sinnvoller ist. Lassen Sie uns das etwas nach unten verschieben , um Platz für die über uns zu schaffen , die die Polizei übernehmen werden. Wir können einen Text beschreiben, ihn hier platzieren und über uns schreiben. Und macht es ein bisschen größer. Diese Schrift sieht gut aus. Und ja, das war so ziemlich alles für den Abschnitt Über uns. 13. Preisplan Wireframe: Wir werden jetzt unseren Wireframe für die Preisgestaltung erstellen und dies, um uns inspirieren zu lassen. Und wenn wir zum Moodboard zurückkehren, dann suchen Sie nach Preisinformationen. Wir können feststellen, dass das dritte Moodboard einige Inspirationspreise hat. So können wir so etwas für uns selbst nachbauen. Wir können sehen, dass es eine kleinere Überschrift, Überschrift und einen Absatz gibt. Lassen Sie uns das herausfinden, indem Sie zu, Es wird zum Wireframe-Kit gehen , indem Sie auf den zentralen Inhalt doppelklicken. Moment benötigen wir nur die Kopfzeile und den Absatz, damit wir dieses Control C einfach kopieren und wieder einfügen können . Oder wir können diesen Header zu erschwinglichen Preisen platzieren. In unserem Moodboard können wir den kleineren Header oben sehen . können wir also herausfinden, indem wir zum Abschnitt Über uns gehen. Ich habe gerade gemerkt, dass ein wenig Platz vorhanden ist, also habe ich das entfernt und du drückst Alt und ziehst nach unten. Ich kann das leicht duplizieren. Wir können dies durch Preisgestaltung von Pflanzen ersetzen. Wir können einen Abschnitt zum Handeln haben dem wir etwas sehen können. Investieren Sie mit unseren hochwertigen Inhalten in sich selbst. In unserem Wireframe-Kit. Wir konnten nichts zum Verwenden finden. So können wir die Rechtecke schnell neu erstellen. Indem du zum Rechteck gehst, erstellst du eine rechteckige Form. Wir können sehen, dass jeder von ihnen eine Beschreibung des Abonnementschlüssels enthält , gefolgt vom Preis und gefolgt von einigen der angebotenen Dinge. Zusammen mit einem Aufruf zum Handeln. Für R1 denke ich darüber nach , nur drei zu haben. Die erste Version wäre also die kostenlose Version. Stellen Sie sicher, dass es zentriert ist. Und ersetze das einfach durch 0$. Das ist etwas klein, also lassen Sie uns die Schriftgröße auf etwa 32 oder sogar erhöhen . 36 sollte gut sein. Für die kostenlose Version befinden wir uns also im Bildungs-Startup. Wir können etwas haben, wir können nebenbei etwas anbieten. Studierende können Zugang zu jedem Fach haben. Beschränkung auf vier Lektionen. Ich kann das einfach duplizieren und die Größe auf etwa 15 reduzieren. Zentrieren Sie, dass ein weiterer Service, den wir anbieten können . Es kann sein, dass Studierende bis zu fünf Fragen pro Monat stellen können . Stellen Sie sicher, dass alles gleichmäßig verteilt ist. Und die Menschen werden Zugang zu zwei Praxisproblemen haben . Und wir können einen Aufruf zum Handeln haben, genau wie den, den wir auf dem Moodboard sehen können. Dazu können wir zu Assets gehen, zu Komponenten gehen und eine primäre Schaltfläche hinzufügen. Wir werden etwas haben, sagen wir 543. Stellen Sie sicher, dass es zentriert ist. Diese scharfen Kanten sehen nicht besonders gut aus, also können wir sie abgerundeter machen , indem wir den Eckradius auf etwa 14 ändern . Ja, das sieht viel besser aus. Hopi ganz einfach. Da ich nach einer Standardversion und einer Premium-Version suche. Es kann einfach damit fahren, während die Alt-Taste gedrückt wird. Der Abstand sieht perfekt aus. nächste ist unsere Standard-Abonnementversion. In der Standardversion können wir etwa 10$ pro Monat berechnen . Der durchschnittliche Unterschied wäre, dass Personen, uneingeschränkten Zugang zu Lektionen abonniert haben, eine unbegrenzte Anzahl von Fragen pro Monat stellen können. Das Gleiche gilt für die Übungsprobleme. Und natürlich für die primäre Schaltfläche müssen wir für die primäre Schaltfläche die Änderung zu etwas wie Abonnieren vornehmen. Und unsere letzte Version wäre die Premium-Version. Für die Premium-Version werden 19$ berechnet, die dauerhaft sind. Und wir können das entfernen und es einfach auf unser Premium-Modell duplizieren. Der einzige Unterschied, den die Prämie gegenüber dem Standard haben wird, besteht sofort Feedback von einem Experten zu erhalten. wir sicher, dass das mit der Verhaftung in Einklang steht. Die Ausrichtung sieht etwas schief aus. Hier. Es gibt viel Platz zwischen der Preisgestaltung und den Funktionen, die das Abonnement bietet. Hier gibt es jedoch nicht viel Platz. Um dem Rechnung zu tragen, können wir diese Höhe einfach um ein wenig erhöhen und verschieben. Und wir können dasselbe für alle tun. Wir können das alles einmal auswählen und verschieben. Und stellen Sie sicher, dass es auf die Standard- und die Premium-Version abgestimmt ist . Und das sieht gut aus und es gibt einen guten Abstand. Und wir müssen das nur ändern, es tut uns leid, wir können es kostenlos abonnieren. Und ja, das ist so ziemlich alles für unseren Preisplan. Und es fehlt nur eines. Wir können zwar sehen , dass der Abstand zwischen den verschiedenen Abonnementversionen gleich ist. Wenn Sie sich unsere Vorteile ansehen, sehen wir, dass die Premium-Version näher am Rand liegt, während die kostenlose Version weiter entfernt ist. Wir können das also beheben, indem wir alles auf einmal hervorheben. Drücken Sie die Strg-Taste und bewegen Sie sie leicht, bis wir das Gefühl haben, dass sie leicht, bis wir das Gefühl haben alles zentriert ist. Und ja. 14. Kontaktieren Sie uns: Lassen Sie uns jetzt unseren Kontaktbereich erstellen. Wenn wir zu unserem Moodboard zurückkehren, können wir feststellen, dass die erste Landingpage ein großartiges Design hat, das wir replizieren können, oder unseren Wireframe-Abschnitt „Kontaktiere uns“. Lassen Sie uns zunächst einen Header für unseren Kontext-Bereich bekommen. können wir leicht erreichen, indem wir Alt drücken, während ich den Text nach unten ziehe und platziere. Lassen Sie uns den Schriftstil von fett auf normal ändern. Lassen Sie uns auch einen Hintergrund haben, für den ich vorher den Rahmen erweitern muss. Also Person Desktop und ziehe es nach unten. Um einen Hintergrund zu erstellen. Wir können einfach ein Rechteck bekommen und es einfach hinzufügen. Bringen Sie das Kontaktformular nach vorne. Lassen Sie uns auch eine Abneigung gegen die Sonne erstellen, eine Abneigung im Moodboard. Und mach dasselbe, bring es an. Und wir können so etwas haben wie: Fühlen Sie sich frei, mir Fragen zu stellen. Danach erstellen wir diese Schaltfläche auf unserem Wireframe neu , indem wir ein Rechteck erhalten. Und damit es sichtbar ist, ändern wir die Füllung von Grau auf Weiß. Und wir wollen, dass es oval ist. Ändern Sie also ihren Radius auf etwa 20 oder mehr. 25. Wir können hinzufügen, sagen wir seinen Namen. Dadurch wird es hell und die Farbe von Schwarz zu Grau geändert . Oder wir können einfach schwarze Farbe haben und diese von 100% auf etwa 50 Prozent ändern. Ja, das sieht viel besser aus. Lassen Sie uns die Schriftgröße auf etwa 14 reduzieren. Und stellen Sie sicher, dass es zentriert ist. Ja, das sieht gut aus. Das Gleiche können wir für E-Mail und Betreff tun. Markieren. Ein Muster. Wenn Sie Alt wählen, ziehen Sie nach unten und ändern Sie den Namen in E-Mail-Betreff. Wir brauchen eine weitere Box oder die Nachricht. Und drücken Sie einfach Alt, ziehen Sie es nach rechts und vergrößern Sie es. Machen wir es kleiner. Stellen Sie sicher, dass es nach unten ausgerichtet ist. Der Streubereich aus den Texten, in dem die Nachricht angezeigt wird. Das sieht perfekt aus. Jetzt haben wir nur noch einen Knopf und eine Linie. können wir leicht nachbauen. Für den Button können wir ihn jedoch einfach aus den Assets abrufen. Ziehen Sie die primäre Schaltfläche. Klar, es ist ausgerichtet und kann den Text und den Radius vielleicht zum Sprechen bringen . Oder sogar lustig. Lustig, es sieht besser aus als meins. Fügen wir ein Rechteck hinzu. die Farbe auf Schwarz und stellen Sie sicher, dass Sie Farbtonsättigung und -helligkeit eingestellt haben, und ändern Sie diese Einstellung von 100% auf 40%. Ja, das sieht besser aus. 15. Blog Wireframe: In den vorherigen Videos konnten wir Wireframe für unsere Homepage oder unsere Preisgestaltung im Bereich Über uns erstellen unsere Preisgestaltung im Bereich Über uns und uns auch kontaktieren und statt Funktionen Protokoll ersetzen. Und in diesem Video erstellen wir unser Wireframe oder den Blog-Bereich von unserem Moodboard aus. Mal sehen, ob wir einen schrägen Blog-Bereich finden , den wir für unser Wireframe verwenden können. Die zweite Landingpage, du hast immer noch etwas wonach wir suchen, einen Blog-Bereich. Gehen wir zurück zu unserem Wireframe. Lassen Sie uns zunächst überprüfen, ob wir bereits ein Blog-Design-Kit haben, das wir aus unseren Assets verwenden können. Wenn wir zum Wireframe-Kit gehen und zum zentralen Inhalt gehen, beginnen wir damit, die Kopfzeile neben dem Schreibtisch zusammen mit der Unterüberschrift zu kopieren . Zurück zu unserem Wireframe, Control C, Control V. Gehen wir nun zurück zu den Assets. Wir können einfach eines davon kopieren und es duplizieren. Wählen Sie also einfach eines von beiden aus. Dieser Bildhalter sieht etwas groß aus, versuchen Sie also, ihn zu minimieren. Lassen Sie uns zuerst die Instanz trennen. Diese Nachricht sollte ausreichen. Drücken Sie nun die Alt-Taste nass. Ziehe nach rechts. Stellen Sie sicher, dass es zentriert ist. Wenn wir dann alles haben, du zurück zu unserem Moodboard gehst, kannst du sehen, dass sie ein kleines Logbuch haben, das oben summiert, aber eine größere Überschrift und kleinere Unterüberschriften haben. Also können wir so etwas haben. Für den Blog. Wir können einen Text erhalten, der genau dieselbe Schriftart hat. Also weiter, Altoid zieht sich in zwei Hälften. Dies wurde zu Logan Stan umgewandelt. Lassen Sie uns diesen Text durch etwas wie Bleiben Sie auf dem Laufenden ersetzen. Für unsere Unterüberschrift können wir etwas dazu haben, unsere neuesten Nachrichten zum Thema Bildung zu lesen und auf dem Laufenden zu bleiben. Schließlich müssen wir nur noch einige Änderungen an diesem Text vornehmen. Normalerweise haben Blogs in der Regel den Namen des Autors. Sowie das Bild des Autors. machen wir einfach. Jetzt. Gehen Sie zu Assets. Und unter Komponenten findest du eine Arbitrage. Wir können den Avatar hinzufügen. Wir verschieben dieses Inhaltszentrum und minimieren die Größe, etwa 40. Es sieht etwas kleiner aus, also lass uns loslegen. Lassen Sie uns nun Text hinzufügen, den Namen des Autors. Dann holen wir uns unser Rechteck. Lass uns auch ein Date haben. Sicher. Die Daten in den veröffentlichten Listen dieses Logos veröffentlichten Listen passen die Farbe unseres Textes an, indem der Prozentsatz von Farbtonsättigung und Helligkeit auf etwa 50 angepasst wird. Machen wir dasselbe für den Namen des Autors. Jetzt können wir dies auf die anderen beiden Protokollelemente duplizieren . Drücken Sie einfach weiter. Ich habe alles ausgewählt, drücke die Alt-Taste und ziehe nach rechts. Das Schild scheint nicht zentriert zu sein. Das deutet also darauf hin, dass wir zum Moodboard gehen. Wir können sehen, dass es auch diese Komponenten gibt , um zu zeigen, dass wir zwischen verschiedenen Seiten oder dem Blog-Bereich wechseln können , wo wir etwas Ähnliches neu erstellen können indem wir in diesem Kreis auswählen und habe es irgendwo gegen zehn zehn Personen Alt. Während du nach rechts ziehst. Stellen Sie sicher, dass es zentriert ist. Um zu zeigen, dass P genau die Seite ist, auf der wir sind, können wir auf der Seite hervorheben , indem wir die Farben ändern, um nur anzuzeigen , dass wir diese Seite sind. 16. Footer Wireframe: Willkommen zurück, alle zusammen. Wir haben jetzt den letzten Teil unseres Wireframes übrig , der den Fußzeilenbereich unserer Landingpage erstellt. Wenn Sie zu unserem Moodboard zurückkehren, haben Landingpages für dieses Startup einen richtigen Motor, den wir als Inspiration nutzen können , um unsere eigenen zu erstellen. Wir können damit beginnen, einen Hintergrund zu erstellen. Bevor du das tust. Dann dein Desktop. Um mehr Platz zu schaffen, drücken Sie auf das Rechteck von Rex und erstellen Sie einen Platzhalter im Hintergrund. Mal sehen, ob wir in unserem Vermögensbereich Ressourcen für unsere Fußzeile haben. Und wenn wir zur Komponente gehen, gibt es zufällig einen Fußzeilenbereich, in den wir unser Wireframe bringen können. Und derzeit entspricht es nicht unserem Hintergrund. Versuchen wir also, die Instanz zu trennen, damit wir sie verschieben können. Derzeit können wir keines dieser Elemente verschieben. Wenn wir es jedoch trennen, kann die Instanz sie nach draußen verschieben und diesen weißen Hintergrund entfernen. Wir können die Elemente auch auf individueller Ebene verschieben. Wir benötigen keines dieser Icons. Also sagte ich, lösche oder entferne es. Lassen Sie uns die Dinge aufeinander abstimmen. Logo kostet. Also genau hier haben wir eine Menge Elemente, die wir in diesem Rahmen nicht benötigen. Wir können den Bereich Häuser entfernen. Entfernen Sie auch die längsten Nutzungsbedingungen und den Datenschutz über uns. Lassen Sie uns den Text für die Schriftarten anpassen. Sie sind sehr klein. Wir können es von klein, halbfett zu nur groß, halbfett ändern . Und auch für den Kontakt. Stellen Sie sicher, dass der Abstand stimmt. Ja, wir brauchen keine Preisgestaltung. Anstatt zu preisen, habe etwas wie Firma. Und unter Company können wir Dinge wie Preise, Blog-Support und reguläre Angebote anbieten. Schrift könnte sogar besser sein. Und die Farbe ändert sich zu 100% oder die schwarze Farbe zu etwa 50%, 60% sind die Funktionen, die wir anbieten. Wir können so etwas wie Lunar-Support haben, Bildungsarbeit , etwas wie Mouseover, vielleicht einen Bereich für Kundenfeedback. Im Kontaktbereich können wir das E-Mail-Konto des Unternehmens, die Telefonnummer, die Adresse und das Unternehmen haben. Damit das besser aussieht, verschieben wir die Kontakte etwas weiter. wir sicher, dass die Funktionen dazwischen eingegeben werden. Neben allen Inhalten, die Sie benötigen. Du gehst zurück zu unserem Moodboard. Sie können sehen, dass alle Moodboards einen Ort haben , an dem Benutzer ihre E-Mail-Adresse angeben können , um unseren Newsletter zu abonnieren. Lass uns einfach etwas für unsere Landingpage neu erstellen. Lass uns sicherstellen, dass wir genug Platz haben, also lass uns einfach weitermachen. Das sollte gut genug sein. Es ist kein Header , in dem Pipe steht. Unser Newsletter und ändern Sie die Schriftgröße von extra groß auf klein, regelmäßig. Klar, es ist aufeinander abgestimmt. Lassen Sie uns nun einen Button erstellen, genau wie den, den wir auf unserem Moodboard gesehen haben. Fordert Benutzer auf, ihre E-Mail-Adresse einzugeben. Und das können wir tun, indem wir zum Rechteck gehen und eine rechteckige Form erstellen. Und ändere die Farbe in Weiß, sodass sie nach dem Radius der Agenda auf etwa 20 sichtbar wird . Lassen Sie uns die E-Mail von oben kopieren. Drücken Sie einfach die Alt-Taste und ziehen Sie sie, während Sie sie nach unten ziehen. Stellen Sie sicher, dass Sie es nach vorne bringen. Stellen Sie sicher, dass alle Elemente auf unseren Lebensmitteln übereinander angeordnet sind, so ausgerichtet sind, dass sie alle hervorgehoben werden, und dass sie vertikal in der Mitte angeordnet sind. Ja, das sieht viel besser aus. bleiben nur noch zwei übrig. Nur dieser Firmenname. Ja. Wir sind mit der Erstellung unseres Wireframes so gut wie fertig . 17. Endgültige Anmerkung zu Wireframe: Sie denken vielleicht, dass wir viel Zeit damit verbracht haben , dieses Wireframe zu bauen , und Sie denken vielleicht , dass es keinen Mehrwert gebracht hat. Warum nicht einfach eine tatsächliche Website-Realität erstellen? Wir haben uns selbst einen großen Gefallen getan, indem wir ein Wireframe gebaut haben. Dies ermöglicht es uns, die Annahme unseres Startups oder Unternehmens zu validieren , indem die geringste Menge an Ressourcen verwenden. Stellen Sie sich vor, Sie haben eine Website oder eine App erstellt und Ihr Team ist Mitbegründer und teilt Ihnen , dass sie möchten, dass die Serviceseite oder die von Ihnen entworfene Kontaktseite überarbeitet wird. Nachdem Sie die eigentliche Website erstellt haben, hätte es viel Zeit verschwendet, ein Wireframe wie dieses zu haben, auf dem Sie problemlos aufbauen können. Figma ermöglicht es Ihnen, mit anderen zu kommunizieren und zu empfangen Feedback. Und sobald alle auf derselben Seite sind, können Sie mit der nächsten Phase fortfahren, die darin besteht, das Ganze gut aussehen zu indem Sie die eigentliche Landingpage auf Figma entwerfen. 18. Dein Logo erstellen: Bevor wir mit der Erstellung unseres Designs beginnen, erstellen wir zunächst ein Logo. Es sei denn, Sie denken darüber nach , einen Text zu haben da Ihr Logo nur Ihr Firmenname ist. Websites, die wir zur Erstellung unseres Logos verwenden, heißen halbvoll. Sie können darauf zugreifen, wenn Sie asheville.shopify.com eingeben, nach unten drücken und loslegen. Und abhängig von der Art Ihres Unternehmens und dem Geschäftsbereich , in dem Sie tätig sind. Da wir ein Startup im Bildungsbereich sind, werden wir mit der technischen Option fortfahren. Für die Zwecke dieses Videos. Hier können Sie für die visuellen Stile bis zu drei Optionen für futuristisch, kreativ und modern auswählen . Und nach diesem Preis weiter. Und wenn wir zurückgehen, haben wir schon unseren Namen. Du wärst erfunden. Aber vorerst lassen wir es einfach leer. Ich empfehle Ihnen, hier alle Optionen auszuwählen , damit Sie Zeit sparen können, falls Sie diese in Zukunft benötigen. Danach können wir sehen , dass es viele KI-generierte Logos gibt , aus denen wir wählen können. Das Logo, das sieht gut aus. Sobald Sie auf Bearbeiten klicken, können Sie den Tee sogar so zubereiten , dass er die angezeigte Schriftart und auch die verschiedenen Farben mag. Die Schrift. Ich werde es einfach in das Korrelative ändern. den kommenden Videos werden wir uns mit den verschiedenen Arten der Typografie befassen. Ich möchte, dass der Schriftstil standardisiert wird. Deshalb entscheide ich mich für ein dekoriertes. Aber Moral wird im kommenden Video besprochen. Und sieh dir an, welches du möchtest. Dieser sieht gut aus. Also werde ich mit dieser Tante fortfahren und auf Weiter klicken. Und dann probiere das. Oh, herzlichen Glückwunsch, Sie haben Ihr neues Logo. Das Logo-Paket beinhaltet all diese Optionen. Dieser Präzedenzfall wird heruntergeladen. Zum Herunterladen müssen Sie jedoch Ihre E-Mail-Adresse und auch Ihr Passwort angeben oder Sie können sich einfach anmelden. Ich habe bereits ein Konto, also kann ich mich einfach anmelden. Sobald Sie angemeldet sind, können Sie auf Herunterladen klicken. Und wenn Sie diese Benachrichtigung erhalten, die Sie darüber informiert, dass alle Logo-Pakete und Designdateien an Ihre E-Mail gesendet wurden. Warten Sie drei oder 4 Minuten und überprüfen Sie Ihre E-Mails . Wahrscheinlich erhalten Sie eine komprimierte Datei , von der Sie sie herunterladen können. Also drück weiter nach unten. Sobald Sie es heruntergeladen haben, können Sie all die verschiedenen Stellen sehen für die Sie das Bild verwenden können. Vorerst wollen wir nur das transparente Logo für unsere nächste Übung. Also halte das griffbereit. 19. Farbpalette: Willkommen zurück, alle zusammen. In diesem Video werden wir einige Tools vorstellen, mit denen wir unsere Farbpalette erstellen können . Und wir würden auch einige Beispiele dafür sehen wie eine schlechte Farbpalette aussieht. Lassen Sie mich zunächst damit beginnen, Ihnen eine einfache Frage zu stellen. Würden Sie jemals einem Unternehmen vertrauen oder eine Bestellung bei einem Unternehmen aufgeben, das eine Website hat , die so aussieht? Ich persönlich würde einer solchen Website nicht trauen. Es gibt viel zu viele dichte Farben. Wo ist die Person , die das entworfen hat? Es möchte, dass wir uns auf den Hintergrundtext konzentrieren. Es gibt nicht einmal eine passende Navbar. Welche Tools gibt es also , die uns diesen Prozess erleichtern und uns möglicherweise dabei helfen können und uns möglicherweise dabei helfen schlechte Farbpaletten zu vermeiden. Beginnen wir mit dem Besuch einer Website namens Human , einer Website, auf der Sie erstaunliche Farbpaletten oder Farbkombinationen erstellen können . Sie drücken auf die Website. Abschnitt. Es gibt eine Option, bei der Sie zwischen Magazin und Einfarbig wählen können . Erhöhung der Zahl von hier aus. Wenn du auf drei drückst, hast du mehr. Aber vier Farbpaletten zu haben, reicht für unser Training aus. Jedes Mal, wenn Sie eine neue generieren möchten, können Sie einfach generieren weiterleiten. Wenn Sie eine Website mit Illustrationen sehen möchten, können Sie diese Anpassung von hier aus vornehmen. Und je nachdem, wie viele Farbpaletten Sie verwenden möchten, können Sie die Anzahl erhöhen. Sie können sogar Ihr eigenes Bild hochladen und sehen. Diese Website ist besonders hilfreich, wenn Ihr Logo nur aus Buchstaben besteht , die kein Design sind. Wir können eine schnelle Vorstellung davon haben, was uns erwartet. War dein Logo. 20. Farbpalette aus Logo extrahieren: In dieser Übung werden wir Farben anhand unseres Logos abtasten, obwohl wir Farben manuell testen können Dank fortschrittlicher Websites ist dieser Vorgang heutzutage viel einfacher. Unsere erste Übung besteht darin, Musterfarben für die Farbpaletten zu erhalten , die wir für unser Wireframe verwenden würden. Besuchen Sie die Websites mit dem Namen colors dot C-O und gehen Sie zu Tools. dieser Website können Sie Ihr Logo hochladen und es werden Farben generiert, die zum Logo passen, was Ihnen letztendlich Zeit spart. Drücken Sie OnStart-Generator. Hier. Jedes Mal, wenn Sie die Leertaste drücken , werden Farbpaletten generiert, die Sie verwenden können. In unserem Fall versuchen wir jedoch, aus dem Bild, das wir gerade heruntergeladen haben, eine Farbpalette zu erstellen . Also müssten wir zuerst den Zip-Ordner entpacken , den wir von der High School bekommen haben. Ich erstelle einfach einen neuen Ordner und benenne ihn in Logo um und kopiere alles, was dieser Ordner ist. Jetzt ist es einfacher für uns, es vom Desktop auf die Website hochzuladen die Website hochzuladen. Wählen Sie das Logo aus. Und holen wir uns die Option Transparent. Und Sie können damit spielen, um zu sehen, welche Kombinationen für Ihre Website ideal wären. Bisher haben wir Schwarz und Hellblau. Sie können auf Weiter klicken. Und wir können es sogar im Generator öffnen. Wir können diese erste Option sperren, die zweite Option, und die verbleibenden drei ändern, weil sie so ziemlich genauso aussehen wie das was wir auf unserer linken Seite haben. Wir können die Leertaste drücken und sehen, was wir können. Wir können sogar unsere eigene Farbe wählen. Ich möchte zum Beispiel, dass meine Website weiße Farben hat. Es wird also ziemlich sicher sein. Und dann vervollständige ich den Rest, bis ich eine Farbe gefunden habe, die ich will. Ich kann die Leertaste drücken. Ja, das sieht für mich gut aus. Jetzt kann ich das als Bild exportieren. Nennen Sie es Farbpalette und drücken Sie einfach auf Exportieren. Und das gibt uns das heruntergeladene Bild. Da wir fast die Hälfte dieses Kurses erreicht haben, würde ich mich freuen, wenn Sie eine Bewertung mit dem Hinweis hinterlassen würden sehen uns im nächsten Video. 21. Sampling Projekt: Willkommen zurück, alle zusammen. In dieser Übung werden wir Farben von jedem Bild, das wir haben, abtasten . Nehmen wir zum Beispiel an, Sie haben eine Seite auf Ihrer Website und Ihr Inhalt ist so angeordnet, dass Ihre Farben nicht angezeigt werden. Wir folgen einfach den Schritten, die wir im vorherigen Video behandelt haben im vorherigen Video behandelt und holen uns die Farbkombination, da das diese Zeit spart. Zuerst müssten wir das Bild exportieren. Sie können sich eine schnelle Vorschau anzeigen lassen. Drücken Sie auf Exportieren. Sobald Sie diesen Exponenten haben, ist Hello nicht Null. Wir können einfach das Bild, das wir gerade heruntergeladen haben, fallen lassen und voila, wir haben die Farbkombination. Der erste sieht für mich gut aus. Sie können jedoch wählen, was Sie wollen, und damit spielen. Alle exportieren es als Bild. Nennen Sie es einfach Farbe eins. Und Sport. Sobald Sie das Bild heruntergeladen haben, können wir es einfach hier abrufen und minimieren. Dass es viel besser aussieht. Sobald wir das haben. Wir können die Farben leicht probieren. Wählen Sie auf dem Frame aus. Wählen Sie auf der Pipette aus. Und mal sehen, ob Orange gut passt. Es ist sehr dunkel, also reduziere vielleicht den Prozentsatz um 100-40. Zuerst. Versuchen wir es mit der grünen Farbe. Das Grün sieht bisher gut aus, also bleiben wir einfach bei Grün statt bei Orange. M für die Box statt Schwarz. Wir können Orange haben. Das sieht viel besser aus als das, was wir ursprünglich hatten , obwohl es sich geringfügig geändert hat. die Texte angeht. Wir werden im kommenden Projekt darauf eingehen, wo wir die Topographie besprechen und den Text entsprechend anpassen werden , damit er noch besser aussieht. Dieser Teil der Übung besteht darin, das anzuwenden, was wir gerade damit gemacht haben. Ich möchte, dass Sie dieses Bild auf die Website Colors C0 exportieren . Aufgrund der Musterung der Farben. Wie wir es für dieses Video getan haben. Fühlen Sie sich frei, sie in der Diskussion zu teilen. 22. Typografie: Willkommen zurück, alle zusammen. In diesem Video gehen wir auf die Topographie ein. Topografie wird in der Regel verwendet um die visuelle Attraktivität zu verbessern, Art Hierarchie aufzubauen und auch ein Gefühl der Ausgewogenheit auf Ihrer Website oder anderswo zu schaffen . Es wird empfohlen, nicht mehr als drei Schriftstile für eine einzelne Website zu verwenden . Webseite. Ich persönlich bleibe bei nur zwei. Ich erhalte die Schriften, die ich benötige, normalerweise von Google Fonts. Wenn Sie zu Google Fonts und zum Kategorienbereich gehen, können Sie sehen, dass wir die vier Hauptschriften haben. Serif, Sans, Serif, Display und Handschrift, auch Schrift genannt. Möglicherweise müssen Sie nur wissen, dass es sich bei bestimmten Familien um Punkte handelt, die normalerweise am Ende jedes Buchstabens eine Art Schwanz haben . Die Sans Serif ist die nächste und am häufigsten verwendete heutzutage gebräuchliche Variante. Sie werden das auf vielen Websites sehen . Der nächste Punkt wird die Display-Schrift genannt. Normalerweise ist es besser, diese Art von Schrift in einer Überschrift zu haben . Und sicherheitshalber würden Sie lieber serifenlose Anzeigen als Displays verwenden, da Displays sehr dekoriert sind und schwer lesbar sein können, wenn Sie Get In sehr dekoriert sind und schwer lesbar sein können Paragraphen verwenden. Wer demonstriert, wie es aussieht , wenn Sie es in einem Absatz verwenden. Sie können also sehen, dass dies im Vergleich zu San-Serif, was für das Eis einfacher ist, sehr schwer zu lesen ist. Die letzte ausländische Familie, auf ich noch eingehen werde, ist die Handschrift. Es erklärt sich von selbst. Normalerweise ist es gut, eine Handschrift für Schlagzeilen zu haben . Wie ein Café oder ich kann ein Unternehmen gründen. Und das war's für diese Lektion. In der nächsten Lektion werden wir ein Typografie-Projekt haben. 23. Typography: Willkommen zurück, alle zusammen. Lassen Sie uns nun das, was wir über Typografie gelernt haben, in der Praxis anwenden, indem wir einige Übungen durchgehen . einer unserer vorherigen Übungen In einer unserer vorherigen Übungen haben wir das feste Abtasten der Farbe anhand des Bildes besprochen. Und in dieser Übung wird der Schwerpunkt auf der Anpassung der Topographie liegen. Sie haben diese Figma-Datei nicht. Sie finden es im Projektordner. Wir beginnen zuerst mit diesem Header. Doppelklicken Sie darauf. Und auf der Registerkarte Export können wir sehen, dass es sich bei der Schrift um eine Flasche handelt. Wenn Sie die Schriftart auswählen, um zu versuchen, einen Schriftstil zu finden , waren es mehr als sechs Schriftstile. Wenn Sie sich fragen, wie Sie das finden können, können Sie hier sehen, verschiedene Schriftstile gibt. Wenn wir zum Beispiel ans Licht gehen , wird es leichter. Derzeit sind wir ein Blitz. Wenn Sie jedoch zur Google-Schrift wechseln, können Sie immer verschiedene Schriftarten finden. Injizieren Sie das zurück zu Poppins. Da dies der Haupt-Header ist, möchten wir , dass die Leute darauf achten. Es erhöht das Telefon auf mindestens 64. Und wie Sie sehen können, es bei sehr mutigen Wörtern am besten, ist es bei sehr mutigen Wörtern am besten, den Abstand dazwischen zu verringern, damit es besser aussieht. Das sieht viel besser aus als das, was wir ursprünglich hatten. die Texte angeht. Wir werden nichts ändern. Wir werden einfach diesen Dummy-Text haben und ihn so ändern, dass er auch Pop-In ist. Für helleren Text wird ein gewisser Abstand bevorzugt. Dann bleibt jetzt nur noch die Anpassung dieses Schriftstils. Es ist nicht zentriert, also vergewissere dich, dass es zentriert ist. Und vielleicht ändern Sie es von normal, halbfett. Und das sieht viel besser aus. Jetzt haben wir eine Art Hierarchie. Die Übung für diesen Teil dieses Kurses besteht darin, Frame zwei und Frame drei einzustellen. Derzeit sind wir auf Frame für. Inzwischen. Ich gehe davon aus, dass Sie die Farbe bereits im Rahmen der vorherigen Übung probiert haben . Bei diesem Projekt müssen Sie sich nur um die Anpassung der Topographie kümmern und sonst nichts. 24. Homepage Design: Willkommen zurück. Wir werden jetzt dort weitermachen , wo wir aufgehört haben Der Wireframe-Teil des Videos wird nun das eigentliche Wireframe entwerfen. Wir beginnen damit, das Wireframe zu duplizieren, indem wir von hier aus einfach auf den Desktop oder einfach oben drücken . Wir müssen die Alt-Taste drücken. Und wenn Sie Alt wählen, ziehen Sie nach rechts. Lass uns einfach dieses Design wählen. Wenn Sie ein Logo verwenden möchten, das wir zuvor erstellt haben, können Sie einfach in den Projektordner gehen und es von dort abrufen. Oder wenn Sie Ihr eigenes Logo haben , das Ihnen von der High School per E-Mail zugeschickt wurde, können Sie es auch hier einfügen. Aus dem Projektordner. Bei geringeren Ressourcen wird es möglich sein, all diese zu finden. Wir können das direkt zu Figma übertragen. Anstelle des Logos wird es durch das tatsächliche Logo ersetzt. Achte nur darauf, es zu minimieren. Das sieht vorerst gut aus. Haben Sie auch eine Vorstellung von den Farbpaletten, bei denen wir uns an vier Designs halten werden. Es wäre eine gute Idee, sie irgendwo oben zu haben. Wenn Sie in den Projektordner gehen, finden Sie dort auch die Farbpalette. Sie können es also einfach von dort ziehen und es einfach minimieren. Größe. Was gilt als klein? Lassen Sie uns eine Art Hintergrundfarbe für die erste Seite haben . Fügen Sie also einfach ein Rechteck und klicken Sie mit der rechten Maustaste und senden Sie es nach hinten. Danach. Lassen Sie uns die blaue Farbpalette auswählen. Wie Sie sehen können, verschwindet unser Logo jedoch. Wenn Sie also eingeschaltet sind, stellen Sie sicher, dass Sie die Farbtonsättigung und die Helligkeit eingestellt haben, und ändern Sie diese Einstellung auf etwa 50%. Dass wir auch unser Logo sehen können und das viel besser aussieht. Es wäre auch eine gute Idee den Topographiestil zu skizzieren. Sie werden bei diesen Design-Wireframes bleiben. also Das ist also, erstelle ein Rechteck und füge einen Text ein. Es gibt zwei Schriftarten, die ich für dieses Wireframe ausgewählt habe, sind Poppins und The Cabin. Willst du wählen, was immer du willst , um sicherzugehen. Und nicht mehr. Lassen Sie mich das einfach vergrößern. Ich werde es von Enter zu Poppins ändern. Zweite Schrift. Ich werde das in Kabine ändern. Und hab einfach etwas Platz dazwischen. Für den Header. Ich nehme meistens eine Poppins-Schrift. Auch für unsere Navbar-Elemente. Stellen Sie sicher, dass Sie das Trennen des festgelegten Stils beibringen, indem Sie einfach auf den Trennenstil direkt neben dem Text klicken. Für alle von ihnen. Sobald Sie getrennt sind, ändern Sie einfach die Schriftart, um geöffnet zu werden. Lassen Sie uns nun die Schrift in der Primärbalance ändern, wir haben zwei Kohlenstoff eingegeben. Gleiche gilt für den hier. Und auch der Text, der Absatztext. Lassen Sie uns die Farbe der Primärtasten ändern. Indem ich die Farbe von hier abnehme und Orange vorziehe, bevorzuge ich mehr Orange , als es leicht sichtbar ist. Gleiche gilt für diese primäre Schaltfläche oben. Du berührst die Instanzen. Und das einzige, was übrig bleibt, okay, jetzt ist das Bild für die Homepage. Für das Bild besuchte ich eine Website namens andro. Bevor wir zu 100 gehen, schauen wir uns an, was die anderen Start-ups auf dem Moodboard haben. Sie haben alle irgendeine Art von Illustration. Diese Website scheint also gut zu passen. Manchmal ist es am besten, die Dinge einfach zu halten. Geben wir einfach Technik ein. Und der erste sieht gut aus. Sie können jederzeit jemanden auswählen , den Sie auswählen möchten. Stellen Sie sicher, dass Sie es herunterladen. Sollte lügen und es löschen. Ziehen Sie das einfach zurück und versuchen Sie, ihr Layoutraster zu verschieben. Wie Sie sehen können, ist das verwirrend, weil unser Hintergrund erfüllt und es nicht so gut aussieht. Was wir also tun können, ist eine Website namens Remove Background zu besuchen oder einfach BG entfernen. Laden Sie einfach das Bild hoch. Von hier. Wir können es einfach herunterladen und zu unserem Figma zurückkehren. Beweg das und leg es zurück. Es sieht viel besser aus als das, was wir zuvor gesehen haben. Nur damit du eine Idee hast. So sah es früher aus. Es sieht viel besser aus. 25. Über uns Design: Für den Abschnitt Über uns ist alles ziemlich ähnlich wie das, was wir für unsere Homepage gemacht haben. Dass wir jedoch auf dem richtigen Weg sind. Mal sehen, was das andere Startup von unserem Moodboard aus macht. Und wie Sie sehen, haben viele dieser Startups dies getan. Dann Scholar auf der Homepage und dann sind die folgenden Seiten einfach weiß. Also bleiben wir bei diesem weißen Hintergrund. Oder schauen wir mal, ob wir einen besseren Hintergrund finden können. Wählen Sie ein Rechteck aus und stellen Sie sicher, dass Sie es nach hinten schicken. Lassen Sie uns von hier aus versuchen, dies auf 50% zu reduzieren. Ja. sieht es besser aus, als nur einen schlichten weißen Hintergrund zu haben Meiner Meinung nach sieht es besser aus, als nur einen schlichten weißen Hintergrund zu haben, über der Liste der Experimentatoren 30%, um den Unterschied zu erkennen , und sieht sicherlich etwas heruntergekommen aus. Also das waren 40 oder 50, sollte auch in Ordnung sein. Aber viertens, sieht bisher gut aus. Beim Haupttitel handelt es sich, wie wir es im vorherigen Abschnitt gemacht haben, um die Poppins-Schrift. Tun Sie das, stellen Sie sicher , dass Sie sich von der Instanz, Typ und Poppins oder dem Über uns und dem Absatz trennen. Lass uns mit der Carbon-Schrift beginnen. Trennen Sie die Instanz, in der sie mehr IID haben, Pop und alles, was wir jetzt haben, ist ein Bild. Wenn wir zu unserem Moodboard gehen, können wir viele Bilder sehen, viele Illustrationen werden angezeigt. Gehen wir also zurück zu Andrew. Hier möchten wir sagen, dass wir ein Bildungs-Startup sind. Also tippe ich Bildung ein. 12 haben sehr recht, sieht für mich gut aus. Stellen Sie also sicher, dass Sie diesen Bildplatzhalter heruntergeladen und entfernt haben. Aber wir haben vergessen, etwas zu tun, nämlich den Hintergrund zu entfernen. Stellen Sie also sicher, dass Sie es hochladen und kostenlos im Hintergrund herunterladen. Und das sieht viel besser aus. Vergrößere die Größe. Ja, das war's für den Abschnitt Über uns. 26. Preisgestaltung: Für unseren Preisbereich auf der Landingpage belassen wir den Hintergrund so, belassen wir den Hintergrund wie er ist, diesen weißen Hintergrund. Die Hauptsache wird genau dieser Punkt sein. Wir beginnen mit dem Header. Sie können sehen, dass ein Punkt damit verbunden ist. Du kannst es einfach abnehmen. Sie sind immer Pop-In. Die Preispläne scheinen sich vom Kohlenstoff zu lösen. Für diese Header. Für unsere verschiedenen Preismodelle können wir die Preiswerte öffnen . Gehen wir in seine Kabine. Und auch für die verschiedenen Funktionen, die wir anbieten. Und auch für die Knöpfe. Passiert. Also ja, das war's für den Preisplan. 27. Kontaktieren Sie uns Design: Jetzt sind wir also beim Kontakt, dem Blog und der Fußzeile. Und anhand des Moodboards, für das wir uns inspirieren ließen, können wir erkennen, dass es irgendeinen Hintergrund gibt. Lassen Sie uns den Hintergrund von grau zu etwas anderem ändern. Diesmal sollten wir uns vielleicht für ein dunkleres Blau entscheiden. Und lassen Sie uns den Prozentsatz um 100-80 reduzieren. Dieser Text ist kaum sichtbar Trennen Sie also die graue Instanz und platzieren Sie sie schwarz. Anstatt regulär. Gehen Sie zum Light-Style oder zum Punkt Kontakt, wo wir ihn von der Instanz trennen und wählen Sie die Poppins-Schrift. Wir bleiben bei Cabins für den Unterabsatz und Poppins für den Namen, E-Mail-Adresse und den Rest. Und statt des schwarzen Hintergrunds nehmen wir ihn ab und ersetzen ihn durch das dunkle Orange, das wir zuvor hatten. Das Feld „Kontaktiere uns“ sieht sehr nah am Rand aus, sodass wir es etwas nach unten verschieben können. Und das sieht viel besser aus. Der Abschnitt „Kontaktiere uns“ sieht zwar besser aus als das, was wir ursprünglich hatten, dies kann durch eine Änderung der Hintergrundfüllung weiter verbessert werden . Drücken Sie also einfach auf die Füllung und darunter statt auf Feststoff auf Linear. Und meiner Meinung nach sieht das viel besser aus als das, was wir ursprünglich hatten. Es sieht viel sauberer aus und lässt sich gut in die nächste Seite integrieren. 28. Blog-Design: für den Blog-Bereich Fügen Sie für den Blog-Bereich eine Hintergrundfarbe hinzu. Wir beginnen mit der Anpassung der Schrift. Ich nehme die Kabine und dann das Abpumpen. Oder der Header. Kabinen für den Unterabsatz. Öffnet dafür. Titel. Passiert für den Unterabsatz. Offenheit für den Namen des Autors, Kabine für das Datum. Wenn du es merkst. Der Name Matthew ist viel näher als die Namensspiele, was zeigt, dass es einige Inkonsistenzen gibt. Wir können das also anpassen, indem wir alles markieren und nach rechts ziehen. Oder wir können sogar Layoutraster hinzufügen und den Abstand schnell abschätzen. Das sieht besser aus. Was das Bild angeht. Wir können jedoch Websites wie Pixel besuchen , die Ihnen ein kostenloses Stockbild bieten. Wir sprechen über Tipps für Studierende. Und zum Glück gibt es ein Stockbild, auf dem Schritte stehen. Nutzen Sie das zu unserem Vorteil. Muss nicht unbedingt dasselbe sein wie die Worte, aber je näher desto besser. Versuchen wir, das Bild zu platzieren. Hat nicht funktioniert. Schalten Sie also einfach die Layoutraster ein. Dann können wir sehen, dass es sich von diesem Layoutraster bis hierher erstreckt . Und wir können diesen schnellen Bezugsrahmen für Vermögenswerte im Kopf haben. Und platzieren Sie das Bild so, dass es zwar sehr groß erscheint, verkleinern Sie es einfach. Wir können nur die Größe des Bildes neben seinen 367 mal 28 sehen . können wir also tun, indem wir auf 367 drücken und die Höhe zwei auf 80 einstellen. Und das auf das andere Bild ausrichten. Wo du einfach dasselbe für beide tun kannst. Vorerst lade ich einfach dieses Bild herunter. Es sieht sehr nett aus. Und wir können das Bild bei minimieren schauen wir uns einfach an, was es war: 367 mal 28. Also machen wir 367 mal 80. Entferne es, weil es einige Probleme verursacht. Ja. wir sicher , dass es aufeinander abgestimmt ist. Denn Informatik wird ziemlich einfach sein. Sie geben einfach Code ein. Das erste Bild sieht gut aus. Und minimieren Sie das Trennen , damit es keine Probleme verursacht, und minimieren Sie es. Ordnet die Polizei auf. Dann vergewissere dich einfach , dass es ausgerichtet ist. Und das sieht gut aus. Schalten Sie Layoutraster aus. Und etwas fehlt. Der Abstand ist nicht gleichmäßig , also drehen wir ihn zurück. Das hätte passieren sollen. Wie Sie sehen können, sind beide Bilder 6367 mal 280 groß. Der erste ist es jedoch nicht. Stellen Sie also sicher, dass Sie es entfernen, da dies die Ursache des Problems ist , die eingeschränkten Proportionen. Sobald Sie das entfernt haben, teilen mit, dass der Abstand gleich ist. Und das einzige, was übrig ist, sein Bild , ein Profilbild. Und das können wir tun, indem wir einfach ein paar Headshots machen. Und es ist auch dieselbe oder die Radiuskoordinate für den Koronarradius. Wenn wir uns also einfach für 38,4 entscheiden würden, wäre es genau das Richtige. Du kannst es einfach drauflegen. Das Gleiche können wir für das nächste Bild tun. Entferne das und platziere es einfach. Und mach dasselbe für den nächsten. Entfernen Sie das Layoutraster. Ja, der Blog-Bereich, er sieht toll aus. 29. Footer Design: Was den Fußzeilenbereich betrifft, beginnen wir damit, unser Logo von oben zu erhalten. Drücken Sie die Alt-Taste und ziehen Sie die Maustaste nach unten. Verschieben Sie das Logo. Als Nächstes passen wir die Schrift an. Die Header. Öffnen. Die E-Mail kann Company alles andere haben, um es zu haben. Zum Schluss bleibt nur noch der Hintergrund übrig und mal sehen welche Farbe perfekt dazu passt. Also nimm die Füllung ab. Wir wählen Dunkelblau. Wie Sie sehen können, werden Sie unser Logo nicht sehen können. Wir gehen zurück zu unserem Moodboard. Normalerweise sind die Fußzeilen einfarbig. Lass uns versuchen, weil die orange Farbe, lass mich versuchen, mit den Prozentsätzen zu spielen um zu sehen, dass sie besser werden. Bei 60% Es sieht viel besser aus als das, was ich mir angesehen habe, zu 100%