Sitemap

Ein solides Fundament brauchen Anwendungen genauso wie Häuser. Und beim Errichten von Gebäuden brauchen Websites und Apps einen Plan, damit etawas entsteht, in dem sich die Nutyer zurechtfinden und mit dem sie sich wohl fühlen.

Wenn sich die Besucher nich ahf Ihrer Site zurechtfinden, geben möglicherweise frustriert auf. Oder sie glauben, dass eine bestimmte Information hier nicht zu finden ist, dass Sie ein Produkt nicht haben oder einen Dienstleistung nicht anbieten - dabei haben Sie dies nur nicht gefunden.

Noch bei der Planung versuchen Sie, die vorhandenen und die gewünschten Informationen in eine Struktur zu bringen. Am besten nutzen Sie Card Sorting. Sie müssen dafür sorgen, dass sich möglichst alle Benutzer auf der Seite zurechtfinden.

Bei Ordnung der Informationen schreiben Sie einfach die Themen, Inhalte und Funktionen auf, die Sie benotigen. Dann zeichnen Sie gleich eine Seitemap. Damit legen Sie sich fest - sortieren können Sie die Inhalte, wenn Sie alle zusammenhaben. Manche Konzepter arbeiten dann mit Mindmaps (am Computer oder mit Stift und Papier), um Ordnung in die Themenbereiche zu bringen.

Für die Verfeinerung der Gliederung nehmen Sie die Ergebnisse Ihrer ersten groben und intuitiven Ordnung als Grundlage.Versuchen Sie, ein logisches System in der Ordnung zu bringen. Es geht nicht darum, die perfekte Systematik zu finden, sonder darum, den Benutzern der Site so schnell wie möglich klarzumachen, was sie wo finden.

Achten Sie darauf, dass vor allem die Auswahlpunkte auf der Startseite konsistent sind, also einer duchgehenden Logik folgen. Die Startseite bleibt oft die einziege besuchte Seite, wenn die Inhalte schlacht strukturiert sind.[11]

Sitemap meines Blogs

Für mein Blog habe ich eine einfache und logische Informationsarchitektur mit Hilfe des Programms MapManager gemacht (siehe Bild 7), mit der Benutzer schnell verstehen können, wo befinden sich bestimmte Beiträge, zum Beispiel wenn Benutzer auf  Begriff Illustrator klicken,  finden sie Beiträge, die sich auf die Arbeitprozesse mit "Illustrator" Programm beziehen.

Tipp: Sie können auch die Erstellung der Struktur Ihrer Webseite mithilfe Online - Tolls gestalten. Zum Beispiel mithilfe www.mindmup.com.

Ordnung auf den Seiten

Webseiten oder Apps bestehen aus unterschiedlichen Elementen und verschiedenen Seitentypen. Neben reinen Inhalten wie Text, Bildern oder Videos besteht eine Webseite aus yahlreichen Teilbereichen wie unter anderem Navigation und Unternavigation, Header und Footer und weiteren Elementen wie Buttons, Formularen und Eingabefelder, Listenelemente und Filtern. Möchten Sie all diese Elemente und Inhalte auf einer Seite in einem ansprechenden Design unterbringen, sind Rastersysteme sehr nützlich. Sie garantieren eine einheitliche Struktur und ein wiedererkennbares Design über die unterschiedlichsten Seitentypen und Endgeräte bzw. Ausgabekanäle hinweg. Für Nutzer ist das eingesetze Rastersystem zwar nicht direkt sichtbar, die Anwendung wirkt auf ihn aber deutlich stimmiger und eingengigär. Das Nutzungserlebnis ist runder, insbesondere dann, wenn er die Anwendung mit verschiedenen Endgeräten aufruft. Auf allen Endgeräten wirkt die Anwendung dann wie »aus einem Guss«.

Gestaltungsraster (Grids)

Gestaltungsraster / Gris zu nutzen, bedeutet schlichtweg, zu Beginn der Gestaltungsphase, also schon bei Wireframe oder Mockups, ein Gitter aus Führungslinien zu definieren und anzulegen, enlang derer die Inhalte und Elemente ansprechend angeordnet und komsequent zueinender ausgerichtet werden. Diese Raster beben dem Layout Struktur und Rhythmus. Nicht jedes Website - Projekt muss zwingend auf einem Rastersystem aufgebaut sein, wie z. B. Portfolioseiten, die möchten den kreativen Aspekt betonen. Aber bei fast allen anderen Sites mit viel Inhalt, machen Raster Sinn.

Tipp: Sie können auch für die Erstellung der Grigs die Tools aus Internet benutzen.

Einige dieser Tools: www.1200px.com, www.muellergridsystem.com, www.responsivegridsystem.com.

Viele gängige Raster im Webdesign basieren auf 12, 16, oder 24 Spalten / Columns. 12 oder 24 haben den Vorteil, dass sie sich durch viele andere Zahlen teilen lassen. Damit sind sie sehr flexibel und lassen sich variabel mit Elementen befüllen. Sie können 1, 2, 3, 4, 6, 12 oder 24 gleich breite Elemente anordnen und erhalten keine ungleichen Abstände oder Abmessungen.  Aus diesem Grund sollte ein Raster immer eine gerade Anzahl an Spalte haben. Es gilt: je mehr Spalten Sie einfügen, desto flexibler wird das Raster.

Die Gesamtbreiten für die Desktop - Varianten liegen üblicherweise bei 960. 1100 oder auch 1240 Pixel - Letzeres augrund der derzeit gängigen Auflösungen bei großen Bildschirmen. Zwischen den Spalten bleiben bei diesen Gesamtbreiten meist 10 bis 20 Pixel Freiraum oder Weißraum (Gutter). Damit haben die Elemente in zwei aneinandergrenzenden Spalten eine ausreichende Schutzzone.

Tipp: Da im Webdesign häufig mit Elementen gearbeitet wird, die in der Höhe flixibel sind, kann hier auf die horisontalen Führungslinien verzichtet werde. Hilfreich sind sie allerdings dann, wenn ein modularer Ansatz in der Gestaltung vervolgt wird. In diesem Fall ist Baseline Grid die Vorstufe zum modularen Rastersystem (Modular Grid System).

Traditionell werden Rastersysteme mit festen Breitenangaben in Pixel definiert. In Zeiten unzähliger verschiederer Endgeräten und mobiler Nutzungskontexte müssen Sie Ihr Webdesign für all diese Endgeräte oder zumindest eine Auswahl gängiger Auflösungen optimieren. [12]

Grid des Blogs

Für mein Blog habe ich ein responsives Grid im Program Adobe Muse gestaltet.

Der Raster meines Blogs ist auf 12 Spalten basiert, weil ich flexibel und variabel mit Elementen umgehen konnte. Aus diesem Grund ist das Grid für verschiedene Desktop - Varianten unterschiedlich. Zum Beispiel für die Bildschirmen ab 1200 bis 830 Pixel (1) hat der Grid alle 12 Spalten und für die Bildschirmen ab 768 bis 320 Pixel (2) nur eine Spalte (siehe Bild 8).

Für die bessere Wahrnehmung der Elementen von Nutzer war das Weißraum zwischen alle Spalten auf 20 Pixel und Ränder links und rechts auf 30 Pixel angestellt.