Dachrinnen - Polsterung und Rand für Säulen mit Hintergrund oder Rand


9

Was sind die empfohlenen Gestaltungsrichtlinien für Dachrinnen, wenn die Form einer Säule (oder eines Kastens oder eines Layoutmoduls) deutlich sichtbar ist, weil sie einen eigenen Hintergrund oder Rand hat?

Normalerweise wird zwischen dem Rand des Felds und seinem Text etwas Platz eingefügt. Aber woher soll man diesen Raum heraufbeschwören? Durch Erweitern des Feldes oder Verkleinern des Textes ?

Zur Veranschaulichung hier einige (aber nicht alle) Optionen ...

Geben Sie hier die Bildbeschreibung ein

(Außerdem hätte ich jedes Raster mit einer beliebigen Anzahl von Spalten und Breiten verwenden können - dies dient nur als Beispiel - die eigentliche Frage könnte jedes Mal gestellt werden, wenn sich ein Layout über Dachrinnen erstreckt.)

Ich habe einen Stapel von Texten auf gitterbasierten Layouts durchgesehen, aber bisher habe ich nur einen gesehen, der sich mit der Angelegenheit befasst: Nudge Your Elements von Khoi Vinh.

Was vermisse ich? Oder gibt es einfach keine klare Richtlinie?

Da eine der Motive für gitterbasierte Layouts darin besteht, das Gefühl der globalen Ausrichtung zu verbessern, könnte man argumentieren, dass die Entscheidung davon abhängt, was mehr Ausrichtung erfordert. die Box oder ihr Inhalt?

Wenn ich nicht falsch verstehe, spricht sich Khoi Vinh in seinem Artikel für Option 3 aus.

Ich finde mich zwischen Option 3 und Option 6 hin und her. Bei Option 3 ist das Feld ausgerichtet, aber der Text fühlt sich eng an. Bei Verwendung von Option 6 werden jedoch weder Box noch Text ausgerichtet (obwohl man sagen könnte, dass die implizite Mitte zwischen Textkante und Boxrand das 'Ding' ist, das jetzt ausgerichtet ist).

Wenn ich über das Internet hinausgehe, spricht auch keine meiner Lektüren über Buchgestaltung und die Kanons der Seitenkonstruktion über dieses Problem. Ich kann sehen, wie die Kanonen für die überwiegende Mehrheit des Buchdrucks "Schwarzer Buchstabe auf klarem Hintergrund" funktionieren, aber sobald man einem Seitenlayout Farbe hinzufügt (oder ein Schwarzweißschema umkehrt), kommt die Rinnenfrage zurück.

Mmm, ich denke die Frage ist; Gibt es Richtlinien für die Wahl zwischen den von mir dargestellten Optionen - oder habe ich mich über das Designerrecht hinaus gewagt und geht es nur darum , was gut aussieht und sich gut anfühlt ?


2
Ich habe kein persönliches Rindfleisch mit den Meinungen der anderen hier, was am besten aussieht (tatsächlich stimme ich wahrscheinlich # 3 zu), aber Kanons, Richtlinien und Regeln sind letztendlich nichts anderes als willkürliche Appelle an die Autorität. Sie sind großartige Werkzeuge, aber suchen Sie nicht nach Ultimate Truth (tm)
horatio

Lorem Hipstum, richtig?
e100

Antworten:


5

Jedes Mal, wenn Sie ein Raster verwenden, müssen Sie es konsistent verwenden, es sei denn, Sie haben ein Element (normalerweise nicht mehr als eines auf einer bestimmten Seite), das aus gutem Grund gegen das Element verstößt - um es hervorzuheben oder die Stimmung der Seite zu ändern . Der Kontrast muss kühn und klar überlegt sein, damit dies funktioniert. (Mit "Arbeit" meine ich, dass es nicht wie ein Fehler aussieht.)

Ein streng befolgtes Gitter ist in Frieden. Es gibt wenig oder gar keine Spannung; Dinge zeigen sich dort, wo das Auge sie erwartet, und der Leser ist niemals erschrocken oder fühlt sich unwohl.

In diesem Fall sieht es wie ein Fehler aus, wenn Ihr Hintergrund wie in # 4 ein wenig gegen das Raster verstößt. Es ist umständlich. Das völlige Fehlen einer Dachrinne drückt die Kiste gegen die anderen Säulen. Gegen die offene Führung des Textes, die eine Erwartung der Offenheit setzt, ist dies eindeutig falsch.

0 liefert keinen Kontrast, so dass die zweite Spalte vom Rest undifferenziert ist. Unter bestimmten Umständen ist es das, was Sie wollen.

Die Beispiele für "halbe Dachrinnen" in Nr. 5 und Nr. 6 definieren die Dachrinne neu und verengen sie. Sie definieren das gesamte Gitter horizontal und vertikal neu, da in diesem Fall die Rinne genau dem Linienabstand entspricht. Das ist schlecht für Text an sich, kann aber mit der Box funktionieren. In # 6 haben Sie jedoch auf beiden Seiten des Textes einen unverhältnismäßigen Leerraum im Vergleich zu oben und unten. Das ist umständlich und unangenehm, weil es keinen Sinn ergibt. # 5 wäre vorzuziehen, da der Leerraum gleichmäßiger verteilt ist. Aus dem gleichen Grund ist # 3 # 2 vorzuziehen.

Insgesamt würde ich also Lauren zustimmen und # 3 als Ihren besten Schuss empfehlen. Dies ist auch der beste allgemeine Fall, unabhängig von der Anzahl der Spalten.

Es gibt Regeln. Sie können sicherlich gebrochen werden, wenn Sie einen guten Grund haben, aber jedes Mal, wenn Sie dies tun, müssen Sie zielgerichtet, mutig und klar "wie geplant" sein. Helvetica Black gepaart mit Georgia arbeitet, weil sie unterschiedlich sind; Trebuchet gepaart mit Verdana kratzt an den Nerven, weil sie nicht unterschiedlich genug sind. Eine große, quadratische, rote Box, die sich über eineinhalb Spalten erstreckt, könnte funktionieren. ein leicht abweichendes Grau wird es nicht.


2

Ich stimme für Option 3. Die Ränder des grauen Kästchens definieren die Spalte vertikal, sodass diese Zeilen nicht (ohne Grund) verletzt werden können. Die Dachrinnen sollten für alle drei Spalten gleich sein. Fügen Sie daher den Text in das graue Feld ein. Der Einschub von Option 2 ist etwas zu tief.

Das ist es, was ich im Druck gewohnt bin, also sieht es auch im Web "richtig" aus.


0

Wenn dies für das Webdesign ist, würde ich dringend empfehlen, keine Auffüllung in horizontaler Richtung zu verwenden, wenn Sie sich mit der Konsistenz zwischen Browsern befassen. Verschiedene Browser behandeln Divs und Padding so unterschiedlich, dass die Präsentation unterbrochen werden kann.

Verwenden Sie in jedem Fall den Rand nur horizontal. Es ist erforderlich, ein oder zwei Klassen hinzuzufügen, um das gewünschte Layout zu erhalten (z. B. einen Satz Ränder für das div und einen anderen für den Absatz), aber auf lange Sicht ist es zuverlässiger. Vertikale Polsterung ist jedoch im Allgemeinen kein Problem.


Verdoppelt die aktuelle Version von IE immer noch diese Margenverdopplungssache? Gnade, das ist nervig.
Lauren-Clear-Monica-Ipsum

1
Sie können Polster / Ränder in alle Richtungen gut machen. Alles, was Sie tun müssen, ist auf Ihre Box-Modelle (Eltern und Kinder) zu achten.
Dawson

Sie können Polster verwenden, aber dann müssen Sie dies bis in die Kaskade hinein berücksichtigen. Es ist viel einfacher und zuverlässiger, den Rand des Elements am weitesten unten in der Kaskade zu verwenden. Dies funktioniert in jedem Browser konsistent. Natürlich nur persönliche Meinung.
Benny Andajetz
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.