# Layout

Das Layout organisiert die Benutzeroberfläche in einer logischen und
hierarchischen Struktur, um die Aufmerksamkeit des Users gezielt zu lenken.
Dabei werden Elemente wie Header, Navigation und Content-Bereich berücksichtigt.

---

# Best practices

Ein Layout fügt verschiedene Elemente der Benutzeroberfläche zu einer logischen
Struktur zusammen. Die folgenden Punkte sind hilfreich, um ein gutes Layout zu
erstellen:

- Ein Layout sollte den Fokus immer auf die Aufgaben des Users legen.
- Ein konsistentes Layout hilft dem User, die Website schneller zu verstehen, da
  nicht ständig neue Layouts erlernt werden müssen.
- Der Fokus des Layouts sollte auf dem Content-Bereich liegen, da hier die
  Hauptaktionen des Users liegen. Achte hier besonders auf die strukturelle
  Hierarchie und die inhaltlichen Beziehungen des Contents.
- Ein Layout sollte immer responsiv sein, damit die Benutzeroberfläche auch auf
  kleineren Bildschirmen funktioniert. Im Layout ist grade das Zusammenspiel von
  Header, Side-Navigation und Content-Bereich für die Responsivität relevant.

---

# Genereller Aufbau

Grob lassen sich die meisten Layouts, die mit Flow erstellt werden können, in 4
Bereiche einteilen: **Header**, **Side-Navigation**, **Content** und
**Overlay**. Das Layout innerhalb dieser Bereiche wird durch verschiedene
Components und deren Komposition bestimmt. In unseren Components ist das
[Spacing](/02-foundations/02-structure/02-spacing) bereits integriert.

Verschiedene Layouts mit Code zum Kopieren finden sich unter Code Templates.

  

**ℹ️ Info**

Grobes Layout einer Seite. Eingeteilt in Header-, Side-Navigation- und
    Content-Bereich.

```tsx
export default () => {
  const styles: Record<string, React.CSSProperties> = {
    layoutContainer: {
      display: "grid",
      gridTemplateAreas: `
        'header header'
        'nav content'
      `,
      gridTemplateColumns: "90px 1fr",
      gridTemplateRows: "auto 1fr",
      gap: "10px",
      border: "1px solid rgba(206, 75, 255, 1)",
      borderRadius: "4px",
      padding: "10px",
    },
    header: {
      gridArea: "header",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      padding: "10px",
      textAlign: "center",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    sideNavigation: {
      gridArea: "nav",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      display: "flex",
      justifyContent: "center",
      padding: "55px 10px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
      width: "90px",
    },
    verticalText: {
      writingMode: "vertical-rl",
      transform: "rotate(180deg)",
    },
    content: {
      gridArea: "content",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "10px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    textStyle: {
      color: "rgba(0, 63, 184, 1)",
      fontWeight: "400",
      fontSize: "14px",
    },
  };

  return (
    <div style={styles.layoutContainer}>
      <header style={styles.header}>
        <p style={styles.textStyle}>Header</p>
      </header>
      <nav style={styles.sideNavigation}>
        <p
          style={{
            ...styles.verticalText,
            ...styles.textStyle,
          }}
        >
          Side-Navigation
        </p>
      </nav>
      <main style={styles.content}>
        <p style={styles.textStyle}>Content</p>
      </main>
    </div>
  );
}
```

  

**mStudio**

Grobes Layout des mStudios. Darstellung mit Primary und Secondary
    Navigation.

```tsx
export default () => {
  const styles: Record<string, React.CSSProperties> = {
    rootContainer: {
      display: "flex",
      flexDirection: "column",
      gap: "10px",
      border: "1px solid rgba(206, 75, 255, 1)",
      borderRadius: "4px",
      padding: "10px",
    },
    headerContainer: {
      display: "grid",
      gridTemplateAreas: `
        'logo header header'
      `,
      gridTemplateColumns: "60px 1fr 1fr",
      gap: "10px",
    },
    layoutContainer: {
      display: "grid",
      gridTemplateAreas: `
        'primaryNav secondaryNav breadcrumb breadcrumb'
        'primaryNav secondaryNav pageTitle button'
        'primaryNav secondaryNav content content'
      `,
      gridTemplateColumns: "30px 60px 1fr",
      gridTemplateRows: "auto auto 1fr",
      gap: "10px",
    },
    logo: {
      gridArea: "logo",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      padding: "10px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
    },
    header: {
      gridArea: "header",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      padding: "10px",
      textAlign: "center",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    primaryNav: {
      gridArea: "primaryNav",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "38px 0px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
      writingMode: "vertical-rl",
      transform: "rotate(180deg)",
    },
    secondaryNav: {
      gridArea: "secondaryNav",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "38px 0px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
      writingMode: "vertical-rl",
      transform: "rotate(180deg)",
    },
    breadcrumb: {
      gridArea: "breadcrumb",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      textAlign: "center",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    pageTitle: {
      gridArea: "pageTitle",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      textAlign: "center",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    button: {
      gridArea: "button",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      padding: "0px 5px",
      textAlign: "center",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    content: {
      gridArea: "content",
      backgroundColor: "rgba(0, 84, 245, 0.02)",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      padding: "10px",
      border: "1px dashed rgba(0, 84, 245, 1)",
      borderRadius: "4px",
    },
    textStyle: {
      color: "rgba(0, 63, 184, 1)",
      fontWeight: "400",
      fontSize: "14px",
    },
  };

  return (
    <div style={styles.rootContainer}>
      <div style={styles.headerContainer}>
        <div style={styles.logo}>
          <p style={styles.textStyle}>Logo</p>
        </div>
        <header style={styles.header}>
          <p style={styles.textStyle}>Header</p>
        </header>
      </div>
      <div style={styles.layoutContainer}>
        <nav style={styles.primaryNav}>
          <p style={styles.textStyle}>Primary Navigation</p>
        </nav>
        <nav style={styles.secondaryNav}>
          <p style={styles.textStyle}>
            Secondary Navigation
          </p>
        </nav>
        <div style={styles.breadcrumb}>
          <p style={styles.textStyle}>Breadcrumb</p>
        </div>
        <div style={styles.pageTitle}>
          <p style={styles.textStyle}>Page Title</p>
        </div>
        <div style={styles.button}>
          <p style={styles.textStyle}>Button</p>
        </div>
        <main style={styles.content}>
          <p style={styles.textStyle}>Content</p>
        </main>
      </div>
    </div>
  );
}
```

## Header

Der Header-Bereich befindet sich im oberen Bereich des Layouts und ist auf jeder
Seite identisch. Er kann das Logo sowie eine
[HeaderNavigation](/04-components/navigation/header-navigation/overview)
enthalten. Ein Hauptbestandteil der HeaderNavigation sind primäre
Navigationspunkte. Ergänzend gibt es
[Buttons](/04-components/actions/button/overview), die Overlays oder
[ContextMenus](/04-components/actions/context-menu/overview) öffnen, wie
beispielsweise für die Suche, das NotificationCenter oder das ProfilMenu. Im
Header-Bereich sollten ausschließlich wichtige Elemente angezeigt werden, die
auf allen Seiten sichtbar sein müssen.

## Side-Navigation

Die Side-Navigation befindet sich entweder direkt links neben dem
Content-Bereich oder fest am linken Bildschirmrand. Sie muss nicht nur aus einer
Navigation bestehen, sondern kann auch aus einer Primary und einer Secondary
Navigation bestehen.

Zum Aufbau einer Side-Navigation kann eine
[LayoutCard](/04-components/structure/layout-card/overview) mit der Component
[Navigation](/04-components/navigation/navigation/overview) gefüllt werden.

## Content

Der Content-Bereich stellt dem User Informationen zur Verfügung, damit er seine
Aufgabe erfüllen kann. Der Inhalt variiert von Seite zu Seite, es wird jedoch
empfohlen, den Inhalt nach einem wiederkehrenden Muster anzuordnen, das bereits
auf anderen Seiten verwendet wurde.

Die Navigationsstruktur im Content-Bereich folgt ebenfalls einem klaren Muster.
Im Content-Bereich können [Tabs](/04-components/navigation/tabs/overview) und
[List](/04-components/structure/list/overview) verwendet werden, um die Inhalte
zu teilen oder in die Tiefe zu navigieren. Bei der Navigation in tiefere Ebenen,
z. B. über eine List, bietet eine
[Breadcrumb](/04-components/navigation/breadcrumb/overview) eine
Orientierungshilfe.

Der Content wird von einer
[LayoutCard](/04-components/structure/layout-card/overview) umschlossen. Um
innerhalb der LayoutCard die richtigen Abstände in vertikaler und horizontaler
Richtung sicherzustellen, sollten die Layout-Components
[Section](/04-components/structure/section/overview) und
[ColumnLayout](/04-components/structure/column-layout/overview) verwendet
werden.

## Overlay

Ein Overlay öffnet sich über der eigentlichen Seite. Größere Overlays wie
[Modals](/04-components/overlays/modal/overview) und
[OffCanvas](/04-components/overlays/modal/overview) erhalten zusätzlich einen
Backdrop, damit sich der User besser auf den angezeigten Inhalt konzentrieren
kann. Andere, kleinere Overlays wie
[ContextMenu](/04-components/actions/context-menu/overview) oder
[Tooltip](/04-components/overlays/tooltip/overview) erhalten keinen Backdrop für
die im Hintergrund angezeigte Seite.