Improvement of Design and Creation of a Design System

[JimSeven]

Problem

[!NOTE] Welches Problem soll behoben werden? Warum genau brauchen wir eine Lösung?

Die aktuelle Website von 21st digital verfügt nur über ein unzureichendes Design, das eher einem Mockup entspricht und keine konsistenten Designrichtlinien hinsichtlich Schriftgrößen, Abständen und Farben definiert. Es fehlt ein klares und harmonisches Gesamtbild, das als Basis für zukünftige Gestaltungselemente dienen kann.

User Story

[!NOTE] Beschreibt aus Sicht des Users wie genau diese Lösung genutzt wird

Als Designer möchte ich ein Grunddesign in Sketch erstellen, das die Verwendung von Schriftgrößen, Abständen und Farben klar definiert und zeigt, wie die Website auf verschiedene Device-Größen reagiert, um ein konsistentes und ansprechendes Erscheinungsbild der 21st digital Website zu gewährleisten.

Vorhaben

[!NOTE] Was genau haben wir mit diesem Ticket vor?

Ein Grunddesign in Sketch erstellen, das:

• Die Verwendung von Schriftgrößen, Abständen und Farben klar definiert.
• Die Responsivität der Website auf verschiedene Browserbreiten (Device-Größen) abbildet.
• Ein harmonisches Gesamtbild schafft und eine Grundlage für zukünftige Gestaltungselemente bietet.
• Ein Designsystem entwickelt, das zum größten Teil mit den Standard-Werten von Tailwind CSS umsetzbar ist. Dieses Designsystem soll viele gängige Komponenten enthalten, wie man sie zum Beispiel in Tailwind UI oder Material Design üblich sind.

Abgrenzung

[!NOTE] Zeigt potenzielle "Don’t dos" auf und grenzt die Aufgabe von anderen ab.

• Keine vollständige Implementierung des Designs in den Code.
• Keine Berücksichtigung von Backend-Funktionen oder -Änderungen.

Akzeptanzkriterien

[!NOTE] Was genau muss erfüllt sein, dass dieses Ticket als fertig angesehen werden kann. Akzeptanzkriterien müssen überprüfbar sein. Sie sollten auf das "Was" und nicht das "Wie" abzielen.

1. Designvorgaben:

   • Ein Sketch-Dokument ist erstellt, das die festgelegten Schriftgrößen, Abstände und Farbwerte enthält.
   • Die Designvorgaben sind klar und konsistent dokumentiert.

2. Responsives Design:

   • Das Sketch-Dokument zeigt, wie sich das Design auf verschiedene Device-Größen (z.B. Mobil, Tablet, Desktop) verhält.
   • Anpassungen für unterschiedliche Browserbreiten sind definiert und nachvollziehbar dargestellt.

3. Harmonisches Gesamtbild:

   • Das Design wirkt in sich stimmig und bildet ein harmonisches Gesamtbild.
   • Die Designvorgaben lassen sich leicht auf neue Gestaltungselemente übertragen.

4. Dokumentation:

   • Eine Dokumentation der Designrichtlinien (Schriftgrößen, Abstände, Farben) ist erstellt und für das Team zugänglich.
   • Hinweise zur Responsivität und Anwendung der Designvorgaben sind enthalten.

5. Designsystem:

   • Ein Designsystem ist erstellt, das größtenteils mit den Standard-Werten von Tailwind CSS umsetzbar ist.
   • Das Designsystem enthält gängige Komponenten, wie sie in Tailwind UI oder Material Design üblich sind.

Zusätzliche Informationen:

• Das Design soll flexibel genug sein, um zukünftige Änderungen und Erweiterungen zu ermöglichen.
• Feedbackschleifen mit dem Team sind vorgesehen, um sicherzustellen, dass das Design den Anforderungen und Erwartungen entspricht.

[robocopklaus]

@JimSeven Statt Sketch wäre auch Figma eine Alternative, da es hier von Tailwind ein offizielles Template gibt: https://www.figma.com/community/file/958383439532195363

[JimSeven]

@RobocopKlaus das hatte ich auch zufällig gesehen. Die Frage ist, ob wir diese Fass aufmachen wollen oder doch lieber bei Sketch bleiben. Damit kennen wir uns ja wenigstens ein wenig aus. Ich bin auf jeden Fall überrascht, dass es da nichts für Sketch von tailwind gibt

[robocopklaus]

@JimSeven ich glaube, dass das fass gar nicht so groß ist, weil figma sehr ähnlich zu sketch ist. wir könnten es ja mal ausprobieren.