Suche

Stichwörter

Was ist beim Design zu beachten?

Allgemein

Grundsätzlich möchte ich wiederholt betonen, dass das Gestalten für das Internet gänzlich anders ist, als für den Druck. Denn, wir wissen weder mit welchen Monitor, welcher Auflösung, welchen Browser oder welchem Betriebssystem der Besucher unsere Webseite darstellt.

Also die Vorstellung, die Webseite sieht für alle gleich aus, kann nicht realisert 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

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

  1. Das Layout als Photoshop-Datei
  2. Eine Bemaßung
  3. Stylesheets für Schriften

Bitte beachten Sie auch unsere Hinweise zu Schatten.

Als Grundlage gilt dabei: Die Auflösung beträgt 72dpi, alle Angaben erfolgen in Pixel.

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 zusammengesetzt ist. Die Abstände der Boxen zueinander und vom Rand wird in der Bemaßung (in Pixel) dargestellt.

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. Dies 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.

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.