Seitengestaltung und Web-Entwurf mit Microsoft VISIO

Logo VisioNach der Entscheidung für ein bestimmtes Gestaltungsraster – das heißt die grundsätzlichen Aufteilungen in Bereiche für Kopf, Fuß, Spalten und so weiter – stellt sich die Frage nach der konkreten Umsetzung und des zu verwendendem Modells. Eines davon ist das sogenannte Grid-Modell, bei dem die Seite in mehrere gleichmäßig breite Spalten aufgeteilt wird. Es gibt 12er-, 16er-, 24er- Grid-Modelle, die sich entweder auf eine  feste Gesamtbreite beziehen, oder in Abhängigkeit der Fenstergröße variable Breiten berücksichtigen.

Für meinen Entwurf habe ich mich auf ein 960-Grid mit 12 Spalten entschieden. Alle Inhalte sind in <DIV>-Container untergebracht, die über eine CSS-Klassenzuweisung „g1“  … „g12“ eine definierte Breite erhalten. Das 960-Grid mit 12 Spalten ergab sich aus verschiedenen Versuchen und Entwürfen, die mit Visio erstellt wurden.

Visio bietet bei den Seiteneigenschaften die Möglichkeit mit der Punkt-Maßeinheit zu arbeiten. Dementsprechend wurde für das Zeichenblatt eine Breite von 1024 Pixeln (Punkt) gewählt, da ich von einer Monitorauflösung von 1024 Pixeln in der Breite als Standard ausgegangen bin.

Nach Abzug der Breite für Rahmen und Bildlaufleisten, stehen für die Gestaltung des Inhalts die  sich aus dem Grid ergebenden 960 Pixel zur Verfügung. Eine Gesamtbreite von 960 Pixeln hat zudem den Vorteil, dass die Zahl auch durch 2, 3, 4 und  6 teilbar und somit für verschiedenste Kombinationen von Text- und Objektspalten geeignet ist.

Zeichenblatt einrichten mit Visio

Es könnte entgegnet werden, dass die Auflösung von 1024 Pixeln nicht mehr Zeitgemäß ist, da heutige Monitore mit Pixelbreiten von 1280 oder 1920 (Full-HD Auflösung) immer gebräuchlicher werden. Ich habe mir auch länger überlegt, ob ich eine höhere Auflösung und eine Wide-Screen Seitenaufteilung wählen soll. Da aber noch einige Monitore mit der klassischen 1024er-Auflösung im Einsatz sind, war dies mein „Obergrenze“ (die „alte“ df-edv.de Website war noch von dem 800 x 600er-Standard ausgegangen). Zudem werden so auch kleinere Ausgabegeräte berücksichtigt, wie Tablets, Netbooks oder manche Smartphones, die  – heute, Ende 2011 – mit 1024 Pixeln arbeiten. Auch auf kleineren Monitoren  kann die Website somit in originärer Auflösung und Umbruch anzeigt werden. Grundsätzlich wird  darüber hinaus bei einer Gestaltung mit <DIV>-Elementen und verschiedene CSS-Dateien für Screen und Mobilgeräte ein flexibler Umgang prinzipiell ermöglicht.

Möglich wäre auch eine variable Variante  die verschiedene CSS-Dateien in Abhängigkeit der Monitorauflösung einsetzen. Dies schränkt die Flexibilität allerdings an anderer Stelle wieder ein und erfordert JavaScript und Browser- bzw. Geräteweichen.

An einer weiteren Stelle der Dateieigenschaften der Visio-Zeichnung können Hintergrundseiten definiert werden. Diese beinhalten feste Bestandteile wie den Seitenkopf und können als zusätzliche Ebene den eigentlichen Zeichenblättern zugefügt werden. Die Hintergrundblätter können zudem aufeinander aufbauend miteinander kombiniert werden.

Visio Eigenschaften Hintergrundseite

Somit können Hintergründe sehr flexibel ein- und ausgeblendet werden:

Seitenentwurf mit VISIO

Seitenentwurf mit Grid und Führungslinien

Seitenentwurf mit Grid und Führungslinien

Seitenentwurf mit ausgeblendeten Hintergrund und Führungslinien

Seitenentwurf mit ausgeblendeten Hintergrund und Führungslinien

So lassen sich verschiedene Gestaltungsvarianten ausprobieren und beliebig verschieben.

Ressourcen Grid

Rund um das Grid-System finden sich verschiedene interessante Webseiten.

Einen allgemeinen Überblick über das Grid-System im Allgemeinen und eine Vorstellung verschiedener Webseiten zum Thema bietet der Blog: www.elmastudio.de

Auf http://960.gs/  können Grid-Raster über Screenshots von verschiedenen Webseiten gelegt werden, um den Effekt und die Gestaltungsmöglichkeiten direkt nachvollziehen zu können. Auf einer Demoseite werden die verschiedenen Breiten innerhalb des Grid dargestellt. Klasse auch die fertigen Vorlagen für Photoshop, InDesign, Illustrator, Corel, Flash… und eben auch für Visio und natürlich das Tool zum Erstellen der individuellen CSS-Datei.

Eindrucksvoll auch die Demoseite zum Fluid 960 Grid System, welches über die verbreiteten Mootools ein dynamisches Grid ermöglichen: http://designinfluences.com/fluid960gs/ . Gezeigt wird hier auch die Ansicht ohne Mootool, wenn JavaScript deaktiviert ist.

Weitere Unterstützung durch VISIO

Bei der Konzeption der Website unterstützt Visio auch bei der Entwicklung Seitenstruktur, bzw. bietet einen Assistenten, der aus einer bestehenden Domain die Seitenstruktur ausliest.

Webseitenübersicht mit Visio

Webseitenübersicht mit Visio

Schulungen VISIO 

Informationen über VISIO-Schulungen finden Sie auf www.df-edv.de…

Siehe auch den Artikel zum Logo-Entwurf mit Visio hier auf dem Blog

Werbeanzeigen

Ein Gedanke zu „Seitengestaltung und Web-Entwurf mit Microsoft VISIO

  1. Pingback: Vektorgrafiken und Logos mit MS VISIO erstellen | projekt facelift

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden /  Ändern )

Google Foto

Du kommentierst mit Deinem Google-Konto. Abmelden /  Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden /  Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden /  Ändern )

Verbinde mit %s