10 Tipps für gutes App und Webseiten Design – Wo starten?

Du willst eine App oder Webseite designen?

Beginne mit diesem Guide, um ein Design Schritt für Schritt aufzubauen!

Starten wir!

Wie plane ich ein gutes Design?

Zuerst überlegst Du, welche Gruppen / Stereotypen Deine App / Webseite nutzen wollen (Personas: Admin, Musik-Liebhaber, Videoproduzent). Diese Persona wollen auf der Webseite ein Ziel erreichen z. B. Musik herunterladen, über Künstler informieren oder Musik hochladen.

1. Welche Schritte sind notwendig, um das Ziel zu erreichen? Welche User Storys modelliere ich zuerst? Anmeldung, Suche nach Musik, Herunterladen Optionen
2. Welche Informationen braucht die Persona – was braucht die Persona nicht? Musiker, Jahr, Album usw.
3. Wie kann ich die Information sinnvoll zur Verfügung stellen? Als Liste unter dem Play Button
4. Erstelle mit PowerPoint, Draw.io oder anderen Zeichenprogrammen eine erste Anordnung der Elemente für alle Ansichten. Berücksichtige die User Storys und Abläufe in der App.
5. Überlege dir gute Texte, Beschreibung und Grafiken, die bei dem Prozess unterstützen können. Gebe Tipps, weiße auf besondere Formate hin oder erkläre die Anwendung.
6. Erstelle eine Version 2.0 deiner Zeichnungen mit Beispielinhalten, sinnvollen Texten und Bildern.
7. Frage einen potenziellen zukünftigen Nutzer, ob er etwas mit Deinen Zeichnungen anfangen kann. Ist die Abfolge logisch? Was fehlt? Was irritiert?
8. Adaptiere Dein Konzept.
9. Beginne mit der Programmierung und frage regelmäßig nach dem Feedback der zukünftigen Nutzer.

Lasse alle andern Schnickschnack weg! Alternativ entwickle neue User Storys (Ziele). Wenn der Nutzer auf die Webseite kommt, kann er ein Fächer an Optionen (Ziele) erhalten: Musik herunterladen, Blog lesen, Musik hochladen.

Designfalle schnappt zu – Weniger ist mehr

Viele Anfänger treten in die Falle:

Gutes Design = Viel Design

Design besteht nicht nur aus Farben und Formen, sondern einem Konzept, welche das Design nicht in den Vordergrund stellt.

Das Design soll das Produkt unterstützen und nicht davon ablenken. Das Produkt / Dienstleistung kann z. B. das Lesen von Texten, das Betrachten von Bildern, das Stöbern in einem Online-Shop sein. Das Design soll die Aktivitäten unterstützen und kein Selbstzweck sein. Du musst aber auch nicht alles in Arial und Schwarz-Weiß halten. Wiedererkennungsmerkmale sind sinnvoll.

Die Welt ist Kopf – Bekanntes zu erst

Ausgefallene Design sind nett, aber nicht sinnvoll (außer Du gehst zu einer Ausstellung).

Orientiere dich mit der Platzierung der Elemente an bekannten Webseiten. Du sollst nicht deren Design kopieren, sondern den Nutzer die Orientierung erleichtern:

Einloggen geht immer oben rechts. Das Logo / Name ist Mittig oben oder oben links. Zusätzliche Links finden wir unten im Footer. Der Hauptinhalt ist mittig und groß.

Abweichungen zu den ungeschriebenen Standards verlangen nach einem Tutorial. Neue Design-Ansätze, die Deine Inhalte besser darstellen, brauchen eine Einführung vor der Verwendung.

Dunkelgrau auf Hellschwarz – Barrierefreiheit

Nicht jeder auf der Welt kann einfach hellblaue Schrift auf grauen Hintergrund lesen. Achte auf Barrierefreiheit für Farbblinde, visuell eingeschränkte Menschen oder flackernde Design-Elemente.

Selbst wer keine aktive Behinderung hat, sollte nicht die Augen zukneifen müssen oder sich anstrengen müssen. Halte die Abläufe einfach, setze auf starke Kontraste, erlaube das Zoomen der Webseite / in der App und schreibe gute Erklärungen. Zu dem Thema habe ich einen vollständigen Beitrag verfasst.

Bitte kein Mischmasch – Wiedererkennungswert

Das Design muss nicht 0815 sein – Du sollst einen Wiederkennungswert schaffen. Einen Wiedererkennungswert schaffst Du mit auffälligen / einprägsamen Grafiken und Bildern, die den Inhalt der Webseite unterstützen.

Ein Konzept einer Farbpalette und Typografie helfen dabei, eine Wiedererkennung zu gewährleisten. Logos sollten gut zu lesen sein und am besten den Zweck der Webseite darstellen. Einen nachhaltigen Wiedererkennungswert schaffst Du nicht mit speziellen Menü-Führungen oder komplexen Strukturen.

Inhalten und Funktionen in Pole-Position

Design ist kein Selbstzweck. Design soll die angebotenen Inhalte wie Texte, Bilder, Videos, Games usw. unterstützen und nicht in den Vordergrund treten.

Dein Design-Konzept beginnt schon bei der Auswahl von Personas und User Storys, mit der wir eine Anforderungsanalyse einer Webseite oder App durchführen. Das bedeutet, dass wir uns zu der Persona „Janny – Computernerd und Comic-Liebhaberin“ ein Ziel überlegen. Was möchte Janny mit der Webseite erreichen und welche Schritte soll diese wie durchlaufen?

Auf allen Geräten testen

Webseiten Design ist universal. Wir wollen einen Wiedererkennungswert auf allen Geräten schaffen. Die Webseiten sollen auf 32-Zoll-4K-Monitor genauso schnike aussehen, wie auf eine iPhone 4S mit kleiner Bildschirmdiagonale.

Auf kleineren Bildschirmen kann man nicht so viel auf einmal anzeigen, deshalb musst Du die Inhalte sinnvoll stapeln. Webbrowser, Plugins und Betriebssysteme machen es dir nicht einfacher.

Wer viele Menschen erreichen will, muss auf vielen Geräten die Darstellung der Webseite prüfen. Diese muss nicht über all perfekt gleich aussehen, aber alle Buttons sollten erreichbar und die Darstellungselemente klar sichtbar sein.

Durchdacht! – Kohärentes Design

Das Design ist nicht nur auf Deine App / Webseite beschränkt. Dialoge, Ausdrucke als PDF oder Newsletter sollten mit dem Design mitziehen.

Ein guter Anfang ist es die gleichen Farben und Schriftarten zu wählen. Logos und Grafiken sollten sich in allen Formen Deiner Webseite wiederfinden. Vermeide es eine Spezialansicht zu bauen oder Bestandteile vom Design auszuschließen, weil die Umstellung umständlich ist.

Für ein kohärentes Design muss man sein eigenes einheitliches Design in Print, Web, App oder realen Leben beibehalten.

Kein Pixelbrei mehr – SVG vor PNG

Grafiken sind nur schön, wenn die scharf und klar sind. Auf Pixelbrei hat keiner Lust. Deshalb setze hochauflösende Bilder ein, die verdeckt verzögert laden (defer / async).

Alternativ solltest Du für grafische Elemente wie Logos oder Trenner SVG-Grafiken verwenden. Diese sehen auf jeden Monitor mit egal wie vielen Pixel scharf aus und sind sehr kompakt. Bilder sollen schnell laden, deshalb sind Kompressionen wie AVIF, JPEG XL oder WEBP Pflicht. Ohne großen Verlust an Details können diese Formate Pixelinformationen in einem kompakten Format verstauen und über einen Algorithmus wieder als einzelne Pixel entpacken.

Schnörkelschrift lenkt ab – Lesbarkeit

Lesbarkeit ist die Basis für eine gute Webseite oder App.

Achte auf Sans Serif, hohe Kontraste, Abstände zwischen den Zeilen und große Schrift (18 Pixel oder größer). Schriftgröße ist eine delikate Angelegenheit, da jeder Bildschirm anders ist und Beschriftungen über die Ränder hinauslaufen. Das Arbeiten mit relativen Schriftgrößen wie em, rem oder % braucht ein paar Experimente, bevor diese gut auf allen Geräten lesbar ist.