Pixelperfect Screendesign

Hier werden restlos alle Elemente der Webseite oder App dargestellt, genau wie beim ausführlichen Feinkonzept, aber mit Styles versehen. Spätestens in dieser Phase sollte auch ein Großteil des redaktionellen Inhaltes wie Texte und Bilder bereits vorhanden sein.

Für das finale Layout ist zum Beispiel auch die Länge einzelner Textblöcke wichtig, daher sollte der Designer so wenig wie möglich mit Dummy-Content arbeiten müssen. Insgesamt geht der Trend jedoch seit geraumer Zeit weg von dieser pixelgenauen Darstellung (die ohnehin niemals über alle Browser hinweg erreicht werden kann), da Bilder vergleichsweise unflexibel sind. Das größte Problem entsteht hierbei durch das responsive Design, da für jede Bildschirmauflösung von Smartphone über Tablet bis Desktop jeweils eigene Abbildungen erstellt werden müssten. Üblicherweise wird daher inzwischen oft “am lebenden Objekt”, das heißt im Browser, direkt am Code designt. Bei der Arbeit mit responsiven Frameworks bricht dann die Struktur der einzelnen Elemente je nach Bildschirmauflösung um und Styles werden punktuell editiert (zum Beispiel kleinere Überschriften für kleinere Screens). Auch das gleichzeitige Zusammentragen von Inhalten ist auf diesem Wege einfacher.

Beispiel für Screendesign, für alle Elemente wie Buttons und Menüführung ist das tatsächliche Aussehen festgelegt
Beispiel für Screendesigns