it-swarm.com.de

Was sind die Faustregeln für Ränder im Webdesign?

Mein Webdesigner sagt mir, dass auf einer Webseite die leeren Ränder oder Auffüllungen immer ein Vielfaches eines Standards sein sollten. Zum Beispiel 6 px, 12px, 18px. Dies sollte zu gut ausbalancierten Layouts führen. Ich würde gerne ein bisschen mehr darüber erfahren:

Sollte man das wirklich überhaupt nicht verletzen?

Sollte der Standard horizontal und vertikal gleich sein?

23
Tintels
  • Die beste Lernressource hierfür wäre eine gute Einführung in die Typografie - wahrscheinlich der wegweisende Klassiker von Bringhurst (siehe http://webtypography.net für eine gute Zusammenfassung, die auf das Web angewendet wird), obwohl e. G. Spiekermanns „Stop Stealing Sheep…“ ist auch für den Anfang nicht schlecht - und für Design-Grids (siehe meine Antwort hier auf UXexchange ).

  • Beim Entwerfen von Rastern verwenden Sie meistens ein Basismodul (Proportionen, die idealerweise durch Arbeiten ab dem Inhalt nach außen definiert werden), an den der gesamte Inhalt angepasst ist (dh ein Vielfaches davon) ).

  • Vertikale und horizontale Ränder zwischen Blöcken sind in den meisten Fällen unterschiedlich. Vertikale Leerzeichen orientieren sich häufig am Grundlinienraster (siehe z. B. wieder Bringhurst). Es wird dringend empfohlen, einen zu verwenden, um einen einheitlichen vertikalen Rhythmus zu erzielen.

  • Die minimale Menge an horizontalem Leerzeichen, d.h. e. In erster Linie wird die Trennung zwischen Spalten des Körpertextes (Gutter) durch Gestaltpsychologie geregelt, wobei Schriftgröße, Zeilenabstand und Zeilenbreite die wichtigsten Einflussfaktoren sind. Sie sollten Textblöcke so weit von anderen entfernt platzieren, dass Ihre Empfänger sie als eigene Einheiten sehen können. Eine traditionelle Faustregel würde die Dachrinne mindestens 1,5 ems breit machen, um deutlich breiter als jedes mögliche Leerzeichen innerhalb einer Textzeile zu erscheinen. Auf dem Bildschirm ist der gute Zeilenabstand jedoch tendenziell etwas breiter als beim herkömmlichen Druck. Daher werden Sie wahrscheinlich ein bisschen mehr brauchen. In den meisten Fällen empfiehlt es sich, zunächst denselben Wert wie Ihr Grundlinienraster zu verwenden.

  • Übrigens: Designstandards sind - sofern sie nicht wesentlich durch Ergonomie oder kognitive Psychologie gestützt werden - niemals Standards im strengeren Sinne des Wortes. Sie können gegen jeden „Standard“ verstoßen, solange Sie wissen, warum Sie dies tun.

14

Ja und nein. Ihr Designer könnte sich auf die Nähe durch Gruppierung beziehen. Die Leerzeichen (in Ihrem Fall die Ränder) trennen verschiedene Gruppen von Elementen voneinander.

Mehr zum Thema: Gruppierungselemente für klares Webseiten-Design

6
Benny Skogberg

Es ist besser, relative Werte zu verwenden - "em" s oder Prozent, da der Rand nur in einem bestimmten Verhältnis von Breite zu Höhe gut aussieht.

Relative Größen sind auch in festen Layouts nützlich, da Sie sie nur an einer Stelle ändern müssen, wenn Sie sie zum Verkleinern/Verbreiten benötigen.

Die Antwort lautet also: Verwenden Sie keine Pixel, verwenden Sie "em" für Ränder und Boxgrößen, und es sollte meiner Meinung nach zwischen 0,5 em und 2em liegen - abhängig von der visuellen Erfahrung.

Das Verhältnis zwischen vertikalem und horizontalem Rand hängt vom allgemeinen "vertikalen und horizontalen" Rhythmus ab (Google).

3
Kamil Tomšík

Das Layout dieser Site ist ein gutes Beispiel dafür, wie eine Kombination aus der Einhaltung mehrerer Muster ausgewogene Proportionen und eine insgesamt konsistente Struktur ergibt. Das Logo hat zum Beispiel oben und unten in seinem Kopfzeilensegment einen Abstand von ungefähr 14 Pixel, obwohl es 18 Pixel vom Rand des Fragenkopfs eingerückt ist, wodurch der Abstand von oben und unten ungefähr 30% kleiner ist als die linke Seite - andere Elemente innerhalb des Header sind ähnlich beabstandet. Auf der anderen Seite beträgt der Abstand des Textes in der Fragenüberschrift unten ungefähr 9 Pixel, oben 13 Pixel und links 24 Pixel. Dadurch wird der obere Abstand ungefähr 50% kleiner als der der linken Seite, und die Diskrepanz im unteren Bereich bezieht sich auf die Ausrichtung des Texts am unteren Rand des Hauptkopfs, zusätzlich zu dem Kopfzeilentext (vom Hauptinhalt getrennt) mit einem Teiler, obwohl näher an dem Inhalt, mit dem er enger zusammenhängt als alles andere, was ihn umgibt).

Die Proportionen variieren und sind eine Kunst für sich. Das alles hat eine Mathematik, aber das Zusammenführen einer komplexen Struktur ist in der Praxis ein allgemein intuitiver Prozess.

Ich bin mir sicher, dass es mehrere Bücher und Online-Ressourcen gibt, die dies berühren, und sie sind wahrscheinlich alle auf ihre eigene Weise hilfreich, aber mein bester Rat ist, ein begeisterter Beobachter der Proportionen in den Dingen um Sie herum zu sein - an sich und in Bezug auf ihre Umgebungen und andere Dinge in dieser Umgebung - insbesondere in der Natur. Mit der Zeit werden Sie Ihre Intuition verbessern und beginnen, diese Proportionen natürlicher nachzuahmen und sie in den entsprechenden Einstellungen anzuwenden.

2
Coswyn

Verwenden Sie ein Rasterlayout, bei dem Ihre Ränder auch durch dieses Raster angegeben werden. Ich neige dazu, das 960 Grid System zu verwenden, aber es gibt noch viel mehr, auf die andere schwören.

Für mich besteht der Vorteil darin, dass ich einmal etwas auswähle, das funktioniert, und dann nicht jedes Mal darüber nachdenken muss, wenn etwas angelegt werden muss.

2
JohnGB

Es kann hilfreich sein, innerhalb der Inhaltsabschnitte einen Standardabstand zu haben. IE Absätze, Überschriften und Listen sollten alle den gleichen Abstand haben, unter dem Rhythmus erzeugt wird. Die Faustregel lautet jedoch, Gleichgewicht und Konsistenz aufrechtzuerhalten.

2
MSaforrian

Sie sollten ja konsistent sein - aber wenn die Seite nicht benutzerorientiert ist, was nützen dann mehrere Standardränder/-auffüllungen? Ich versuche, ein Vielfaches von 5 persönlich zu verwenden, da es schneller gleichzusetzen ist.

1
culvi