Design-Grundlagen für Entwickler - 5 Tipps, die dir helfen, so zu tun, als wüsstest du, was du tust

Ich bin kein Designer, aber in den letzten zehn Jahren war ich an vielen Frontend-Projekten beteiligt und habe eng mit Designern zusammengearbeitet. Einige Design-Grundlagen zu verstehen, hat mir wirklich geholfen, und ich möchte jetzt ein paar davon mit dir teilen.

TLDR: Das Gehirn eines Designers funktioniert anders, und als logisch denkender Entwickler wirst du ihren tiefen Zustand nie vollständig begreifen können.

Als Entwickler musst du diesen Zustand nicht übernehmen. Schließlich sind Designer und Entwickler völlig unterschiedliche Rollen. Aber es hilft, wenn du zumindest ein paar Basics kennst. Hier sind 5 Tipps, die ich nutze, um keine schlechten Apps zu bauen und etwas Nutzbares zu schaffen.

1. Features zuerst

Egal, was du machst: Funktionalität, Lesbarkeit und Barrierefreiheit haben immer die höchste Priorität.

Ein schlechtes Design, das funktioniert, ist immer besser als ein schönes Design, das unbrauchbar ist.

Die zweite Ebene ist, Verwirrung zu minimieren und deinen Nutzern zu helfen, ihre Aufgaben so schnell wie möglich zu erledigen.

2. Layout

Denke nicht daran, eine ganze App oder Website zu designen. Jede App oder Website besteht aus kleineren Teilen.

Es gibt den Rahmen oder das Layout der Seite, das normalerweise aus Header, Footer, Hauptinhalt und vielleicht einigen Elementen besteht, die auf jeder Seite wiederholt werden.

Dann gibt es die einzelnen Seiten, die aus mehreren Abschnitten bestehen, wie dem Hero-Bereich, einer Liste von Vorteilen, einer Logos-Reihe usw.

Und wenn wir noch weiter hineinzoomen, können wir jeden Abschnitt in verschiedene Komponenten aufteilen: Überschriften, Buttons, Karten, Bilder, Slider...

Versuche nicht, alles auf einmal zu designen.

Starte mit dem Layout und arbeite dich Abschnitt für Abschnitt vor. Es hilft, jedes Mal zu deployen, wenn ein Abschnitt fertig ist. Hero-Bereich fertig? Deploy!

3. Eine primäre Aktion

Eine — und nur eine — primäre Aktion pro Seite, Abschnitt oder Komponente.

Mach diese primäre Aktion zu einem großen Button, der heraussticht. Alles andere kommt ins Menü. Oder wenn es nur zwei Aktionen gibt, mach einen sekundären Button mit weniger visueller Gewichtung.

Es hilft, Tracking-Daten darüber zu haben, wie oft eine bestimmte Funktion von Nutzern verwendet wird. Tracke das, wenn du die Ressourcen hast — wenn nicht, schätze so gut wie möglich.

4. Von der Konkurrenz klauen

Alles wurde schon einmal gelöst — du weißt nur noch nichts davon. Etwas von Grund auf zu designen, ist harte Arbeit. Ich kann dir sagen, du kannst Wochen und Monate damit verbringen, zu designen. Es gibt kein Ende! Und es ist leicht, in die Falle zu tappen und dasselbe 100 Mal neu zu designen, nur um am Ende mit dem gleichen oder sogar schlechteren Ergebnis dazustehen.

Stattdessen: Schau nach links und rechts und klaue bekannte Komponenten von der Konkurrenz. Das spart nicht nur Zeit, sondern deine Nutzer werden es dir danken, da ähnliche oder bestehende Komponenten für sie leichter zu verstehen und zu nutzen sind.

5. Sei nicht fancy

Es gibt einige unglaubliche Designs da draußen. Und normalerweise macht sie das unglaublich, weil sie anders aussehen als das, was wir gewohnt sind. Die Besten der Besten brechen mit Konventionen und Designregeln, die Anfängern beigebracht werden.

ABER: Sie tun das mit Absicht. Sie haben alle Anfängerregeln durchlaufen und gemeistert, bis sie verstanden haben, wann ein Bruch Sinn macht! Sie machen das absichtlich, weil sie wissen, warum.

Mach das nicht, wenn du die Basics noch nicht gemeistert hast. Halte dich zuerst an die Grundlagen. Mach langweilige Layouts — aber mach sie gut. Erst dann ist es Zeit, fancy zu werden.

Zusammenfassung

Du musst kein Designer sein, aber ein paar Design-Grundlagen zu kennen, hilft enorm.

Halte es funktional, zerlege es in Teile, bleib bei einer primären Aktion pro Abschnitt, kopiere, was funktioniert, und versuche nicht, zu früh fancy zu sein.

Das mache ich.