Wie erstelle ich eine lesbarere Wikipedia
Wir lieben Wikipedia. Die Idee einer ständig aktualisierten Knowledge-base, wo jeder willkommen ist, lesen und dazu beitragen, ist atemberaubend und wir tauchen in diesem großen Pool von Inhalten auf nahezu täglich um 1910. Aber den letzten drei Jahren lernen mehr über Typografie haben uns bewusst gemacht seine Grenzen. Während Wikipedia groß für das Lernen ist, bietet es einfach nicht das bestmögliche Umfeld dazu.
Während große Teile des Internets eine erstaunliche Reise in Bezug auf die Typografie diesen letzten Jahren durchlaufen haben, ist Wikipedia Leseerfahrung immer noch in den 90er Jahren stecken. Wir wollten ein paar Tage dauern und schlagen eine Richtung durch die Wikipedia vorwärts konnte, mit Schwerpunkt auf Artikel und lesen ohne Umsteigen zu viel, was es ist und sollte dies auch weiterhin sein.
Uns ist klar, dass dieses bescheidenen Experiment von uns nicht informiert ist, und dass bieten wir Ihnen hier noch einmal überdacht werden, wenn richtig gemacht, aber zum Wohle den Punkt vermitteln wollten wir uns auf nur eine Sache zu konzentrieren – Wikipedia lesbar zu machen.
Wikipedia-heute
Wikipedia ist heute groß hinsichtlich des Inhalts, aber nicht in Bezug auf die Präsentation. Für eine Website mit dem Kern Zweck der Bereitstellung von Artikeln für die Leser ist das Leseerlebnis einfach nicht, was es sein sollte. Der Text ist zu klein, die Schlangen sind zu lang und die führende ist zu eng. Bilder sind winzig und das generelle Layout enthält eine Menge an visuellem Lärm, die Sie von der eigentlichen Lesung ablenkt.
Bau der Raster
Wie immer beim Raster erstellen wir beginnen mit der Typografie. Wir wollten den Inhalt in die Mitte schieben, verwenden einen lesbaren Textgröße die Maßnahme auf eine geeignete Länge zu beheben, erhöhen die führende, machen die Bilder größer und bieten eine richtige Struktur mit ausreichend Leerzeichen und ein einfaches, Hierarchie zu folgen.
Auf Desktop, wir wollten um Platz für den Haupttext Absatz zu machen und eine zusätzliche Seite-Bar mit Bilder und Tabellen auf der rechten Seite. Wir wollten auch eine Design, die einfach vom Desktop, Tablet und Handy, anpassen konnte ohne zusätzliche apps oder mobile Versionen der Website.
Beginnend mit der Textgröße (wie hier ausführlich beschrieben) landeten wir schließlich mit einer 8 Stützenraster, wo der Körper in den ersten vier umfassen würde. Das Netz würde dann skaliert bis 4 Spalten auf Tabletten und 2 Spalten auf Handys, bewegliche Sidebar Inhalte darunter entspricht Absätze.
Dem Desktop
Mit der primären Spalte und Seitenleiste bereits in Kraft war bevölkern den Rest der Seite relativ geradlinig. Wir wollten den Header auf Suche konzentrieren und machte die alte Seite-Menü Horizontal und als eine sekundäre Header, nicht ablenken von der Lesung beim Scrollen unten auf der Seite platziert.
Der Rest der Elemente blieben im Wesentlichen unverändert, abgesehen von wird an das neue Gitter und Struktur angepasst. Die Schriften und Farben wurden ähnliche gelassen. Das Ergebnis ist eine Seite, die immer noch sieht und fühlt sich sehr ähnlich wie Wikipedia, aber ist viel einfacher zu lesen.
Die Tablette
Die Tablet-Version skaliert das Raster bis zu vier Spalten, verschieben, dass die Sidebar Inhalte darunter Absätze entspricht. Außer, dass nicht viel geändert. Das zweite Headermenü ist versteckt und ein "Menü" in primäre Kopfzeile erreichbar.
Das Telefon
Die mobile Version skaliert das Raster bis zu zwei Spalten mit kürzeren Strecken, den Text in einem lesbaren Format zu halten. Sekundäre Abschnitte sind standardmäßig geschlossen und entwickelt durch Tippen auf die Überschrift, um Artikel weniger schwer zu blättern machen.
Fazit
Während diese Skizzen weit Funktion voll sind, denken wir, sie bieten einen Einblick, wie groß eine Rolle Typografie und Gitterstruktur spielt heute im Web zugänglich machen. Dies ist die Wikipedia, die wir selbst verwenden möchten, und wir freuen uns sehr um zu sehen, wie in den folgenden Jahren, in Bezug auf die Gestaltung der Website angenehmer zu lesen Wikipedia entwickelt.
1910 ist ein Grafik Design und Kunst Richtung Studio. Dieser Beitrag erschien ursprünglich auf seinem Blog. Es wurde mit Erlaubnis neu aufgelegt.