Methodik zum Aufbau von Grid-Systemen für das Web

Ich verwende seit langem vorgefertigte Rastersysteme, wie zum Beispiel das Fundamentraster, das aus einem Raster von 12 70-Pixel-Spalten und 30-Pixel-Rinnen besteht. Aber da meine Designleidenschaft nach bestmöglicher Harmonie und Proportionen sucht, möchte ich mein Raster besser an die spezifischen Projektanforderungen anpassen.

Mit welcher Basiseinheit soll ich meine Berechnungen beginnen?

Sollte ich die Höhe der Grundlinie, die x-Höhe der Hauptschrift oder vielleicht einen anderen signifikanten Wert verwenden? Ich habe einen aussagekräftigeren Typografie-Artikel über A List Apart von Tim Brown gelesen, aber er schlägt vor, ihn auf die Schriftgröße zu stützen, aber wie Erik Spiekermann betonte, hängt die tatsächliche Schriftgröße von ihrer Familie ab.

Für mich macht die x-Höhe Sinn, da sie den visuellen Raum und das Gewicht des Layouts stark beeinflusst. Aber auf der anderen Seite bestimmt die Zeilenhöhe den vertikalen Rhythmus.

Wenn ich das Gerät habe, wie entscheide ich mich für die Spalten- und Dachrinnenbreite?

Da ich die Einschränkung der Spaltenanzahl auswählen kann (abhängig von der Komplexität des Inhalts, oder sollte ich vielleicht auch andere Faktoren berücksichtigen?), muss ich mich noch für die maximale Breite der Website, den Bundsteg und die Spaltenbreite entscheiden.

Antworten (2)

Das Problem bei der Grundlage von Schriftgrößen ist, dass es sich um eine meist willkürliche Einheit auf einer Webseite handelt.

Damit meine ich, dass Sie eine 20pt-Schrift wählen können.

Aber was bedeutet das?

Wenn es sich um die von Ihnen angegebene Schriftart handelt, haben Sie eine gewisse Vermutung darüber, wie groß die Zeichen sind, aber wenn der Benutzer dies an Ihnen ändert oder eine andere Schriftart verwendet oder was auch immer Sie haben, könnten die tatsächlichen Zeichengrößen etwas sein ganz anders.

Darüber hinaus ist es für den Endbenutzer ziemlich trivial, die Größe von Schriftarten auf einer Webseite zu ändern, sodass es keine Garantie dafür gibt, dass es überhaupt so ist, wie Sie es angegeben haben.

Aber unterm Strich spielt es keine Rolle, wie Sie sich entscheiden, Ihr Netz aufzubauen. Der Punkt eines Rasters ist, dass Sie ein Raster haben. Es bringt etwas Ordnung und Konsistenz in Ihr Layout. Die tatsächlichen Abmessungen des Gitters hängen vollständig von Ihren Wünschen und Ihrer Meinung darüber ab, was für Ihre Bedürfnisse am besten aussieht.

Wenn ich das richtig verstehe, möchten Sie ein Raster basierend auf Ihrer Schriftgröße? Ich persönlich habe mich beim Entwerfen von Websites nie mit diesem ganzen Rastersystem beschäftigt, und ich mache die Dinge einfach nach Augenmaß und entscheide mich für das, was am besten aussieht.

Ich denke, wenn ich versuchen würde, ein Rastersystem auf meiner Schriftgröße zu basieren, wäre der beste Weg, dies zu tun, em-Werte anstelle von absoluten px-Werten zu verwenden. Auf diese Weise spiegeln die Werte Ihre Änderung der Schriftgröße wider.

Anstatt ein Objekt mit Attributen wie diesem zu haben:

.myclass{
    width:70px;
    margin:15px;
}

Du könntest vielleicht so etwas versuchen:

.myclass{
    width:10em;
    margin:4em;
}

Die 10 und 2 sind nur zufällige Zahlen, die ich da rausgeworfen habe, und das müssen Sie natürlich selbst herausfinden.

Ich weiß nicht ... nur ein Gedanke. Wie ich bereits sagte, halte ich mich nicht an die ganze Grid-Sache.