Update: Facelift und neues Designsystem für CocktailScout

Von 27. Apr, 15:43 Uhr 353 Aufrufe 10 Beiträge
27.04.2026, 15:43

Hallo zusammen,

ein kurzes Update von mir zu dem Facelift, das ich angekündigt habe. Es ist ein eher großes Projekt geworden, aber alles andere ergibt keinen Sinn. Neue Features wie das Wiki sollen direkt auf einem soliden Designsystem aufbauen. Bisher war alles primär darauf optimiert, einfach nur zu funktionieren – Design (UI) und Benutzerführung (UX) wurden zugunsten schneller Implementierungen etwas vernachlässigt. Aber langsam wächst das Chaos, und es war an der Zeit, „Stopp“ zu sagen und wieder solide Fundamente zu bauen.

Vorweg: Ich bin kein Designer und habe auch keine allzu großen Fähigkeiten in diesem Bereich. Alles hier ist „Try and Error“. Ich habe auf der Beta-Seite bereits ein neues Designsystem aufgebaut. Es besteht aus den wichtigsten Elementen und Definitionen: Farben, Schriftarten, Links, Boxen, Buttons, Tabellen und Formularen – also alles, was man auf einer Website so braucht. Das System ist jetzt mehr oder weniger fertig und hier zu sehen:

beta.cocktailscout.de/design-system
user: hemingway
pass: sour

Die Startseite auf der Beta-Umgebung ist bereits teilweise angepasst. Es gibt eine neue und hoffentlich bessere Navigation. Die einzelnen Abschnitte im Contentbereich werde ich nun Stück für Stück durchgehen, danach sind die anderen Seiten dran.

Ich starte mit der Rezeptübersicht: Hier will ich die ganzen Filter ausblenden – auf dem Desktop als Seitenleiste und mobil ausklappbar. Der Fokus soll voll auf den Rezepten liegen. Was mich zudem total stört, sind die Avatare: 50 Avatare auf einer Seite, wo es eigentlich um Rezepte geht, sind pures Rauschen und eine unnötige Ablenkung. Es reicht, wenn dort einfach der Name steht, so wie in der Galerie. Dazu kommen ganz viele kleine Anpassungen, die mir während der Arbeit auffallen. Und am Ende wird das Ganze natürlich für Handy, Tablet und Desktop optimiert.

Ihr könnt den Prozess auf der Beta-Seite mitverfolgen:

beta.cocktailscout.de/
user: hemingway
pass: sour

Ich werde hier bekannt geben, wenn ich Updates einspiele. Feedback ist wie immer willkommen!

LG
Zoidberg wink

Zuletzt bearbeitet von am 27.04.2026, 15:43
27.04.2026, 21:37

wow.......Du legst aber ganz schön los.

Die erste Seite kann ich aufrufen.

Die zweite kann ich aufrufen, aber Benutzer und Password gehen leider nicht.

wink

28.04.2026, 09:32

Merkwürdig...der zweite Link geht auch zu beta und da ist es hemingway/sour. Das ist immer gleich für alle beta Seiten. Ich habe es gerade in einem neuen Browser getestet und es geht. Proibiere es bitte noch mal

28.04.2026, 20:54

hmmm.....ich bin in der Beta auch als Orca angemeldet verwirrt

29.04.2026, 13:12

Jetzt verstehe ich das Missverständnis fröhlich

Das ist ein Passwort um überhaupt auf die beta zugreifen zu können. Wenn du da als Orca angemeldet bist, dann hat dein Browser das beta Passwort schon gepseichert.

Auf beta siehst du das neue Design in Action. Zumindest auf der Startseite. Neue Navigation, neue Schriftarten etc.

29.04.2026, 18:46

Hallo Zoidy,

erst einmal vielen Dank, dass Du unser CS wieder auf "Vordermann" bringst.

Ja, was soll ich sagen...? Etwas unruhig das Ganze. Du verwendest mehrer Schriftarten, Serifen, ohne Serifen. Mir persönlich gefällt z. B. die Schrift vom Schriftzuglogo cocktailscout sehr gut. Der Bereich mit dem "Was kannst du heute mixen" empfinde ich als besonders unruhig: Ungleiche Boxenlinien, Abstände, Wackelbildchen, Farbwechsel, vom Hellen ins Dunkle, darin wieder helle Box.

Und nix für ungut.
rrr

30.04.2026, 10:47

Alles gut rrr, du kannst hier deine Meinung ganz offen sagen. Ich nehme nix persönlich. Ich gebe dir recht, der Schriftzug oben sieht super aus. Das wurde damals vor Jahren beim einem Logowettbewerb erstellt. Zufällig in meiner heutigen Heimat Indonesien. grins Der Typ war echt ein Profi!

Der Rest ist ein Mix von mir und AI. Wenn man das gut macht, dann ist das Mischen von Serif und Sansserif eine der bewährtesten Design-Regeln in der Typografie. Aber am Ende ist es entscheidend es eben gut hinzukriegen. Ich werde da noch ein wenig experimentieren müssen. fröhlich

06.05.2026, 14:38

Update:
- Startseite verbessert
- Rezeptübersicht (https://beta.cocktailscout.de/rezepte)
- Rezeptseiten (https://beta.cocktailscout.de/rezepte/hemingway-sour)

06.05.2026, 14:48

Schööön!

07.05.2026, 09:12
rrr schrieb:
Schööön!

hurra