Verwendung von Rastern beim Erstellen von Prototypen von Seiten

Dieser Artikel ist nützlich, wenn Sie Prototypen von Websites erstellen, um Ihre Ideen Webdesignern und Entwicklern nahe zu bringen. In diesem Tutorial erfahren Sie, wie Sie ein Netz als Prototyp erstellen.

Haftungsausschluss: Wenn Sie einen Prototyp ohne Gitter herstellen, passiert nichts Schreckliches. Ein professioneller Designer oder Webentwickler fügt ein Raster für Sie hinzu. Wenn Sie jedoch lernen, mit Gittern zu arbeiten, wird die Qualität von Prototypen dramatisch zunehmen, und Sie betrachten die Seiten von Sites auf eine andere Weise.

Was ist ein Raster und warum wird es verwendet?

Ein Raster ist ein System aus vertikalen oder vertikalen und horizontalen Linien, das eine Seite in Spalten oder Zellen unterteilt. Erstellt mit einer Rasterspalte oder Zelle aus der Struktur oder dem Gerüst der Seite, mit der Designer Inhalte organisieren.

Das heißt, mit Hilfe von Gittern erstellen Sie einen Rahmen, auf dem Sie alle Elemente der Seite tragen: Logo, Menü, Schieberegler, Formular, Bild usw. Dank des Skeletts lassen sich die Elemente der Seite harmonisch positionieren, ihre relativen und absoluten Abmessungen wählen, den visuellen Rhythmus einstellen.

Ein wichtiger Punkt: Die Raster bieten Gestaltungsfreiheit, die erforderlich ist, um das Layout an unterschiedliche Bildschirmgrößen anzupassen. Das heißt, die Verwendung des Frames - ein Schritt zum Erstellen einer responsiven Seite.

Auf der fertigen Seite sind die Gitter normalerweise nicht sichtbar. Sie sind jedoch auf Prototypen und Layouts zu sehen.

Was sind die Gitter

Wenn Sie nicht professionell mit Design und Webentwicklung befasst sind, ist es ausreichend zu wissen, dass es zwei Arten von Gittern gibt: Säulengitter und Modulgitter.

Ein Spaltenraster ist ein System vertikaler Linien, das eine Seite in Spalten und Einzüge unterteilt.

Dunkle und weite Bereiche in der Abbildung sind Spalten, helle und schmale Einrückungen.

Das modulare Raster ist ein System aus vertikalen und horizontalen Linien, das die Seite in Module unterteilt.

In diesem Fall handelt es sich bei den Modulen um Rechtecke mit 20 x 20 Pixeln, die durch dickere Linien gekennzeichnet sind.

Wenn Sie kein professioneller Webdesigner und -entwickler sind, verwenden Sie ein Spaltenraster, um Prototypen zu erstellen. Dafür gibt es mindestens zwei Gründe. Erstens: Die Spaltenraster sind im Web sehr beliebt. Sie erstellen gängige Frameworks, z. B. Bootstrap, Bulma und Skeleton, die Webentwickler für das Seitenlayout verwenden.

Der zweite Grund: Für den Prototyp der Seite reicht es aus, das Spaltenraster zu verwenden. Bei Bedarf fügt ein professioneller Webdesigner ein modulares Raster hinzu, wenn Ihre Skizze in ein vollständiges Layout umgewandelt wird.

So verwenden Sie Netze beim Prototyping

In diesem praktischen Abschnitt erfahren Sie, wie Sie beim Erstellen von Prototypen Netze verwenden.

Wo sollen Gitter gezeichnet werden?

Die Antwort hängt von den Tools ab, die Sie für das Prototyping verwenden. Gitter können von Hand gezeichnet werden, wenn sich der Prototyp auf einem Blatt Papier befindet. Wenn die Skizze mit speziellen Programmen und Diensten erstellt wurde, gehen Sie auf die Einstellungen ein. Die Tools der gängigsten Prototyping-Software verfügen über Raster. Beispiele unten.

Um das Raster in Moqups zu aktivieren, klicken Sie auf das Arbeitsbereichssymbol und aktivieren Sie die Option Layoutraster anzeigen. Wenn Sie ein modulares Raster benötigen, aktivieren Sie die Option Papierraster anzeigen.

Um Raster in Proto.io zu aktivieren, wählen Sie das Menü Einstellungen - Rastereinstellungen.

Aktivieren Sie die Option Layout anzeigen. Wählen Sie die Anzahl der Spalten, ihre Breite und die Breite der Einrückungen zwischen den Spalten und entlang der Seitenränder aus. Diese Einstellungen werden nachfolgend erläutert.

Wenn Sie ein modulares Raster benötigen, aktivieren Sie die Option Raster anzeigen und geben Sie die Einstellungen an.

Wenn Sie Justinmind Prototype verwenden, wählen Sie im Editor die Registerkarte Vorlagen und verwenden Sie eines der Vorlagenraster: 12 oder 16 Spalten.

Wenn Sie eine andere Prototyping-Software verwenden, suchen Sie die Netze selbst.

Wie man ein Gitter baut

Erstellen Sie ein Raster - wählen Sie die Anzahl der Spalten, deren Breite sowie die Breite der Einrückungen zwischen den Spalten und entlang der Seitenränder.

Frage: Wie viele Spalten sollten sich im Spaltenraster befinden? Die kurze Antwort lautet 12. Es geht nicht einmal darum, dass die meisten CSS-Frameworks, die Webentwickler verwenden, auf 12-Spalten-Rastern basieren. Bei Bedarf werden die Standardeinstellungen der Frameworks geändert.

Die Zahl 12 ist fast magisch: Sie ist in 6, 4, 3 und 2 unterteilt. Dies bedeutet, dass Sie auf einer Seite mit einem Raster von 12 Spalten in einer Zeile sechs, vier, drei oder zwei Elemente harmonisch anordnen können. Da die Zahl immer für sich und für sich teilbar ist, können Sie 12 oder ein Element hintereinander platzieren.

Wenn Sie die extremen Spalten nicht beachten, können Sie mit dem Raster von 12 Spalten harmonisch in einer Reihe von fünf oder 10 Elementen platzieren.

Gitter mit einer anderen Anzahl von Spalten bieten keine solche Flexibilität. Beispiel: 16 ist in 8, 4 und 2 unterteilt. Um drei oder sechs Elemente in einer Reihe harmonisch zu platzieren, können Sie zwei äußere Spalten ablegen.

Um jedoch eine Reihe von fünf oder zehn Elementen zu erstellen, müssen Sie die drei äußersten Spalten löschen. Das ist nicht sehr praktisch.

Wenn Sie die Anzahl der Spalten im Raster auswählen, verschieben Sie den Inhalt, den Sie auf der Seite platzieren möchten. Wenn Sie beispielsweise eine Inhaltsseite ohne Seitenleiste erstellen, reicht eine Spalte oder ein breiter rechteckiger Bereich in der Mitte der Seite aus. Und wenn Sie eine Portfolio-Seite oder eine Fotogalerie erstellen, benötigen Sie ein komplexes modulares Raster.

Um einen Prototyp in 99 von 100 Fällen zu erstellen, ist es jedoch zweckmäßig, mit einem Raster von 12 Spalten zu arbeiten. Ein professioneller Designer oder Webentwickler verwandelt Ihren Prototyp dank des Spaltenrasters in mehrere Layouts für unterschiedliche Bildschirmgrößen.

Beim Erstellen eines Rasters müssen Sie die Breite der Einrückungen an den Seitenrändern, die Breite der Einrückungen zwischen den Spalten und die Breite der Spalten selbst auswählen. Im Großen und Ganzen ist es beim Prototyping nicht erforderlich, diese Werte pixelgenau zu bestimmen. Der Designer und Webentwickler wird sich später darum kümmern. Befolgen Sie zur Vereinfachung jedoch die folgenden Empfehlungen:

  • Arbeiten Sie im ausgewählten Programm für das Prototyping mit der Vorlagenseite für den Desktop. Die Seitenbreite sollte mindestens 960 Pixel betragen. Verlassen Sie den Ansatz von Mobile First Professionals.
  • Die Ränder sollten mindestens doppelt so breit sein wie die Einschnitte zwischen den Spalten (Dachrinnen). Diese Technik scheint die Sicht des Besuchers auf die Seite zu lenken.
  • Je breiter der Abstand zwischen den Spalten ist, desto mehr befindet sich auf der "Luft" -Seite oder auf dem freien Platz.

Ein Beispiel für ein Raster, mit dem gearbeitet werden soll, ist in der Abbildung zu sehen.

Flexibler Einsatz des Spaltenrasters bei der Planung des Seitenlayouts

Spaltenraster - die Basis des Seitenlayouts. Dies kann anhand eines typischen Layouts aus dem Artikel "So erstellen Sie Prototypseiten" (siehe Foto) veranschaulicht werden.

In diesem Fall belegen die Kopf- und Fußzeile alle 12 Spalten. Die Haupteinheit und die Seitenleiste können 9 und 3 bzw. 10 und 2 Spalten belegen.

Mithilfe des Spaltenrasters können komplexere Layouts erstellt werden, z. B. mit der Verteilung der Spalten 5–5–2, 3–6–3 usw.

Das heißt, mit einem Raster mit 12 Spalten ist es möglich, Layouts zu erstellen, die aus Blöcken mit unterschiedlichen Breiten bestehen. Es können mehrere Blöcke hintereinander sein.

Lassen Sie sich bei der Auswahl der Anzahl und Breite der Blöcke von dem Inhalt leiten, den Sie auf der Seite veröffentlichen möchten. Echte Beispiele werden helfen, dies zu verstehen.

Auf der Seite "Verbunden" befinden sich ein Navigationsmenü und Kategorienkarten.

Ein solches Layout kann in Form von vier Blöcken mit drei Spalten Breite dargestellt werden.

Ein weiteres Beispiel von der Website von "Svyaznoy": ein Verzeichnis von Handys eines Herstellers mit einem Navigationsmenü und vier Produktkarten in einer Reihe.

Das Layout dieser Seite kann in einem Raster mit 16 Spalten erfolgen. Das Navigationsmenü enthält vier Spalten und Produktkarten - jeweils drei Spalten.

Ein praktisches Beispiel unten hilft, die Prinzipien des Arbeitens mit einem Spaltengitter besser zu verstehen.

Verwenden des Rasters: Ein Beispiel für eine Prototypseite

Um einen Prototyp der Seite zu erstellen, habe ich ein Raster mit 12 Spalten verwendet. Aktiviert und Papiergitter, um die Anordnung der Elemente in vertikaler Richtung zu erleichtern.

Ich füge dem Header ein Logo, eine Konvertierungsschaltfläche und ein Navigationsmenü hinzu. Achten Sie auf die Ausrichtung des Rasters: Die Elemente belegen 4, 4 und 9 Spalten.

Fügen Sie unter der Überschrift einen großen Schieberegler hinzu. Es belegt 10 zentrale Lautsprecher.

Unter dem Schieberegler füge ich drei Produktkarten hinzu, die aus einem Foto, Text und einer Navigationsschaltfläche bestehen. Karten nehmen vier Spalten ein.

Unter der Kartenseite befinden sich zwei vertikale Blöcke: die Haupt- und die Seitenleiste. Sie belegen jeweils 8 und 4 Spalten.

In der Fußzeile Serviceinformationen hinzufügen. Der Prototyp der Seite kann über die Schaltfläche Vorschau in der oberen rechten Ecke des Bildschirms angezeigt werden.

Im Vorschaumodus wird das Raster nicht angezeigt. Auf diese Weise können wir den Prototypen ohne visuelle Beeinträchtigung bewerten und gegebenenfalls zur Bearbeitung zurückkehren. Im Vorschaumodus schien der Schieberegler beispielsweise zu schmal zu sein.

Ich vergrößere den Schieberegler auf 12 Spalten oder entferne die Controller aus den Bildern in die äußersten Spalten des Rasters. Ich erinnere mich, dass neben dem Navigationsmenü noch Platz für das Suchformular war.

Der Prototyp ist fertig.

Einfaches und leistungsstarkes Werkzeug

Dies ist das letzte Merkmal des Gitters. Mit Hilfe dieses Tools erhält jeder Spezialist ohne technische Ausbildung ein flexibles Framework, auf dem Prototypen der Seite erstellt werden können. Sie können das Raster auf einem Blatt Papier oder in gängigen Prototyping-Programmen verwenden. In Zukunft können Designer und Entwickler das Spaltenraster konvertieren, um den Prototyp mit geringen Details in ein vollständiges Layout und eine adaptive Seite zu verwandeln.

Sehen Sie sich das Video an: Navigationskonzepte im Überblick. Modernes Webdesign mit Jonas Hellwig (Oktober 2019).

Lassen Sie Ihren Kommentar