Website als Portfolio: Einfache und wirkungsvolle Änderungen zur Verbesserung von Aussehen und Funktion

1. Einführung: Hallo zusammen. Mein Name ist Jenna und ich bin die Künstlerin hinter jehna Ich bin ein Oberflächenmusterdesigner bei Grafik- und Webdesigner und Oren Creative mit Sitz in Sydney, Australien. Wenn Sie kreativ sind und sich wie ich engagieren, mussten Sie wahrscheinlich eine Website erstellen, um Ihre Arbeit am besten zur Geltung zu bringen. Kreative möchten natürlich, dass diese Website so schön, eindrucksvoll und einprägsam So können wir an potenzielle Kunden oder Kunden versenden. Im Laufe der Jahre war es für mich als wachsender Designer unerlässlich, atemberaubende Portfolio-Websites zu erstellen, sowohl ästhetisch als auch funktionell Am besten zeigst du meinen Spaziergang. Mit meinem Bachelor-Hintergrund und meiner Erfahrung im Bereich Design konnte ich Design Thinking auf meine Seite bringen. In Kombination mit jahrelanger Erfahrung im Betrieb sowohl des Portfolios als auch der E-Commerce-Websites hatte ich viel Zeit, um Fehler zu machen und die Grundlagen des Designs für Web Insider wirklich zu erlernen. In diesem Kurs werde ich Sie durch zehn umsetzbare Schritte führen, die einfach und dennoch effektiv sind, um Ihre Website schnell zu verbessern Wir werden eine Reihe grundlegender Designelemente behandeln , die Websites kohärent und schön machen . Dinge wie Typografiefamilien und effektive Farbpaletten sowie weitere technische Verbesserungen wie die Korrektur Ladegeschwindigkeit Ihrer Website und die Erstellung einfacher und cleverer Layouts mit PNG-Bildern während des gesamten Kurses bestehen eine einfache einseitige Website und die zehn Tipps darauf anzuwenden So können Sie Schritt für Schritt visuell sehen, welche Auswirkungen jeder Tipp auf die Website hat. Und fange an, dir vorzustellen, wie das deine eigene Seite verbessern wird. Dies ist kein Webentwicklungskurs, sondern konzentriert sich auf Grafikdesign speziell für Websites. Anfänger können diesen Kurs auf jeden Fall besuchen, aber dieser Kurs richtet sich in erster Linie an Personen, die im Begriff sind, ihre Website zu erstellen , oder die bereits eine Website haben, die sie ästhetisch und funktionell verbessern möchten Mein Hauptaugenmerk liegt darauf , einfache Änderungen an Ihrer aktuellen Website vorzunehmen , damit die Besucher weiterhin an Ihren Inhalten interessiert sind. Am Ende dieses Kurses werde ich Sie dazu bringen, anders über Ihre Website nachzudenken. Sie werden über ein gutes Verständnis der Designgrundlagen und was noch wichtiger ist, über eine umsetzbare Liste von schnellen Änderungen verfügen, die Sie vornehmen können , um das Erscheinungsbild und die Funktion Ihrer Website erheblich zu verbessern und die Funktion Ihrer Website Ich freue mich sehr, dieses Thema zu unterrichten. Also lasst uns gleich reinspringen. 2. Was du lernen wirst: Bevor wir diesen Kurs beenden, lassen Sie uns kurz über das Format der Lektionen sprechen und darüber, was Sie lernen werden. Die zehn Tipps in diesem Kurs werden in drei Kategorien unterteilt. Markenbildung, Interessenwahrung und Funktionalität. Sie können sich diese drei Kategorien als das Aussehen, die Haptik und die Funktion Ihrer Website vorstellen . Falls Sie sich Sorgen machen, spielt es keine Rolle, auf welcher Plattform Ihre Website basiert. Du wirst diese Tipps auf Godless anwenden können. Der größte Teil dieses Kurses ist Branding. Bevor Sie in Panik geraten, ich weiß, dass Branding ein bisschen beängstigend sein kann. Sie denken vielleicht, ich habe keine Marke, ich mache nur nette Dinge. Tatsache ist jedoch, unabhängig davon, was Sie kreieren, eine Markenidentität haben. Einfach ausgedrückt, eine Marke ist eine Reihe von Merkmalen, die Ihre Produkte von anderen unterscheiden Dies kann aus einem Logo, bestimmten Schriftarten, einem Farbschema und vielen anderen Faktoren bestehen. Nun, diese Dinge helfen zu definieren, wer Sie sind, und sollten Identität, Persönlichkeit und Werte Ihrer Marke widerspiegeln. In diesem Kurs behandeln wir einige Branding-Elemente , die eine Website aufwerten können Und wir werden darüber sprechen, wie Sie diese Elemente auswählen können , um Ihre Markenidentität am besten widerzuspiegeln. Sobald Ihr Branding auf Ihrer Website klar ist, gehen wir in die Kategorie „ Interesse behalten“ über, was Sie sich vorstellen können, um das Erscheinungsbild Ihrer Website zu verbessern . In diesem Abschnitt werden eine Reihe von Techniken behandelt , mit denen Sie Ihr Publikum weiter ansprechen und es länger auf Ihrer Website halten können. Schließlich dreht sich in den letzten Lektionen alles um die Funktion von Websites. Dieser Abschnitt hilft Ihnen dabei, Ihre Website schnell zu optimieren, damit die Benutzer all die andere harte Arbeit genießen können Sie in Ihre Website gesteckt haben. Es gibt nichts Schlimmeres, als eine schöne Website zu erstellen, aber niemand sieht es, weil das Laden zu lange dauert. In jeder Lektion wende ich den entsprechenden Tipp auf diese einfache einseitige Website an Sie können allmählich sehen , welche Auswirkungen sie haben. Obwohl ich diese Änderungen auf Wordpress demonstrieren werde , werde ich in diesem Kurs eigentlich keine Webentwicklung unterrichten in diesem Kurs eigentlich keine Webentwicklung Ich möchte auch in die Suchmaschinenoptimierung einsteigen. Wenn Sie der Meinung sind, dass eine einfache Website vor all meinen Tipps einfach auf jeder Website-Hosting-Plattform anzuwenden sein sollte auf jeder Website-Hosting-Plattform anzuwenden , indem Sie ein einfaches Frontend-Design verwenden. Wenn Sie noch nie eine Website erstellt haben, kein Problem. Dies sind einfache Konzepte , die Sie anwenden können, wenn Sie die Grundlagen der Webentwicklung erlernen. Ich empfehle Ihnen, sich zuerst alle Lektionen anzusehen und dann zu entscheiden , welche Tipps Sie anwenden werden, je nachdem, wie relevant sie für Ihre Website sind Im nächsten Video werden wir über Ihr Projekt sprechen. 3. Dein Projekt: Ihr Projekt für diesen Kurs, wir werden mindestens einen oder mehrere der zehn Tipps umsetzen , die ich Ihnen geben werde. Ihr erster Schritt besteht darin, einfach einen Screenshot Ihrer Website so zu machen, wie sie jetzt ist. Sobald du deine ausgewählten Tipps umgesetzt hast, mache einen weiteren Screenshot und poste ihn in der Projektgalerie, damit wir die Auswirkungen davor und danach vergleichen können . Mir hat dieses Projekt sehr gut gefallen, weil es super einfach zu implementieren ist und Sie am Ende eine großartige visuelle Aufzeichnung und ein gutes Verständnis der Unterschiede, dieser kleinen Änderungen und der Änderungen an Ihrer Website haben werden. Du kannst dein Projekt über die Schaltfläche „Projekt erstellen“ unter diesem Kurs hochladen die Schaltfläche „Projekt erstellen“ unter und deine Screenshots teilen diese Weise kann ich Ihnen Feedback zu allen Änderungen geben , die Sie an Ihrer Website vornehmen. Ich habe auch eine einfache Branding-Arbeitsmappe bereitgestellt die Sie ausfüllen können, um diese Änderungen zu vereinfachen Dies hilft insbesondere dabei, das, was Sie in Lektion 123 gelernt haben, zu festigen was Sie in Lektion 123 gelernt haben Wenn dies also Ihr Schwerpunkt ist, teilen Sie uns dies bitte mit. Dies ist ein Projekt für. Lass uns mit Lektion Nummer eins beginnen 4. Branding: Typografie: Fangen wir mit Tipp Nummer eins an. Wie Sie ihre gestalteten Websites verbessern können indem Sie die Typografie auswählen Es ist so leicht zu unterschätzen welche Macht Schriften auf unserer Website haben können Aber ich glaube, dass Schriftarten tatsächlich das wichtigste Kapital Ihres Brandings sind. Sie vermitteln schnell die Identität Ihrer Marke, geben wichtige visuelle Hinweise die Auditinformationen, die eingelesen werden sollten , und definieren den allgemeinen Ton und die Stimmung einer Seite Sie sind auch ein wichtiges Element, um eine hervorragende Benutzererfahrung bei der Auswahl von Schriftarten zu gewährleisten . Das Wichtigste, was zu beachten ist, ist die typografische Hierarchie Heute ist die typografische Schrifthierarchie einfach ein System zur Anordnung von Schriften, um den Angreifern die Bedeutung von Informationen zu vermitteln Angreifern die Bedeutung von Wenn sie effektiv durchgeführt wird, kann die FUN-Hierarchie zu einer viel besseren Benutzererfahrung führen. Verleihen Sie Ihren Inhalten Struktur und visuelle Organisation stärken Sie die Markenbekanntheit haben drei grundlegende Websites haben drei grundlegende Hierarchien, die Sie berücksichtigen müssen. Überschriften, Unterüberschriften und Fließtext. Einfach, oder? Bei der Auswahl dieser Fonds verwenden Sie etwas, das als Schriftpaarung bekannt ist. Das Ziel der Schriftpaarung besteht darin, verschiedene Schriftarten auszuwählen , die auf harmonische Weise einen visuellen Kontrast erzeugen Bevor wir auf einige Beispiele für Schriftpaarungen eingehen, definieren wir einige Begriffe. Wir haben gerade darauf eingegangen, welche Hierarchie und Schriftpaarungen voneinander abweichen. Aber hier sind einige andere Standard-Typografie-Zeiten. Serifen, eine Schrift mit einer kleinen Projektion am Ende der kleinen Das berühmteste Beispiel dafür Times New Roman San-Serif-Schriftarten. Sie sind die am häufigsten verwendeten Schriftarten , die Sie im Internet sehen Dies sind Schriften ohne Striche oder Verzierungen Ein Standardbeispiel dafür ist Colibri. Bei Schriftschriften handelt es sich im Wesentlichen um Schriften , die Handschrift und geschriebene Serifen nachahmen, also den Serifen sehr ähnlich sind, aber durchgehend Strichstärke und -stärke beibehalten Da Sie nun wissen, womit Sie arbeiten, wählen wir einige Schriftarten aus. Das ist der beste Topf. Eine Grundregel der Schriftpaarung lautet: Gegensätze ziehen sich an. Ich möchte, dass Sie bei der Auswahl der Schriftarten zwei Dinge berücksichtigen. diese Schriftarten die Art der Dienstleistung oder des Produkts wider , das ich vertrete? Und sie sind alle leicht zu lesen. Berücksichtigen Sie bei der Auswahl der Schriftarten die Stimmung, die Ihre Marke vermitteln soll, Ihre Marke verspielt und zugänglich sein Oder hat es eine minimale böhmische Füllung? Schriftkombinationen vermitteln die allgemeine Ästhetik Ihrer Marke Schauen wir uns diese Beispiele an. Die erste betrifft minimalistische Schriftpaarungen, die ich gerade mit Google Fonts zusammengestellt habe Sie können Google-Schriftarten ganz einfach auf Ihren Computer herunterladen , und viele Website-Builder haben sie bereits verfügbar. Was an diesen Kombinationen funktioniert und diese minimalistische Atmosphäre erzeugt, ist die Lesbarkeit und Struktur Diese Schriften sind alle serifenlos und die fehlende Projektion auf die Buchstaben sowie die Abstände, die wir hier haben, für einen sehr sauberen und praktischen Look Unser zweites Beispiel ist hier, haben Sie eine luxuriösere, hochwertigere Ästhetik. Diese Kombinationen sind sehr praktisch, Gegensätze ziehen sich an, indem sie Serifen und Schriftschriften für die Überschriften kombinieren und dies dann durch eine wirklich saubere serifenlose Schrift für den Haupttext unterstützen . Dieser hier hat eine sehr schöne, raffinierte Atmosphäre und ist ein Beispiel für eine Schriftkombination, die Sie kaufen können, in diesem Fall auf Etsy Wir werden am Ende der Lektion etwas mehr darüber sprechen . Letzte Frontpaarungen strahlen eine sehr verspielte und telefonische Atmosphäre aus. Weiche, runde Schriften sorgen für ein verspieltes Flair im Vergleich zu klaren Cera-Schriften, die eine luxuriösere Ästhetik vermitteln. Du kannst mit Kombinationen herumspielen , um zu sehen, welche Art von Vibe sie vermitteln, und herauszufinden welche Art von Ästhetik du evozieren willst Für eine einseitige Website werde ich mich für einen ziemlich hochwertigen Look entscheiden Also werde ich dieses Schriftpaar hier verwenden. Ich fange an, das auszufüllen, und ich werde die Branding-Arbeitsmappe erstellen, die Sie in dieser Lektion zugreifen können Ich habe den Schriftnamen H so eingegeben, wie er passt. Ich werde auch aufhören, einige Wörter auszufüllen , die die Ästhetik repräsentieren, die ich zu kreieren versuche. Aber wir werden im Laufe der Zeit auch noch etwas hinzufügen. Nachdem wir nun etwas Theorie gelernt haben, wenden wir sie auf diese Seite an Wir haben hier eine grundlegende typografische Hierarchie , was gut ist Und die Schriften sind gut lesbar. Aber sie bringen nicht wirklich etwas anderes zur Seite. Sie stehen nicht gerade für das anspruchsvolle, frische Feld, das ich anstrebe. Ersetzen wir sie also durch die Schriftpaarungen, die er zuvor ausprobiert hat Ich werde damit beginnen, so etwas wie diese Überschriftenschrift zu erstellen, da es eindeutig etwas sehr Wichtiges ist. Und dann wäre so etwas ein Slogan und das ist offensichtlich ein Fließtext Ich möchte, dass alle meine Überschriften in Großbuchstaben geschrieben werden. Das ist offensichtlich zu klein, aber wir machen es einfach schön groß. Ändern Sie die Zeilenhöhe ein wenig. Und ich möchte, dass sie alle klein geschrieben sind. Und dann wollen wir diese Ganzkörperschrift und eine gut lesbare Schrift ohne Serifen machen und eine gut lesbare Schrift ohne Serifen Sie können bereits den Unterschied sehen, den das auf der Seite macht Denken Sie bei der Auswahl Ihrer Typografie daran, ich empfehle, nicht mehr als drei verschiedene Schriftarten für Ihre gesamte Website Die Verwendung von Termini Fonts, Schriftstilen oder Schriftgrößen kann dazu führen, dass die Website unstrukturiert aussieht Die Dinge mit maximal drei Schriftarten sauber zu halten , ist kaputt. Ihre gesamte Website schafft eine visuelle Kohärenz und trägt dazu bei, Ihr Branding zu stärken Nachdem Sie Ihre Schriftarten haben, lassen Sie uns kurz darauf eingehen, wie Sie sie am besten verwenden können. Zuerst haben wir die Zeilenhöhe oder den Zeilenabstand, also den vertikalen Abstand zwischen zwei Textzeilen Untersuchungen zeigen, dass die richtige Verwendung von Leerzeichen zwischen Textzeilen das Verständnis um bis zu 20% verbessern kann Spaltenlänge gibt an, wie viele Wörter horizontal geteilt Die Spaltenlänge gibt an, wie viele Wörter horizontal geteilt werden, bevor zur nächsten Zeile 40 bis 60 Wörtern wird als visuell ansprechendster angesehen Lassen Sie uns die Ausrichtung einen Abstand zwischen den Zeichen definieren und lassen Sie eine Höhe die Höhe dieser Zeichen definieren. Fett und kursiv. Bei unterschiedlichen Formatierungsoptionen und Harmonie geht es darum , Kohärenz zwischen den Elementen herzustellen Wenn es um Typografie geht, bedeutet das, ähnliche Schriftarten und einheitliche Zeilenabstände und Formatierungen zu verwenden einheitliche Zeilenabstände und Formatierungen Also das ist ein Quadrat, aber die Formatierungstricks hier, ich werde diese Zeile hi machen, ein bisschen größer, um die Lesbarkeit zu verbessern Und dann vielleicht auch einen Button groß schreiben , um die visuelle Hierarchie Wir wollen es nicht zu groß haben, aber das sieht nett aus, ein bisschen lesbarer Dann diesen Button, ich werde ihn einfach in Großbuchstaben umwandeln und die Schrift in denselben Satz ändern , Sarah Ich werde auch all diese anderen Schriftarten durchgehen und ändern , um sie auf der gesamten Website einheitlich zu halten . Wenn die Größe und der Abstand auf der gesamten Website einheitlich bleiben , wird es einfach viel kohärenter aussehen. Das sieht schon so viel besser aus. Sie können wirklich schon sehen, welche Unterschiede die Website macht. Es ist klarer, leichter zu lesen und es fühlt sich mit dieser klaren, luxuriösen Ästhetik, die ich zu repräsentieren versuche, markenähnlicher an. Das ist bisher nur ein Tipp. Bevor wir mit der nächsten Lektion fortfahren, möchte ich kurz auf das Front-Copyright eingehen. Ich habe dieser Lektion eine Ressource beigefügt, in der einige Orte aufgeführt sind , an denen Sie urheberrechtlich freie Schriften finden, sowie Orte, an denen Sie Schriften kaufen können den meisten Website-Plattformen können Sie jede benutzerdefinierte Schriftart auf Ihre Website herunterladen. Stellen Sie jedoch immer sicher, dass Sie die entsprechende Lizenz erwerben , bevor Sie eine Schriftart installieren. Oft können Sie auf diesen Seiten auch vorgefertigte Schriftpaarungen erwerben auf diesen Seiten auch vorgefertigte Schriftpaarungen Wenn Sie keine benutzerdefinierten Schriftarten herunterladen möchten, können Sie das, was Sie hier gelernt haben, jederzeit anwenden und Schriftpaarungen mit vorinstallierten Schriften erstellen Wenn du noch einen Schritt weiter gehen möchtest, kannst du deine eigene Handschrift jederzeit in eine schöne Schrift umwandeln, die du auf deiner Website verwenden Es gibt einige wirklich tolle Kurse hier auf Skillshare, die dir auch zeigen können, wie das geht 5. Branding: Farbpaletten: Bei Tipp zwei dreht sich alles um Farbpaletten. Das Farbschema Ihrer Website ist ein wichtiger Bestandteil der Schaffung einer schönen Marke. Eine kohärente Farbpalette, die die Identität Ihrer Marke repräsentiert , wird das Erscheinungsbild Ihrer Website erheblich verbessern Laut einer Studie der Universität Lille kann Farbe die Markenbekanntheit sogar um bis zu 80 Prozent steigern . Es gibt ein paar Dinge, die ein gutes Farbschema für Websites unerlässlich machen . Farben. Das Erste, was die Leute bemerken werden , wenn sie Ihre Website besuchen. Farben bestimmen die visuelle Identität Ihrer Website und Ihrer Marke. Ein gutes Farbschema kann den Stil und die Konsistenz von Your Side stark beeinflussen Farben rufen emotionale Reaktionen hervor, die sich darauf auswirken können, wie sich jemand fühlt, wenn ich Ihre Website besuche Und schließlich schaffen Farben eine visuelle Hierarchie. Das Farbschema einer Website ist mehr als nur Ihr Logo und Ihre Hintergrundfarbe. Es enthält jede einzelne Farbe , die auf Ihrer Website erscheint. Kopf hoch, Fuß, Abschnitte, Knöpfe, Textfarben. Auch wenn die Wärme in Ihren Fotos genutzt wird, tragen sie alle zur Farbpalette bei, die Sie präsentieren. Denken Sie daran, dass 60% der Menschen neue Produkte allein aufgrund der Farbe akzeptieren oder ablehnen. Die richtige Palette zu finden ist so wichtig und spielt eine große Rolle bei der Gestaltung der Stimmung und Ästhetik Ihrer Wissenschaft. Zum Glück ist es nicht schwer zu wissen, wo man anfangen soll. Wenn Sie Künstler oder Designer sind, kann es einfach sein, Farben auszuwählen, die Ihre Marke repräsentieren. Schau dir einfach deine Arbeit an. Gibt es Farben, die du immer verwendest und zu denen du dich von Natur aus hingezogen fühlst? Vielleicht verwenden Sie bei der Auswahl einer Palette für Ihre Website und Marke nur warme Farbtöne oder kontrastierende Ajanta-Farben. Wenn kontrastierende Ajanta-Farben. Wenn Sie Farben aus Ihrem eigenen Logo oder Produkt zeichnen, Farben aus Ihrem eigenen Logo oder Produkt zeichnen wird ein einheitliches Erscheinungsbild gewährleistet Sie können das sogar auf eine persönlichere Ebene bringen indem Sie sich die Kleidung und Artikel ansehen, die Sie kaufen, in ähnlichen Farben oder Tönen, zu denen Sie sich hingezogen fühlen. Diese Artikel stellen dar, wer Sie sind, brandneu rund um Ihre Identität. Dies kann eine wirklich gute Möglichkeit Ihre Website zu präsentieren. Alternativ können Sie die allgemeine Stimmung Ihres Rückens analysieren . Denke über die Ästhetik nach, die du zu präsentieren versuchst. Möchten Sie, dass sich Ihre Website minimalistisch, aufgehellt, mutig, böhmisch, vielleicht sogar düsterer gotisch liest mutig, böhmisch, vielleicht sogar Bestimmte Farben werden mit bestimmten ästhetischen Bewegungen in Verbindung gebracht . also Ihre Ästhetik kennen, kann dies die Auswahl dieser Farben erheblich erleichtern. Also, wie viele Farben sollten in deiner Palette sein? einfacher Ansatz besteht darin, einer ähnlichen Hierarchie wie bei der Typografie zu folgen einer ähnlichen Hierarchie wie bei der Typografie zu und eine Primär -, Sekundär- und Akzentfarbe zu wählen Sekundär- und Akzentfarbe Eine allgemeine Regel im Webdesign lautet 603010. Diese Regel besagt, dass 60 Prozent der Fläche die dominierende Farbe sein sollten, 30 Prozent die Sekundärfarbe und zehn Prozent der Akzent Natürlich sind Regeln dazu da, gebrochen zu werden , und ich empfehle dringend experimentieren und die Menge an Farben zu verwenden, die Ihrer Meinung nach am besten zu Ihrer Marke passen Wie bereits erwähnt, sind bestimmte ästhetische Bewegungen mit bestimmten Farben verbunden. In diesem Beispiel hier dreht sich also alles um eine minimalistische, saubere Ästhetik Minimalismus wird oft mit neutralen Farben und Erdtönen in Verbindung gebracht , was wir in diesen Beispielen sehen können Eine sehr gesättigte, helle Farbe hier zu haben , würde sich sehr fehl am Platz anfühlen. Formula Lux schau nochmal, neutrale Farben sind sehr wichtig Aber dieses Mal sind die Axonfarben gesättigter und wir werden mehr Präsenz und Rolle auf einer Website haben mehr Präsenz und Rolle auf einer Website Hier gibt es auch mehr Kontraste. Ich habe diese Palette tatsächlich speziell für unsere Mockup-Seite ausgewählt , um zu den Schriftarten zu passen , die wir zuvor ausgewählt haben Und ich habe sie zusammen mit den Hex-Codes in die Branding-Arbeitsmappe aufgenommen, damit ich sie kopieren und in die Site einfügen kann sie kopieren und in die Site einfügen Ich werde in Kürze darauf zurückkommen, warum ich sie ausgewählt habe. Wenn es darum geht, verspieltere und elegantere Paletten auszuwählen ist die Verwendung von Farben mit mehr Weiß durchaus üblich Dadurch kann ein schöner Pastell-Look entstehen. Diese Ästhetik spielt auch oft mit kontrastierenden und geteilten komplementären Farbkombinationen mit ziemlich hoher Sättigung Eine Palette wie diese ist mutiger und auffälliger als eine Palette wie diese, die raffinierter ist, aber trotzdem SPASS macht. Aber all diese Paletten sorgen immer noch für eine sehr freundliche, helle und fröhliche Stimmung Die Wahl der richtigen Kombination hängt von Ihrer Arbeit und der Stimmung ab , die Sie erzeugen möchten. Etwas, das Sie vielleicht auch in Betracht ziehen sollten, ist die Farbpsychologie. Psychologie ist im Wesentlichen die Idee, dass bestimmte Farben bestimmte Emotionen auslösen. In Bezug auf Webdesign wählen viele Designer Farben, die auf dem emotionalen Erlebnis basieren , das sie den Benutzern bieten möchten. Wenn Sie nicht wissen, wofür die einzelnen Farben stehen , kann Auswahl der Farben für Ihre Website die Auswahl der Farben für Ihre Website intuitiver werden. Nehmen wir also alles, was sie in dieser Lektion gelernt haben , ich werde hier angewendet. Die einzige Farbe ist derzeit auf dieser Website. Warum? Schwarz und irgendwelche Farben von den Fotos? Dies ist ein Modell einer Künstlerwebsite. Ich entschied mich für Farben, die von der Kunstgeschichte inspiriert sind, wie tiefes Blau und Ziele, die zeitlos und schön sind. Blues wird auch mit Kommunistengefühlen und Zuverlässigkeit in Verbindung gebracht , was meiner Meinung nach gut zu der Stimmung passen würde , die ich hervorrufen möchte Ich möchte auch viel Leerraum lassen , um ein frisches, sauberes Aussehen zu erhalten Derzeit ist die einzige Hintergrundfarbe Weiß. Also werde ich mit dem Hinzufügen von Hintergrundfarben beginnen und unter 603010 fallen Die Struktur wird die Farben visuell ausgleichen, wenn wir weitermachen. Ich werde den Hintergrund vorerst so belassen und ihn weiterentwickeln, wenn sich die Seite ändert. Ich mache dieser Schaltfläche schnell eine Akzentfarbe und ändere diese Schriften auch in die entgegengesetzte Farbe, und ändere diese Schriften auch damit sie besser lesbar Wir wenden uns endlich an die bisherigen Tipps, und es sieht schon so viel besser aus. Ich möchte vergleichen. Lassen Sie uns vergleichen. Das, ist es. Es ist nicht jetzt , dass wir einige Hintergrundfarben und etwas Typografie aufgetragen haben , das ist bereits geschehen , nur um Adam einen Tipp zu geben, zwei von zehn Und es sieht schon so viel besser aus als das. Einfach so, so viel besser. Ich finde das so aufregend. Gehen wir zu Schritt drei über 6. Branding: Bilder, Videos und deine Ästhetik: Nachdem wir uns nun mit Typografie und Farbe befasst haben, lassen Sie uns über die Macht von Bildern, Videos und Ihrer allgemeinen Ästhetik sprechen Videos und Ihrer allgemeinen Ästhetik Schöne Bilder sind kein zentraler Bestandteil einer Website, egal ob Sie ein Produkt oder eine Dienstleistung verkaufen oder einfach nur Informationen teilen. Sie festigen wirklich die Atmosphäre und Ästhetik einer Website. Gute Bilder, insbesondere wenn es um Produktbilder geht, können den Unterschied ausmachen, ob ein Benutzer konvertiert oder nicht. Auch wenn hochwertige Bilder Ihrer Website Professionalität verleihen. sicherstellen , dass die Bilder in Ästhetik und Ton konsistent Sie sicherstellen , dass die Bilder in Ästhetik und Ton konsistent sind, werden sie auf die nächste Ebene gebracht. Wenn Bilder aus demselben Fotoshooting stammen oder mit demselben Filter bearbeitet wurden, erhält eine Website eine Kohärenz , die mit dem Branding verknüpft werden kann , das Sie bereits mit Ihrem Farbschema erstellt haben Ich habe mit den Fotos hier zwei Beispiele für unterschiedliche Ästhetik erstellt . Auf der linken Seite bauen wir auf unserem minimalistischen Branding auf. Es gibt ein paar Dinge , die dafür sorgen, dass diese Bilder so gut zusammenpassen. Das Wichtigste, was hier zu beachten ist, ist, dass alle Bilder sehr warme, erdige Töne und eine ziemlich dunkle Bearbeitung haben erdige Töne und eine ziemlich dunkle Bearbeitung Das ist das gleiche Gefühl wie bei der minimalistischen Farbpalette, die wir kreiert haben Diese Bilder werden auch in Bezug auf Leerzeichen ziemlich ähnlich aufgenommen Bezug auf Leerzeichen ziemlich ähnlich Wenn du hier ein Bild mit helleren Schnitten und kühlen Tönen hinzufügst , wird das die Stimmung des Looks insgesamt verändern. Es ist wichtig, die Rolle jedes einzelnen Bildes im Ganzen zu berücksichtigen jedes einzelnen Bildes im Ganzen zu Diese Bilder rufen eine viel fröhlichere, verspieltere Atmosphäre hervor. Das würde mit einigen der weicheren Schriften und Brad oder Palettes, die wir erstellt haben, gut funktionieren weicheren Schriften und Brad oder Palettes, die wir Der Hauptunterschied besteht darin, dass diese Bilder bearbeitet wurden, dass sie eine viel höhere Belichtung haben, sodass sie hell und fröhlich bleiben Das sind so gut wie keine Punktrequisiten oder Farben auf diesen Bildern Die Gesichtsausdrücke und die nähere Positionierung an der Kamera sorgen für eine recht freundliche Atmosphäre Videoinhalte sind ein weiteres unglaubliches Tool, um Ihre Website aufzuwerten Videos sind eine großartige Möglichkeit, emotionale Konzepte ohne Worte zu vermitteln . Sie sind das perfekte Medium, um Ihren Arbeitsprozess hervorzuheben und potenziellen Zielgruppen schnell den Wert Ihrer Arbeit zu vermitteln den Wert Ihrer Arbeit Wenn Ihre Arbeit einen sehr praktischen Herstellungsprozess oder eine einzigartige Geschichte dahinter hat. Das Hinzufügen eines hochwertigen, gut gestalteten Videos mit diesen Details auf Ihrer Website verleiht Ihrer Website nicht nur ein Gefühl von Taktilität, sondern vermittelt auch visuell den Wert was Sie erstellt haben da ein Medium noch nie so zugänglich oder konsumiert wurde zugänglich oder konsumiert 96% der Befragten geben an , dass sie sich Videos ansehen, um mehr über ein Produkt oder eine Dienstleistung zu erfahren. Die Nutzung dieses Mediums ist ein Muss. weiteren Möglichkeiten, Informationen per Video auf Ihrer Website auszutauschen Informationen per Video auf Ihrer Website gehört ein Einführungsvideo Ihr Produkt oder Ihre Dienstleistung erläutert Ein Video mit Anweisungen zur Verwendung Ihres Produkts oder Ihrer Dienstleistung. Ein Video im Kampagnenstil, in dem hervorgehoben wird, wie sich Ihr Produkt oder Ihre Dienstleistung auf jemanden auswirken könnte. Eine Zusammenstellung von Kundenreferenzen oder Geschichten, Filmmaterial hinter den Kulissen oder Prozessvideos, die Ihnen helfen können, sich stärker involviert zu fühlen Wenden wir diese Theorie also hier an. Derzeit haben wir ein paar Bilder und sie sind alle sehr hochwertig, was großartig ist. Aber sie sprechen nicht unbedingt alle dieselbe Bildsprache. Diese haben einen etwas anderen Ton als die anderen und passen nicht wirklich zu die anderen und passen nicht wirklich dem Farbschema, das wir festgelegt haben. Nun, weil dies nur eine Modellseite ist. Ich habe kein bestimmtes Fotoshooting gemacht. Ich habe mir diese Bilder gerade auf Splash geholt. In diesem Fall verwende ich nur Fotos aus demselben Unsplash-Fotoshooting, nämlich diesem Ebenso besser, etwas in diesen Farbtönen wie diesen. Ich werde diese tatsächlich entfernen, nur weil sie nicht viel hinzufügen, weil sie hier sind. In der Tat, obwohl es wirklich schöne Bilder sind , die die Kohärenz der Website beeinträchtigen, indem sie wärmere Farbtöne Bei den meisten Bildern und Farben haben wir jetzt Blautöne, was nett ist. Ich möchte mehr von dieser ausgezeichneten Goldfarbe für meine Palette. Ich habe gerade dieses Bild aufgenommen und es in ein BATNA in voller Breite umgewandelt Es ist nichts Falsches daran, dasselbe Asset zweimal zu verwenden . In diesem Fall. Es wird helfen, die Seite zusammenzubinden. Lassen Sie uns das vorerst hier niederlegen. Jetzt. Wir haben keine Bilder mehr, aber wir machen nicht gerade die meisten anderen. Das haben wir. Dieses Bild ist zum Beispiel ein wirklich, wirklich schönes Bild. Und es knüpft dieses an, nur weil es aus demselben Fotoshooting stammt. Aber ich denke wirklich, wir könnten diesen Inhalt visuell interessanter gestalten . Ich denke, jeder kann daraus eine Art Collage machen und wir können mit der Beziehung zwischen unseren Fotos und dem Alkoholschema spielen zwischen unseren Fotos und dem Alkoholschema Wir können zu diesem Inhalt zurückkehren. Also fange ich einfach damit an, zwei sexuelle Spalten zu erstellen. Und ich werde dir gleich zeigen, was ich mit Collage meine. Wir möchten, dass dieses Bild im Mittelpunkt steht. Es wird also natürlich die meisten Immobilien beanspruchen. Dann möchte ich, dass die andere Seite eine der Farben ist, die in unserem Schema sind, steckt mit vielen coolen Stopp fest. Jetzt werde ich es duplizieren und invertieren. Und ich werde dieses Bild durch alles ersetzen, was sie sind, nur um das gleiche visuelle Aussehen beizubehalten. Das ist irgendwie der Basic-Look, den ich will, aber in der Mitte sieht er komisch aus Also werde ich mich für einen Split von etwa 70, 30 entscheiden. Das sieht ziemlich cool aus. Also werde ich jetzt einen Teil dieses Inhalts nehmen und ihn hier reinstellen. Die wichtigsten Dinge, die ich mitnehmen möchte, die Tatsache, dass es um Wohndesign geht und dieser letzte Satz, in dem es speziell um Pay-Pop-Bettwäsche aus Wolle und Heimdeko geht. Auf den Rest dieses Inhalts werde ich zurückkommen. Aber ich denke, wir können dasselbe Gefühl visuell vermitteln dasselbe Gefühl visuell ohne es nur als Standardtextabsatz anzuzeigen. Ich denke, das ist viel, viel effektiver. Ich habe in diesem Abschnitt auch geschrieben, verbessere deinen Raum. Ich denke, wenn ich sage, was You'll Work tut, anstatt was es eigentlich ist. Ich kann oft helfen, besser zu kommunizieren, was Sie anbieten. Ich möchte dieser Seite ein Video hinzufügen. Also nochmal, ich werde mir dieses Mal einfach ein urheberrechtlich freies von Pexels schnappen dieses Mal einfach ein urheberrechtlich freies von Pexels Ich suche auf den Tells dieselbe visuelle Geschichte wie der Rest meines Brandings. Dieser ist großartig. Fügen wir einfach a als Hintergrund einen neuen Abschnitt hinzu und setzen ihn in eine Schleife. Ich habe diesem Video gerade einige Texte hinzugefügt , da ich denke, dass es nur eine wirklich visuell dynamische Art , Informationen anzuzeigen. dieses Video hier haben, werden wir einfach die Aufmerksamkeit eines Benutzers erregen und ihm sofort mitteilen, worum es auf dieser Website geht? 7. Branding: Die Bedeutung deiner Geschichte: Bei Tipp Nummer vier dreht sich alles um dich. Dies ist möglicherweise der am meisten unterschätzte Vermögenswert , zu dem jede einzelne Person Zugang hat Dieser Vorteil ist Deine Geschichte. Und Ihr Y. Eine Geschichte auf Ihrer Website zu erzählen mag wie ein naheliegender Schritt erscheinen, aber er wird so oft übersehen und als unwichtig beiseite geschoben Ich werde Ihnen Ihre About-Seite auf Ihrer Website mitteilen. Vielleicht die wichtigste und wirkungsvollste Seite, die Sie erstellen. Priorisierung und Bereitstellung von Bereichen, in denen Sie Ihre Geschichte und Persönlichkeit auf Ihrer Website teilen können, ist sowohl eine schöne als auch äußerst effektive Methode, um mit dem Publikum wichtige Dinge zu erledigen, Verbindungen herzustellen und Vertrauen aufzubauen Ihre Geschichte ist so wichtig, weil sie Ihrem WACC ein menschliches Element verleiht Menschen sehnen sich immer nach Verbindung. Indem wir ein Stück von uns mit anderen teilen, können wir beginnen, eine Beziehung aufzubauen. Wenn jemand deine Geschichte liest und auf irgendeine Weise bewegt ist, sei es, weil er sich in dich einfühlt, eine Beziehung zu dir hat oder von dir inspiriert Diese Person ist jetzt unweigerlich engagierter und investiert in Sie und natürlich in Ihre Arbeit. Dieses Fundament der Verbindung erhöht plötzlich auch den Wert des Gehens. Wenn wir uns zum Beispiel ein Produkt ansehen und nichts darüber wissen, außer wie es aussieht. Wir geben ihm unbewusst einen Wert der ausschließlich auf diesem einen Aspekt basiert Wenn Sie jedoch die Menschen kennen, die das Produkt hergestellt haben, die harte Arbeit und die Prozesse, die in seine Herstellung geflossen sind, und die Inspiration, die dahinter steckt, warum sie der Meinung waren, dass und die Inspiration, die dahinter steckt, warum sie es auf dieser Welt existieren muss. Sie haben dasselbe Produkt als wertvoller angesehen. Oberflächlich betrachtet ändert sich nichts. Es ist Ihre emotionale Verbindung zu etwas, das diesen Wert erhöht. Das ist die Kraft, die das Erzählen Ihrer Geschichte haben kann. Indem Sie einfach Ihr Warum teilen, können Sie den Menschen helfen, den wahren Wert Ihrer Arbeit zu verstehen . Ich habe einige Beispiele für PFK-1-Möglichkeiten zusammengestellt Informationen über sich selbst auf Ihrer Website weiterzugeben Erstens haben wir diese Limonade, die eine Zeit lang auf Instagram im Trend lag , aber sie ist eine wirklich UNTERHALTSAME Ergänzung zu einer Website So etwas kann jemandem schnell und visuell einige persönliche Informationen über Sie Sie können die Optionen personalisieren und in Ihrem Stil beibehalten, um sie relevant zu halten Eine Auswahlliste mit interessanten Informationen über sich selbst zu haben interessanten Informationen über kann eine poetische und phone Möglichkeit sein, ein bisschen Persönlichkeit zu vermitteln , wenn die Anzeige dieser Informationen ziemlich visuell gehalten wird, ist es wahrscheinlicher ein Benutzer sie bewertet, als wenn es nur ein Textblock wäre Sie können auch Ihre Lieblingsdinge oder eine kurze persönliche Geschichte teilen . Meine Kassetten und deinen Stil zu verwenden, um deine Servicewerte oder jede andere Art von Information, die du teilen möchtest, zu segmentieren oder jede andere Art von Information, die du teilen möchtest, zu , ist eine weitere Technik, die du verwenden könntest, indem du Interaktivität hinzufügst, indem so etwas wie Schwebeeffekte verwendest Es hat also auch dazu beigetragen, die Interessen und das Engagement der Benutzer zu erhöhen , die Interessen und das Engagement der Benutzer . In Lektion 6 werden wir mehr über dieses Konzept erfahren. Derzeit habe ich auf meiner Website eine kurze Liste, um meinen Stil zusammenzufassen und du könntest hier auf jeden Fall auch süße Illustrationen hinzufügen Ich habe auch eine Zeitleiste mit meiner Geschichte und meinem Werdegang , damit die Leute verstehen können , wie ich dahin gekommen bin, wo ich bin. Ich habe hier auch ein paar Illustrationen verwendet , um das Konzept des Wachstums visuell zu unterstützen. Das Hinzufügen dieser persönlichen Informationen hilft Benutzern dabei, sich mit Ihnen zu verbinden, und ermöglicht es ihnen wiederum, mehr in Ihre Arbeit zu investieren 8. Branding: Verwende deine Kopf- und Fußzeile: Mein fünfter Tipp ist, die Präsentation Ihres Headers zu nutzen und zu veröffentlichen , um Ihre Marke am besten zu repräsentieren Das Beste aus Ihrem Kopf- und Fußzeilendesign herauszuholen ist eine großartige Möglichkeit, das Erscheinungsbild Ihrer Website zu verbessern Ihre Kopf- und Fußzeile erstrecken sich über alle Seiten Ihrer Website Es ist also ein großer Teil davon den Ton und das Gefühl Ihrer Website festzulegen. Sie möchten, dass Ihre Kopf - und Fußzeile die Farben und die Identität Ihrer Marke enthalten Einfacher Menüzugriff auf all Ihre Seiten, insbesondere auf Ihre Portfolio-, Shop- oder About-Seiten, alle sozialen Links und einfache Kontaktmöglichkeiten, z. B. ein Eingabe- oder Abonnementfeld, Ihr Logo, Ihr Copyright-Hinweis und Ihre Datenschutzrichtlinie sowie alle anderen Links, auf die Sie auf allen Seiten zugreifen möchten. Im Wesentlichen sollten Sie Ihren Kopf frei nutzen, um Ihr Branding vorzustellen und schnell zu kommunizieren , was auf Ihrer Website steht. Und Sie möchten Ihre Fußzeile verwenden, um wichtige Informationen zu teilen , die die Benutzerfreundlichkeit der Website verbessern einen Header-Stil zu wählen , einen Header-Stil zu wählen, der am besten zu Ihrem Branding und der Art der gewünschten Menüfunktion Es ist sehr wichtig , einen Header-Stil zu wählen, der am besten zu Ihrem Branding und der Art der gewünschten Menüfunktion passt. Werfen wir einen Blick auf einige verschiedene Kopf- und Fußzeilenstile und deren Auswirkungen auf das Erscheinungsbild einer Website Viele Website-Builder haben Vorlagen, die Sie sich ansehen können. Und ich bin gerade auf die Shopify-Website gegangen , um Ihnen ein paar verschiedene Stile zu zeigen , die Sie erstellen können Wenn es darum geht, dies auf Ihrer eigenen Website zu implementieren, Sie möglicherweise eingeschränkt in dem, was Sie erstellen können, aber es lohnt sich zu wissen eine Kopf- und Fußzeile aussehen kann Schauen wir uns ein paar Beispiele an. Dieser ist ein wirklich netter, vereinfachter Header , der diese Transparenz nutzt Dieser hat auch ein sehr gutes Foto. Der Markenname ist ganz unten angebracht , sodass Sie jederzeit problemlos auf die Homepage zugreifen können . Sie auch die vollständigen Spalten Hier finden Sie auch die vollständigen Spalten, die Informationen zur Website, wichtige Links und ein Newsletter-Abonnementfeld enthalten . Und unten befinden sich die eher technischen Links wie Copyright und Datenschutzrichtlinie. Dieses Design hat Ähnliches mit dem Bild in voller Breite, aber dieses Mal hat es ein undurchsichtiges Keto Ich weiß, dass man bei solchen Überschriften oft so einstellen kann, dass es scrollt, sodass es die ganze Zeit auf der Seite bleibt Die Fußzeile für diesen ist etwas einfacher. Diesmal beinhaltete es jedoch soziale Links. Dieses letzte Beispiel ist stärker in die Site integriert. Es hat nur eine einfache Ankündigungsleiste in einer anderen Farbe, ein zentriertes Logo und dann das Menü. Und wir schauen uns hier kurz den Mobile Header an. Auch dies ist sehr einfach und übersichtlich, was ideal für etwas ist, das für Navigation auf der Website so wichtig Sie sich diese Art von Vorlagen ansehen, können Sie inspirieren lassen sich beim Design von Kopf- und Fußzeilen Derzeit hat diese Seite keinen Kopf. Wir haben nur das Logo oben und das Copyright Florida unten. Fangen wir mit dem Header an. Obwohl es sich um eine einseitige Website handelt, hilft das Hinzufügen eines Menüs bei der Navigation Ich füge einen Header ein, den ich zuvor erstellt habe. Dieser Header ist ein wirklich nettes, einfaches Layout , das dem Benutzer nur als Orientierungshilfe dient. Ich habe die Hauptbereiche dieser Seite sowie zwei zusätzliche Menüoptionen für Journal und Kontakt hinzugefügt , die wir auf zusätzlichen Seiten, die ich erstellt habe, nur so tun Sie können sehen, dass ich einen über Akzentfarben hinzugefügt habe, um die Farbkonsistenz beizubehalten. Gehen wir mit der Fußzeile etwas tiefer in die Tiefe. Ich werde dieses Abonnementfeld in die Fußzeile einfügen. Da es sich theoretisch nur um eine ein- oder zweiseitige Website handelt, würde es in diesem Fall gut funktionieren, auf jeder Seite eine Abonnementbox zu haben eine Abonnementbox Fangen wir also damit an. Macht den Text weiß. Ich werde es tatsächlich ändern, um nur Newsletter zu sagen und es zu einem kleinen Anreiz zu machen. Nachdem ich das getan habe, fügen wir dem Foto einen zweiten Abschnitt hinzu. Einige Dinge möchte ich in dieses Menü aufnehmen, alle sozialen Links, nochmal unser Logo und vielleicht sogar einige Informationen über die Marke. Ich denke, ich werde es als zwei Spalten mit dem Menü auf der einen Seite und anderen Informationen auf der oberen Seite erstellen zwei Spalten mit dem Menü auf der einen Seite . Ja, so sieht es also wirklich gut aus. Und jetzt füge ich nebenbei dasselbe Navigationsmenü hinzu, das ich im Kopf aus verwendet habe. Cool, also ich finde, das sieht wirklich nett aus. Ich habe Navigation auf der einen Seite, die ich gerade in demselben Menü genommen habe , wie ich sie in Ihnen ankreuzen werde. Und dann Informationen auf der anderen Seite ohne soziale Links. Ich habe auch diesen goldenen Rand hinzugefügt , um die Akzentfarbe etwas stärker einzubinden. Ich werde schnell einen Copyright-Bereich hinzufügen , um das Ganze zu vervollständigen. Ich finde das sieht wirklich nett aus. Und schauen wir uns jetzt an, wie das auf der Seite tatsächlich aussieht. Das sieht echt nett aus. Ich werde diesen Abschnitt einfach loswerden , weil wir ihn nicht mehr brauchen. Ich werde hier auch das goldene Banner hinzufügen. Trennen Sie einfach diese beiden Abschnitte. Und das ist der Furda. Sie können sehen, dass es jetzt ein viel optimierter, benutzerfreundlicher Bereich optimierter, benutzerfreundlicher Bereich ist, der wirklich zu dem Branding passt , das wir zuvor erstellt Sie können sich vorstellen, dass dies eine mehrseitige Website wäre, wie viel Einfluss das auf die Benutzerfreundlichkeit und die ästhetische Konsistenz der Website haben würde ästhetische Konsistenz der 9. Interesse bewahren: Grundlegende Benutzererfahrung und Fluss einer Webseite: Nachdem wir alle Branding-Tipps fertiggestellt haben, zielen die nächsten Änderungen darauf ab, die Besucher Ihrer Website bei der Stange zu halten. Tipp sechs geht es um den wichtigsten Aspekt der Benutzerbindung, nämlich um die Bereitstellung einer guten Benutzererfahrung. Nun, ich habe den Begriff Benutzererfahrung in diesem Kurs oft verwendet. Aber lassen Sie uns näher darauf eingehen, was eigentlich, einfach ausgedrückt, User Experience Design oder UX-Design bedeutet , ist der Prozess, bei dem etwas benutzerfreundlich, zugänglich und benutzerfreundlich gestaltet wird , das so gut wie möglich genutzt werden kann. Wenn es um Webdesign geht, bedeutet das, jede Interaktion eines Benutzers auf Ihrer Website zu berücksichtigen und sicherzustellen, dass sie optimiert ist. Die Benutzererfahrung Ihrer Website darf nicht unterschätzt werden Untersuchungen zeigen, dass bis zu 89% der Nutzer auf die Website eines Mitbewerbers wechseln, wenn eine Website ein schlechtes Nutzererlebnis hat bis zu 89% der Nutzer auf die Website eines Mitbewerbers wechseln, wenn eine Website ein Darüber hinaus hören 38% der Nutzer auf, sich mit den Inhalten einer Website zu beschäftigen , wenn die Ebene unattraktiv oder veraltet ist Der wichtigste Teil des UX-Designs ist es, die Benutzer selbst zu verstehen. Es geht darum zu verstehen, wer, was, wo, wann und warum. Es ist ideal für die Verwendung, um ein positives, intuitives und reibungsloses Erlebnis beim Navigieren auf Ihrer Website diese aussagekräftige Benutzererfahrung bereitstellen, können Sie nicht nur das Besuchererlebnis auf Ihrer Website besser definieren , sondern die Verbraucher können sich auch sicherer in Sie und das, was Sie ihnen bieten, fühlen . Auch hier gilt es, dieses Gefühl des Vertrauens aufzubauen. Nun, ich erwarte nicht, dass Sie über Nacht UX-Designer werden, aber ich möchte, dass Sie anfangen, diese Perspektive in Betracht zu ziehen, wenn es um ein Website-Design geht Es gibt einige wichtige Bereiche des UX-Designs, die Sie berücksichtigen sollten. Dazu gehören gut organisierte Informationen, interaktionsorientiertes Design, Usability-Design, visuell ansprechendes Design und Benutzerforschung Sehen Sie sich Ihre Website so an, wie sie jetzt ist, und stellen Sie sich einige Fragen zu diesen Bereichen. Ist das einfach zu bedienen? Erlebt der Leser Flow oder fühlt er sich schuldig? Wäre einem Benutzer klar, dass er als Nächstes gehen sollte? Knöpfe und intuitive Orte? Sind die Texte groß genug zum Lesen und so weiter. Internet gibt es zahlreiche Ressourcen zur Verbesserung der Benutzererfahrung. Aber eine allgemeine Sache, die ich gerne mache, wenn ich über UX nachdenke , ist, das Konzept von weniger ist mehr anzuwenden. Dinge wie große Textblöcke zu nehmen und die Schaltfläche „Mehr lesen“ hinzuzufügen , um das Ganze verständlicher zu machen. Oder verstecken Sie es sogar visuell wie in einer Bild-Flipbox. Etwas, das Sie als etwas betrachten können , wenn es um weniger geht, ist mehr Einsatz von Leerzeichen, Priorisierung visueller Hierarchien, Kategorisierung von Informationen, Segmentierung von Informationen mit Stichpunkten, Überfallschaltflächen oder interessanten visuellen Elementen, einheitliche Seiten und Gestaltung großer Informationsbereiche interaktiver und benutzerfreundlicher großer Informationsbereiche interaktiver und benutzerfreundlicher Ich werde einige wirklich einfache Beispiele auf der Mockup-Website demonstrieren auf der Mockup-Website Schauen wir uns diesen Abschnitt an, meinen Persist-Abschnitt als kurzes Beispiel für User Experience Design Das ist wirklich toller Inhalt und er sieht auf jeden Fall viel besser aus als zu Beginn. Aber in einer großen Gruppe wie dieser sind es immer noch ziemlich viele Texte , die es zu verdauen Weil wir hier klare Unterüberschriften haben. Ich denke, ein sehr benutzerfreundliches Erlebnis wäre so etwas wie ein Umschaltsystem, um diese Informationen aufzuschlüsseln Ich habe das gebaut, damit Sie sehen können, was ich meine. Dies ist derselbe Inhalt, nur dass er jetzt interaktiver und leichter zu verdauen ist, da er in Abschnitte unterteilt wurde wirklich Leerzeichen und visuelle Hierarchien Insgesamt ist das Erlebnis also optisch und funktionell viel angenehmer optisch und funktionell Nur schnell, wenn Sie sich diesen Abschnitt auf dieser Seite wird der Seitenfluss ein wenig unterbrochen Diese Margen sind etwas erschütternd. Als Abschnitt in voller Breite würde es viel besser aussehen , um im Wesentlichen ein attraktiveres Design zu erstellen, was, wie wir gelernt haben, für Benutzer sehr wichtig ist Um das zu beheben, werde ich daraus ein Bild in voller Breite machen Ich habe beschlossen, dies umzukehren und das Muster zum Hintergrund dieses Abschnitts zu machen und ein dunkelblaues Kästchen darin hinzuzufügen Während wir hier sind, werde ich hier auch diese Überschrift in die Mitte setzen und zusätzlich ein dunkles Overlay hinzufügen Toll, das sieht viel schöner und passt auch sehr gut in den Header Jetzt, wo sich das geändert hat wenn wir durch die ganze Seite scrollen, hat es einen wirklich schönen visuellen Flow. Und daran werden wir im Laufe der Zeit weiter arbeiten. Welche Space-Seitenkonsistenz wird auch Dinge sein, über die wir in dieser Lektion gesprochen haben. Ich möchte einfach alles durchgehen und einige schöne Leerzeichen und Abstände in den Bereichen hinzufügen, in denen es ein bisschen übereinander aussieht, wie Das wird es nur ein bisschen professioneller aussehen lassen . Also habe ich ein bisschen Abstand hinzugefügt und nur ein paar Dinge geändert. Ich ändere diesen Text ein wenig und schiebe diesen Button nach unten. Nun, wo ich mir das ansehe, ich glaube, ich möchte dieses Bild auf diese Seite verschieben , wenn ich kann. Lass mich gehen. Ja, ich finde, das funktioniert einfach ein bisschen. Ich habe dafür gesorgt, dass alle Texte gleich sind und habe Dinge gelöscht , die nicht mehr relevant sind. Ich habe ein paar zusätzliche Wörter hinzugefügt. Dieser Abstand macht einfach einen großen Unterschied für den Seitenfluss 10. Interesse behalten: Die Kraft der PNGs: In Tipp 7 dreht sich alles um Die Macht von PNGs. Es gibt zwei sehr coole Dinge, über die ich sprechen möchte, wenn es um PNGs geht Erstens sind PNGs eine großartige Option um qualitativ hochwertige Bilder für das Internet zu speichern Und zweitens haben sie die Möglichkeit, mit transparenten Hintergründen zu speichern. Ich möchte zunächst den Unterschied zwischen PNG und JPEG erläutern. Beide Bildtypen haben Vor- und Nachteile wenn es darum geht, Bilder für Ihre Website zu speichern Eine PNG-Datei kann mehr Daten enthalten als eine JPEG-Datei, was bedeutet, dass es sich um ein qualitativ hochwertigeres Bild handeln kann, aber auch um eine größere Datei, was sich dann auf die Ladegeschwindigkeit Ihrer Website auswirken kann PNGs verfügen jedoch über eine verlustfreie Komprimierung, was im Wesentlichen bedeutet, dass Sie die Größe eines PNG-Bildes reduzieren und gleichzeitig die Qualität beibehalten Diese Dateien werden immer noch viel größer sein als JPEGS, die eine verlustbehaftete Komprimierung verwenden Dadurch wird die Bildgröße um einiges kleiner, aber wenn weniger Daten verwendet werden müssen, kann bei einem JPEG die Bildqualität darunter leiden und es kann vorkommen, kann bei einem JPEG die Bildqualität darunter leiden und es kann vorkommen dass bestimmte Farben und Details verloren gehen. Die Entscheidung, ob Sie PNG oder JPEG verwenden, hängt von Ihrem Urteilsvermögen ab und davon, wie wichtig die Bildqualität für Ihr Publikum sein wird. Wenn Sie beispielsweise ein Fotograf sind und Ihr Fotoportfolio auf Ihrer Website haben, ist es sehr wichtig, dass es sich um ein qualitativ hochwertiges Bild handelt. Wie bereits erwähnt, können die Stop-Paying-Js transparente Hintergründe haben, was sie für das Web sehr nützlich macht. Verwendung transparenter Hintergründe von Piaget bietet einige wirklich interessante und einzigartige Möglichkeiten wenn es um Bilder geht Bevor Sie sich über große Dateigrößen Gedanken machen, möchte ich, dass Sie einfach die Möglichkeiten erkunden , die Piaget bieten könnte Auf deiner Seite. Wir werden in weniger als zehn Jahren zu führenden Flächen - und Bildgrößen zurückkehren . Ich möchte Ihnen einige Beispiele für PNGs auf Websites zeigen. Dies ist meine aktuelle Website und ich habe diese Illustration als PNG gemacht, um einen wirklich dynamischen Hintergrund für diese Entzündung zu schaffen einen wirklich dynamischen Hintergrund für , der meinem künstlerischen Stil sehr entspricht. Es gibt den Leuten eine sehr schnelle Vorstellung davon , was ich für seltsam mache Ich habe diese Blumen gezeichnet und fortgepflanzt und dann als PNG mit transparentem Hintergrund gespeichert Ein weiteres Beispiel, das ich erstellt habe, ist dieser kleine Wertebereich auf dieser Seite. Die Wellenlinien und die strukturierten Kreise sind beide PNGs. Diese Linien habe ich zum Beispiel gerade in Illustrator erstellt und mit einer transparenten Seite gespeichert Und dann stellte ich sicher, dass die Hex-Codes der Farben mit dem übereinstimmten, was auf der Seite stand. Alles, was kreisförmig ist oder strukturierte Kanten hat, wird als PNG angezeigt Und diese künstlerische Stilisierung verleiht dem Webdesign, das ansonsten sehr scharfkantig und strukturiert ist, einfach eine UNTERHALTSAME , verspielte und andere Atmosphäre ansonsten sehr scharfkantig und strukturiert ist, einfach eine UNTERHALTSAME , Nichts, weißt du , was ein PNG ausmacht? Du wirst es überall sehen. Scrollendes Website-Design auf Pinterest. Man kann sagen, das ist ein Piaget, dann ist es das auch Sie können sich ganz einfach inspirieren lassen, wie Sie PNGs am besten verwenden Die wahrscheinlich beste Verwendung von PNGs, die ich persönlich je gesehen habe , ist von Mike Costs für die Sound-Snap-Website Nun, das ist eine super schöne Website, die definitiv etwas verrücktes Programmieren erfordert hätte. Aber all diese schönen Illustrationen hätten als PNGs mit transparentem Hintergrund gespeichert werden PNGs mit transparentem Hintergrund um diese organischen Linien zu erhalten Dieses Seitendesign legt aufgrund seiner Ästhetik großen Wert auf PNGs Du kannst dir die Website auf snip sand.com im Detail ansehen und dir einige tolle PNGs sparen Auch wenn Sie versucht sein könnten, Texte in Ihre Bildzusammenstellungen einzufügen, um coole Layouts zu erstellen Ich empfehle Ihnen, alle Ihre Texte direkt auf Ihrer Website zu speichern . Wenn es sich bei Ihrem Text um ein Bild handelt, wird es nicht hervorgehoben. Und das bedeutet, dass Suchmaschinen wie Google es nicht lesen und den Zweck Ihrer Website nicht verstehen können. Wenn du vorhast, deine Website bei Google auffindbar zu machen, kann allein der lesbare Text den Unterschied ausmachen, ob deine Website auftaucht oder sich im Mist verirrt Wenn ich mir diese Seite ansehe, gibt es ein paar Stellen, an denen ich denke wirklich SPASS machen würde, PNGs zu verwenden, aber lassen Sie es uns ganz einfach machen, diesen Abschnitt und die Art und Weise zu beenden , wie wir dieses Bild und diese Sätze aufgenommen und daraus gemacht haben Alles, was in diesem Inhaltsabschnitt übrig bleibt , ist dieser Abschnitt. Und das beschreibt nur den Stil dieser Person. Ich denke, das wäre eine wirklich LUSTIGE Sache , es visuell mit PNGs darzustellen Wenn ich mir diesen Inhalt ansehe, habe ich ihn in drei Hauptwörter unterteilt: kunstvoll, zeitlos und ruhig, was den Stil beschreibt Ich werde einige PNG-Bilder in Illustrator speichern , die diesen drei Wörtern entsprechen Ich habe diese nur frei ausgewählt, aber wenn das meine eigene Arbeit ist, würde ich meine eigenen Bilder zeichnen, um mein Stilfoto zu zeigen. Ich werde das schnell nachzeichnen um den weißen Hintergrund zu entfernen. Ich wähle Sketch und überprüfe, ob Weiß ignorieren ausgewählt ist. Nett. Ich werde sie erweitern und die Gruppierung aufheben. Ich habe drei Ausgaben erstellt, alle die gleichen Abmessungen haben, um jedes PNG zum Speichern hinzuzufügen. Ich möchte sie auf derselben Zeichenfläche haben, um sicherzustellen, dass sie an der Seite alle einheitlich aussehen Ich habe diese drei ausgewählt und werde nur sicherstellen, dass sie an der Zeichenfläche ausgerichtet sind , sodass die Zentrierung auf der Seite sicherstellen muss , dass die richtigen Kabel die ausgewählten Dateien sind Wir machen die gleiche Phase J. Und jetzt werden wir sie ausnutzen Meine bevorzugte Methode, Bilder wie dieses für PNG zu speichern , ist Datei, Export für Bildschirme. Und dann wird für jede einzelne Zeichenfläche ein eigenes Feld erstellt. Und Sie können einfach diejenigen ankreuzen, die Sie erkunden möchten, in diesem Fall alle. Dann gehe ich hier runter und stelle sicher, dass das auf PNG ist , oder ich wähle PNG acht. Dann drücken Sie einfach auf Exportieren und speichern Sie es in einem Ordner, den Sie später finden können. Fügen wir sie also hier auf der Seite ein. Ich werde sie unten als drei Bilder haben. Das ist eine sehr gute Möglichkeit, Informationen wie diese anzuzeigen. Und Sie können sich vorstellen, PNGs noch interessanter zu machen, indem Sie farbige Hintergründe verwenden, Texturen hinzufügen und natürlich Bilder haben, die für das, was Sie anzeigen möchten , relevant sind was Sie anzeigen möchten , relevant sind Ich möchte diese Bewertungsbilder auch in PNGs umwandeln. Es ist also ein bisschen interessanter als nur ein Rechteck. Kommen wir also zurück zu Illustrator. Dieses Mal habe ich nur diesen Pinselstrich von Free Pig genommen , und ich werde ihn auch einfach mit einem Bild nachzeichnen Nochmals. Ignore White ist aktiviert. Ich gehe die Schwelle hoch, damit es zurückkommt. Das sieht gut aus. Also werde ich es erweitern. Und die Wahl der Farbe ist dank unserer Farbpalette wirklich einfach . Ich werde diesen blauen Akzent haben. Das sind momentan Rechtecke, aber ich möchte sie zuschneiden, sie zu diesem Kreis maskieren und dann diesen schönen Pinselstrich dahinter haben diesen schönen Pinselstrich dahinter Das Gleiche wie zuvor. Ich habe gerade drei Zeichenflächen mit den gleichen Abmessungen erstellt und werde mit dem Layout herumspielen und es an die Bank schicken Es wird also einfach schnell nach denen suchen , die hier keinen weißen Hintergrund haben. Eine schnelle Möglichkeit, dies zu testen, besteht darin, einfach einen dunklen Hintergrund zu erstellen und ihn hinter sich zu lassen. Und du kannst sehen, dass kein Weißer auftaucht. Solange wir also nichts anderes hinter diesem Bild haben, ist es transparent, wenn wir es als PNG speichern . Jetzt exportiere ich Daten auf die gleiche Weise wie zuvor. Und dann können wir sie einfügen. Und voilà, es sieht jetzt einfach ein bisschen interessanter Dies sind nur zwei sehr einfache PNG-Beispiele, aber Sie können bereits das Potenzial transparenter Hintergrundbilder und all der Dinge erkennen transparenter Hintergrundbilder und , die Sie durch einfaches Überlagern erstellen können 11. Interesse behalten: Animation und Bewegung: Mein achter Tipp ist das Hinzufügen von Animation und Bewegung zu Ihrer Website. Animation und Bewegung sind eine äußerst effektive Strategie , um Nutzer auf Ihrer Website anzusprechen. Dazu gehören kleine Dinge wie Tastenanimationen und Bildschwebebewegungen bis hin zu größeren Dingen wie dynamischen festen Bildern, Videohintergründen, bewegten Grafiken und sogar Geschenken Bewegte Grafiken werden Aufmerksamkeit der Nutzer auf sich ziehen und sie länger auf Ihrer Website halten, was die Wahrscheinlichkeit erhöht, was die Wahrscheinlichkeit erhöht sie sich mit Ihren Inhalten beschäftigen. Untersuchungen haben ergeben, dass Webseitenbesucher acht Prozent länger auf Webseiten mit Videos verweilen . Sehen wir uns einige Beispiele wie Sie Ihrer Website Bewegung verleihen können. Ich möchte Ihnen einige Möglichkeiten zeigen, wie Sie Ihrer Website einfache Bewegungen hinzufügen können. Ich wollte mit einem einfachen Beispiel für ein festes Bild beginnen. Wir schauen uns die Mustergalerie hier und sie sieht ziemlich gut aus. Aber ich möchte dem Hintergrund eine Textur hinzufügen, um der Seite auf subtile Weise Bewegung zu verleihen. Und ich möchte, dass diese Textur ein Overlay ist. Jetzt setze ich es einfach auf repariert. Ein festes Bild bedeutet nur, dass das beim Scrollen auf der Seite Bild beim Scrollen auf der Seite an derselben Position bleibt, wodurch Bewegung entsteht Sie können anhand der Spezifikationen hier sehen, an derselben Stelle bleibt, was die Illusion erweckt , dass es sich bewegt. Und es ist eine sehr subtile Art, Bewegung hinzuzufügen, aber es ist nur ein bisschen auffälliger als ein statischer Hintergrund Ich werde hier dasselbe Bild mit festem Stil im Hintergrund hinzufügen . Ich habe gerade dasselbe feste Bild im Testbereich hier hinzugefügt . Ich habe die Proportionen geändert , sodass der Text breiter ist als die Bilder. Und Sie können sehen, wie ein bisschen mehr Bewegung zu einer Menge Interessen führt. Nur ein bisschen dynamischer. Sieht wirklich gut aus ohne, ohne vom Inhalt abzulenken , was die Hauptsache ist Das nächste Beispiel, das ich Ihnen zeigen möchte ist dieser Kalibrierungsabschnitt. Nun, das sieht okay aus, so wie es ist, aber ich denke, es könnte viel interessanter sein. Ich werde hier das Massenschweben nutzen und diese statischen Bilder in Flipboxen umwandeln, um eine interaktivere Bewegung zu erstellen Das ist die Art von Ding, das wir erstellen werden , wenn du mit der Maus darüber fährst und es sich dreht Und anstatt ein Bild und dann die Informationen zu haben, werden wir die Informationen auf das Bild setzen. Ich glaube, ich will nur das Bild von der Vorderseite. Und ich habe einen kleinen goldenen Rand hinzugefügt , nur um die Akzentfarbe wieder hervorzuheben. Und dann haben wir diese Information und den Knopf auf der Rückseite. Ich finde, das sieht viel interessanter aus. Also werde ich weitermachen und die anderen beiden machen. Dies ist einfach eine viel ansprechendere Art , Informationen zu präsentieren. Die Interaktivität beinhaltet die Verwendung von Maulwürfen, sodass die Leute eher dazu neigen, sich mit diesen Inhalten zu beschäftigen Das Letzte, was ich tun werde, ist, dem Rest dieser Website einige grundlegende Animationseffekte hinzuzufügen . Also Bilder wie diese, vielleicht diese und wahrscheinlich auch diese. Ich füge nur einige Feeds oder andere einfache Animationseinstellungen sodass sich diese Bilder bewegen , wenn die Seite geladen wird, wenn du an ihnen vorbeiscrollst Animationseffekte sind ein ziemlich grundlegendes Frontend-Designmerkmal. Wenn es also darum geht, dies selbst zu tun, schauen Sie sich einfach an, welche Website-Hosts Sie verwenden. Die meisten von ihnen verfügen über grundlegende Animationsoptionen Sie auf jedes statische Bild anwenden können. Ich habe sie hinzugefügt, also lassen Sie uns sie aktualisieren und eine Vorschau anzeigen, und ich zeige Ihnen, wie sie aussieht. Sie können dieses subtile Einblenden sehen. Es geht nur darum, ein bisschen mehr Interessen zu wecken. Und du kannst jede Art von Fade-Ins machen, die du willst. Damit. Ich habe gerade ein paar wirklich einfache ausgewählt. Ich habe diese Liste auch auf demselben Videohintergrund wie weniger als drei hinzugefügt . Du kannst schon sehen, wie viel interessanter diese Seiten mit all dieser Bewegung 12. Funktionalität: Haltepunkte und Design von Mobile First: In Tipp neun dreht sich alles um Breakpoints und Designing Mobile First Beim Entwerfen einer Website ist es wirklich wichtig, zuerst zu analysieren wie Ihre ideale Zielgruppe Ihre Website betrachtet Wenn Sie beispielsweise Produkte verkaufen und Instagram hauptsächlich verwenden, um für Ihre Arbeit zu werben, wird der Großteil Ihres Publikums auf den Link zu Ihrer Instagram-Biografie klicken und die Website auf ihren Handys ansehen. Alternativ, wenn Sie eine Website mit einem Lebenslauf-Portfolio haben Website mit einem Lebenslauf-Portfolio und diese per E-Mail an potenzielle Arbeitgeber senden, wird diese wahrscheinlich auf dem Desktop angezeigt Falls Sie nicht wissen, welche Breakpoints es sind: Unser Breakpoint ist eine bestimmte Größe, ab der Inhalt und Design einer Website anpassen, um ein besseres Nutzererlebnis zu bieten Sie können zwar so viele Breakpoints erstellen, wie Sie möchten, die durchschnittliche Website hat drei Breakpoints Diese ermöglichen es der Website, je nachdem, ob der Benutzer sie auf einem Desktop, Tablet oder Handy betrachtet, unterschiedlich zu funktionieren je nachdem, ob der Benutzer sie auf einem Desktop, Tablet oder Handy betrachtet, unterschiedlich . Offensichtlich hat ein Telefonbildschirm eine völlig andere Form und Größe. Also Computer-Desktop und so oft, was Sie für einen Bildschirmtyp entworfen haben für einen Bildschirmtyp entworfen ließen sich nicht gut in einen Roman übersetzen. Wenn Sie einen angemessenen Prozentsatz von Nutzern haben wollen , die Ihre Website von ihren Handys aus betrachten. Ich würde dringend empfehlen zuerst eine mobile Website zu entwerfen. Jetzt fühlt es sich oft intuitiver an, zuerst die Desktop-Website zu entwerfen und sie dann als Nebensache zu behandeln Wenn Sie jedoch viel mobile Nutzung haben werden, empfehle ich, das mobile Design sehr ernst zu nehmen. Laut Zip sagen ja, 52% der Menschen geben an, dass sie aufgrund eines schlechten mobilen Erlebnisses das Vertrauen in Begleitung verlieren. Darüber hinaus ist die Wahrscheinlichkeit, dass Nutzer eine Website verlassen, die nicht für mobile Geräte optimiert ist, fünfmal höher. Es ist viel einfacher, für Mobilgeräte und Ultimate für den Desktop zu entwerfen Mobilgeräte und Ultimate für den Desktop als umgekehrt, da Sie Ihr Design nach oben und nicht nach unten skalieren. Wenn Sie für Mobilgeräte entwerfen, haben Sie viel weniger Platz. Es zwingt Sie also, den Seiteninhalten Priorität einzuräumen und ein intuitives Erlebnis zu schaffen Wenn Sie Ihre Website auf Mobilgeräten gut aussehen lassen können, können Sie sie auf dem Desktop fantastisch aussehen lassen. Ich habe zuerst diesen gesamten Webseiten-Desktop erstellt. Und Sie können sehen, wenn ich mir die Breakpoints ansehe, fangen wir mit dem Tablet Bisher sieht es ziemlich gut aus. Aber so etwas offensichtlich nicht gut übersetzt. Und auf dem Handy können Sie sehen, dass bestimmte Abschnitte einfach nicht gut funktioniert haben. Wenn ich so etwas wie diesen Button Mobile First gebaut hätte, hätte es sich gut auf Tablet und Desktop übertragen lassen. Aber weil ich das Gegenteil getan habe, bedeutet das nur zusätzliche Arbeit für mich. Sie können sehen, dass einige Bereiche einfach überhaupt nicht funktionieren. Nachdem wir den Responsive-Modus geändert haben, sehen einige Bereiche jedoch gut aus. Und zurück auf dem Tablet können Sie sehen, dass der Abstand an den Seiten etwas abweicht. Und ich glaube nicht, dass das passiert wäre , wenn wir vom Handy zum Desktop gewechselt wären. Nochmals so etwas. Es hat einen wirklich seltsamen Abstand. Und wenn ich es Mobile First gebaut hätte, wäre das meiner Meinung nach nicht passiert. Es ist also nur etwas , das Sie berücksichtigen sollten, wenn Ihr Publikum häufig mobil sein wird. Wenn Sie zuerst diese Handyseite entwerfen, diese Handyseite entwerfen können Sie viel leichter lachen. 13. Funktionalität: Geschwindigkeit und Ladezeiten: Mein letzter Tipp zur Verbesserung Ihrer Website ist sehr wichtig: Er optimiert die Ladegeschwindigkeit Ihrer Website. Ich möchte diese Lektion mit der Tatsache beginnen , dass Sie sich dadurch ein wenig traurig fühlen könnten. Untersuchungen haben ergeben, dass 39% der Nutzer nicht interagiert haben, wenn das Laden einer Website zu lange dauert. Jetzt fragen Sie sich vielleicht, wie lang zu lang ist? Nun, die traurige Wahrheit ist, dass 53% der Website-Besucher mehr als Hawk Kein potenzieller Traffic wird eine Website verlassen , deren Laden länger als 3 s dauert. So lange habe ich gebraucht, um diesen Satz zu lesen. Sie haben also all die harte Arbeit investiert, eine atemberaubende Website voller unglaublicher Inhalte erstellt und über die Hälfte der Leute wird sie sich ansehen verlassen, bevor sie es überhaupt sagen. Ich bin sicher, Sie können sehen, wie wichtig eine schnell ladende Website wirklich ist. Bevor wir uns damit befassen, wie Sie die Geschwindigkeit Ihrer Website verbessern können, müssen wir wissen, was es derzeit ist und warum. Google hat dieses unglaubliche Tool namens PageSpeed Insights, das das super einfach macht namens PageSpeed Insights, das das super einfach Ich werde dieses Tool auf der einseitigen Website verwenden , die wir in diesem Kurs erstellt haben , und es verwenden, um zu erklären, was Sie tun können, um die Ladegeschwindigkeit Ihrer Website zu verbessern Zuerst holen wir uns den URL-Link unserer veröffentlichten Webseite, kopieren ihn, fügen ihn hier ein und klicken auf Analysieren. Jetzt wird es sich diese beiden Abschnitte einfallen lassen, Handy und Desktop. Dies liegt daran, dass diese beiden verschiedenen Modi unterschiedliche Ladespaten haben Die Geschwindigkeit Ihrer mobilen Website wird fast immer schlechter sein als die Ihres Desktops. Auch wenn Ihre mobile Website optimiert ist. Nur weil Desktop-Computer bessere Prozesse und oft eine zuverlässigere Internetverbindung haben bessere Prozesse und . Ich werde mir zuerst den Desktop ansehen, nur weil ich diese Seite nicht wirklich für Mobilgeräte erstellt habe. Google hat also Analysen auf dieser Webseite durchgeführt und deren Leistung diagnostiziert. Es ist in ganze Abschnitte unterteilt. Leistung, Barrierefreiheit, bewährte Verfahren und SEO oder Suchmaschinenoptimierung. Diese Ergebnisse gelten nur für eine Webseite. Wenn Sie also eine mehrseitige Website mit einer About-Seite , einer Portfolio-Seite usw. haben, müssen Sie jede Seite einzeln analysieren Wenn wir über die Ladegeschwindigkeit deiner Website sprechen, wollen wir uns diesen Abschnitt zur Leistung ansehen. All diese Daten hier beziehen sich auf die Ladegeschwindigkeit Ihrer Website. Die wichtigste Zahl, die Sie kennen müssen, ist jedoch Ihr Geschwindigkeitsindex, der die Gesamtladezeit Ihrer Webseite angibt. Dieser erste Inhalt für Paint gibt wie lange es dauert bis die erste Information geladen ist. Und dieser größte Inhalt in voller Farbe gibt an, wie lange es dauert, bis die größte Datei auf Ihrer Seite geladen ist. Diese große Zahl hier ist deine gesamte Speed School. Idealerweise möchten Sie, dass dies in der grünen Zone liegt, aber ehrlich gesagt ist alles in den hohen 70ern bis 80ern ziemlich gut Performance verfügt auch über eine visuelle Baumstruktur, die Ihnen zeigt , in welchen Phasen der Inhalt Ihrer Seite geladen wird. Unter der Baumkarte haben wir Möglichkeiten, und hier kannst du anfangen, Vorschläge zu sehen , wie du die Geschwindigkeit deiner Website verbessern kannst. Schauen wir uns das Speichern von Bildern in Formaten der nächsten Generation an. Und Sie können sehen, dass es mir die tatsächlichen Bilder zeigt , deren Laden am meisten Zeit in Anspruch nimmt. Ich schlage vor, dass ich diese Formate der nächsten Generation wie Web Pay konvertiere wie Web Pay Ich verwende tatsächlich ein Plug-in , das das für mich automatisiert, was ein wichtiger Grund dafür ist dieser Score bereits so gut ist Sie können jedoch ganz einfach nach einem Bild suchen und es online konvertieren. Und ich finde, wenn ich diese Konverter verwende, verlieren die Bilder nicht viel Bei Ungleichheit bevorzuge ich es, ein Bild zuerst als PNG für diese hohe Qualität zu speichern und es dann in eine Webseite zu konvertieren. Dieser Abschnitt bezieht sich auf mein Backend, dem du dich wieder mit einem Plugin befassen könntest, aber ich würde einfach so etwas stehen lassen Jetzt sind diese beiden spezifisch für diese Website. Aber wenn ich zu diesem Abschnitt mit früheren Audits komme, sind dies einige andere Probleme, mit denen Sie möglicherweise konfrontiert werden, wenn Sie sich die Geschwindigkeit Ihrer Website ansehen. richtige Größe von Bildern hängt davon ab, ob die Bilder die richtige Größe für Ihre Breakpoints haben Bilder außerhalb des Bildschirms zurückstellen bedeutet, dass Sie einen Lazy Loader einrichten, was nur bedeutet, dass Bilder, die auf der Seite sind, aber nicht sichtbar sind, bis Sie weiter nach unten scrollen Laden Sie erst ein, wenn der Benutzer sie erreicht hat. Wie Sie sehen, gibt es viele andere Vorschläge. Wenn es darum geht, die Geschwindigkeit Ihrer Website zu verbessern. Sie müssen sich nur den Abschnitt Chancen ansehen. Wenn Sie darauf klicken, erfahren Sie so ziemlich genau, was Sie tun müssen. Wenn Sie nicht verstehen, was das bedeutet, googeln Sie einfach den Satz und es gibt viele Anweisungen dazu. Die meisten Verbesserungen der Seitengeschwindigkeit beziehen sich darauf, wie Bilder gespeichert werden und wie Sie Ihre Website erstellt haben. Sie werden immer wieder Vorschläge veröffentlichen , gegen die Sie nichts tun können. Es. Mach dir wegen denen keine Sorgen. Wenn Ihre Ergebnisse im roten Bereich liegen und alles mit dem Backend zusammenhängt , müssen Sie wahrscheinlich ein Upgrade Ihres Website-Hostings in Betracht Upgrade Ihres Website-Hostings Der nächste Abschnitt befasst sich mit Barrierefreiheit, was wiederum mit der Benutzererfahrung und Dingen wie der Lesbarkeit zusammenhängt Das ist eine tolle Schule, aber ein Vorschlag, den sie hier haben, ist, dass Hintergrund - und Vordergrundfarben kein ausreichendes Kontrastverhältnis haben ausreichendes Kontrastverhältnis Wenn wir darauf klicken, wird uns angezeigt , wo dies seiner Meinung nach zutrifft. In diesem Fall steht mein grauer Text auf dem Kranichhintergrund, für manche Leute vielleicht schwer lesbar ist, sowie dieser weiße Text auf dem hellblauen Hintergrund. Das ist ziemlich einfach zu beheben. Bei Best Practices dreht sich alles um Backend und Angebotserstellung. Vorausgesetzt, Sie machen keine verrückten Programmierkram, sollten Sie hier normalerweise auf der sicheren Seite sein. Und schließlich gibt der SEO-Score an, wie leicht Suchmaschinen Ihre Inhalte verstehen können. Jetzt werde ich nicht auf SEO eingehen, aber das Hinzufügen einer Meta-Beschreibung ist eine ziemlich wichtige und standardmäßige Sache und wir werden diesen Score erheblich verbessern. Eine Meta-Beschreibung ist nur eine kurze Zusammenfassung dessen, worum es auf einer bestimmten Seite geht. Sie können ganz einfach googeln, wie Sie eine Meta-Beschreibung für den Anbieter der Website hinzufügen eine Meta-Beschreibung für den Anbieter der Website Jetzt wissen Sie, was diese Telefonnummern bedeuten, und das Gleiche gilt für Mobiltelefone. Es enthält einige verschiedene Vorschläge für Ihre mobile Website. Es stellt also sicher, dass beide durchgemacht werden. Aber das ist so ziemlich alles, was Sie wissen müssen, um die Geschwindigkeit Ihrer Website zu verbessern. 14. Du bist dran!: Wir haben es einmal gemacht, Blase hinzuzufügen. So ist es Body-Modem. Das war eine Menge Inhalt zum Mitnehmen. Lassen Sie uns also kurz jeden der zehn Tipps zusammenfassen und Sie darüber nachdenken lassen , welche für Ihre Website am besten geeignet den ersten fünf Lektionen dieses Kurses wurden die visuellen Grundlagen der Markenbildung aufgeschlüsselt . Dazu gehörten Typografie, in wir die grundlegende typografische Hierarchie behandelt haben, wie du Schriftpaarungen auswählst, die zu deiner Marke passen , und wie du sie am besten auf deiner Website verwendest, sowie einige kurze Informationen zu Schriftarten und Urheberrechten Dann haben wir uns mit Farbpaletten befasst und erklärt, wie Sie Farben auswählen können , die Ihre Arbeit widerspiegeln Wie viele Farben Sie in Ihrer Markenpalette haben sollten und wie viel von jeder Farbe Sie auf Ihrer Website verwenden sollten, sowie einige grundlegende Farbpsychologie. In Lektion drei haben wir über die Auswahl der richtigen Bilder für Ihre Marke und die Leistungsfähigkeit von Videoinhalten gesprochen die Auswahl der richtigen Bilder für Ihre Marke . Und in weniger als vier Schritten befassen wir uns eingehend damit, wie wichtig es ist, Ihre Geschichte auf Ihrer Website zu teilen. In der fünften und letzten Lektion zum Thema Branding beschäftige ich mich mit der Verwendung Ihrer Kopf- und Fußzeilen und Ihrer Gewohnheiten, um den Ton und die Stimmung auf Ihrer Website festzulegen Lektion sechs bis acht, alles, was sich anfühlt, in Schränken unterbringen und die Nutzung am Laufen halten , einschließlich Denken zur Benutzererfahrung, Erstellen interessanter Bilder mit PNGs, Erkundung der Macht von Bewegung mit Animationen und Videos Ich habe ihren Unterricht verloren, in dem es nur um Funktion ging. Dazu gehörten die Analyse Ihrer Zielgruppe und möglicherweise das Designing Mobile First sowie die Frage, wie Sie die für OCO wichtige Seitengeschwindigkeit verstehen und optimieren können Schauen wir uns kurz die Vorher- und Nachher-Website von Mockup Example Also hier haben wir die vorherige Website. Am Anfang sah es nicht so schlecht aus, aber jetzt, wo wir visuelle Beweise dafür haben wie viel besser es sein könnte, ist es schwierig, zurückzukehren. Du hast gesehen, wie ich H der zehn Tipps für diese Seite angewendet habe, angefangen mit der Typografie, Hinzufügen der Farben, dem Herumspielen mit den Layouts und Abständen Und jetzt wissen Sie, welche Auswirkungen jede dieser Änderungen haben kann. Dies ist die vollständige Seite mit allen angewandten Tipps. Und ich finde, es sieht wirklich wunderschön aus und es ist definitiv viel, viel optimierter. Lassen Sie sich nicht überfordern, wenn Sie diese Änderungen selbst vornehmen. Wenn es nicht auf Anhieb perfekt aussieht. Nehmen Sie sich Zeit, um zu experimentieren und mit dem Gelernten zu spielen. Sie haben alle Anologien hier benannt. Also schlüsseln Sie es einfach Tipp für Tipp auf und sehen Sie, was passiert. Ich bin immer hier, um Ihnen Feedback zu geben und würde mich absolut freuen, vorher die Änderungen zu sehen , die Sie an Ihrer Website im Bereich Projekte vornehmen . Jede kleine Änderung, die Sie vornehmen, trägt zur Verbesserung Ihrer Website bei. Ich würde es gerne sehen. Bevor wir fertig sind. Ich möchte mich vielmals bei Ihnen dafür bedanken meinen ersten Skillshare-Kurs gesehen Es würde mir eine Menge bedeuten , wenn Sie eine Bewertung hinterlassen und mich wissen lassen könnten , was Sie über diesen Kurs denken. Du kannst mir auch hier auf Skillshare folgen und wirst über alle neuen Klassen, die ich erstelle, informiert Ich hoffe wirklich, dass Sie in diesen Lektionen einen Mehrwert gefunden haben. Ich liebe es, dieses Thema zu unterrichten und kann es kaum erwarten zu hören, welche dieser Tipps Sie am nützlichsten fanden und was Sie mit diesem neuen Wissen schaffen. Nochmals vielen Dank und gute Website