Einführung in den inhaltsorientierten Minimalismus im Web-Design

1. Einführung: Hey, Leute, auf Joshua Stone, werde ich euch ein paar Dinge zeigen, die ich im Laufe der Jahre über die Entwicklung von Websites rund um die Konzepte des inhaltsorientierten Minimalismus gelernt habe . Was bedeutet das jetzt genau? Nun, es geht darum, Struktur und Stil zu balancieren, um den Inhalt wirklich in den Mittelpunkt zu stellen. Es geht darum, eine Website zu entwerfen und zu entwickeln, die leicht zu verstehen und zu navigieren ist. Die Endbenutzer haben also genau das eingegrenzt, wonach sie suchen. Es geht darum, eine Website zu entwerfen, die fast überall funktioniert, von wo sie geladen wird, und es reagiert sowohl, dass es sich an verschiedene Auflösungen anpasst. Und dann reagiert es tatsächlich auf Benutzereingaben in einer angemessenen Weise. Also in dieser Klasse wird ein paar Dinge von der Entscheidung, welche Inhalte enthalten werden. Entscheiden, wie dieser Inhalt ausgelegt werden soll. Was wir priorisieren, finden wir heraus, wo wir Flyer mit Stil setzen können, ohne über Bord zu gehen und zu künstlerisch zu sein . Ablenkende Benutzer von den Inhalten auch gehen, um ein wenig mehr Details über verschiedene Möglichkeiten. Sie können versuchen, Verwirrung und Frustration für Leute zu verhindern, die Ihre Website verwenden und auch ein paar technische und Zugänglichkeit Überlegungen, die Sie jetzt in dieser Klasse machen möchten , Ich werde tatsächlich eine reale Welt zeigen Beispiel, weil ich ein Upgrade durchführen muss. Meine Website jetzt. Ich empfehle auch, dass Sie folgen und bauen oder zumindest eine Website nach diesen Konzepten zu entwerfen . Jetzt verschwommen diese Klasse die Grenze zwischen Webdesign und Web-Entwicklung. So wird zumindest ein grundlegendes Verständnis von H. Melon CSS empfohlen. Aber wie auch immer, ich denke, das deckt im Grunde alles ab. Also, wenn Sie bereit sind, loszulegen, gehen wir voran und springen direkt hinein. 2. Beginne mit dem Inhalt: Wann immer ich beginne, eine neue Website zu bauen, Das allererste, woran ich denke, ist der Inhalt. Der Inhalt ist der Grund, dass Menschen da sind. Das ist es, wonach sie suchen. Es ist der ganze Grund für die Website im Allgemeinen zu existieren. Aufgrund der Tatsache, dass der Inhalt der Hauptaugenmerk der Website ist, wird alles, was wir von hier aus tun, um sicherzustellen, dass es diesen Fokus darin hält, dass es die Benutzererfahrung besser macht und es einfacher macht, die Informationen zu finden , die der Benutzer benötigt. Wie sollen wir also über den Inhalt nachdenken? Nun, Sie sollten bereits eine Vorstellung davon haben, wofür die Website ISS ist, aber fangen wir an, darüber nachzudenken, wie wir das auf seine grundlegenden Bestandteile aufschlüsseln können , um Ihnen eine bessere Vorstellung davon zu geben, was ich damit meine, Ich zeige Ihnen meinen Prozess bei der Ermittlung der Inhalte von meiner neuen Website. In Ordnung, also ist meine Website im Wesentlichen eine Portfolio-Seite, also das erste, was ich eindeutig brauche, ist eine Bio. Irgendwas darüber, wer ich bin. Ich benötige Informationen, wie ich mich kontaktieren kann, sowie meine sozialen Links. Das nächste, was ich möchte, ist, meine aktuelle Arbeit zu zeigen. Ich möchte auch eine Liste meiner früheren Arbeit, meiner Spiele und verschiedenen Projekte, und ich möchte auch einige Informationen über Hilfe, Beitrag auf meiner Patron-Seite, die ich eingerichtet habe, beitragen. Aber jetzt, wo wir das herausgefunden haben, was als nächstes? Nun, wir müssen die Dinge priorisieren, und was ich damit meine, ist, wenn Sie darüber nachdenken, was wir wollen, dass die Menschen zuerst auf unserer Website entdecken und wenn sie früh gehen, welchen ersten Eindruck wollen Sie verlassen? Und was könnten sie überhaupt überhaupt suchen? Im Wesentlichen wollen wir nur sicherstellen, dass der Benutzer zuerst die richtigen Dinge sieht und dass alles Regel in einer logischen Reihenfolge ist. Also für meine Website habe ich das schon in einer anständigen Reihenfolge bekommen, weil im Grunde das erste, was ich möchte, dass die Leute sehen, sind Informationen darüber, wer ich bin, wie man mich kontaktiert und woran ich gerade arbeite, die alle auf der Vorderseite sein werden Seite. Dann ging ich Seiten zu meinen Spielen von Miss Lane Projekten und eine Seite über den Beitrag. Jetzt ist es an der Zeit, dass wir darüber nachdenken, wo Sachen hineingehen. Diese Art von Überschneidungen mit Priorisierung, ehrlich gesagt. Aber im Grunde, was ich meine, ist schwächen brechen Sachen nach unten zwei Seiten und wir können Dinge innerhalb der Seite brechen , die normalerweise beide tun würden, es sei denn, es ist eine Website, die es passiert einfach gebaut, um tatsächlich alles in einer Seite zu passen. Aber normalerweise werden Sie Dinge auf verschiedenen Seiten zusammenfassen, und innerhalb dieser Seite wird alles logisch zusammengefasst, und wir wollen definitiv sicherstellen, dass hier alles ausgewogen ist. Obwohl wir Speicherplatz effizient nutzen wollen und wir nicht wollen, dass alles auf eine Reihe von verschiedenen Seiten verteilt oder nur wirklich spärlich auf jeder Seite verteilt ist, wollen wir auch nicht, dass es zu kompakt und dicht mit Daten ist. 3. Gleichgewicht von Stil und Struktur: , jetzt, Also, jetzt,wo wir herausgefunden haben, welche Inhalte wir auf unserer Website haben werden und wie es generell angelegt wird, ist es Zeit darüber nachzudenken, wie es speziell aussehen wird. Und hier geht es vor allem darum, sich für ein konsistentes Thema zu entscheiden. Wir wollen ein Thema, das mit dem Inhalt passt und, wie gesagt, konsistent ist jetzt immer wieder auf das ursprüngliche Thema Content-fokussierte Minimalismus ist es Dinge einfach zu halten, so wollen wir den Fokus auf den Inhalt zu halten. Aber wir verwenden das Design und den gesamten Stil, um den Inhalt zu ergänzen. Wir wollen nur generell die Erfahrung der Nutzung unserer Website verbessern. Indem ich all dies herausgefunden habe, beginne ich normalerweise mit einem grundlegenden Layout, einer einfachen Struktur, die den Inhalt enthält. Also nochmal, um Ihnen ein Beispiel zu geben, zeige ich Ihnen, woran ich in meinen Augen arbeite. Ich werde im Wesentlichen alles zentriert haben. Aber wenn die Hintergründe in beiden Seiten überlaufen, werde ich eine Seitenleiste mit dem Logo und den Navigationslinks haben, und wir werden den Inhalt direkt dort haben. Die Seitenleiste bleibt fixiert, wenn Sie den Hauptteil des Inhalts scrollen und wenn Sie auf einem mobilen Gerät oder den Augenbrauen anzeigen. Wenn wir etwas wissen, ist es dünn genug. Ill Swap auch, auch, die Navigation befindet sich oben und das wird mit der Seite scrollen, so dass es den Inhalt der Ansicht nicht blockiert . Aber insgesamt ist es eine ziemlich einfache Lout. Und der Grund, warum ich mich dafür entschieden habe, ist aufgrund des Themas, das ich beschlossen habe, da ich ein Spieleentwickler bin , dass es interessant wäre, wenn mein Anblick ein bisschen wie ein Menü in einem Spiel aussehen würde. Jetzt, da Diebe nicht unbedingt eine strenge Rolle ist. Aber insgesamt scheint dieses Thema wirklich sehr gut mit dem zu arbeiten, was ich will. Aber jetzt, da wir ein grundlegendes Layout und eine Struktur für unseren Inhalt haben, müssen wir einige konsistente Designmuster herausfinden, die auf Farbe und Form zurückzuführen sind. Es geht auch um die Schriftarten, all die kleinen Dinge, die wirklich einen langen Weg gehen, um ein konsistentes Thema zu erstellen. Und wieder versuchen wir, die Dinge einfach und nicht ablenkend zu halten. Es gibt also immer einen Balanceakt, um sicherzustellen, dass der Inhalt zugänglich ist, leicht zu finden ist und wo es logisch sein sollte, dass alles gut aussieht und gut funktioniert , also werde ich voran gehen und Ihnen zeigen, was ich tatsächlich gemacht habe. Im Moment können Sie das zugrunde liegende Layout direkt hier sehen. Alles ist im Hintergrund zentriert. Rechtschreibung zu den Seiten, und die Navigation ist fixiert. Aber ich habe viel Flair darauf gelegt, aber nicht zu viel. Alles ist immer noch sehr einfach, nicht ablenkend, aber es hilft, ein wenig von diesem Stil hinzuzufügen. Und wieder passt es mit dem Thema, ein Videospiel-Menü zu sein. Es gibt immer noch eine Menge Arbeit, jede zu Dio. Offensichtlich sollen diese Luft Bilder sein. Ich habe meine E-Mail hier nicht in meinem ganz sicher über die Balance von all dem. Aber insgesamt, das bringt die Idee über. Und ja, ja, ich habe auch die mobile Version. Nichts zu kompliziert. Es bricht einfach zusammen. Und wie Sie sehen können, gibt es nicht viel daran. Es sind wirklich einfache Elemente, wie Sie beginnen, es zu brechen. Nun, beim Erstellen einer Seite wie dieser, gibt es eine Menge Dinge, über die man nachdenken muss, und die größte, die dazu neigt, ist Browser-Kompatibilität. Einfach gesagt, verschiedene Browser unterstützen eine andere Reihe von Funktionen, und es wird immer neuere Funktionen, die ältere Browser, die Menschen immer noch verwenden, nicht unterstützen. Und es kommt auf eine Entscheidung, die Sie darüber treffen müssen, welche Funktionen Sie tatsächlich nutzen müssen und welche anderen Möglichkeiten es gibt, über bestimmte Dinge zu gehen. Nein, natürlich, Kompatibilität ist mawr wichtig, in einigen Fällen weniger und andere, und das hängt weitgehend von Ihrem Publikum ab. Wenn Sie etwas bauen, das unbedingt einige der neuesten Funktionen verwenden muss, und das ist in Ordnung, wissen Sie nur, dass Sie nicht in der Lage sein, so viele Benutzer zu erreichen. Aber wenn Sie etwas bauen, das Sie so kompatibel wie möglich sein müssen, müssen Sie einige Opfer bringen, und normalerweise versuche ich, den Mittelweg dort zu finden. 4. Reaktionsschneller, reagieren: Jetzt, da ich die Gestaltung des Inhalts und des Stils und der Struktur für unsere Website behandelt habe, möchte ich über ein paar kleinere Dinge sprechen. Und das erste, worüber ich sprechen würde, ist Reaktionsfähigkeit. Wir möchten sicherstellen, dass unsere Website von so vielen verschiedenen Orten wie möglich betrachtet werden kann, vor allem wenn man bedenkt, dass etwa die Hälfte Ihres Traffics wahrscheinlich Unmold Geräte sein wird . Natürlich hängt das von Ihrer Zielgruppe ab, aber im Allgemeinen wird das wahr sein. Also, wie machen wir das? Nun, das allgemeine Konzept, das wir beachten müssen, ist, dass wir wollen, dass unsere Website fließend ist. Wir wollen, dass sich die Struktur auf unterschiedliche Weise anpasst, je nachdem, welche Art von Struktur wir haben wollen. Ich habe im letzten Teil kurz darüber gesprochen, als ich zeigte, wie meine Website die Navigation auf der linken Seite nimmt , um oben zu sein, wenn ich das Fenster zu schmal mache, und das ist, was ich auf Mobile tun werde. Nun, wie mache ich eine Menge davon? Nun, das erste, was wäre über die Dimensionierung, denn, wie Sie vielleicht wissen, haben viele Telefone einen Bildschirm, der 12 80 von 7 2019 20 Monat in 80 oder sogar vier K Auflösungen ist . Wie stellen wir sicher, dass unsere Inhalte auf ihrem Gerät nicht extrem klein erscheinen? Jetzt gibt es ein paar komplizierte Wege, die in der Vergangenheit gemacht wurden, aber heutzutage ist es wirklich einfach und sehr gut unterstützt. Und es sind die Meta-Vieux-Port-Tags, die es heißt. Es geht darum, hier einige Eigenschaften zu definieren, die anpassen, wie der Browser gerendert wird. Der Inhalt der Seite vergrößert sich im Wesentlichen automatisch auf ein angemessenes Niveau für dieses Gerät. So Telefon zum Beispiel verwendet meinTelefon zum Beispieleinen 12 80 mal 7 20 Bildschirm. Aber die Größe, die der Inhalt tatsächlich rendert, ist, als ob er nur 420 Pixel breit war, nicht 720. Also scheint alles in einer vernünftigeren Größe zu sein, die ich auf einem Monitor mit typischerer Auflösung erwarten würde . Jetzt gibt es verschiedene Eigenschaften, die Sie hier verwenden können. Diese Luft nur die drei, die ich benutze, die ich von anderswo gelernt habe, und es hilft, den Inhalt speziell an das anzupassen, was auf der Seite ist, nicht das, was jetzt übergelaufen ist. Natürlich geht es nicht darum, alles zusammenzuklappen. Also, wie machen wir das? Nun, wir verwenden Medienabfragen, die ein weiteres Feature sind, das wieder ziemlich neu ist, aber immer noch gut unterstützt wird. Sie verwenden diese Syntax und Sie übergeben einen Parameter, und hier überprüfe ich nach einer maximalen Breite von knapp unter 640 Pixeln, so dass ich unter dieser Größe in die mobile Ansicht zusammenbrechen werde. Und darin könnte ich einfach Regeln definieren, wie ich es normalerweise tun würde, um alles vom Normalen aus anzupassen, um zu ermöglichen, dass besser für Mobilgeräte passt. Und dann habe ich noch ein paar mehr, um die Größe, ings und den Abstand der verschiedenen Elemente anzupassen . Also diese beiden verschiedenen Methoden die Methode Vieux Port-Tag und Medienabfragen gehen einen langen Weg, um Ihre Website mobil freundlich zu machen. Jetzt wissen wir auch, dass Sie darüber nachdenken, wie die Eingabe erfolgt. Und was ich damit meine, ist auf einem Computer. Sie werden in der Regel mit einer Maus, und das bedeutet, dass Sie in der Lage sein, über Links auf Mobilgeräten zu bewegen. Offensichtlich können Sie nicht auf solchen Bildschirmen schweben, also sollten Sie wirklich keine Informationen über ein Hover-Ereignis enthüllen, und ich habe das in der Vergangenheit getan, ohne es zu merken. Ich gehe voran und zeige es dir auf meiner aktuellen Spieleseite. Ich habe diese schönen Fliesen, die jedes meine Spiele darstellen, und wenn ich über sie schwebe, enthüllen sie den Namen und das ist alles großartig. Aber ich kann nicht auf dem Handy über sie schweben, also kann ich den Namen nicht wirklich preisgeben. Nein, es könnte andere Dinge geben, und Sie denken über Ihre Website auf Handy. Aber im Allgemeinen deckt das fast alles ab. Also schätze ich, dass es vorerst darum geht. Also gehen wir zum nächsten Teil über. 5. Verwirrung und Frustrieren: Alles im Moment möchte ich ein wenig darüber sprechen, Verwirrung und Frustration für Benutzer Ihrer Website zu verhindern, und der erste Punkt, den ich machen möchte, ist, dass Vorhersagbarkeit sehr wichtig ist. Was ich meine, ist, dass, besonders wenn es um interaktive Elemente geht, diese Interaktionen sich so verhalten sollten, wie die Menschen es wieder erwarten. Alles ist wieder da, um sicherzustellen, dass alles intuitiv ist. Der nächste Punkt, den ich ansprechen möchte, ist Rätselraten. Sie möchten nicht, dass der Benutzer erraten muss, was bestimmte Dinge tun. zum Beispiel Wenn Siezum BeispielSymbole für die Navigation verwenden, wenn ihr Zweck nicht extrem klar ist und selbst wenn dies der Fall ist, möchten Sie wahrscheinlich, dass eine Art Steuer erklären kann, was es ist. Und das nächste wäre, dass Sie die Ladezeiten minimieren und die Kompatibilität maximieren möchten . Ladezeiten sind wichtig, dass die Leute nicht auf Ihre Sehenswürdigkeiten und Last warten wollen. Es ist gut, darüber nachzudenken, wo Sie tatsächlich Bilder oder andere Multimedia benötigen und wo Sie ohne sie davonkommen können. Es gibt viele Möglichkeiten, Stylings und CSS zu verwenden, die wirklich schön aussehen und keine Bilder benötigen . Es gibt viele Techniken, um diese Dateien klein zu halten, auch wenn Sie viele Bilder benötigen, die einfachsten Möglichkeiten, natürlich, denken Sie über die Dateitypen und Komprimierungsmethoden. Zum Beispiel, die meiste Zeit werden Sie entweder J Pegs oder P und G s P und G sind gut für einfachere Bilder, diejenigen mit mehr einfarbigen Farben oder partiellen Transparenzen. Natürlich kannst du das nicht mit J Pegs jetzt mit P- und G's machen. Wenn Sie 256 Farben verwenden, sind weniger und Sie benötigen keine partiellen Transparenzen. Sie können die Indizierung tatsächlich ähnlich wie ein Jiff verwenden, aber es ist tatsächlich eine kleinere Dateigröße als ein Jeff, und ich benutze diese Technik viel. Und natürlich natürlich bei J Pegs darum, geht es bei J Pegs darum,zu bestimmen, mit welcher Kompression Sie die Bildqualität ohnehin nicht zu sehr zerstören . Es gibt ein paar andere Techniken, die ich nicht wirklich zu viel erkundet habe, aber sie sind nützlich, um sich bewusst zu sein, und es geht darum, verschiedene Versionen des Bildes zu laden, die unterschiedlich groß sind, abhängig von der Auflösung des Geräts. Sie sehen es auf einer anderen Sache, die sich darauf bezieht, sind benutzerdefinierte Schriftarten. Es könnte wirklich schön von einem Design-Standpunkt aus sein, eine Last gebaut, Ihre eigenen Schriftarten auf der Seite zu verwenden. Aber wenn Sie nicht vorsichtig sind, kann ein wenig aus der Hand. Normalerweise habe ich versucht, es so zu halten, dass ich ein oder zwei benutzerdefinierte Schriftarten mag. Und wenn Sie damit durchkommen könnten, kann die Verwendung von Systemschriftarten eine wirklich gute Idee sein. Es gibt eine neue Technik, die diesen Systemschriftstapel verwendet. Es mag ein wenig lang und ungewöhnlich aussehen, aber das ist eine neue Art der Handhabung von Mitteln, die die besten Schriftarten verwenden, die Betriebssysteme und Browser Sie kennen, einschließlich jetzt natürlich, wenn Sie wollen, dass es überall gleich aussieht. Custom Bonds sind dafür wieder eine wichtige Sache. Und was die Kompatibilität zwischen verschiedenen Browsern betrifft. Das hängt von all dem Zeug ab, über das ich vorhin gesprochen habe. Denn wenn jemand einen Browser benutzt, ist das nicht wirklich so dunkel und die Seite funktioniert nicht zu gut für sie. Das wird keine sehr gute Benutzererfahrung sein. Sie möchten sicherstellen, dass so viele Menschen Ihre Website wie möglich nutzen können, aber natürlich zu einem vernünftigen Grad 6. Überlegung von Barrierefreiheit: Jetzt gibt es ein letztes Konzept, das ich besprechen möchte, und das geht um Barrierefreiheit. Jetzt deckt dies eine sehr breite Palette von Themen ab, aber ich werde versuchen, auf einige der Dinge zu brechen, die ich im Auge behalten möchte. Der erste Punkt wäre über Kontrastunsichtbarkeit, und das kommt auf Farbe, Größe und Form von Objekten auf der Seite. Wenn es um Farbauswahl geht, möchten Sie über den Unterschied zwischen dem Hintergrund im Vordergrund nachdenken. Es ist auch eine gute Idee, um sicherzustellen, dass die Farben nicht zu scharf und fett und einfach grell und schwer zu sehen sind. Du willst über Farbenblindheit nachdenken. Es gibt verschiedene Werkzeuge, die Sie verwenden können, um Farbenblindheit zu emulieren, und dann, soweit Größe und Form von Objekten, ist nur im Allgemeinen darum sicherzustellen, dass die Schriftarten, die Sie unsere Leiste Kräuter in der Größe wählen , die Sie beabsichtigen für sie zu sein. Jetzt gelten diese Konzepte für Dinge, die gerade Text, aber das ist in der Regel die Hauptsache, über die Sie sich Sorgen machen müssen. Eine andere Sache, die Sie betrachten möchten, ist die Unterstützung von Seitenlesern auf Ihrer Website. Es gibt ein paar verschiedene Techniken, die Sie verwenden können, um sicherzustellen, dass der Inhalt korrekt gelesen wird für blinde Benutzer, die sich darauf verlassen müssen, dass Programme den Inhalt der Seite laut auslesen. Ich habe mir nicht wirklich Sorgen darüber gemacht, denn der Inhalt, den ich mache, neigt dazu, zunächst visuell orientiert zu sein. Aber es ist etwas, worüber man jetzt nachdenken muss. Eine andere Sache wäre, keine Präzisionsbewegungen und Navigation zu erfordern. Sie wollen nicht verlangen, dass jemand eine Hand lernen muss, und das betrifft nicht einmal nur Menschen mit Behinderungen oder Senioren. Es ist wirklich ärgerlich für jeden, durch ein Menü navigieren zu müssen, das sich immer wieder versteckt, wenn Sie sich nur den falschen Weg bewegen, Oh! 7. Schlussgedanken: Alles klar. Ich schätze, das deckt fast alles ab. An dieser Stelle sollten Sie ein ziemlich solides Verständnis dafür haben, warum ich Websites so gestaltet habe, wie ich es tue. Und denken Sie daran, dass es keine harten und schnellen Regeln gibt, wenn es darum geht, etwas zu entwerfen . Es geht nur darum, bestimmte Punkte im Auge zu behalten und herauszufinden, was für Ihr Projekt am besten ist . Nun, wenn Sie etwas auf dem Weg gebaut oder entworfen haben, wäre es toll für Sie, es unten zu teilen. So kann jeder sehen, woran Sie gearbeitet haben, und Sie müssen nicht einmal warten, bis Sie fertig sind, um es teilen zu können. Sie können es auf dem Weg aktualisieren, hat Fortschritte gemacht und erhalten Input von anderen Personen, die dieser Klasse folgen. Und Sie können mir sogar Fragen stellen und ich werde versuchen, so schnell wie möglich zu sein. Denken Sie daran, ich weiß definitiv nicht alles, wenn es um all das geht. Ich teile nur die Punkte, die ich in den Jahren des Aufbaus meiner eigenen Websites gelernt habe. Also hoffe ich, dass ich diese Punkte gut genug geteilt habe. Und wenn Sie daran interessiert sind, zukünftige Klassen zu sehen, auf die ich hier poste. Achten Sie darauf, mir unten folgen, die sehr geschätzt werden und fühlen Sie sich frei, alle Anfragen über Dinge, die Sie mich mögen, um Ihnen zu zeigen, ob das mehr über Web-Design-Entwicklung oder etwas über Spiel Knochen ist. Aber wie auch immer, ich schätze, das wird heute eine Vier sein müssen, also ja, ich sehe dich herum. Auf Wiedersehen.