Gitter im Webdesign

“Es gibt etwas anderes zwischen dieser Seite und mir … Es scheint mehr Profi zu sein und ich weiß nicht warum!”

Hast du jemals so einen Kommentar gemacht? Dennoch hast du seit einiger Zeit Photoshop (oder ähnliche Programme) benutzt, du kennst die typografischen Regeln und die des Web, die Farbpalette wurde sorgfältig ausgewählt … Kurz gesagt, nichts ist: Deine Seite scheint zerstört / désharmonisé.

Beispiel eines Gitters

Keine Sorgen, du hast wahrscheinlich kein Raster in deinem Design benutzt!

Ein Raster, wie im Film *?

Beim Drucken verwendet, ist es durchaus möglich, das Rastersystem in die Web-Domain umzusetzen. Aber Vorsicht, das Web nicht, und sollte nicht, unbedingt die gleichen Eigenschaften und Einschränkungen wie die Papierunterstützung haben. Zusammenfassend lässt sich feststellen: eine Webseite hat keine vorhersagbare Höhe oder Breite, im Gegensatz zum Drucken.

* Ein sehr blauer Film mit Motorrädern, Rekordkämpfe und ein gewisser Mr. Flynn. Du hast gefunden

Gitter: die Basen

Es gibt viele verschiedene Gitter mit so vielen konkreten Gebrauchsfällen. Wir reden hier nur über die “Standard” -Gitter, die den Webmedien gewidmet sind. Natürlich kannst du dein eigenes Raster schaffen: aber es ist nicht so einfach wie es klingt – vermeiden Sie das Rad neu zu erfinden.

Die Mehrheit der Gitter hat Seitenränder, so dass das Auge den Lesekomfort genießen kann, indem er nicht gegen die Kanten des Browserfensters “klopft”.

Anatomie eines Gitters

Ein Gitter besteht aus vertikalen und / oder horizontalen Markierungen (Achsen), die durch Rinnen für die Strukturierung des Inhalts getrennt sind. Vergessen Sie nicht die äußeren Ränder (für alle Kanten des Fensters) und die inneren Ränder (jeder Achse).

Es dient als Rahmen für die Organisation der Seite und deren Inhalt. Es ist eine Hilfe für den Designer und den Besucher. Damit ist es möglich, ein harmonisches Gleichgewicht zwischen dem Abstand und der Organisation der verschiedenen Blöcke zu erreichen.

Es wird eine besser lesbare und homogene Seite erhalten. Ohne Raster kann eine Seite mit viel Inhalt weniger angenehm sein.

Anatomie eines Gitters

Es ist leicht, sich die verschiedenen möglichen Varianten von Gittern vorzustellen, indem man spielt: die Anzahl der Säulen, ihre Breite, die Breite der Rinnen, die Ränder …

Die vertikalen Gitter

Sie können die Anzahl der Spalten auswählen, die in eine feste Breite eingefügt werden sollen. Je größer die Säulen, desto größer die Breiten.

Beispiele:

12 Spaltenraster

16 Spaltenraster

Raster mit 24 Säulen

Diese Spalten erlauben es, einen Teilungsrhythmus in horizontaler Richtung (von links nach rechts) zu geben. Die meiste Zeit ist das genug, um ein Design zu schaffen.

Vertikale und horizontale Gitter

Hinzufügen von horizontalen Abteilungen ermöglicht es, Markierungen in vertikaler Richtung (von oben nach unten) zu geben.

Beispiele:

Horizontales und vertikales Gitter

Raster mit Quadraten

Dies ist sehr praktisch für die Ausrichtung mehrerer Blöcke, die gerippt sind.

Wie wähle dein Raster aus?

Es gibt keine wirkliche Regel: es hängt vom Projekt ab. Es ist daher sehr wichtig, sich gut auf Ihr Projekt vorzubereiten, um unter anderem den Inhalt der Website gründlich zu verstehen. In dieser Hinsicht kann ein Artikel über Alsacréations für Sie interessant sein: Mockups & Rough: Sparen Sie Zeit!

Ihr Raster muss daher mit den Textlängen, der Art der Website (institutionell, Portfolio, Blog / Magazin …) usw. kompatibel sein. Wir können denken, dass je mehr Inhalt, desto mehr Spalten brauchen wir im Netz. Aber das ist keine absolute Regel, es ist immer ein Kompromiss zwischen der Menge der auf dem Bildschirm präsentierten Informationen und der Lesbarkeit.

Wo finden sie Gitter?

Viele Seiten bieten zum Download von Rastermodellen an. Allerdings bieten einige Websites nur CSS Frameworks an, die nicht immer direkt in der Design-Software verwendbar sind.

960 Rastersystem

960 Rastersystem

“960 gs” ist sehr bekannt, zusätzlich zum Vorschlagen eines Framework CSS, ist es möglich, Vorlagen für Nummern von Software (Photoshop, Fireworks, GIMP …) herunterzuladen. Die Vorlage ist in Form einer Ebene: Legen Sie sie einfach in die erste Position in Ihrer Palette und der Trick wird gespielt.

Modulares Rastermuster

modulares Rastermuster

“Modular Grid Pattern”, ermöglicht es, on the fly ein Raster direkt auf der Website zu erstellen. Sie können es dann als Muster (.pat oder .png) herunterladen, um es in Ihre Komposition zu integrieren.

guideguide

guideguide

“GuideGuide” ist eine Photoshop-Erweiterung (von CS4), um Marker zu erzeugen, die ein Raster symbolisieren. Für Informationen ist es noch in der Beta.

Anordnung der Gitter (Blöcke)

Nach der Auswahl seines Rasters muss es nun “füllen”, indem du die verschiedenen Blöcke arrangierst, die den Inhalt hosten (Bilder, Texte, Videos, Diashow …).

Viele Kombinationen