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.

Verwandte Artikel

Wie erstelle ich eine Blume Hochsteckfrisur in 6 einfachen Schritten

Gestern war die Frühlings-Tagundnachtgleiche, der erste offizielle Tag der Saison! Nun, dass Frühling endlich da ist, feiere ich durch mein Haar in eine hübsche Blume Hochsteckfrisur drehen. Diese zeitgemäße Art ist trügerisch einfach erstellen mit grundl...

Wie erstelle ich eine einfache, chaotisch Ballet Bun in 5 Schritten

Haben Sie einen schlechten Tag? Werfen Sie Ihr Haar zu einem hohen, unordentlichen Knoten! Weniger strukturiert als einem traditionellen Ballett-Dutt, diesen Look beinhaltet weiche Locken um Textur und Volumen zu erstellen. Diese Frisur ist sehr einfach z...

Hier ist wie erstelle ich eine Vaccuforming-Maschine

[youtube]Gx66mS7U2vY[/youtube] Über habe auf io9, ich meine Fortschritte auf wie erstelle ich eine Reihe von Stormtrooper Rüstung, charting wurde ein Kit Durcharbeitung. Aber wie macht man das Kit in erster Linie? Sie brauchen eine Vaccuforming Masch...

Wie erstelle ich ein Kleinkind lästige Pflicht Vorstand

Der kleine Mann ist 3 1/2 Jahre alt &, die Schläge meines Erachtens auf einer regulären Basis. & Dreieinhalb. Ich schwöre, es fühlt sich an wie ich war rocken ihn bei 02:00 mit einer warmen Flasche & ein Gebet, das er wieder ins Bett, aber nee...

Jeffrey Katzenberg: Wie erstelle ich eine perfekte Familienfilm

Kung Fu Panda 3 im Vereinigten Königreich freigegeben wird, schließt sich Jeffrey Katzenberg, Co-Gründer von DreamWorks, sieben geheime Zutaten für die Herstellung von Filmklassikern, die die ganze Familie genießen können 1 einen liebenswerten Charak...

Wie erstelle ich ein Baby

Wie man ein Baby?  Cassidy Curtis und Raquel Coelho mit einer DSLR-Kamera über einen Zeitraum von 9 Monaten nahm eine Montage aus Fotos erstellen dieser Liebling video wie man ein Baby zu machen. Zwei Personen nehmen, fügen Sie ein wenig warme Luft und bo...

Einwöchige Wunder: Wie erstelle ich eine erfolgreiche Ausstellung in sieben Tagen

Unfertigen Installationen, kleine Budgets – und einer feministischen Punk-Chorgesang Virginia Woolf. Das Show-pro-Woche-Projekt an der ICA erstreckte sich Künstler an ihre Grenzen. Tom McCarthy, Melanie Manchot, Eva Rothschild und Deborah Coughlin zeigen...

Wie erstelle ich eine leckeren Cocktail mit Verbot-Ära Hacks

Verbot war eine dunkle Zeit für Amerika. Alkohol wurde verboten, und Kriminalität explodiert war. Aber das bedeutet nicht, dass Menschen nicht mehr kommen mit neuen Möglichkeiten, um Spaß mit Alkohol haben. Vor ein paar Monaten habe ich meine Hände über R...

Wie erstelle ich ein paar Schuhe

Wie schwer kann es sein, deine eigenen Schuhe zu machen? Antwort: sehr hart und auch sehr schmerzhaft Ich schreibe dies mit Fingern ausgelöscht. Sie sind nicht sogar Finger mehr. Sie sind Wunden. Ich bin ein gebrochener Mann, und es ist alles, weil ich ve...

Schönheit-Rx: Wie erstelle ich eine Anti-Aging-Hautpflege

Hallo! Meine Frage geht um Hautpflege-Produkte, ist es in Ordnung, verschiedene Produkte mit unterschiedlichen Eigenschaften, die in meiner Haut verwendet zu haben, ich bin 42 Jahre alt und ich habe feine Linien mit Sommersprossen (die übrigens war ich vo...

Wie erstelle ich eine Blume Krone (mit kleinem Budget!)

Im nächsten Monat bin ich dazu beitragen, eine Veranstaltung ausrichten, wo Blume Kronen Teil des Themas sind. Ich war wirklich begeistert davon, bis ich zu dem Bastelgeschäft Seidenblumen herausgreifen ging, um meine Krone zu machen. (Rekord Kratzer hier...

Setzen Sie sich selbst zuerst! Wie erstelle ich eine einfache tägliche Beauty-Routine

Es geht nicht um sein hübsch. Es geht nicht darum sich mit niemandem zu vergleichen. Es ist ganz einfach darum, Ihr beste Gesicht freuen uns jeden Tag. Nicht kleiden wie Sie heraus auf einem Datum vorangehen. Nicht aufstellen ein volles Gesicht machen auf...

Wie erstelle ich ein Baby - Zeitraffer-Video

Nehmen wir an, dass Ihre Kinder Sie Fragen wo die Babys herkommen. Sie sagen "Mamas Bauch". "Aber wie?" Fragen sie. "Ich brauche mehr Informationen, Vater." (Diese sind sehr zu artikulieren Kinder.) Wenn Sie ihnen die Wahrhei...

Wie erstelle ich eine glühende federnd Ei mit dem Zauber der Essig

Haben Sie jemals versucht, ein Ei auf die Beine? Nicht! Oder nicht, bis Sie mindestens dieses Video gesehen haben. Wie Sie wissen, haben Eiern Muscheln, die Sie vor dem Verzehr entfernen müssen. Jedoch wenn Sie komplett Eiern in Essig tauchen, wird der Es...