Error: Invalid Frontmatter

Path: /app/www/public/user/pages/11.knowledge/02.topics/01.web-design/default.md

Failed to read /app/www/public/user/pages/11.knowledge/02.topics/01.web-design/default.md: Unexpected characters near "Web-Design & Typography" Typography"" at line 1 (near "title: "Kapitel 4: Web-Design title: "Web-Design & Typography" Typography"").

---
title: "Kapitel 4: Web-Design title: "Web-Design & Typography" Typography"
metadata:
    description: "Grundlagen der Webgestaltung, Typography und digitalen Ästhetik"
visible: true
---

# 🎨 Web-Design & Typography

## Die Kunst der digitalen Gestaltung

Willkommen in der kreativen Seite der digitalen Wildnis! Hier lernst du, wie man schöne und funktionale Websites gestaltet.

---

## 📝 Typography Grundlagen

### **Schrift ist die Seele des Webs**

Typography ist nicht nur das Aussehen von Text - es ist die **Stimme** deiner Website. Die richtige Schrift kann:
- **Emotionen** vermitteln
- **Vertrauen** aufbauen  
- **Lesbarkeit** verbessern
- **Markenidentität** schaffen

### **Grundlegende Schriftarten**

#### **Serif-Schriften** (mit "Füßchen")
```css
font-family: "Times New Roman", Georgia, serif;
  • Wirkung: Traditionell, seriös, lesbar
  • Einsatz: Bücher, Zeitungen, formelle Dokumente

Sans-Serif-Schriften (ohne "Füßchen")

font-family: Arial, Helvetica, sans-serif;
  • Wirkung: Modern, klar, digital
  • Einsatz: Websites, Apps, Bildschirme

Monospace-Schriften (alle Zeichen gleich breit)

font-family: "Courier New", Monaco, monospace;
  • Wirkung: Technisch, präzise, wie alte Computer
  • Einsatz: Code, Terminal, Retro-Design

🌈 Farbtheorie für das Web

Die Psychologie der Farben

Farben sprechen direkt zu unseren Emotionen:

  • 🔴 Rot: Energie, Leidenschaft, Warnung
  • 🔵 Blau: Vertrauen, Ruhe, Professionalität
  • 🟢 Grün: Natur, Wachstum, Harmonie (wie FOSS!)
  • 🟡 Gelb: Optimismus, Kreativität, Aufmerksamkeit
  • 🟣 Lila: Luxus, Kreativität, Spiritualität
  • ⚫ Schwarz: Eleganz, Macht, Geheimnis
  • ⚪ Weiß: Reinheit, Einfachheit, Klarheit

Farbharmonien

Monochromatisch

Verschiedene Töne einer Farbe:

/* Grün-Palette für FOSS-Themen */
--primary: #2d5016;
--light: #6b9426;  
--lighter: #9bcf3a;
--lightest: #c8e85c;

Komplementär

Gegenüberliegende Farben im Farbkreis:

/* Grün + Rot */
--primary: #2d5016;
--accent: #8B0000;

🔧 Typography Beispiele

Die folgenden Beispiele zeigen die verschiedenen Typography-Elemente in Aktion:

Headings

H1 Heading 40px

H2 Heading 32px

H3 Heading 28px

H4 Heading 24px

H5 Heading 20px
H6 Heading 16px

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

Markdown Semantic Text Elements

Bold **Bold**

Italic _Italic_

Deleted ~~Deleted~~

Inline Code `Inline Code`

HTML Semantic Text Elements

I18N <abbr>

Citation <cite>

Ctrl + S <kbd>

TextSuperscripted <sup>

TextSubscripted <sub>

Underlined <u>

Highlighted <mark>

<time>

x = y + 2 <var>

Blockquote

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

- Bill Gates

📚 Weiterführende Design-Ressourcen

Lernmaterialien

  • MDN Web Docs - Offizielle CSS-Dokumentation
  • CSS-Tricks - Praktische CSS-Tutorials
  • A List Apart - Design-Artikel für Web-Profis

Inspiration

  • Dribbble - Design-Inspiration und Trends
  • Behance - Portfolio-Platform für Designer
  • Awwwards - Prämierte Website-Designs

Tools zum Experimentieren

  • CodePen - Online CSS/HTML/JS Editor
  • CSS Grid Garden - Spielerisch CSS Grid lernen
  • Flexbox Froggy - Flexbox spielend meistern

Design ist nicht nur wie es aussieht - Design ist wie es funktioniert.
— Steve Jobs

Bereit, deine eigene digitale Ästhetik zu entwickeln? 🎨