Wireframes (Drahtgestell)

Wireframes sind eine besondere Form der Darstellung. Hierbei werden nur die Ränder der einzelnen Bereiche und Elemente dargestellt. Wireframes können in schwarz/weiß oder auch in Farbe dargestellt werden. Sie sind ideal, um die Positionierung und Bedeutung der einzelnen Elemente und Bereiche zu visualisieren.

Da HTML und CSS auf Boxen beruhen, sind Wireframes ideal, um die Ausrichtung dieser Boxen darzustellen. Wireframes sind oft eine Vorstufe zum eigentlichen Entwurf. Hier macht sich der Designer Gedanken, wo etwas dargestellt wird, noch bevor das Wie geklärt wird.

Wireframes können auch sehr gut als Ausgang für eine Bemaßung herangezogen werden.

Boxen

Boxen stehen direkt in Zusammenhang mit CSS.

Alles, was auf CSS beruht, ist in Boxen gepackt. Dabei hat jede Box folgende Bereiche:

• Außenabstand (Margin)
• Rahmen
• Innenabstand (Padding)
• Inhalt

Der Hintergrund einer Box geht immer bis zum Rahmen. Der Bereich Außenabstand (Margin) hat keinen Hintergrund. Zwei benachbarte Boxen auf gleicher Hierarchie teilen sich den Außenabstand. Bsp.: Zwei benachbarte Boxen haben jeweils einen Außenabstand von 10px, so ist der Abstand der Rahmen der Boxen zueinander auch 10px.

Die Gesamtgröße einer Box berechnet sich immer aus der Summe der einzelnen Bereiche.