Tutorials

Tutorial: Den "Stack" meistern – Vertikale Listen im UI Design

Melden

Dieses Tutorial führt dich in das Konzept des "Stacks" (Stapel) ein, speziell in die vertikale Liste. Dies ist eines der fundamentalsten Layout-Prinzipien im modernen UI-Design (User Interface) und der Webentwicklung.

1. Was ist ein Stack?

Ein Stack ist ein Layout-Container, der seine Kind-Elemente in einer bestimmten Richtung anordnet. Bei einem vertikalen Stack (Vertical List) werden die Elemente entlang der Y-Achse (von oben nach unten) gestapelt.

Warum ist das wichtig?

  • Mobile First: Smartphones sind vertikal orientiert.
  • Lesbarkeit: Wir scannen Informationen oft von oben nach unten.
  • Flexibilität: Stapel passen sich leicht an unterschiedliche Bildschirmgrößen an.

2. Die Kernkonzepte eines vertikalen Stacks

Um eine gute vertikale Liste zu erstellen, musst du drei Dinge beherrschen:

A. Spacing (Abstände)

Der Abstand zwischen den Elementen (oft Gap genannt) sollte konsistent sein. Er definiert die optische Zusammengehörigkeit.

  • Wenig Abstand: Elemente gehören zusammen (z.B. Headline und Subline).
  • Viel Abstand: Elemente sind eigenständige Sektionen.

B. Alignment (Ausrichtung)

In einem vertikalen Stack kannst du die Elemente horizontal ausrichten:

  • Start (Links): Standard für Text (Lese-Richtung).
  • Center (Mittig): Gut für Landingpages oder Logos.
  • End (Rechts): Selten, eher für spezifische UI-Elemente.
  • Stretch: Elemente nehmen die volle Breite ein (gut für Buttons).

C. Visual Hierarchy (Hierarchie)

Nicht alle Elemente im Stack sind gleich wichtig. Nutze Schriftgröße, Fettgedrucktes oder Farben, um den Blick zu leiten.

3. Technische Umsetzung (CSS Flexbox)

Die modernste Art, einen Stack im Web zu bauen, ist CSS Flexbox.

HTML Struktur:

<div class="vertical-stack">
  <div class="item">Element 1</div>
  <div class="item">Element 2</div>
  <div class="item">Element 3</div>
</div>

CSS Styling:

.vertical-stack {
  display: flex;           /* Aktiviert Flexbox */
  flex-direction: column;  /* Stapelt die Elemente vertikal */
  gap: 16px;              /* Der magische Abstandshalter zwischen den Items */
  align-items: flex-start; /* Richtet alles links aus */
  padding: 20px;
  background-color: #f5f5f5;
}

.item {
  background: white;
  padding: 10px;
  border-radius: 8px;
  width: 100%;             /* Optional: Macht die Items gleich breit */
}

4. Design-Beispiel: Eine Profil-Karte

Ein klassisches Beispiel für einen vertikalen Stack ist eine Card-UI.

Struktur des Stacks:

  1. Bild (Avatar)
  2. Name (Headline)
  3. Bio (Fließtext)
  4. Button (Action)

Pro-Tipp für Designer (Figma/Sketch): Nutze in Figma die Funktion "Auto Layout" (Shift + A). Stelle die Richtung auf den vertikalen Pfeil (↓) ein. Hier kannst du den "Space between items" exakt in Pixeln definieren, was genau dem gap in CSS entspricht.

5. Best Practices & Fehler vermeiden

  1. Vermeide "Zebra-Listen" ohne Grund: Zu viele Rahmen oder wechselnde Hintergrundfarben können ablenken. Nutze lieber Weißraum (Whitespace).
  2. Gruppierung (Nested Stacks): Du kannst Stacks in Stacks verschachteln. Eine Liste von Karten ist ein vertikaler Stack, und jede Karte in sich ist ebenfalls ein vertikaler Stack.
  3. Responsivität: Auf dem Desktop kann aus einem vertikalen Stack oft ein horizontaler Stack werden (flex-direction: row), um den Platz besser zu nutzen.

6. Übung für dich

Versuche, eine einfache To-Do-Liste zu bauen:

  1. Erstelle einen Container (Vertical Stack).
  2. Füge 5 Items hinzu.
  3. Setze den gap auf 12px.
  4. Richte alle Items mit stretch aus, damit sie die gleiche Breite haben.
  5. Füge einem Item mehr Text hinzu und beobachte, wie der Stack automatisch nach unten wächst.

Fazit: Der vertikale Stack ist das Rückgrat fast jeder App. Wenn du verstehst, wie du Abstände und Ausrichtung kontrollierst, hast du 80% des UI-Layouts bereits gemeistert!

0