Mobile-First Design in WebFlow | Riley Jones | Skillshare

Playback-Geschwindigkeit


  • 0.5x
  • 1x (normal)
  • 1.25x
  • 1.5x
  • 2x

Mobile-First Design in WebFlow

teacher avatar Riley Jones, Coffee Fueled Creative

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu jedem Kurs
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Eine Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

14 Einheiten (52 Min.)
    • 1. Einführung

      0:54
    • 2. Der erste Ansatz für den mobilen Einsatz

      4:44
    • 3. Wireframes

      2:31
    • 4. Moodboards

      0:58
    • 5. Webflow erklärt

      0:46
    • 6. Webflow Weitere Hilfsinformationen

      0:34
    • 7. Webflow Workspace

      1:21
    • 8. Homepage Stiftung

      7:28
    • 9. Styles Pt. 1

      7:00
    • 10. Styles Pt. 2

      7:50
    • 11. Styles Pt. 3

      7:46
    • 12. Styles Pt. 4

      6:53
    • 13. Endgültige Stylings

      2:27
    • 14. Endliche Bemerkungen

      1:14
  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Alle Niveaus

Von der Community generiert

Das Niveau wird anhand der mehrheitlichen Meinung der Teilnehmer:innen bestimmt, die diesen Kurs bewertet haben. Bis das Feedback von mindestens 5 Teilnehmer:innen eingegangen ist, wird die Empfehlung der Kursleiter:innen angezeigt.

628

Teilnehmer:innen

--

Projekte

Über diesen Kurs

Ziel dieses Projekts ist es, ein besseres Verständnis dafür zu haben, wie man den ersten Ansatz für das mobile Gerät anwendet, wenn es um die Gestaltung von Inhalten in Webflow geht. Wir werden in der Gestaltung von Inhalten und der Entscheidung überlegen, wie die richtigen Informationen auf einem Mobilbildschirm angezeigt werden sollen. Innerhalb der Webflow können wir unsere Designs ganz einfach übernehmen und in einen funktionierenden Prototyp setzen, an dem wir ihn in einer Live-Umgebung sehen können.

Anforderungen

  • Liebe zum Erlernen neuer Dinge
  • Eine Leidenschaft für den Umgang mit Inhalten

Hilfreich zu wissen, aber nicht notwendig

  • Grundlegender HTML und CSS

Triff deine:n Kursleiter:in

Teacher Profile Image

Riley Jones

Coffee Fueled Creative

Kursleiter:in

Hello!

I am a web and graphic designer with a passion for making design loud for people and brands of all kind. I live in the U.S, and I am always looking for ways to further my passion for fresh design with today's culture.

I enjoy meeting and hearing about other designer's stories as well as everyone's works in progress. I am always interested in others processes.

Vollständiges Profil ansehen

Kursbewertungen

Erwartungen erfüllt?
    Voll und ganz!
  • 0%
  • Ja
  • 0%
  • Teils teils
  • 0%
  • Eher nicht
  • 0%
Bewertungsarchiv

Im Oktober 2018 haben wir unser Bewertungssystem aktualisiert, um das Verfahren unserer Feedback-Erhebung zu verbessern. Nachfolgend die Bewertungen, die vor diesem Update verfasst wurden.

Warum lohnt sich eine Mitgliedschaft bei Skillshare?

Nimm an prämierten Skillshare Original-Kursen teil

Jeder Kurs setzt sich aus kurzen Einheiten und praktischen Übungsprojekten zusammen

Mit deiner Mitgliedschaft unterstützt du die Kursleiter:innen bei Skillshare

Lerne von überall aus

Ob auf dem Weg zur Arbeit, zur Uni oder im Flieger - streame oder lade Kurse herunter mit der Skillshare-App und lerne, wo auch immer du möchtest.

Transkripte

1. Einführung: jeder. Ich bin wirklich Jones und ich bin ein Waffengrafik-Designer. Bring mich zu meiner Klasse Mobile First Design Wen Flow Ah, Projekt wird eine Titelseite für eine Restaurant-Website entwerfen. Und dadurch werde ich euch zeigen, ein mobiler erster Ansatz für unser inneres Prozessangebot Inhalt und Struktur wird sich auf eine mobile Plattform konzentrieren. Und von dort aus werden wir auch Mood Boards erstellen, um ein besseres Gefühl zu bekommen und zu sehen, wie wir unsere Seiten haben wollen . Sobald das eingewickelt ist, na ja, sie sind alle Inhalte in Web-Blüte und im Web-Flow beginnt. Finalisieren Sie unseren Build und Entwurf für eine Seite. Wenn Sie ein paar coole Ideen mögen und einige lustige Dinge in Ihren Prozess integrieren, zögern Sie nicht, der Klasse beizutreten und wir können anfangen, Spaß zu haben. 2. Der erste Ansatz für den mobilen Einsatz: Ich möchte voran gehen und erklären, wie wir einen mobilen ersten Ansatz in unseren Prozess umsetzen werden. Und wirklich, es ist alles darauf ausgerichtet, wie wir unsere Inhalte mit einem mobilen ersten Ansatz sehen. Sie beginnen mit dem kleinsten Gerät möglich. In diesem Fall wird es ein Smartphone sein. Es ist also schon ein begrenzter Raum, wo der Fokus auf den Inhalt als Faras wichtiger wird , wo man ihn auslegt und wie man ihn strukturiert. Sie können darüber nachdenken, wie ein Storyboard-Zeh, wo es bestimmte Punkte der Website gibt , mit der Ihre Benutzer interagieren sollen. Es gibt einen Anfang, eine Mitte und ein Ende. Es liegt an Ihnen, Art von Handwerk, die erfahrene Tour. Sie können Gott der Benutzer, um die wichtigen Informationen, die Sie von der Website benötigen, zu erhalten. Hier werden erste Eindrücke wirklich wichtig, denn da es sich um einen begrenzten Platz , gibt es nur so viel, dass der Benutzer eine Front sehen kann. Also, wenn der Benutzer in den ersten paar Sekunden auf Ihre Website kommt, sind sie wirklich wichtig. Also ist es gut, einen ersten Eindruck als Faras zu machen. Wie haben Sie Ihren Inhalt zu strukturieren, wo der Benutzer die wichtigsten Informationen zuerst sehen . Also für den ersten Schritt, werden wir durch diesen Prozess gehen, um den Inhalt herauszufinden. Also werden wir Kategorien oder Abschnitte auflisten, die wir auf unserer Homepage wollen, die entweder ein Abschnitt für Männer sein können . Verwenden Sie einen Abschnitt für eine Anzeige der Standorte, und Stunden können wirklich alles sein. Wie immer bezieht es sich auf die Mission unserer Restaurant-Homepage. Sobald wir also alle Kategorien der Arten von Inhalten erhalten, wird eine auf ihrer Website anfangen, sie nach Wichtigkeit zu bewerten. So können Sie wählen, was für den Benutzer wichtiger ist, zuerst und dann andere zu sehen und diese Art von skalieren, jedoch Reihenfolge, die Sie möglicherweise benötigen. Und dann, von dort aus können Sie beginnen, eine Vorstellung davon zu bekommen, wie Sie alles mit dieser Wichtigkeit zu strukturieren , wo die wirklich wichtigen Informationen auf der Oberseite zu den Benutzer-Saisoninformationen sind. Und sobald Sie sich dieses Interesse ergriffen haben, können Sie die restlichen Informationen auf der gesamten Website filtern, und von dort aus beginnen wir mit Drahtrahmen, um das zu erfassen, wie das aussieht, und unsere Struktur zu verfeinern. Also hier sind einige Beispiele von oben haben Sie einen Schieberegler Internet-Info-Bereich. Also weiß ich schon, welche Art von Essen dieses Restaurant hat. Und dann weiß ich auch, von wem sie sind, wie ein persönlicher Aspekt, Art der Atmosphäre, die sie schaffen, und dann geht es entlang der Website. Es gibt mehr wichtige Informationen, wie Reservierungen und Menüs. Einmal habe ich irgendwie Interesse von diesem einen Punkt gewonnen. Diese andere Seite ist interessant, weil sie alle Arten von technischen Informationen im Vordergrund oder sogar Stunden ihren Standort stellt . Und dann können Sie die Menüs durchsuchen, wenn Sie möchten. Gehen Sie einfach eine andere Art zu denken, wie Sie Ihre Inhalte strukturieren könnten. Das gibt es wirklich kein Recht, einen falschen Weg. Es liegt nur irgendwie an dir. Was Sie entscheiden, ist wichtig für Ihr Restaurant, für Ihren Benutzer, und diese Seite ist interessant, weil dies die mobile Website ist. Dann haben Sie den Desktop. Teil zwei des Inhalts verschiebt sich vollständig in einem anderen Layout, sagt etwas Interessantes, das mit dem mobilen ersten Design passieren kann. Sie könnten wirklich um Ihre Inhalte spielen und wie Sie Dinge strukturieren möchten. Dies ist unser letztes Beispiel, wo sie die Entscheidung getroffen haben, die Reservierungsinformationen im Voraus zu haben. Das ist, wenn sie wollten, dass der Benutzer sich angreift, wenn er auf die Website kommt. So ist die Buchungsinformationen aus dem Weg, und dann mehr Informationen auf in Richtung der unteren Teil der Seite, wie faras Stunden, Tage und mehr Kontaktinformationen würde. Das heißt, Habt ihr nicht jetzt die Kategorien und Arten von Inhalten auflisten, die ihr auf eurer Homepage aufnehmen wollt ? Es liegt wirklich an Ihnen als Faras Was Sie denken, könnte eine wertvolle Erfahrung für den Benutzer sein sobald Sie diese Liste erstellt haben, dann gehen und bewerten Sie sie basierend auf einer Liebe der Wichtigkeit. Also schreiben Sie sie nach dem, was Sie denken, dass der Benutzer den größten Wert vom Anfang der Website bis zum Ende gewinnen kann , wo das Wichtigste an der Spitze sein wird. Sobald Sie Ihre Liste erstellt und bewertet haben, vergessen Sie nicht, sie auf Ihrer Projektseite zu posten, damit Sie sehen können, wie andere Personen wichtige Informationen auf diese Weise oder auf diese Weise bewertet haben. Und von dort aus können wir zu unseren Drahtrahmen übergehen 3. Wireframes: Es gibt ein Beispiel dafür, wie ich über den Inhalt auf meiner Seite und den ersten Teil des Dokuments nachgedacht habe. Ich habe gerade Zeug angeworben. Ich dachte, der Benutzer könnte vom Besuch der Website profitieren, so dass es einen Standortbereich, einen Call-to Action-Abschnitt geben würde , der wäre, einen Spot-Social-Media-Abschnitt, einen Abschnitt angezeigt Stunden zu reservieren . Ein weiterer Abschnitt, der beliebte Elemente, die innerhalb des Menüs sind, wie das Food-Menü in der Fußzeile würde in zwei weitere Abschnitte aufgeteilt werden, wo es eine Art Erinnerung an die Standorte des Restaurants und das Site-Menü war, dass fertig, Ich sagte, Unser Denken über die Reihenfolge, wie könnten sie über auf der Homepage kommen. Dies ist, was ich am Ende mit zwei wo die Stunden und Standorte Abschnitte der ersten Sache auf eine Sache, um die Benutzer als faras zu sehen, wenn die Restaurants öffnen und wo sie gehen können um das Restaurant zu finden und dann unter. Das wären die beliebten Gegenstände des Essens, das das Restaurant serviert, und von dort, wenn sie sich das ansehen, wird es den Aufruf zum Handeln mit einem Knopf geben, um einen Platz für das Restaurant zu reservieren. Und dann wird es einen Geschichtsabschnitt geben, der mehr Persönlichkeit und Intro zu dem gibt, was hinter dem Restaurant steckt. Und dann, von dort, das geht in den Social-Media-Bereich für Benutzer, um sich mit dem Restaurant zu verbinden und dann in der Fußzeile werden Standorte und dann ein weiterer kleiner Aufruf zur Aktion zu reservieren und dann das Site-Menü. Sobald ich alles bestellt habe, ging ich weiter und skizzierte viele Ideen, wie die Struktur und das Layout der Dinge funktionieren könnten . Sobald das fertig war, ging ich zurück und verfeinerte meinen Drahtrahmen. Also, wie das jetzt aussieht, und ich füllte es mit Inhalten, um mehr ein Gefühl dafür zu geben, wie die Website tatsächlich aussehen könnte . Und Sie beginnen, die Geschichte der Website und die Punkte der Interaktionen zu sehen, die Benutzer machen können . Also von hier aus möchte ich, dass ihr eure Gegenstände, die nach Wichtigkeit sortiert wurden, nehmen und einen Drahtrahmen kreativen Gefahren erstellen , die ihr wollt. Und wenn Sie eine gute Idee in unserer Statusseite einer Idee bekommen haben, verfeinert diese Drahtrahmenfüllung. Es war nur ein generischer Inhalt. Es könnte entweder Füller-Inhalt sein oder Sie können voran gehen, und aber der eigentliche Inhalt, den Sie dort reingegangen sind und sobald das fertig ist, posten Sie das auf Ihrer Projektseite für alle, um zu sehen, wie Sie möchten, Ihre Struktur zu visualisieren . Und von da an konnten wir anfangen, Mood Boards herauszufinden und in einen Web Flow zu gehen und ein Mock Up unseres Designs zu kreieren. 4. Moodboards: Der nächste Schritt in unserem Prozess wird die Schaffung unserer Mood Boards sein. In diesem Beispiel verwende ich Pinterest, aber du kannst wirklich alles verwenden, was du möchtest, solange es ein Ort ist, an dem du all deine Bilder und Inspiration gesammelt hast , die mit deinen Moodboards nicht speziell sein müssen Web-basiert. Es ist wirklich die Art von Inspiration Ästhetik, die Sie in Ihre Website aufnehmen möchten . Und so, mit diesem Stimmungsbrett habe ich für mein Geschäft entschieden, mit einem Pizza-Shop zu gehen, und die Dinge, die ich gesammelt habe, sind Dinge, die verschiedene Arten von Typografie, Farben, Layout, Ästhetik mit Texturen und noch mehr einige Design-Elemente wie Icons. Also, das heißt, Ausgehen sammeln so viele Bilder und Ressourcen ist, die Sie möchten. Und sobald Sie das Gefühl haben, dass Sie genug gesammelt haben, fügen Sie einen Screenshot oder abgelegt in einen Projektordner , und dann können wir mit dem nächsten Schritt fortfahren, und das umfasst alle unsere Inhalte und Design, und würde 5. Webflow erklärt: Wenn Sie kein Workflow-Konto haben, müssen Sie nur ein Web Flow Dot com erhalten und sich für ein kostenloses Konto anmelden. Und wenn du es nicht weißt, war die Waffe. Im Grunde ist es dieses Tool, mit dem Sie gleichzeitig codieren und entwerfen können, und das bin ich, dass ich es einfach einschließe. Es gibt viel mehr, aber im Grunde bietet es Ihnen diese Funktionen, die es Ihnen ermöglichen, mit dem Design zu arbeiten und dann während Sie entwerfen, ist es darin, , sauberen Code Zehe zu setzen, wo Sie wollten. Sobald Sie fertig sind, kann das Projekt diesen Code exportieren und auf der Website gehostet werden. Also, wenn Sie kein Konto haben, gehen Sie über die Web Flow Dot com, erstellen Sie eine kostenlose und dann in den nächsten Videos auch Sie Jungs ein Intro zu den grundlegenden Funktionen wir für unsere Homepage verwenden werden. 6. Webflow Weitere Hilfsinformationen: Wenn Sie möchten, eine weitere Erklärung der Web-Float-Tools, Ich empfehle zu helfen, dass Web Flow Punkt com Schrägstrich Kurse wie die ersten Schritte. Und sie bieten schnelle, einfache Lektionen, die ein wenig detaillierter über die Tools und den Web-Flow erklären und was sie tun. Und Sie können leicht beginnen, den Zweck für jedes spezifische Tool zu verstehen, das Ihnen hilft, wenn Sie sich entscheiden, einige davon in der Mitte Ihrer Projekte zu sehen. 7. Webflow Workspace: Nachdem wir unser Konto erstellt haben, gehen Sie in Ihr Dashboard und wir können beginnen, unsere Website auf der neuen, aber neuen Website zu erstellen. Wir geben unserer Website einen Namen, sagte es der Öffentlichkeit und musste dann Website erstellen. Jetzt ist dies der Arbeitsbereich, in dem wir arbeiten werden. Ich werde nicht alle Funktionen erklären, die es bietet, weil es eine Menge gibt und man kann eine Menge coole Sachen machen . Aber ich werde nur erklären, dass die grundlegenden für ein Projekt verwendet werden. Also auf unserer oberen Leiste hier haben wir dies eine Umschalttaste Vorschau, die im Grunde nur Vorschauen Seite sind, als ob es auf einem Live-Web-Browser wäre. Und dann im mittleren Teil der Bar werden unsere Breakpoints für verschiedene Arten von Geräten auf einer linken Leiste sein. Hier haben wir unsere Schaltfläche „Elemente hinzufügen“, und wir werden alle diese Module verwenden, um Inhalte zu bilden und um uns zu ermöglichen, Inhalte auf unserer Website zu platzieren . Und Sie können diese entweder per Drag & Drop auf die Seite oder Sie können einfach klicken und wir fügen sie hinzu . Das heißt, wir werden jetzt voran gehen und anfangen, unsere Webseite abzuschneiden 8. Homepage Stiftung: Also jetzt gehen wir weiter und übersetzen unseren Drahtrahmen in Web-Grippe, damit wir beginnen können von einem Fundament zu einem fertigen Design zu bauen. Also werde ich mit meinem Header-Abschnitt beginnen und das wird wie für die meisten Abschnitte sein, soweit die Routine zu der wir einen Abschnitt aus dem Elementfenster hinzufügen werden. Dann fügen wir einen Container hinzu, und ich werde einen Knave-Leiste hinzufügen , den ich nach unten scrollen kann. Hier ist ein Nickerchen. Und dann sind wir gut auf meinem Navigator, was im Grunde zeigt. Aber ich habe auf meiner Seite eingeschlossen. Ich werde auf diesen Abschnitt klicken. Nennen Sie es. Kopfzeile. Das sollte gut für diesen Abschnitt sein. Und was macht meinen Körper ausgewählt, wo sind der nächste Abschnitt enthält den Container? Und in meinem Fall habe ich einen Header. Nun, bevor ich das mache, vergewissern Sie sich, dass meine Container eines von zwei Gittern ausgewählt haben. Zwei Säulen. Wenn Sie eine Mischung wünschen und Ihrem Raster entsprechen, können Sie diese Einstellungen verwenden. Aber ich wollte es diese zwei Säulen behalten und meine Kolumne beenden. Also werde ich sicherstellen, dass meine erste Spalte ausgewählt ist. Ich werde eine Kopfzeile unter der Kopfzeile haben. Würde eine nicht geordnete Liste haben. Also, wenn ich hier nach unten scrollen, habe ich eine Liste bestellt, und ich werde dasselbe für Spalte tun, wenn eine ausgewählte Überschrift eins. Kopieren Sie einen Grund, Befehl, sehen oder steuern. Sehen Sie, ob Sie sich auf einem PC befinden, wählen Sie in meiner Spalte zu und dann Einfügen aus. Wie hat das Gleiche für die Ehrenliste. Also wählen Sie es aus. Eine Kopie geschlafen Spalte zum Einfügen. Und wenn sie meinen Abschnitt wieder auswählen und wenn ich diesen einen Ort nenne, Strich Stunden und jetzt zum nächsten Abschnitt weitergehe, wird Trump der Leiche den nächsten Abschnitt Container geben. Wenn ich das hier habe und zwei und dann im Alter von zwei, haben wir einen Knopf. Es wird so sein, als würde der Action-Sektion genannt. So ist es Celeste, mein Abschnitt der namenlose tatsächlich sehen ta kurz für den Action-Abschnitt aufgerufen. Nun, ich füge einen weiteren Abschnitt mit einem Container hinzu und dann in diesem Container wird meiner 1. 1 ähnlich sein Also, wenn ich die Natur eins und dann unter diesem von drei Elementblöcken von im Grunde bin ich irgendwie drei def Blöcke, die nur separate Arten von Inhalten enthalten werden. Du brauchst drei von sich selbst. Stellen Sie sicher, dass die ausgewählte Kopie, dann fügen Sie zwei Mal zwei oder es gibt drei von ihnen und dann werde ich diesen Abschnitt nennen. Vorgestellte Armaturenbrett-Artikel Okay, zum nächsten Abschnitt geht es um mich. Also im Abschnitt der Container innerhalb dieses Containers und was Überschrift haben und dann einen Absatzblock. Und darunter werde ich hinzufügen, indem ich meinen Abschnitt auswähle, wenn, in einer Klasse, um es über uns angerufen. Wenn die letzten paar Abschnitte in einem Abschnitt einen Container und fügen Sie drei Def-Blöcke, werden Sie meine sozialen Links sein. Einige kopieren ein Tempo zu tauchen Blöcke in meinem Abschnitt von Namen es so sicher Abschnitt und im letzten Abschnitt auf dem Container Und in diesem Container, Ich werde nur Liste haben und halten es ein Nord irrte. Und dann unter dieser Liste wollte ich einen Textblock haben, der Hemden im Container machen soll, nicht die Liste. Also wollen das Lehrbuch und ich tatsächlich Text unter meinen sozialen Elementen blockieren, wenn ich es als Hash-Tag-Bereich verwende . Ziehen Sie uns zurück in meinen sozialen Bereich, um dort zu erscheinen und dann für diesen letzten Abschnitt. Ich nenne es nur meine Fußzeile. Okay, also sollte es sein, als Faras, die die Grundlage dafür haben, wo einer meiner Inhalte in und dann gleichzeitig Styling. Sobald Sie also mit der Schaffung einer Grundlage für Ihre Homepage fertig sind, posten Sie Ihren Webflow-Link zu Ihrem Klassenprojekt, damit die Leute Ihre laufende Arbeit anzeigen und definieren können , dass Sie auf der Einstellungsschaltfläche auf Ihrer Website zurück zu Ihrem Dashboard gehen müssen. Und in dieser Sub-Domain, die dot io fließen würde, werden Sie l direkt auf die Website gehen, an der Sie arbeiten, und jetzt im nächsten Video, werden wir beginnen, unsere Inhalte und Styling für unser Design hinzuzufügen. 9. Styles Pt. 1: Also, jetzt, da wir eine Grundlage für unsere Website eingerichtet haben, können wir beginnen, Stile, um es hinzuzufügen und ziehen diese Stile aus einigen Elementen, die ich von meinem Moodboard als Faras Typografie, Auswahl und Farbe mochte meinem Moodboard als Faras Typografie, . Und so habe ich einige andere Inhalte zu dem hinzugefügt, was ich im vorherigen Video Toe angelegt habe, wo ich eine Überschrift in diesem Menübereich hinzugefügt habe . Und dann, anstatt sich der Ort und die Stunden in einem Raster befinden, habe ich gerade zu def Blöcken hinzugefügt und dann die Überschrift in der Liste behalten. Und dann auch im Social Media-Abschnitt, anstatt tote Blöcke zu haben, habe ich Link-Blöcke verwendet und dies war für ein einfacheres Layout, wie sich die Dinge bewegen Jemand, um in der Kopfzeile zu starten. Stellen Sie sicher, dass Sie da sitzen, OK, und ich werde ihm eine Hintergrundfarbe geben, die hier geht. Ich will eine Art goldene Farbe. Da gehst du. Und ich will es retten. Jemand traf diese Knopfspitze, füge den Schwamm hinzu, damit ich ihn später benutzen kann. Und ich will diese tolle Kiste loswerden, die von ihrer Knap-Bar kommen wird. Klicke nicht auf mein Nickerchen. Ich möchte es eine Klasse geben, die das nennt. Ich meine ja, Bar. Und im Grunde können Sie Ihre Elemente nicht anpassen. Es sei denn, es hat einen Klassennamen. Es hat keinen Klassennamen. Sie können nicht auf diese Stile zugreifen. Panel Jemand geht in den Hintergrund, wenn ich zu transparent gehe. Das würde das wegnehmen. Okay, jetzt gehe ich in die Überschrift. Geben Sie ihm einen Klassennamen des Logotitels. Ich füge drei Punkte-Pizza hinzu. Ich werde Typografie-Modul, wenn eine Farbe weiß und ich bin mit der Schrift zu sein, ich war Welt. Und dann werde ich das in Großbuchstaben umwandeln. Es ist alles Mützen und geben uns Tracking und ich will, dass das Gewicht normal ist. Perfekt. Also, jetzt werde ich mein Logo Bild jemand hinzufügen, um die Marke Box klicken, die einrichten, wenn ich gehe, um Elemente hinzufügen, Ich werde ein Bild ersetzen. Stellen Sie sich vor, ein Asset-Manager und ich haben die Bilder und Symbole und Texturen hochgeladen, die ich weiß dass ich in meinem Design wollte und im Grunde zu tun, gehen Sie zu Ihrem Asset-Panel hier und laden Sie und Sie können alle Ihre Dateien hochladen und wird es in dieser Bibliothek behalten. Jemand fügt das hinzu und wird keine Einstellungen durcheinander bringen. Das ist perfekt. Also gehe ich in meine Speisekarte und ich werde diese Links stylen. Also mache ich diesen Schmerz haben Gegenstand. Diese würden auch alle Kappen halten und dann werde ich es geben einige Lügen Nacht oder nicht Liege Nacht, aber Tracking, wenn Sie die Farbe ändern und erhöhen die Schriftgröße tatsächlich wollen, dass dies Fluglegenden von Fundstellen von 16 Pixeln sein . Also, jetzt werde ich die gleichen Stile von einfachen Liam hier in einer Klasse machen, und dann kommt Hauptgegenstand eine Kopie über ihre Stile und ich werde es auch für diesen einen tun. Perfekt. Also, jetzt möchte ich das Layout hier oben neu anordnen, also möchte ich zurück in meinen Container gehen. Und tatsächlich, da die Knave Bar einen eigenen Container hat, wollte ich zu diesem gehen, weil ich wirklich kontrollieren will, was in der Sache ähnlich ist um weiterzumachen, würde ich meinen Barcontainer, und Ich werde mir ein Layout besorgen. Ich werde die Flex-Box-Anzeigeeinstellung verwenden. Sie können Floats verwenden, wenn Sie mit denen vertraut sind, die die Dinge nach links und rechts schieben . Ich mag das Flaggen Box-Layout wirklich. Es macht es wirklich einfach, einige interessante Layouts zu erstellen. Also dieser hier wird einfach ein grundlegendes sein, so dass er alles gerechtfertigt will, zentriert, und ich will nicht, dass sie übereinander gestapelt sind, jemand, der die Richtung der Flex-Box ändert, um ihn anzurufen. Und dann gehe ich zu einem Linienzentrum, das alles da reinbringt und dann nur eine kleine Abwechslung. Ich möchte meine Marke oder mein Logo oben drauf setzen. Da gehen wir hin. Ich werde jetzt nur in meine Marke Link gehen. Ich wollte das „Liebe dich“ nennen, und dann gebe ich ihm einen oberen Rand, 20 Pixel. Und so steuern diese Außentasten Ihre Ränder. Und wie ich kontrolliere, ist, dass ich nur meine Maus gedrückt und dann bin ich irgendwie auf und ab. Du kannst es damit kontrollieren. Sie können auch einfach klicken und geben Sie den genauen Betrag ein, wenn Sie Proportional wollen, gerade Seiten in Richtung Sie wollen 20 oben? Tony unten, halten Sie die Optionstaste Ault gedrückt und ziehen Sie, und wir machen beides. Und dann werden diese inneren Knöpfe zum Klopfen sein, was der Platz in diesen Boxen ist. Also, das war gut für jetzt. Jetzt werden wir zum Stunden- und Ortsbereich wechseln. 10. Styles Pt. 2: Jetzt weiß ich, vorne auf einem Hintergrundbild in diesem jemand zu diesem Abschnitt gehen , der hier ist. Nummerieren Sie den Hintergrund und fügen Sie ein Hintergrundbild hinzu. Was ist mit meinem Vermögen? Ich will das hier drüben haben. Das sieht gut aus. Ich werde dieses Bild als High benutzen. DP Eyes würde nur eine höhere Auflösung sein. Ich möchte das etwas bewegen. Das scheint gut zu sein. Und jetzt wird die mein Typ og ra Gebühr ein wenig zu leicht dafür sein. Jemand hat es verdunkelt, als ich es nicht überlagert hatte. Messen Sie irgendwie die Transparenz, mein Overlay. Also, das ist gut für jetzt. Jetzt will ich, dass er ein paar Stile für meinen Körper insgesamt macht. Und wenn Sie einen Selektor auswählen, können Sie dies alle Seiten sehen. Dies sind also sehr globale Stile, die bestimmte Dinge beeinflussen werden. Im Moment möchte ich nur meinen Körperfonds 2 Pt Sarah ausschalten. Ich möchte, dass diese 16 Pixel und weiß sind. Das sollte vorerst gut sein. Jetzt möchte ich in meine Überschrift gehen, die in meinem Standort in unserer Rubrik ist. Ich möchte einen Stil für alle meine H one Überschriften machen. Klicken Sie also erneut auf diese Option, um eine Klasse auszuwählen. Und dann gibt es ein Tag, das bereits für alle h one Überschriften eingerichtet ist. Jemand, der das in Oswald Normal alle Kappen ändert, ein Pixel für das Tracking. Und ich will, dass das das Gold ist, das wir benutzt haben. Jetzt werde ich in meine gehen, um mein Gehen in die Einstellungen aufzulisten und einfach keine Kugeln zu treffen. Diese Kugeln sind nicht unter der gleichen Sache für diesen hier. Also, aber, äh, meine andere Inhaltsblock-geordnete Liste. Keine Kugeln? Nein. Wenn ich ein paar Informationen hinzufüge, jemand geht zu meinem Norden Listenelement, und ich werde nur eine Lehrbuchkopie hinzufügen tat. Und dann gehen wir zu diesem anderen Listenelement und fügen das gleiche ein. Und mit diesem Top-Listenelement möchte ich, dass dies fett ist. Also habe ich es gerade hervorgehoben. Und das macht ein kühnes No Ging von diesem letzten bekommen. Und da diese Luft ähnlich in einer Kopie dieses Listenelements in die nächste Diff Sperre habe ich hier unten einfügen. Da gehst du. Ich will es von denen geben. Das sollte gut sein. Eigentlich bedeutete noch zwei weitere und dann meine Änderungen Überschriften zu unseren Stunden. Hoppla. Und tun Sie das Sie können Dinge mit Befehl Z rückgängig machen oder sogar die Rückgängig- oder Wiederherstellen-Schaltflächen drücken. Ähm, das sollte vorerst gut sein. Ich brauche diesen Button Text hier nicht, also möchte ich zurück in meine Stunden und Location Container gehen. Und wir erschienen, als er Klassennamen, Stunden, Dislokation, Container benutzte Stunden, Dislokation, , , sie wollten wieder Flex-Dollar benutzen, um diese zu positionieren. Jemand wird nur das Zentrum rechtfertigen und dann tatsächlich Raum rechtfertigen wollen, geben Sie diesen Raum und eine letzte Sache auf einem guten in meinen Abschnitten Block und geben Sie ihm einfach ein paar Pad ings. Und wenn ein Hit die alte Optionstaste oder die Steuerungstaste auf PC zog dies nach unten, geben Sie uns einfach mehr Platz. Eigentlich viel Platz sollten aufviel Platz etwa 50 Pixel gut sein. Okay, das sollte vorerst gut sein. Nein, es gibt einen Call to Action Abschnitt jemand klickt auf meinen Abschnitt, Abschnitt den Namen, und dann möchte ich ihm jetzt eine Hintergrundfarbe und Art von gewünschtem dunkelgrau geben, so etwas wie ich nicht sehe. Das sollte gut sein. Ein bisschen leichter, Erica, ich werde diese offensichtliche dunkelgraue Änderung speichern, um so die Leute die Aufmerksamkeit des Benutzers zu erregen und da dies eine andere Überschrift als diese ist, werde ich ihm einfach eine bestimmte Klasse geben, ist mir C T acht Titel und alles ist anders ist nur die Farbe wird weiß sein und wie man die Taste zu stylen. Ich werde in den Link gehen Name dieses c t A Beauty in for button. Ich will, dass der Hintergrund dieses Gold ist. Weißt du was? Entfernen Sie es. Geh ans Telefon, um Oswald zu sein Oh, Mützen, wenn das Tracking Und dann will ich eigentlich, dass das dunkelgrau ist und dann wird der Hintergrund das Gold perfekt sein. Und wenn ich wirklich schnell an die Grenze gehe, gib ihm einfach ein bisschen mehr abgerundete Ecken für fünf Pixel sollten okay sein und ich gehe zurück zu meinem c t einen Abschnitt Ich habe eine Typografie und gib ihm einfach eine Mittellinie in Richtung Pushes alles in der Mitte und dann geben wir es ein wenig mehr Polsterung wie ich den vorherigen Abschnitt getan habe, sollten 20 Pixel gut sein. Es sieht so aus, als hätte es einen gewissen Spielraum für diesen jemanden, der hier reingehen kann. Das erbt einen oberen Rand, da es sich um einen Titel handelt und alle diese Überschriften-Tags Rand haben . Etwas, das man hier reingehen kann. 20 da gehen wir. Okay, das ist gut für jetzt. 11. Styles Pt. 3: Jetzt geh ich zurück ins Meer. Vorgestellte Artikel, wenn ich hier reingehe, vorgestellte Artikel und dann habe ich meine def Blöcke mit meinem Überschrift meine aus der Klasse zu diesem und es wird Artikeltitel sein. Ich möchte den Hintergrund ändern, einen anderen Hintergrund, aber diese Schriftfarbe in dem Grad. Und ich möchte auch wählen, eigentlich, nur um die Dinge einfacher zu machen, ich wollte alle h zwei Überschriften bekommen. Nun, ändern Sie das auch, Das Dunkelgrau. Und dann taucht es bei den anderen auf. Also wiederholen wir uns nicht alle Kappen und mit einem Fonds, um oz Zauberstab normal und dann ein wenig Tracking Perfect. Also das bei einigen Informationen hier, wissen Sie, wenn ich einige Absatzformate und diesen Absatzstil wieder eine Art globaler Absatzstil hinzufüge , wird es diese Farbe hinzufügen PT Serif ist großartig. 16 Pixel ist vorerst in Ordnung. Ich wollte noch ein paar Informationen hinzufügen. Ok, perfekt. Und im Abschnitt über eine Textur im Hintergrund, jemand gehen zu meinem Abschnitt direkt hier vorgestellten Elemente, die funktioniert und ohne Hintergrund , wenn Sie ein Hintergrundbild hinzufügen, Ich möchte diese Textur nicht hinzufügen Nur sehr subtil. Ja, das funktioniert. Und ich werde nur einen weißen überlagern wollen und überlagern. Es ist nicht zu dunkel. Das sollte gut in uns sein. Jetzt werde ich dasselbe tun, wenn es darum geht, den jemand zu positionieren, der in den Container geht und vorgestellte Elemente, Container, goto Layout, Flex-Box und dann werden sich die Dinge bewegen. Ich möchte zentriert sein oder Ihren eigenen Raum. Und da es Überschrift ist, ist innerhalb des Containers wurden verwendet Es wird ein durch den Stil beeinflusst sein. Und ich will nicht wirklich, dass jemand das aus dem Container für jetzt, nur damit ich mich auf diesen Featured Adam Container hier unten konzentrieren kann Jetzt sollte alles funktionieren. Ich werde ein Linienzentrum tatsächlich wollte eine Linie oben zu den Titeln sind alle oben. Und dann werde ich einzeln in die div-Blöcke gehen, um einige der Stile zu ändern. Also, wenn ich diesen vorgestellten Artikel anrufe und da wir die Flex-Box in unserem Container eingerichtet haben , die die Elemente im Inneren des Containers sind, setzen wir Flex-Box auf diese Show bis zu einer Aufklärung Art anpassen, wie es funktioniert und jemand anwenden Dieser vorgestellte Artikel Stil zu diesen anderen der wird auf die gleiche Weise funktionieren. Okay, einige, die das verwenden, schrumpfen nicht und sieht tatsächlich so aus, als ob das Expandieren viel besser funktioniert. Also werden wir es dabei behalten. Und jetzt vier, mein Container oder mein Abschnitt. Ich gehe einfach zu meiner Topographie und mache eine Mittellinie. Und eigentlich mag ich dich so, aber ich werde in meinen H einen Anruf eingehen. Diese Funktion ist nicht gekennzeichnet. Ja, Featured Artikel Titel und nur Teoh zentriert auf, dass. Das funktioniert perfekt. Ich werde zurück zu diesem Abschnitt und geben uns einfach eine mehr Polsterung ist es einige mehr Atemraum in der Box haben wir gehen auf 30 Picks war gut für jetzt. Großartig. Und in die Geschichte und Fotos. Alles, was ich hier will, ist ein Hintergrundbild von meinem Abschnitt ausgewählt Minimierung, dass in meinen Hintergrund gehen , Hinzufügen des Bildes ein Heidi p. Ich will es an einem guten Ort und Sie können sogar steuern Sie es noch mehr mit der Anpassung -Schaltflächen. Und wieder, ich halte nur meine Maus nach unten und ziehe nach unten. Du solltest gut sein und dann werde ich auch eine dunkle, übermäßig wieder wollen . Nur ein bisschen. 30. Sollte gut sein. Okay, ich werde das in unsere Geschichte ändern und dann einfach ein paar weitere Inhalte hinzufügen, und dann wird das anders sein als die anderen Absatz-Tags, die wir eingerichtet haben. Also gehe ich zu unserer Geschichte Inhalt Typografie. Wechseln Sie es einfach, Zehenweiß. Und ich werde ein paar Dinge hier drinnen ändern. Und dann werde ich das ein bisschen mehr Polsterung in dem Abschnitt geben, indem ich die Geschichte für diesen Abschnitt durchschlage, um meine Schuld zu halten. Optionstaste. Es gibt ein bisschen mehr Platz. Drei Pixel sollten in Ordnung sein. 12. Styles Pt. 4: und Social Media bei einem kleinen Titel hier. Doppelklicken. Verbinden Sie das. Und dann, wie ich mit Logo, werde ich hinzufügen, ich möchte in diesen Linkblock gehen und ein Bild hinzufügen. Das meiste Mädchen hier gemacht. Bild, das ich wählen möchte. Klicken Sie auf den Verknüpfungsblock. Und wenn ich ein Bild hinzugefügt habe und kein anderes brauche, brauche ich nur einen weiteren Artikel in diesem Container, und es wird nur ein weiterer Textblock sein. Dies wird Hash-Tag-Inhalt sein. Die Typografie wird Oswald für die Vorderstern-Grabfarbe oder Kappen sein, ein Pixel. Ich möchte, dass das 28 Pixel ist. Sollte in Ordnung sein. Eigentlich zwingt 20 Scheißarbeitsteil, Typografie. Ich werde nur eine Mittellinie machen, die ich in diese Verbindungsblöcke gehe. Rufen Sie diesen sozialen Link an. Ich war nicht gut aussehender Marge. Also rechter Margin würde stattdessen einen linken Rand haben. Das sind alle. Ich schätze, es ist besser, jemand hatte einen rechten Rand. 20 Plektren scheinen in Ordnung. Und die normale s und Barda Mark unteren Rand war 20 Bilder. Ja, 20 Pixel sollten gut sein. Und dann, genau wie bei der Zukunft der Zeiten, werde ich die gleiche Textur in die Social-Media-Abteilung hinzufügen Einige im Abschnitt und ich werde zum Hintergrund beim Hintergrundbild gehen und da ist Textur worauf Adam übermäßig. Es ist so weiß über Laburnum. Ich werde die Transparenz senken, die gut sein sollte. Und schließlich der Monteur Abschnitt. Also werde ich in meine eigene Bestellliste gehen, aber ich werde einen Textlink benutzen. Ich mach mir jetzt keine Sorgen darüber machen und dass ich irgendwie alle meine anderen Gegenstände auch will. So wie dieser jemand. Ich lösche die leeren und kopiere das dann, wenn ich gerade gemacht habe. Und dann möchte ich die Art Biografien ändern. Das wird Fußzeile sein. Ich meine, ihr Artikel, außer dass man sich tragen muss, geht nicht auf den Link. Also lassen Sie uns diese Klasse entfernen, um eine Klasse zu entfernen, die ich tun muss, ist zurück zu Ihrer Stile-Schaltfläche , klicken Sie darauf und bewegen Sie dann den Mauszeiger über sie und Sie konnten nicht entfernen. Also werde ich in den Link in Name it Footer gehen. Ich meine, Sie Artikel Frauen Typografie machen ein dunkelgrau. Eigentlich will ich weiß. Ich will das nicht. Mein Fuß oder Abschnitt Zehe haben den dunkelgrauen Hintergrund. Aber ich will diese Kugeln nicht. Also werde ich in meine Nord-Liste gehen. Ich gehe zu den Einstellungen und keine Kugeln. Jetzt gehe ich zurück, um meinen Linkfuß oder Menüpunkt zu stylen. Wechseln Sie die Vorderseite. Oswald. Halten Sie es normal. Oh, Mützen. Ich will nicht, dass diese Unterstriche irgendwo. Setze das auf keine. Jetzt werde ich den gleichen Selektor auf den Rest der Elemente anwenden. Dann würde ich diese nicht in einem anderen Layout auslegen wollen, wenn ein gutes im Container und in diesem Fußzeilencontainer und ich werde der Flex-Box Leo Art von dem geben, was wir getan haben und tatsächlich ging Das wird nicht funktionieren. können wir da lassen. Aber was? Ich muss auf der Liste sein. Fußzeilenmenü. Jetzt können wir die Flex-Box verwenden. Okay. Grundsätzlich brauchte mein Fuß oder Menü eine mit, Also habe ich gerade hinzugefügt 100%. Bitte legen Sie sich so hin. Jetzt muss ich wieder hier rein. Stellen Sie sicher, dass diese nicht unterstrichen sind. Perfekt. Okay, ich habe gerade gesehen, dass ich taub brauchte, diese Größe nicht darauf war das Layout durcheinander. Also, jetzt werde ich in meine Fußzeile gehen 13. Endgültige Stylings: und geben Sie ihm diese Polsterung. 20 Bilder sollten gut sein. Ich muss noch ein bisschen mehr machen. 30 Pixel ist gut. Ich mag nicht, wie die sozialen Medien uns etwas Padding zu 15 und es wird diese Überschrift Margen Social Media Titel geben. Ich wollte das wegnehmen. Ok, Cool. Beeilen Sie sich. Und dann noch eine letzte Sache, die ich im Fußzeilencontainer hinzufügen werde. Was? Ich hatte einen Block oder ein Lehrbuch, eigentlich will ich das. Nur ich will das nicht im Container, und dann möchte ich den steifen Block setzen. Wird einfach ein mit Lehrbuch sein. Es wird nur ein Urheberrecht sein. Typografie wird zentriert sein. Adam wird das ändern, Oswald. Und ich will, dass das leicht ist. Das würde ihm einen oberen Rand geben. Justin Pixel perfekt. So können Sie irgendwie sehen, wie schnell es ist, eine Homepage zu erstellen, nur die Tools, die Web-Flow uns gibt. Und so gehen Sie weiter und beginnen Sie mit der Gestaltung Ihrer Homepage basierend auf Ihrer Inspiration und Ihrer Drahtrahmenstruktur. Und wenn Sie alle Stile erhalten haben, stellen Sie sicher, dass Sie Ihre Website veröffentlichen. Sie werden in Ihrem Exemplar erscheinen, der Link, den Sie auf der Diskussionsrunde hatten, und wir können sehen, wie Ihre Websites sind 14. Endliche Bemerkungen: Ich hoffe, ihr habt es genossen, etwas über den mobilen ersten Designprozess zu erfahren und wie wir das in unsere Projekte angegangen haben und hoffe auch, dass ihr Jungs genossen habt Web-Blow von einem Freund eingeführt zu werden und zu lernen. Sie können sehen, wie cool es ist, wenn es darum geht, schnelle Webseiten zu erstellen und eine Leihseiten zu erhalten und auch ein Design zu schaffen, das live im Browser ist, der an Code anpassbar ist. Wenn Sie also daran interessiert sind, Ihre Entwürfe einen Schritt weiter zu gehen, empfehle ich dringend, auf die Web Flow-Website zu gehen und in Ihr Dashboard zu gehen. Dann, in dieser Symbolleiste hier unten, gibt es Tutorials und Kurse, und sie bieten eine Menge fantastisches Material, so weit wie das, was Sie mit dem Blutfluss tun können. Wenn es um Interaktionen wie Hover-Zustände, Übergänge und einige coole andere Effekte geht, können Sie dies wieder tun. Ich hoffe, ihr hattet eine tolle Zeit damit, und hoffentlich sehe ich euch wieder in zukünftigen Klassen. Vielen Dank