Skip to content
Krankikom Logo Krankikom Logo

Projekt: Café Website

Frontend Design

Das Szenario

Section titled “Das Szenario”

Die Krankikom GmbH expandiert und eröffnet das Café Kranki. Wir sind Experten für Digitales, aber unser neues Café braucht ein Gesicht im Web. Die Geschäftsführung hat eine klare Vision: “Es soll modern wirken, aber den Charme eines gemütlichen Coding-Cafés haben.”

Deine Aufgabe: Entwickle das Konzept und die Website. Du bist nicht nur der Coder, du bist der Architekt dieser digitalen Filiale.

Deine Entscheidungen

Section titled “Deine Entscheidungen”

Anstatt dir eine strikte Feature-Liste zu geben, stellen wir dir die Probleme vor, die die Website lösen muss. Wie du sie löst, liegt bei dir.

1. Die Identität

Section titled “1. Die Identität”

Das Café braucht ein Branding.

  • Frage: Welche Farben und Schriftarten vermitteln “Tech-Modernität” gemischt mit “Kaffee-Gemütlichkeit”?
  • Aufgabe: Erstelle ein Moodboard oder Styleguide bevor du eine Zeile Code schreibst.

2. Die User Journey

Section titled “2. Die User Journey”

Besucher kommen aus verschiedenen Gründen auf die Seite.

  • Der Eilige: Will nur wissen, ob offen ist.
  • Der Genießer: Will wissen, welche Bohnen wir nutzen.
  • Der Bewerber: Sucht nach Jobs.
  • Entscheidung: Wie strukturierst du die Navigation und den Aufbau der Startseite, um all diese Bedürfnisse schnell zu bedienen?

3. Die Technik

Section titled “3. Die Technik”

Wir fangen simpel an, aber sauber.

  • Tech-Stack: Reicht reines HTML/CSS? Brauchst du JavaScript für Interaktivität (z.B. einen Dark Mode Toggle oder eine Galerie)?
  • Responsive Design: Wie sieht die Speisekarte auf einem Smartphone aus vs. auf einem 27-Zoll Monitor?

Anforderungen (The Problem Space)

Section titled “Anforderungen (The Problem Space)”

Die Geschäftsführung erwartet Lösungen für folgende Bereiche:

  1. Info-Hub: Öffnungszeiten, Anfahrt, Kontakt. (Muss auf den ersten Blick sichtbar sein).
  2. Das Produkt: Eine Speisekarte, die einem das Wasser im Mund zusammenlaufen lässt. (Ist das eine PDF? Eine HTML-Tabelle? Ein interaktives Grid? Deine Wahl.)
  3. Vibe: Eine Galerie oder Sektion, die die Atmosphäre zeigt.
  4. Rechtliches: Ein Footer mit Impressum & Datenschutz (Platzhalter reichen).

Erster Schritt: Wireframe

Section titled “Erster Schritt: Wireframe”

Bevor du Code schreibst, nimm Stift und Papier (oder Figma/Excalidraw). Skizziere, wo welche Elemente hinkommen. Wenn du das Layout änderst, “kostet” das auf Papier 10 Sekunden, im Code 10 Minuten.

Ressourcen & Tipps

Section titled “Ressourcen & Tipps”
  • Inspirationsquellen: Dribbble, Behance, Awwwards.
  • Google Fonts für Typografie.
  • FontAwesome oder Heroicons für Icons.

Fragen?

Section titled “Fragen?”

Komm auf uns zu. Präsentiere uns deine Ideen (Wireframes) bevor du alles fertig baust. Feedbackschleifen sind Teil des Jobs!