Prototyping

Wireframes

Beim Prototyping wird das Layout auf ein Wireframe reduziert.

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.

Ist das Layout in der Prototyp-Phase als Wireframe umgesetzt, lässt sich das responsive Verhalten des Layouts schon früh erkennen. Zu diesem Zeitpunkt lassen sich unerwünscht Effekte noch schnell korrigieren, ohne tief in das Design einzugreifen. Dies erspart Zeit, Ärger und Kosten.

Wir empfehlen daher immer, einen Prototypen zu entwickeln.

Boxen

Im Prototyp ist die Positionierung der Elemente mittels CSS umgesetzt. Das Layout wird dabei in einzelne Boxen unterteilt, die später mit Inhalt gefüllt werden.

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.

Zurück

Diese Seite verwendet Cookies, Piwik Tracking und Google Fonts. Mit dem Besuch dieser Seite erklären Sie sich mit unseren Datenschutzrichtlinien einverstanden. weiter