Einfache (aber effektive) Tipps für eine herausragende Website | Matthew Fournier | Skillshare

Playback-Geschwindigkeit


1.0x


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

Einfache (aber effektive) Tipps für eine herausragende Website

teacher avatar Matthew Fournier, Web Developer & Designer

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Schau dir diesen Kurs und Tausende anderer Kurse an

Erhalte unbegrenzten Zugang zu allen Kursen
Lerne von Branchenführern, Ikonen und erfahrenen Experten
Wähle aus einer Vielzahl von Themen, wie Illustration, Design, Fotografie, Animation und mehr

Einheiten dieses Kurses

    • 1.

      Einführung

      1:05

    • 2.

      Recherche machen

      4:43

    • 3.

      Erstellende dein Projekt

      2:12

    • 4.

      Ursprüngliche Layouts entwerfen

      6:36

    • 5.

      Das Layout implementieren

      4:40

    • 6.

      Auswahl der richtigen Schrift

      6:26

    • 7.

      Schöne Farbpaletten auswählen

      4:17

    • 8.

      Interessante Benutzerinteraktionen machen

      4:11

    • 9.

      Übergänge und Animationen hinzufügen

      4:00

    • 10.

      Aussagekräftige Bilder verwenden

      5:35

    • 11.

      Schlussbemerkung

      1:15

  • --
  • Anfänger-Niveau
  • Fortgeschrittenes Niveau
  • Fortgeschrittenes Niveau
  • Jedes Niveau

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.

156

Teilnehmer:innen

--

Projekte

Über diesen Kurs

In diesem Kurs erkunden Mit dieser Tipps machen wir uns, um eine durchschnittliche Website von unten zu überdurchschnittlich zu machen, die man als Portfoliostück oder ein Vermarktung für dein Kleinunternehmen verwenden kann.

Gemeinsam in Layouts , Typografie, Bilder und vieles mehr, um zu sehen, wie sie eine Website verbessern können. Obwohl es einige technische Elemente in diesem Kurs geben wird, werde ich meinen Prozess durchgängig erklären, damit auch some mitmachen können. Überwunden Dieser Kurs eignet sich für alle, die ihre Website auf die nächste Stufe bringen möchten.

Obwohl ich einige Illustrator- und Photoshop demonstrieren werde, werde ich in erster Linie mit CodePen (web-basierte Code-Editor) programmieren

Triff deine:n Kursleiter:in

Teacher Profile Image

Matthew Fournier

Web Developer & Designer

Kursleiter:in

 

I'm Matthew Fournier, a web developer & designer from Ottawa, Canada. For as long as I can remember, I’ve been told that I have an over the top imagination. This creativity, mixed with my technical skills, has allowed me to develop innovating work from concept to production.

As a passionate web developer and designer, I’ve worked on countless websites for clients ranging from big corporations to small family businesses. Each new project is an opportunity to push my creativity and stretch the boundaries of traditional web design. 

Vollständiges Profil ansehen

Level: Intermediate

Kursbewertung

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

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 auf 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: Hallo, Mein Name ist Kathy If Orania und auf einem Webdesigner und Entwickler. Im Laufe der Jahre habe ich an unzähligen Projekten für Kunden gearbeitet, die von kleinen Unternehmen bis hin großen Konzernen reichen. Jedes Sie Projekt, das ich gegangen wäre, bietet mir die Möglichkeit, meine Kreativität zu erweitern und die Grenzen wie traditionelles Web-Design zu verschieben. Im Laufe der Jahre habe ich ein paar einfache, aber effektive Techniken entwickelt, die Make-up Website Heben Sie sich von allen anderen ist Dies ist wirklich wichtig, denn heutzutage hat jeder eine Website mit mehr und mehr Websites im Internet ist ihr zu verlassen ein dauerhaften Eindruck auf die Nutzer und um Ihre Website Sandow im Allgemeinen zu machen. Also in diesem Kurs, immer teilen Sie diese Techniken mit Ihnen und demonstrieren einige großartige Beispiele. Aber andere Designer und Entwickler, die wir verwenden ähnliche Techniken, um ihre Website herausragend zu machen werden auch zusammen an einem Klassenprojekt arbeiten und die eine unterdurchschnittliche Webseite in eine gut gestaltete verwandeln . Durch die Verwendung dieser Techniken einige grundlegende, welche Design- und Entwicklungswissen vorgeschlagen werden würde , nur damit Sie ein wenig besser folgen könnten. Also, wenn Sie bereit sind, Ihre Website auf die nächste Ebene zu bringen, lernen Sie, wie Sie ihre Worte, die hervorstechen, lassen Sie uns beginnen 2. Recherche machen: bevor Sie mit einer Designer-Entwicklung beginnen, ist es wirklich wichtig, Ihre Forschung zu machen. Erstens könnten Sie zwei Tage, zwei Jahre lang damit verbringen , die bestmöglichen Informationen zu finden. jedoch Diese Klasse werden wir unsjedochauf zwei Dinge konzentrieren, insbesondere Ihre Benutzerbasis zu kennen und das Ziel Ihrer But-Site zu definieren. Zu wissen, Ihre Benutzerbasis ist äußerst wichtig, wie eine Menge Decatur Ihre Entwürfe gegenüber Ihrer Gruppe von Benutzern. Dies ist für alles von Layouts zu gehen. Zwei Farben zu weit Auswahlmöglichkeiten. Der beste Weg, dies zu erklären, ist eine Show. Ein Beispiel. Für ein Leichenwagenbeispiel werden wir so tun, als würden wir eine Website für jemanden entwerfen, der älter ist. Also stieß ich auf diese Altersheim Website, die ich denke, ist ein gutes Beispiel für das, was Sie wollen sein wollen. Es ist nicht perfekt, aber es hat viele der richtigen Attribute, so dass die Navigation wirklich einfach zu folgen ist. Ähm, und der ganze Inhalt ist schön angelegt. Es ist nichts Ausgefallenes daran, aber das macht es einfach. Es ist leicht zu verstehen, leicht zu scrollen durch leicht zu finden Informationen. Jetzt stellen Sie dies im Gegensatz zu der Red Bull Website, die eine wirklich ausgefallene Website verloren geht auf viele Animationen, Hintergrundvideos. Aber für jemanden, der älter ist, könnte das zu viel sein. Sie könnten über diese Webseite kommen und nicht wirklich wissen, was vor sich geht, fühlen sich überwältigt und geben einfach irgendwie auf , die Informationen zu finden, die sie wollen. Ein weiteres gutes Beispiel dafür, dass Sie Ihre Benutzerbasis kennen, ist ein Kontrast zwischen Wal Mart und Nike. Obwohl sie beide E-Commerce-Websites sind, passen ihre Designs sehr unterschiedlich zu verschiedenen Benutzerbasen. So eine typische Person, die auf die Walmart Website kommt, könnte als jemand gesehen werden, der niedrige Preise will , sie Produkte und nur bekommen es wirklich leicht. Und das ist eine Art, was die Walmart Website bietet. Kumpel, der am Anfang arbeitet, haben sie eine Reihe von Banner, äh, niedrigsten Preisen. Kostenlose Lebensmittel, wirklich versuchen zu betonen, dass kommen in einem WalMart ist billig. Ich bin direkt unten. Es ist alle Ihre Shop-Abteilungen wirklich einfach zu finden, einige machen einen einfachen Prozess, um auf die Website zu kommen und Ihre billigen Produkte zu bekommen. Im Gegensatz dazu will Nike, dass ihre Benutzer das Gefühl haben, sie kaufen die besten Produkte und in der Regel die Menschen, die es jetzt kaufen, er will schneller gehen. Athleten. Sie haben ein bestimmtes Bild, das Sie anzeigen möchten. Also will Nike dieses Image aufrechterhalten. So ist ihre Website sehr sauberes Wasser. Um Verlust von Animation, viel Video zu versuchen, dieses Gefühl von Luxus für ihre Benutzer zu betonen, ähnlich wie Ihre Benutzerbasis zu wissen. Das Ziel Ihrer Website zu kennen, ist auch wirklich wichtig, um ein effizientes Design für Ihre Website zu erstellen. So Beispiele für Ziele für die gleiche E-Commerce-Website wäre, Ihre Produkte hier zu verkaufen. Setzen Sie für Ihre Website ist, um Ihre Arbeit anzuzeigen oder für Blawg Website ist es, mehr Leser zu bekommen. Ein gutes Beispiel für einen Blogger oder eine Nachrichten-Website ist eine nationale Gruppe geografische Website. Also direkt von der Titelseite, kommen Sie auf die Website Energie ist Stories. So sehen Sie ihre neuesten Geschichten, Ähm, alle Nachrichten Informationen und es gibt nur eine Menge Inhalt sofort. So kommen Sie auf die Website, Sie sehen Inhalte, klicken Sie darauf und dann sind Sie süchtig. Möchten Sie anfangen, mehr und mehr zu lesen. Best Buy ist ein Beispiel für eine E-Commerce-Website, so dass sie nicht so viel über große Inhalte kümmern. Sie möchten Ihnen nur die Produkte zeigen, auf die Sie klicken und kaufen. So kommen Sie direkt von oben auf die Seite. Es sind nur die neuesten Angebote und im Grunde Produkte für Sie zu kaufen. Ähm, und doch zeigt dies nur den Kontrast zwischen einer Art neuer Website auf, dann einer E-Commerce-Website. Sobald Sie also Ihre Benutzerbasis und das Ziel Ihrer Website haben, um zu finden, ist es Zeit, Inspiration zu finden , damit Sie Inspiration finden können, geht es leicht zu Google und tippt in, ähm, Ihre Konkurrenten Websites und sehen was sie tun oder einfach nur zufällig durch das Internet gehen und gesehen, ob Sie auf etwas stoßen. Das ist schön, aber auf Websites, die ich immer dazu neige, Inspiration zu finden ist Auszeichnungen dot com, die einige der besten Websites oder besten Design-Sites im Internet von erstaunlichen Designern und Entwicklern bietet . Diese Luft oft wirklich progressive und zukunftsorientierte Websites, so dass Sie vielleicht nicht alle ihre Designaspekte umsetzen wollen, aber Sie könnten definitiv Stücke und Stücke wegnehmen. Ein weiterer guter Ort wird getropft. Eso. Dies hat Tausende und Tausende von Designs von Benutzern aus der ganzen Welt, von denen Sie sich inspirieren lassen können . Also wieder, die Sache ist, Sie wollen keine Kopie jedes Design, aber es ist toll, sich umzusehen, um zu sehen, was da draußen ist und sich selbst inspirieren, bevor Sie in ein Projekt springen . 3. Erstellende dein Projekt: Jetzt, wo Sie wissen, wie wichtig es ist, Ihre Forschung zu machen, bevor Sie ein Projekt beginnen , werden wir Ihnen unser Klassenprojekt vorstellen, das im Grunde genommen diese schlecht gestaltete Webseite nimmt, die ich benutze, um die Klasse zu vermarkten , die Sie gerade sehen zwei andere Skulpturenbenutzer oder Leute, die sich für Webdesign interessieren, und wir werden es in eine gut gestaltete Webseite verwandeln. So werden wir das tun, indem wir verschiedene Elemente des Webdesigns wie Typografie, Layout, Farben, Animationen und Transistorübergänge und Bilder untersuchen Layout, Farben, Farben, . Und selbst wenn Sie keine Programmiererfahrung haben, ist das in Ordnung, denn alles wird vorcodiert. Alles, was du tun musst, ist Assam-Klassen oder Kommentierer. Gelegentlich. Jemand ist ein Code, also wird es wirklich leicht sein, mitzufallen. Wir verwenden auch Code Ben, das ist ein Online-Code-Editor, so dass es keine Notwendigkeit, irgendwelche Programme herunterzuladen. Alles, was wir tun, wird genau hier in Ihrem Browser auf dieser Seite sein. Also, wenn Sie nicht über einen Code Stift Konto bereits pausiert Video und gehen Sie zu Code pen dot io und registrieren Sie sich für ein kostenloses Konto. Also, jetzt, da Sie Ihr kostenloses Konto schnell angemeldet haben. Der Startpunkt Link in unserer Klassenbeschreibung, der Sie auf eine Seite wie diese bringt. Lassen Sie Ihre Ansichten anders. Klicken Sie einfach auf, ändern Sie und wählen Sie die Ansicht aus, die Sie verwenden möchten. Ich persönlich bevorzuge die Seite, aber es ist alles persönliche Vorliebe. Also, was wir jetzt tun werden, ist im Grunde einfach über das Projekt zu verzweigen, indem wir oben auf Schweinefleisch klicken . Was das tut, ist Luft Startpunkt auf Ihr Konto zu kopieren, so dass alle Änderungen, die Sie vornehmen , in Ihrem eigenen Konto gespeichert werden. Und nur um Verwirrung zu vermeiden, werden wir den Startpunkt in die Arbeit umbenennen. Also ist unser Projekt jetzt eingerichtet und Sie sind gut zu gehen. Das einzige andere, was wir verwenden könnten, ist unser Repository, das ich auch einen Link zu einer Klassenbeschreibung hinterlasse und das wird nur einige Bilder speichern . Ich werde das Finish-Class-Projekt dort oben stellen und wir werden unseren Design-Leitfaden haben , der alle ein bisschen später erklären. Sobald Sie diese Seite eingerichtet haben, sind Sie im Grunde bereit zu gehen und ah, lasst uns mit unseren Klassenprojekten beginnen. 4. Ursprüngliche Layouts entwerfen: Okay, also das erste Element des Designs, mit dem für ein Projekt arbeiten wird, sind Layouts. Ich bin mir sicher, dass Sie alle gesehen haben, welche Seite wie diese. Es ist ziemlich generisch. Also hast du dein großes rotierendes Banner, gibdein klebriges gib Menü und dann nur sehr viel Glück. Und dann haben Sie Ihre kleinen Icons mit den Nachrichten darunter. Eso könnte man sogar mögen diese eine ist ziemlich einfach. Aber dann könnten wir gehen. Dies ist ein wenig interessanter, aber wieder, Sie haben wahrscheinlich so etwas schon gesehen, so dass Sie Ihren Schieberegler oben haben. Ah, dein großes gibt deine Bilder mit deinen Informationen darunter. Also gibt es nichts von Natur aus falsch mit einer Webseite wie Dies ist großartig zeigt Informationen . Das einzige Problem ist, ist es nur eine Art Mischung zusammen? Wenn eine Person Ihre Website besucht, wird sie keinen bleibenden Eindruck haben. Je nach Gold, deiner Website, brauchst du vielleicht keinen bleibenden Eindruck. , Je nach Gold, deiner Website, deiner Website, Aber wenn Sie einen größeren Einfluss auf Ihre Benutzer haben wollen und es besser ist, sich von diesem typischen Design-Stil zu entfernen, so wie ich sagte, gibt es nichts von Natur aus falsch an dieser Art von Webdesign oder welches Seitendesign und es funktioniert. Deswegen benutzen so viele Leute es, Ähm, weil es effektiv ist. Aber die Sache ist, Sie können immer noch viele der gleichen Elemente behalten, ohne dass es genau das gleiche Layout ist, das Sie auf Tonnen anderer Webseiten sehen. Also werden wir einen Blick auf diese Seite nehmen, die eine Website ist, die Art von fällt die gleiche Anleitung. So hat die gleiche große Art von Helden Banner-Layout, die gleiche schwebende Navigation. Aber sie haben es gerade genug verändert, dass es irgendwie sein eigenes ursprüngliches Flair hat. Also nur die Art und Weise sie Art der Überlappungen des Geräts und der Hintergrunddurchschnitte macht ein bisschen interessanter zu betrachten, anstatt nur gerade Schnittlinien, die Sie auf der anderen Webseite sehen . Selbst wenn er hier runterkommt, sind es kleine Blöcke. Es hat ein bisschen mehr Interesse daran, mit dem Hintergrund und den Overlays, Ähm, und einfach alles, was damit los ist. So können Sie sehen, indem Sie durch diese Seite scrollen. Es hat alle die gleichen Elemente in den gleichen Funktionen wie diese Seite hier drüben, aber es ist nur in einer Weise getan, die ein wenig mehr Kreativität bietet, die es ermöglicht, sich hervorzuheben, die einen besseren dauerhaften Eindruck für seine Benutzer haben. Also hier ist eine andere Website, die ich denke, ist wirklich gut in dem Sinne gemacht, dass es zwei weitere traditionelle Komponenten einer Website hält . Aber es ist auf eine Weise gemacht, die es sehr originell macht, ähm, und kommt über die Nachricht, dass die Seite versucht zu porträtieren, so hier können Sie sehen, es ist immer noch der gleiche große Helden Banner oder wie, Ah, Seite wie das hier. Du hast immer noch diesen großen Helden. Aber nur die Art und Weise, wie das Texas durch das Bild der Person abgeschnitten wird, macht es interessanter, und sogar nur die Größe und Sauberkeit von allem um ihn herum gibt ihm irgendwie das mawr saubere, äh, und moderne Gefühl. Dann, wenn Sie nach unten scrollen, nur die Leerraumseite der Verwendungen wirklich, betont nur die Leerraumseite der Verwendungen wirklich, ähm, oder erlaubt es Ihnen, sich auf den Inhalt zu konzentrieren, der dort ist, was ich gefunden habe. Besonders interessant ist seine Verwendung dieser Hintergrundbilder für die tat dies durch Hinzufügen in ein kleines Bild am unteren Rand des Div. Das ist eine Art von Farbspritzer, fast es lässt es aussehen, als wäre es nicht nur ein gerades Div und gibt ihm ein interessanteres Gefühl. Ähm, dann bist du eher traditionelle Art von geraden Linien, die du hören würdest, oder besonders über diesen blauen Balken. Nun, da wir einige Ideen erforscht haben, wie man eine einfache Webseite in etwas kreativeres und einzigartiges verwandelt , werden wir diese Elemente auf unser Klassenprojekt anwenden. Also habe ich nur eine einfache Vorlage von dem, was wir bereits haben, angelegt. Ah, sehr einfacher Drahtrahmen. Ähm, und dann habe ich einen gemacht, der oder den Drahtrahmen dessen ist, was wir durch das neue Layout erreichen wollen und dann habe ich einen gemacht, der oder den Drahtrahmen dessen ist, was wir durch das neue Layout erreichen wollen. Wenn Sie diese auf eigene Faust öffnen möchten, können Sie unseren Repository-Link öffnen und zum Design-Leitfaden gehen. Und dann werde ich die Klasse sein, äh, gut entworfen Start PDF und Klasse Design Pdf. Also, nur um zusammenzufassen, unser Ausgangspunkt eines Klassenprojekts ist sehr gerader Ausstecher, plus eine gerade Linie, Ähm, nicht sehr interessant. Ganz im Grunde raus. Und wenn wir schauen, schauen Sie sich diese Seite an, die Elemente, die ich wirklich mochte, waren Diese Seite war diese Idee der Art der Maskierung der Dibs auf die Maskierung einer Menge der geraden Linien. Wenn Sie sich also ansehen, was wir mit unseren neuen gemacht haben, haben wir das irgendwie auf unsere Seite auf unsere eigene Weise angewendet. Anstatt all diese geraden Linien hier für jeden der Abschnitte zu haben, haben wir Wellen über jeden der oberen Teil der Dibs angewendet, so dass nur ein flüssigeres Gefühl der Webseite anstelle des geraden harten Schnitts Linien auch nach oben. Was ich an dieser Seite wirklich mochte, war die Offenheit des Helden Banner und nur die Größe, die Vollbildnutzung davon. Also haben wir das auch getan. Also haben wir einen großen Held von Top gemacht, es schön und sauber gemacht. Aber was wir getan haben, ist irgendwie im Bild geschrumpft. Anstatt einfach nur ein großes Bild von Rot zu sein, werden wir das Bild in ein wenig schwacheres Lob verwandeln. May macht jetzt vielleicht nicht viel Sinn, aber wenn wir unser Projekt fertig sind,wird es von dieser Seite viel mehr Sinn machen. May macht jetzt vielleicht nicht viel Sinn, aber wenn wir unser Projekt fertig sind, Die Elemente, die ich wirklich mochte, waren die überlappenden Dibs. So überlappt sich einfach die Idee dieses Zeugs oben auf diesem Hintergrundbild. Wir nehmen diese Idee und bringen sie auch auf unsere Seite. So könnte man genau hier auf den kleinen Icon-Kacheln sehen, die unseren Text für die Kacheln haben mit den Symbolen selbst überlappen und dann unten, ähnlich wie die andere Seite tat. Wir werden ein Hintergrundbild haben, aber das div drauf und einfach nach unten verschoben. Also wieder, die Idee, den Inhalt zu überlappen. Also hoffentlich, wenn Sie sich diese Seite ansehen und wenn Sie sich die erstellte Version davon ansehen, die Sie hier sehen konnten , könnten Sie sich vorstellen, dass wenn wir diese Version der Webseite ausbauen Oh, sehen Sie viel schöner aus. Das Layout wird viel interessanter sein. Also im nächsten Teil dieser Klasse wird in den Code gehen und unser Projekt tatsächlich ändern , um mehr so aussehen zu können 5. Das Layout implementieren: Also, jetzt, wo wir wissen, was wir wollen, dass unsere neue Löwenspitze aussehen So haben wir ein Design genau hier, wie erkundet werden, bevor wir durch den Code gehen und diese Seite aktualisieren wollen, um mehr so aussehen zu können. Also wieder, dies ist nur ein einfacher Drahtrahmen, so dass es nicht genau dasselbe sein wird. Aber das ist mehr nur eine Anleitung, und dann wird dies eine Art von der polierteren Version sein. Also, wie gesagt, alles ist bereits vorcodiert. Also werden wir nur nach all diesen kleinen Dingen suchen, die mit dem Layout beschriftet sind und diese im Grunde auf die Elemente anwenden und für die Ebene wird alles in jedem sein, weißt du, weißt du, also könntest du einfach verkleinern Sie Ihr CSS und JavaScript. Also nimm es ist ein Tipp. Wieder haben wir unseren ersten Artikel hier zu tun, der Klasse Clear auf Topper angewendet wird. Also haben wir unseren obersten Teil, ähm, Element genau hier. Also werden wir uns einfach klar darauf bewerben. Und während wir das tun, konnten Sie sofort sehen, dass sich das Layout geändert hat. Dann scrollen wir einfach weiter nach unten und finden sie auch die nächste. Haben sie Banner sitzen. Ein Bluff entworfen, um grundlegende Banner. Also haben sie das Design nicht blob gemacht. Und jetzt können Sie sehen, dass die Titelseite beginnt, ganz anders aussehen und legen Sie wieder Uncommon sug. Und indem wir das tun, wird unser Held dem ähnlich aussehen, was wir entworfen haben. Also haben wir unseren Blob hier drüben, den großen Text, und dann haben wir einen Blob. Großer Text, ähm, sind aber in der Mitte, und es wird sehr irgendwo sein. Nur um zu wiederholen, das ist jetzt alles Layout, also werden die Farben und Typografie immer noch grob sein, aber wir werden das in späteren Teilen ihrer Klasse untersuchen. Also werden wir einfach weiter durch diesen Mantel gehen und Layout finden, um Gegenstände zu tun. So Layout auf Kommentar SPG so ungewöhnlich, dass sie sind. Ich würde Klasse Mitte Topfen und weichen Hintergrund zu dem Abschnitt entfernte Klasse. Ach, kleine Planung. Entschuldigung. Das ist der Fehler genau da. Wenden Sie das an. Und hier ist eine weitere Ebene, die ich verschiebt Design zwei grundlegende Icon-Kacheln überqueren würde. Geht weiter. Wir werden nur im Grunde gehen durch alle HTML und finden alle zu zwei Elemente und aktualisieren sie, so dass ich Klasse Chip es gibt zu unserem Abschnitt und entfernen klassische Klopfen aus unserer Sektion So ungewöhnlich ihre S P G's Wir werden dieser hochwertige kleine Rapper und Klopfen Teoh Inhalt Trapper bewegen Klasse kleinen Körper Also werden wir einfach über, dass und ersetzen Sie es mit kleinen Rapper Mitte Pulver Sie gehen nach unten Nun, ich würde großen Topf in Abschnitt kosten Sie bewegen Klasse Kleiner Planet einen Abschnitt, den ich nicht habe, dass Also das Zeichen und dann wird er uns zwei oder ein p Therapie Richtungen hinuntergehen und dann unser letztes Layout ist einfach und kommentieren Dies nicht ein Code direkt hier die SPD Also indem wir das tun, haben wir im Grunde durch unsere Seite gegangen und alle notwendigen Änderungen vorgenommen, um zu transformieren sind Start-Layout in erlauben, das sieht so aus. Also, wenn Sie die Seite nach unten scrollen, könnten Sie sehen, dass Layout ist jetzt aktualisiert und auf jeden Fall eine große und beweisen ging los wir haben bereits oder was von der induktiven großen Verbesserung des ursprünglichen Designs. Ich habe tatsächlich etwas aufgefallen, das ich vergessen habe, so oh, bringen Sie es durch, damit wir das zusammen für den Abschnitt über mich und den Inhalt aktualisieren können . Rapper. Wir werden einen kleinen Rapper hinzufügen. Oh, und ich sehe, dass ich es hier hatte. Ich habe nur vergessen, es zu tun. Also, das ist mein Fehler. Wenn wir jetzt nach unten scrollen, wird es nur enger. Text und ein Blick besser mit dem Leerraum haben durch eine Aktualisierung unseres Layouts gegangen und wir sind jetzt bereit für den nächsten Schritt. 6. Auswahl der richtigen Schrift: also ein weiteres wirklich wichtiges Element der Grafik-Design oder Web-Design oder jedes Design, ist wirklich Typografie. Eso. In letzter Zeit gab es eine Art von Schiffen, die Typografie sehr gesägt und auf Beere serviert werden . Einfach saubere, einfache Punkte, was gut ist, weil es leicht rendert und es ist klar über alle Displays. Aber mit größeren Telefonen kommen heraus und schärfere Auflösungen auf Geräten und für die meisten Bildschirme von Menschen verwenden, könnten wir eine Wegerich Sarah Fonts wieder starten. Also ein gutes Beispiel, das männliche Schimpanse ist. Also sieh dir Nelson an. Sie haben es wirklich zurückgebracht. Und sie haben schöne große Schlangen für all ihre Rubriken. Und es ist irgendwie Sando, nur weil du es momentan nicht so sehr siehst. Und es verirrt sich irgendwie von Ihren typischen, sehr sauberen, sauberen Teichen. Also wieder, da wir irgendwie immer wieder bedeckt haben, gibt es nichts falsch mit sauberen Teichen. Es muss nur Ihrem Zweck dienen. Also der Milton-Zweck, es hebt sich heraus, dass ein bisschen, wenn Sie auf die Seite kommen, die mit dem Gelb und allem gemischt, es wirklich Ihre Aufmerksamkeit erregt, also ist die Auswahl Ihrer Schriften wirklich wichtig, und auch ich möchte warten. Also, wenn man sich Wikipedia anschaut, obwohl die Website sehr schlicht in Bezug auf den Designstil ist, ist das Forint Gewicht Wert. So wie alle Überschriften sind schön und golden, so dass treibt Ihre Aufmerksamkeit direkt dorthin. Also möchten Sie diese Idee für jedes Web-Design behalten, ist wie wenn Sie wichtige Informationen haben , die einen Felsbrocken machen, einen abheben besser als alles andere, Also ein gutes funktioniert wie das verwendet Art von Dies macht die Front Abfall mit neue moderne Typografie, sogar mit einigen Songpaaren, es ist auf. Sarah ist eine riesige Agentur, also ist das ihre Website hier. Sie verwenden wirklich große, fett formatierte Schriftarten für alle ihre Überschriften. Aber dann schöne, einfache und saubere Sarah-Teiche für darunter. So, wie Sie sehen konnten, hat es wirklich einen starken Eindruck auf Sie, vor allem die Titelseite, die einfach groß ist, mutig Hallo. Es fängt Ihre Aufmerksamkeit sofort ein und lässt Sie sich auf die Website konzentrieren. Eine Sache, die Sie bei Ihren Designs und Typografie beachten sollten, ist sicherzustellen, dass sie lesbar ist, damit Sie die beste Design-Typografie haben können. Aber wenn der Text tatsächlich gelesen werden kann und er nicht wirklich einem Zweck dient, besonders wenn er versucht, einige wertvolle Informationen zu liefern. So Schriftgröße, am einfachsten zu beheben. Wenn es zu klein ist, steigen Sie einfach die Telefongröße hoch, bis die Leute es lesen konnten. Eine Sache, auf die Sie ein bisschen mehr Aufmerksamkeit schenken müssen, ist Ihr Kontrast. Das ist also der weiche Hintergrund, der dunkle Groß, wirklich kontrastiert. Du könntest es lesen, ähm, ganz leicht. Eso hat einen schlechten Kontrast gesetzt. Nehmen wir an, wenn Sie anfangen, es auf ein weicheres Grau zu setzen, das könnte schön aussehen und einige Designszenarien. Aber, ähm, es könnte sehr schwer zu lesen sein, besonders wenn Ihr Bildschirm nicht die beste Farbdefinition hat oder Ihre Benutzer schlechte Sehkraft haben , die sehr schwierig werden könnte, wenn nicht unmöglich, zum Lesen. Also nur zwei einfache Dinge zu beheben. Aber um zu halten, Aufmerksamkeit auf, weil sie es für Ihre Benutzer ziemlich schwierig machen können, Ihre Inhalte zu lesen. Nachdem wir nun einige grundlegende Typografieprinzipien erforscht haben, lassen Sie uns diese auf unserer Webseite anwenden. So ähnlich wie unser Layout, werden wir einfach nach unserer Typografie suchen, um Artikel zu machen und sie auf unsere h it out anzuwenden. Also wird dies auch einige Elemente in unserem CSS zu tun haben, aber lasst uns den HTML zuerst erledigen. So toppy Big Titel Quiet ist Abschnitt Titel. Also alles, was in der asiatischen Ich war ein paar mehr Abschnitt Titel, so werde ich schnell blättern und einfach die über mich anwenden und dann für in Kontakt statt eines kleinen Titels statt, ähm, großen Titel. Entschuldigung. Wir werden so schnell einen kleinen Schwanz einlegen. Sie könnten nur sehen, dass die Schriftgrößen große Titel sind oder Abschnittstitel geändert haben. Es sieht so aus, als hätte ich einen eso hier oben verpasst, also fangen wir jetzt wieder an. Man könnte sehen, ein zweiter Titel ist jetzt schön und groß. Also hier unten schauen wir uns unser CSS an, wo wir alle richtigen Importe für unsere Google-Formulare haben. Wir werden das kommentieren, damit wir unsere neuen Telefone importieren können, und dann ändern wir uns einfach. Deine Variablen sind ah, CSS Very Boote von Font-Songs auf Sarah zu unseren neuen Spukhäusern. Es tut uns Leid. Wir werden unsere Variablen hier in unsere neuen Schriftarten ändern . Also unser Monster, bei dem wir gerade mit Google geladen haben will, werden wir als unsere Songs verfolgen oder wollen Songs variabel und dann nehmen wir unsere ganz, ob Sarah Font und wenden das auf unsere Sara erträglich an. So können Sie jetzt sehen, dass es durch die Website geht, die neue Formulare angewendet wurden Unsere Abschnittstitel sind nett Ah, Sarah Schriftarten jetzt, die, wie wir exportiert Mail-Schiffe abheben ein bisschen schöner und all diese Mittel sind ziemlich schöner als auch. Und es sieht so aus, als habe ich absolut un etwas mit dem Layout gemacht. Nein, hilf mir einfach schnell. Weißt du, ich höre dich. So Rapper. Also halten wir das bereits in unserem Layout ein, aber ich habe es nur durcheinander gebracht und ah, muss es antworten. Ok, also gehen wir. Alles sieht gut aus und wir sind bereit für Typografie. 7. Schöne Farbpaletten auswählen: mit einer guten Farbpalette oder Farbhaut könnte einen langen Weg gehen, um Ihre Website abheben . Daher ist es wichtig, eine der Bemühungen zu versuchen, die Farben zu finden, die Ihre Website am besten passen , wenn Sie keinen Sinn für Farbtheorie oder Farbdesign haben, dass das in Ordnung ist, weil es Werkzeuge gibt , die Ihnen helfen könnten, schöne Paletten zu generieren. Dies sind Kühler, bei denen es sich um einen Farbpalettengenerator handelt. Also müssen wir tun, ist klicken Sie auf diese Schaltfläche generieren. Nein, generieren Sie eine schöne Farbpalette für Sie. Also, wie Sie sehen können, haben wir gerade einen erzeugt und ist ziemlich nett. Wenn es Ihnen nicht gefällt, können Sie einfach immer wieder auf generieren klicken, bis Sie etwas finden, das Ihnen gefällt. Oder, wenn Sie möchten, können Sie die Farbpaletten anderer Personen erkunden, die sie paaren, und sehen, ob Sie dort etwas sehen können , von dem Sie denken, dass es gut mit Ihrer Website funktionieren würde. Also gerade von der Spitze meines Kopfes, durch diese hier zu gehen, ähm, so etwas wie das wäre wie eine schöne Farbpalette für eine Art minimalistischere Seite. Wir sind nur auf dem dunkelblauen, dem grauen. Ich glaube nicht, dass wir zusammen gehen. Wir scrollen ständig durch das hier, wäre etwas, das ich sehen könnte, hier. Wir scrollen ständig durch das hier, wäre etwas, das ich sehen könnte, So wäre es etwas, das ich sehen könnte gut für umweltfreundliche Website oder eine Art von Umwelt Wohltätigkeitsorganisation, wo Sie Ihre hellen Haftbefehle haben, um sich von der grünen abheben . Aber Sie haben immer noch das Grün, um als Ihre, ähm, Bezug auf die Umwelt und alles zu handeln ähm, . Gerade gesehen, diese Farbpalette hier drüben macht mich an Eis denken. Also aus irgendeinem Grund, dass ich das in einer Eisdiele, Websites, gleichen Drähten oder so etwas, dass wieder nur diese Wahl der Farben macht mich an Eis denken . Das würde ich also benutzen. Also, nur um den Punkt zu wiederholen, ist wirklich versuchen, eine Farbpalette zu finden, die Ihren Inhalt am besten entspricht und versucht, sie effektiv auf diese Weise zu verschmelzen. Nun, da Sie Ihre Farbpalette gewählt haben, ist es auch wichtig zu wissen, wie Sie es effektiv auf einer Website verwenden, so dass wird die schönen Farben haben, die gut zusammen passen. Es bedeutet nicht, wenn Sie sie überall schrägen, sie werden notwendigerweise eine schön aussehende Website machen, so dass ich denke, dass diese Website einen guten Job gemacht hat , aber es ist, dass ihr Gaumen ziemlich lebendig ist, also haben sie grün, lila, orange, lesen Sie nur eine Reihe von wirklich starken Farben. Anstatt also eine Reihe von Elementen, diese Farben zu machen , verwenden sie sie als mehr für die Hintergrundelemente oder plötzlich als Hintergrundfarben. Auf diese Weise erhalten Sie das Gefühl der Öffentlichkeit auf der gesamten Website als nicht nur langweilig schwarz und weiß, aber es ist nicht überwältigend zur gleichen Zeit, Ein weiterer effektiver Weg, Ich denke, Farbe sollte verwendet werden, um mit der Benutzerfreundlichkeit zu helfen. Also macht die Rogers Website einen guten Job damit, in dem Sinne, dass, wenn Sie die Farbe rot sehen , Sie wissen, dass es eine Aktion ist. So haben Sie Ihre Bar oben, wo es all Ihre Aktionen gibt oder ein Stück Brot, aber und Sie wissen, dass es anklickbar ist. Die roten Boxen sind alle anklickbar, die weiße und rote Taste und klickbar. Also, wenn du durch die Website scrollst und rot siehst, ist es wie, Oh, das ist eine Aktion. Ich weiß, dort zu klicken, um etwas zu tun. Es ist also ein Weg, um die Benutzerfreundlichkeit mit Farbe zu unterstützen. Nun, da wir einige großartige Ressourcen gefunden haben, um unsere eigenen Farbpaletten zu erstellen. Lassen Sie uns voran und erstellen Sie eine Farbpalette für unser Klassenprojekt. Also habe ich tatsächlich vorangegangen und diese Farbpalette hier generiert, die dem Farbschema entspricht . Aber Sie haben in unserem Klassenprojekt für die, ähm, Abschnitt oder unsere Klasse Abschnitt Titel gesehen ähm, . Gehen wir also in unsere Klasse, projizieren die Pfanne erneut und lassen Sie uns unsere Farben bearbeiten. Also alles, was wir brauchen, wird in der CSS sein und ähnlich gesagt, bevor es alles in unserer Farbe sein wird , um Gegenstände zu tun. Also unser erster Punkt ist, bestehende Farbpalette zu löschen, die hier ist und dann alles, was wir tun werden, ist ungewöhnlich. Unsere neue Farbpalette, die mit dem Schema übereinstimmt, das ich Ihnen gerade hier gezeigt habe und jetzt sofort sind Farbhaut wird auf die aktualisiert, die ich Ihnen gerade gezeigt habe. Also, wie Sie sehen können, nur indem Sie das tun, ähm, es macht eine Welt des Unterschieds, und unsere Website beginnt jetzt mehr und mehr poliert aussehen 8. Interessante Benutzerinteraktionen machen: Ein wirklich effektiver Weg, um einen bleibenden Eindruck für die Benutzer zu schaffen, ist durch das Erstellen interessanter Benutzerinteraktionen. Damit meine ich die Art und Weise, wie Benutzer mit den Elementen auf der Website interagieren. Diese Seite hat es also sehr viel Mühe gemacht, interessante Interaktionen zu machen. Fast jedes Element auf dieser Seite interagiert in einigen einzigartigen Wartezeiten. Also von den großen Titeln, die waren, Sie bewegen sich über sie und sie haben ihre animieren eine Zeichenlinie oder das Hamburger-Symbol, das langsam in und aus animiert, während Sie ihr helfen über. Angesichts der Social-Media-Symbole haben eine interessante Attraktion, wo der Cursor, Sie um schrumpft, so dass Sie lesen konnten. Es ist so können Sie die Links besser lesen, wenn Sie sie unten haben, alle Inhalte animiert in, um die Aufmerksamkeit des Benutzers zu halten. Während das Animieren all das ist wirklich großartig und wirklich beeindruckend gemacht. jedoch argumentieren, Einige könntenjedoch argumentieren,dass es fast zu viel in dem Sinne ist, dass die Interaktionen und die Animationen dem Inhalt auf der Website fast wegnehmen könnten. jedoch Dies wirdjedochall das. Das Prinzip könnte noch genommen werden und es auf subtilere Weise anwenden. Also, wenn Sie sich diese Website hier ansehen, lassen Sie mich sie einfach aktualisieren. Also alles lädt das gleiche, ähm, alles noch Andresen, aber es ist nicht zu aggressiv oder mutig gemacht, also nimmt es nicht weg von dem Inhalt. Das Gewissen ist immer noch der Hauptfokus dieser Website, wie man alles so animiert hören konnte, und es hat sogar wenig Animationen, die dort bleiben. Aber es gibt nichts wirklich abzulenken von diesem Inhalt so ähnlich, um alles andere zu haben . Wir haben daran gearbeitet, die richtige Balance zu finden und zu wissen, was für Ihre Website richtig ist . Also, wenn Sie ein Put-Portfolio Stück haben, möchte ich wirklich interessante Attraktionen demonstrieren. Ich zeige wirklich deine Fähigkeiten. Dann ist es besser, mehr in Richtung dieser Route zu gehen und wirklich versuchen, über jede einzelne Sache nachzudenken und wie Sie es cool und interessant auf wirklich mit den Benutzern zu engagieren. Allerdings, wenn Sie konzentriert sind, dann wollen Sie vielleicht mehr so sein, in dem Sinne, dass Sie immer noch ein bisschen mehr Gefühl und diesen Profi, Äh, ja, nur ein wenig Kirsche an der Spitze mit allen Animationen und Übergängen. Aber es nimmt nicht weg von den Inhalten. Eine Sache, die Sie im Auge behalten sollten, ist, dass Sie nicht mit Benutzerinteraktionen über die Spitze gehen möchten, bis zu dem Punkt, wo das, was Sie interagieren, mit keinem oder bis zu dem Punkt, an dem die Interaktionen keinen Zweck mehr erfüllen. Also, selbst auf dieser Seite, wo es scheint, als hätte alles eine Interaktion, es dient alles einem Zweck. Alles, mit dem du interagierst, ist ein anklickbarer Link, der dich zu einer anderen Seite bringt mehr Inhalte bereitstellt oder etwas öffnet. Wenn Sie also hier zu diesem Inhalt gehen, ist dies nur reine Inhalte, also braucht es keine Interaktion, und es passiert nicht. Also macht es Sinn für dasselbe mit allen Animationen hier unten, obwohl alles animiert wird, sobald es im Frame ist, hat es gestoppt, also ist es leicht zu lesen, und Sie könnten verstehen, was los ist. Also, was Sie wollen, ist nur, dass alles sich die ganze Zeit bewegt, vor allem Bereitstellung von Interaktionen auf Elementen, die keine Aktion haben, nachdem Sie also den Zeh über diese und über waren , um in irgendeiner Weise zu animieren. Sie würden dann denken, dass es ein Link oder etwas anklickbares ist, aber Sie würden immer wieder darauf klicken, aber nichts würde passieren, so dass nur eine Menge Verwirrung für den Benutzer erzeugt. Also das ist wirklich der Punkt, den ich versuche, hier nach Hause zu fahren, ist, dass jede Interaktion einen Zweck braucht, oder es muss eine Interaktion nur für umsetzbare Elemente auf dieser Seite geben. Äh, eine Sache, die ich finde, es ist nett. Es sind nur diese kleinen subtilen, bewegen sich um Charaktere, die diesem Ereignis mehr Leben auf der Website bieten. Aber weil sie ausgeblendet sind, wissen Sie, dass sie nicht anwendbar sind. Selbst nur, ähm, der Cursor nicht geändert, wenn Sie über sie bewegen, bietet auch nur das zusätzliche bisschen Feedback, das Sie wissen, es ist nur für die Dekoration da. Und es ist kein tatsächlicher Gegenstand. Oh, sind verwertbare Artikel 9. Übergänge und Animationen hinzufügen: Nun, da wir einige einzigartige Benutzerinteraktionen erforscht haben, gehen wir auf unsere Webseite und wenden unsere eigenen Interaktionen an. So wie zuvor wird alles nur einige Klassen zur Webseite hinzufügen. Aber wir werden etwas genauer erklären, was vor sich geht. Wie Sie für viele der Omen sehen konnten, wenn Sie den Mauszeiger über sie bewegen, ist es sehr abrupt, wenn Sie Zustände von der Nicht-Howard zu schweben und ist besonders offensichtlich für das mobile Menü. Denn wenn Sie darauf klicken, erscheint das Menü sehr abrupt. Wir wollen also diese plötzlichen Veränderungen loswerden und einen etwas glatteren Übergang ermöglichen. Also werden wir durch einen Code gehen und unsere Interaktionen finden, um Elemente zu tun. Wir werden die beiden auf unserer Seite anwenden. Also für jetzt, lassen Sie uns einfach die reibungslosen Übergänge liefern. Also haben wir einen reibungslosen Übergang Begriff Menü, schalten Sie durch den Übergang lange zu unserem Menü, und dann diejenigen alle hier, die unser Übergang zu unserer grundlegenden Schaltfläche ist. Ich muss den ganzen Weg bis zum Ende der Seite gehen, oder ich denke nicht den ganzen Weg, Ähm, Ähm, aber zu unseren sozialen Medien wird reibungslosen Übergang anwenden. Überlassen Sie den Tool-Tipp für jetzt unserem Social-Media-Inhaber. also die glatten Übergangsklassen anwenden, können Sie jetzt sehen, wenn Sie den Mauszeiger über Elemente der Seite bewegen, es hat einen schönen, reibungslosen Übergang, also ist es nicht so abrupt wie vorher. Dies ist vor allem auf unserem mobilen Menü offensichtlich, wo, wenn Sie es klicken, das Menü gleitet jetzt schön wie wo, bevor es nur irgendwie auf Sie für mobile Menü umschalten, wenn Sie klicken und Sie könnten sogar sehen, das Hamburger-Symbol sich ausschließlich von den Hamburgern in ein X. Also wieder, es gibt nichts super verrückt über die Spitze. Aber es sind nur diese kleinen Details, die ein bisschen mehr Professionalität oder einfach nur eine Art von geben , dass Kirsche oben auf einer Website. Eso. Wir gehen zurück zu unserer Social-Media-Abteilung, und wir werden den Tool-Tipp anwenden. Dies ist also eine interessante Benutzerinteraktion, die ich gerne mache, ein Special mit Symbolen, bei denen Benutzer vielleicht nicht immer wissen, was das Symbol bedeutet , besonders für soziale Medien, wo immer mehr Social-Media-Plattformen herauskommen jeden Tag, also ist alles, was es tut, nicht. Wenn Sie mit dem Mauszeiger über eine kleine Poppet-Box erscheint und animiert in der Erklärung, auf welche eine Social-Meet-Media-Plattform Ihre, ähm, über klicken Sie können sehen Hier ist Instagram auf Spa. Sh Könnte 10 denken, Dan und Twitter. Also eines der größten Features ist, dass wir von Anfang an auf unsere Website anwenden wollten . Das neue Layout war dieser große Blob hier, und man konnte jetzt sehen, ist irgendwie langweilig. Es ist nur interessant, weil es nicht die gleiche Kastenform ist, aber sie sitzen einfach irgendwie dort. Also, was wir tun werden, ist in unser JavaScript zu gehen. Wir werden hier zu dieser Interaktion kommen, um Artikel zu tun, das das einzige Element und Javascript, das wir haben, ist. Und wir werden diesen Code einfach ungewöhnlich hier. Indem wir das tun, werden wir unseren Blob dazu bringen , , zwischen zwei Staaten zu animieren. So hat es es. Es ist eine Form, und dann wandelte es sich langsam in den anderen Zustand und geht zurück. Damit Sie das sehen können, haben wir jetzt unsere Morphin-Blobs. Also, wenn jemand auf die Website kommt, werden sie sofort ihre Aufmerksamkeit auf sich ziehen. und hoffentlich einen sehr bleibenden Eindruck hinterlassen. Das ist es also für unsere Benutzerinteraktionen für unsere Webseite. Hoffentlich können Sie jetzt sehen, dass bei Andys Benutzerinteraktionen das ist , was Page viel besser aussieht als das, was wir angefangen haben. 10. Aussagekräftige Bilder verwenden: Das letzte Thema, das wir behandeln werden, sind Bilder und Bilder. Ich meine nicht nur statische Bilder, aber es könnte auch Video-Geschenke sein oder und sie Art von Illustration. Keine Bilder haben die Macht, eine Website zu erstellen oder zu brechen, daher ist es wichtig, die Zeit und Mühe zu setzen, um die richtigen Bilder zu bekommen. Meiner Meinung nach, jede Website Bilder sollte es originell und qualitativ hochwertig sein, aber das ist nicht immer möglich, wegen der Ausrüstung oder Budgetbeschränkungen. Also das nächste Beste, wenn Sie nicht Ihre eigenen hochwertigen Bilder aufnehmen können, ist es, einige wirklich gute Stockfotos zu bekommen. Also bin ich Spritzer. Eine Website, die viel Software hat, wurde von professionellen Fotografen genommen wurden Amateurfotografen auf der ganzen Welt auf ihre völlig frei, jedes der Bilder für den kommerziellen und persönlichen Gebrauch zu verwenden. Es ist also ein großartiger Ort, um Bilder zu erhalten, wenn Sie nicht die Fähigkeit haben, Ihre eigenen zu bekommen. Davon abgesehen, das ideale Bild, wie ich bereits erwähnt, ist das ideale Bild, wie ich bereits erwähnt,zu gehen und Ihr eigenes Bild von Ihrem Unternehmen zu bekommen, oder von Ihnen oder von Ihrem Produkt, und machen Sie es persönlich zu Europa auf Ihrer Website, um die ursprüngliche So jetzt, da wir wissen, wie wichtig Bilder sind und welche Art von Bildern auf unserer Website verwendet werden sollen, lassen Sie uns weitermachen und dieses Wissen auf unser Klassenprojekt anwenden. So können Sie hier sehen, dass die Bilder, die ich jetzt habe, ziemlich Land sind. Sie sind nur zufällige Stock Fotos, die ich packte von Google, aber sie nicht wirklich in unsere Webseite so viel binden. Ich meine, ich denke, ich mache ein bisschen in dem Sinne, dass sie irgendwie computerbasiert sind. Das hier ist, ah, Website, Ähm und das hier ist genau wie ein Laptop in Technologie, aber es ist nicht so im Zusammenhang mit unserem Klassenprojekt oder unserer Webseite. Also hatte ich kein riesiges Budget, um zu gehen und einen professionellen Fotografen dazu zu bringen , Fotos in unserem Ticket , Fotos in unserem Ticketzu machen. Aber ich war in der Lage, mit meinem Handy gut genug zu bekommen. Also und manchmal ist das alles, was Sie brauchen, ist nur ein gutes Telefonbild von seiner immer noch hohen Qualität und ist sinnvoll und Bindungen in Ihre Seite. Dann ist das perfekt. Also, wenn Sie zu unserem get Hub Repo gehen, was wiederum der Link ist in unserer Klassenbeschreibung. Gehe zu den Bildern. Sie können eine Menge Bildfarbe sehen. Also das ist diejenige, die ich für unseren Blob verwenden möchte. Wir kopieren einfach die Bild-Adresse, öffnen eine neue Zeit und fügen sie hier ein und dann können wir das vollständige Bild sehen. Also ist es nur ich halte meinen Laptop mit dem Bild oder mit dem Bildschirm, der unser Arbeitsprojekt zeigt , arbeiten Code Pet Project. So ist es, wie ich mehr Relevanz war, dass das Bild mit was zu tun hat? Die Webseiten, die angezeigt werden. Also, das ist nur kopieren Sie die Bild-Adresse hier, dann gehen Sie zurück. Teoh arbeitet. Projizieren und nach unten scrollen. Teoh sind so, äh, SPG und hier haben wir das Bild. Also werden wir dieses Bild einfach hier ersetzen, bevor wir es gerade kopiert haben. Geben Sie es einfach ein zweites Update und es ist also nicht das beste Bild der Welt. Wie gesagt, es wurde mit meinem ah genommen, Handy, nicht ein professioneller Fotograf, aber es bekommt den Punkt über, und es hat viel mehr Bedeutung für diese Seite als nur ein zufälliges Bild von jedem Laptop. Also, für ein Bild hier unten. Das Bild ist nicht so schlimm, aber ich dachte, wir könnten es etwas besser machen. Das Bild ist nicht so schlimm, Also für diese Route, anstatt meine eigene zu nehmen, bin ich einfach über den Stockport gefahren. Aber es ist ein hochwertigeres Bild, und es ist eigentlich ein Foto, das ich auf zwei, ähm, Squash. Ich denke, wir könnten sagen, dass es ursprünglich genommen wurde, obwohl es ursprünglich nicht für dieses Projekt gedacht war. Also werden wir einfach sehr schnell wieder kopieren, Bild-Adresse und dann fügen Sie es in die neue Spitze, so dass wir das vollständige Bild sehen konnten. Also nur ein bisschen mehr Code. Und es ist meine eigentliche Arbeitsstation. Es bindet also an unser Projekt in dem Sinne, dass es ein bisschen mehr ist oder es in unsere Seite in dem Sinne gebunden ist, dass es persönlich für mich war, anstatt nur die zufällige Arbeitsstation eines anderen . Also, um dieses Bild zu aktualisieren, werden wir nur hier nach unten scrollen, bis wir unsere Beschreibungen Abschnitt finden. Und dann haben wir unsere Sektion Hintergrundbild, und wir werden einfach diesen Hintergrunddurchschnitt ändern. Sie sind gut, was wir gerade kopiert haben und lassen Sie es einfach aktualisieren. Äh, tut mir leid, und gerade hier würde ich mich nur erfrischen. Niemand kannte Druck. Ok? Und da ist unser neues Bild. Also wieder, es ist auch eine viel höhere Qualität als das Bild, das dort war. Und es hat mit mir und meinem Projekt zu tun, denn es sei denn, das ist meine Arbeitsstation, Also wieder, die Hauptsache, die ich versuche, hier nach Hause zu fahren, ist eine schiere Bilder haben mit Ihrem Inhalt und der Nachricht zu tun , die Sie versuchen, über zu gelangen. Und hoffentlich können Sie das mit diesen beiden Bildern sehen. , Es macht definitiv mehr Sinn,diese zu haben und was vorher auf der Seite war. 11. Schlussbemerkung: Also, das ist es für unsere Techniken. Wir haben Layup-Bilder, Typografie, Farbschemata und Benutzerinteraktionen diskutiert Typografie, . Also werde ich Sie mit der Herausforderung überlassen, den Endzustand über das Klassenprojekt zu übernehmen und weiter damit zu gehen. Also nehmen Sie die Techniken, mit denen wir gearbeitet haben, und wenden Sie sie oder auf den endgültigen Zustand an. Das könnte also alles sein, von dem Ändern des Farbschemas zu etwas, das Ihnen ein bisschen besser gefällt , fügen Sie Ihre eigenen Bilder hinzu, die Sie aufgenommen haben, wohin Sie gehen, und ordnen Sie das Layout komplett neu an, äh, machen es sich zu eigen. Also, wenn Sie meine Füße zurück wollen, werde ich mir dieses Kulturprojekt ansehen, aber auf Mantel, wenn Sie es speichern. Einfach auch das Tag Matthew Fornier Skulptur, die ich alle Klasse Produkt suchen konnte wo alle Projekte, die Sie gearbeitet haben, und ich könnte die Kommentare direkt hinterlassen . Ich hoffe, Sie lernen etwas Neues und etwas Nützliches, und Sie sind jetzt ein besseres mit Designer und Entwickler, weil es auf uh, danke für das Ansehen