Was ist ein Screendesign und worauf muss ich achten?

Letztes Update: 30. Januar 2024

MONOBUNT darf deine neue Website oder deinen neuen Webshop umsetzen? Dann schon mal vielen Dank für dein Vertrauen! Nun, da es los gehen kann: im Ablauf eines Webprojekts (so die globale Bezeichnung für das, was wir machen) gibt es immer mehrere Schritte, welche fast immer nach dem gleichen Schema ablaufen.

Der Ablauf eines Webprojekts

• Im 1. Schritt beantwortest du unseren Fragebogen und übermittelst uns alle deine Wünsche im Projekt-Kickoff.
• Im 2. Schritt beginnen wir mit der Projektumsetzung. Diese beginnt in den meisten Projekten mit der Erstellung einer Designvorlage.
• Sobald dieses sogenannte Screendesign von dir freigegeben ist, machen sich unsere Entwickler im 3. Schritt an die Arbeit und erledigen den technischen Part deines Projekts.
• Im 4. und letzten Schritt werden Einstellungen im CMS (z.B. WooCommerce) getätigt, Content (Bilder/Texte) befüllt, alles nochmal auf verschiedenen Geräten getestet und dann erfolgt das Go-Live (= der Produktivbetrieb).

Ausgangsbedingungen für ein Screendesign

In diesem Blogartikel gehen wir speziell auf den 2. Schritt ein, weil er erfahrungsgemäß fast immer die meisten Fragen aufwirft:

Ein Screendesign ist die Gestaltung der grafischen Benutzeroberfläche einer Webseite, eines Webshops oder einer App.

Im Fokus steht dabei die Anordnung der Elemente, welche auf einem Bildschirm zu sehen sind – egal ob dies nun ein PC/Notebook, ein Tablet oder ein Smartphone ist. Das bedeutet, dass man in einem Screendesign definiert, wo sich verschiedene Elemente wie Navigation, Überschriften (inkl. Zwischenüberschriften), Texte, Bilder, Videos und andere Inhalte des GUI (Graphical User Interface – auf Deutsch Benutzeroberfläche) befinden.

Deswegen klären wir im 1. Schritt eines Projekts auch so viele Ausgangsbedingungen wie möglich mit dir ab:

• Existiert eventuell bereits ein CD (Corporate Design) oder ein Styleguide?
• Welche Webseiten – in deiner Branche oder allgemein – gefallen dir?
• Gibt es Elemente oder Effekte auf bestimmten Webseiten, welche dir besonders gefallen?
• Gibt es Wünsche hinsichtlich Schriftarten, Komplementärfarben, etc.?

Grafik via https://de.wikipedia.org/wiki/Styleguide#/media/Datei:GiraffeProjectStandardsManual.png

Diese Informationen werden dann von den jeweiligen Projektmanager:innen an die zuständigen Webdesigner:innen weitergegeben. Diese müssen darauf achten, dass ein Screendesign verschiedene Bedingungen erfüllt: es muss nicht nur deinen (optischen) Ansprüchen entsprechen, sondern auch von Webentwickler:innen mit dem gewählten CMS (z.B. WordPress, Magento 2, TYPO3) technisch umsetzbar sein (HTML, CSS, PHP, JavaScript).

UX und UI spielen eine große Rolle

Neben deinen Vorgaben und technischen Faktoren muss ein Screendesign auch die Anforderungen an psychologische Faktoren erfüllen. Im Zentrum eines Screendesigns stehen nämlich immer die zukünftigen Nutzer:innen bzw. die zukünftige Zielgruppe. Zielt dein Produkt oder deine Dienstleistung auf eine junge Zielgruppe (z.B. 14-29) ab, dann schaut ein Screendesign im Normalfall fast immer anders aus, als wenn deine Zielgruppe etwa im Alter von 65+ angesiedelt ist. Wenn du dich näher mit den psychologischen Faktoren von Kaufentscheidungen auseinandersetzen und wissen möchtest, wie du deine Conversion Rate damit steigern kannst, dann schau gern bei unserem Artikel über Neuromarketing vorbei.

Ein Screendesign hat also einen enormen Stellenwert hinsichtlich der Usability, welche aus User Experience (UX) und User Interaction (UI) besteht. Je genauer man bestimmte Funktionen in einem DS definiert, desto leichter können die Developer auch die technische Umsetzung gestalten. Und desto besser finden sich auch die Endnutzer:innen mit dieser Funktion zurecht. Aber nochmal zur Wiederholung: die Funktionen selber setzt man in einem Screendesign nicht um, sondern nur das Layout.

(c) Bild UX Collective – https://uxdesign.cc/why-ux-and-ui-should-remain-separate-7d6e3addb46f

Erfolgsfaktoren von guten Screendesigns

Dass ein Screendesign sich stets responsiv verhält, erwähnen wir nicht mehr extra. Dies ist bereits seit vielen Jahren state-of-the-art und kennen wir auch gar nicht mehr anders. Deine Unternehmensidentität (Corporate Identity) muss bestmöglich hinsichtlich Stimmung und Ästhetik widergespiegelt werden. Du musst, wie bereits erwähnt, deine Zielgruppe kennen und diese muss richtig über Bildsprache, Navigation und die Call-to-action Elemente angesprochen werden.

Ein gutes Screendesign ist schlichtweg essentiell für eine erfolgreiche Website oder einen erfolgreichen Webshop. Deswegen solltest du dir hier auch immer viel Zeit für das Feedback nehmen. Bestimmte Elemente können zwar im Nachhinein immer noch geändert werden, dies kann aber mitunter zu einem unrunden Gesamtbild führen.

Klickdummys mit Figma

Wir verwenden für die Umsetzung von Screendesigns ein Tool namens Figma. Dieses Tool bringt Funktionen mit sich, welche über die klassische statische Screendesign-Entwicklung (z.B. in Adobe Photoshop oder Adobe InDesign) hinausgehen. Mit Figma kann man nämlich einen so genannten Klickdummy erstellen.

Das bedeutet, dass ein Button in einem Screendesign zum Beispiel nicht nur rechteckig an der vorgesehen Position angelegt und mit einem Call-to-action beschriftet wird, sondern auch auf eine andere Seite innerhalb des Klickdummys weiterleiten kann – ganz wie bei einer echten Website. Damit bekommst du schon während der Phase des Screendesigns mehr Gefühl für den zukünftigen Flow deines Webprojekts. Aber Achtung: du darfst den Klickdummy trotz dieser Zusatzfunktionen zu keinem Zeitpunkt mit einer fertigen Website vergleichen oder verwechseln.

Exkurs: Unterschied Wireframe – Mockup – Prototyp

Wireframe, Mockup und Prototyp sind weitere Begriffe, welche im Screendesign-Prozess fallen können. Bei einem Wireframe handelt es sich um eine statische Darstellungsform, welche meistens zur Dokumentation eines Projekts verwendet wird. Mockups werden auf Grundlage eines Wireframes erstellt und sind viel detaillierter. Ein Prototyp ist dann sozusagen die letzte Stufe Evolution, da hier (auf Basis von HTML/CSS/JS) auch bereits Interaktionen durchgeführt werden.

Grafik (c) https://www.mockplus.com/blog/post/wireframe-mockup-prototype-selection-of-prototyping-tools

Zusammenfassung

Wenn wir ein Screendesign für dich erstellen (egal ob jetzt in Figma oder woanders) und es in die Feedbackrunden geht, benötigen wir folgendes Feedback von dir:

• Wurden deine Vorgaben hinsichtlich Optik, Farben und Formen wie gewünscht umgesetzt (Look-and-feel)?
• Finden sich alle gewünschten Elemente in der Hauptnavigation, im Footer und auf der Seite an sich wieder?

Im Gegensatz dazu ist folgendes Feedback während einer Feedbackschleife irrelevant bzw. nicht nützlich:

• (Blind-)Texte die noch nicht vollständig oder falsch (z.B. Tippfehler) sind
• Bilder die vielleicht noch nicht final sind und wir eventuell als Platzhalter verwenden

Ebenso werden technische Anforderungen erst während des Web-Developments umgesetzt. Dazu gehören:

• Technische Funktionen wie etwa das Abschicken eines Formulars, die Eingabe von Benutzerdaten in einem Checkout uvm.
• Optisch-technische Funktionen wie etwa Parallax-Effekt beim Scrollen
• Finale Verlinkungen von Buttons, Bildern und Texten

Du hast Lust auf ein Webprojekt inkl. Screendesign bekommen? Dann kontaktiere uns am besten noch heute. Wir freuen uns auf deine Anforderungen! Übrigens: hier findest du die Auflistung aller Leistungen von MONOBUNT.