Design u. Layout

Allgemein

Die Vorstellung, eine Website sieht für alle gleich aus, kann nicht realisiert werden. Das Layout sollte also dahingehen, dass es für alle funktional ist und entsprechend den Möglichkeiten gleich gut aussieht. Als Beispiel sehen Sie sich mal folgende Adresse an: http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com

Das Große Thema heißt Responisve Webdesing.

Wenn wir Ihr Layout für eine Homepage umsetzen sollen, benötigen wir folgende Unterlagen:

• Das Layout als Photoshop-Datei
• Eine Bemaßung
• Stylesheets für Schriften

Layout als Photoshop-Datei

In der Photoshop-Datei sollten alle Ansichten und Seiten vorhanden sein. In der Regel sind wir dann in der Lage, aus diesen die notwendigen Grafiken zu exportieren. Hier können wir auch das ein oder andere nachmessen, was in der Bemaßung vergessen wurde.

Vorsicht gilt bei Transparenzen und Effekten, die mit besonderen Füllmethoden arbeiten, wie z.B. negativ multiplizieren. Dies lässt sich so nicht aus Photoshop extrahieren.

Bemaßung

Die Bemaßung beinhaltet die Abstände der einzelnen Elemente zueinander. Dies kann sowohl auf einem Screenshot oder einem Wireframe erstellt werden.

Dabei gilt zu beachten, dass HTML sich aus einzelnen rechteckigen Boxen zusammensetzt. Die Abstände der Boxen zueinander und vom Rand wird in der Bemaßung (in Pixel) festgehalten.

Stylesheets für Schriften

Zur Darstellung der Boxen und Schriften wird CSS verwendet. Dabei werden die wesentlichen Eigenschaften der Schrift von den Eltern-Elementen an die Kinds-Elemente vererbt. Diese sind:

• Schriftart
• Schriftschnitt
• Schriftfarbe
• Schriftgröße

Die Einheit der Schrift ist em. Dies ist eine relative Größe mit Bezug auf das Elternelement. Ausnahme ist die Zeilenhöhe, die sich auf die Schriftgröße bezieht. Alternativ bietet sich die Einheit rem an, die sich relativ auf das root-Element, i.d.R. dem body bezieht.

Meistens besteht das Layout aus verschiedenen Bereichen, in denen dieselben Elemente unterschiedlich dargestellt werden, z.B. wird eine Überschrift im Contentbereich stärker hervorgehoben, als in einer Marginalspalte. Um Ihnen die Arbeit zu erleichtern, haben wir eine Excel-Tabelle vorbereitet, in der entsprechende Vorgaben eingetragen werden.