LU00g - LB02 Projektbeschreibung

Beschreibung: Auf dieser Plattform sollen Nutzer*innen eine Vielzahl von Rezepten entdecken, speichern und nachkochen können. Die Website richtet sich an Hobbyköch*innen und Feinschmecker*innen, die gerne neue Gerichte ausprobieren. Neben der klassischen Darstellung von Rezepten soll die Seite auch durch multimediale Inhalte, wie Videos oder Bildanleitungen, zum Kochen motivieren. Das Design soll frisch, zugänglich und strukturiert sein, sodass Besucher*innen sich schnell zurechtfinden.

Use Cases:

  1. Nutzer*innen können nach Kategorien (z. B. Vorspeise, Hauptgericht, Dessert) filtern und passende Rezepte anzeigen lassen.
  2. Jede Rezeptseite zeigt ein ansprechendes Bild, eine Zutatenliste, eine Schritt-für-Schritt-Anleitung sowie ein eingebettetes Kochvideo.
  3. Die Startseite präsentiert ausgewählte „Rezept des Tages“-Empfehlungen in einem Carousel (Bootstrap Carousel-Komponente).
  4. Ein responsives Grid zeigt Rezeptkarten mit kurzen Teasern und einem „Mehr erfahren“-Button (z. B. Bootstrap Cards).
  5. Eine Kontaktseite ermöglicht Nutzer*innen das Einsenden eigener Rezepte inklusive Bild-Upload.

Beschreibung: Die Website zeigt das Portfolio einer Künstlerin, die Malerei, Illustration oder digitale Kunst betreibt. Besucher*innen sollen ihre Werke entdecken, mehr über die Künstlerin erfahren und bei Interesse eine Anfrage stellen können. Die Seite legt besonderen Wert auf die visuelle Darstellung und eine minimalistische Gestaltung, die die Kunst in den Vordergrund stellt.

Use Cases:

  1. Eine Galerie zeigt Bilder der Werke, die beim Anklicken in einer Lightbox grösser dargestellt werden (z. B. Bootstrap Modal).
  2. Eine Über-mich-Seite stellt die Künstlerin mit Foto, Biografie und künstlerischer Laufbahn vor.
  3. Ein Bereich für aktuelle oder vergangene Ausstellungen mit Veranstaltungsdaten und Flyern als Download.
  4. Kontaktformular mit Betreffauswahl (Anfrage für Ausstellung, Kaufanfrage, Presse).
  5. Ein Blog-Bereich, in dem die Künstlerin Einblicke in ihren Schaffensprozess gibt (z. B. mit Bootstrap Accordion für Artikelübersicht).

Beschreibung: Die Website stellt ein charmantes, lokal verankertes Café vor. Ziel ist es, die Atmosphäre des Ortes digital einzufangen und Informationen zu Angebot, Lage und Öffnungszeiten bereitzustellen. Die Seite soll einladend wirken, Appetit machen und zur Kontaktaufnahme oder Reservierung animieren.

Use Cases:

  1. Speisekarte mit Tagesangeboten, dargestellt über stylische Karten-Elemente (z. B. Bootstrap Cards).
  2. Startseite mit Hero-Bild des Cafés und einer kurzen Vorstellung (z. B. Jumbotron oder Grid-Layout).
  3. Galerie mit Bildern vom Interieur, den Speisen und Getränken.
  4. Google Maps Einbettung mit Anfahrtsbeschreibung.
  5. Kontaktformular für Reservationen und Anfragen (z. B. mit Bootstrap Form Controls).

Beschreibung: Eine Website für ein mehrtägiges Musikfestival mit verschiedenen Bühnen, Bands, Foodtrucks und Rahmenprogramm. Sie informiert Besucher*innen umfassend und emotionalisiert durch Bilder, Trailer und Erfahrungsberichte. Auch organisatorische Aspekte wie Anreise oder Sicherheit werden behandelt.

Use Cases:

  1. Vorstellung des Line-ups mit Bandinfos und Spielzeiten pro Tag (z. B. mit Bootstrap Tabs oder Accordion).
  2. Interaktive Festival-Karte mit Standorten von Bühnen, WC, Foodtrucks etc.
  3. Video-Trailer und Aftermovies vergangener Festivals (z. B. eingebettetes YouTube-Video im Modal).
  4. Ticketinfos mit Preisstaffelung, Link zur Bestellung und Rabatthinweisen.
  5. Festivalguide als Download-PDF.

Beschreibung: Die Website stellt einen Tierschutzverein vor, der Tiere rettet, vermittelt und zu artgerechter Haltung aufklärt. Im Zentrum stehen die Tiere und ihre Geschichten. Neben Informationen zum Verein gibt es konkrete Aufrufe zur Adoption oder Spenden.

Use Cases:

  1. Vermittlungsseite mit Tierprofilen (Bild, Beschreibung, Verträglichkeit, Vermittlungsstatus; z. B. als Cards angelegt).
  2. Vorstellung des Vereins mit Teamfotos und Jahresrückblick.
  3. Spenden-Seite mit Formular und verschiedenen Unterstützungsoptionen (z. B. mit Bootstrap Input-Groups).
  4. Erfahrungsberichte erfolgreicher Adoptionen.
  5. Veranstaltungskalender für Infotage und Aktionen (z. B. als Table-Komponente).

Beschreibung: Die Website bietet fundierte Inhalte rund um Fitness, gesunde Ernährung, mentale Gesundheit und Bewegung. Zielgruppe sind gesundheitsbewusste Menschen, die sich regelmässig informieren und motivieren lassen wollen. Neben Blogartikeln sollen auch interaktive Inhalte wie Videos oder Challenges integriert sein.

Use Cases:

  1. Startseite mit neuesten Blogbeiträgen und motivierenden Zitaten (z. B. mit Bootstrap Card-Gruppen).
  2. Artikel zu verschiedenen Themenkategorien mit Tags und Suchfunktion.
  3. Eingebettete Workout-Videos oder Podcasts (z. B. über Bootstrap Responsive Embed).
  4. Monats-Challenge mit Fortschrittsanzeige oder Downloadplan.
  5. Kontaktseite für Fragen, Feedback oder Themenvorschläge (z. B. mit Bootstrap Formularelementen).

Beschreibung: Diese Website dient einem jungen Modeunternehmen zur Vorstellung seiner Marke und Kollektionen. Im Vordergrund stehen Design, Trends und Nachhaltigkeit. Die Seite soll modern, dynamisch und trendbewusst gestaltet sein.

Use Cases:

  1. Kollektion präsentieren: Slideshow mit Looks und Beschreibung der Idee dahinter (z. B. mit Bootstrap Carousel).
  2. Designer-Team vorstellen: Fotos, Kurzporträts und Statements.
  3. Style-Beratung: Artikel oder Quiz zur Findung des passenden Stils (z. B. mit Bootstrap Cards und Buttons).
  4. Blog mit Neuigkeiten zur Marke und Modetrends.
  5. Kontaktseite mit Anfragemöglichkeit für Kooperationen oder Presse (z. B. Modal mit Kontaktformular).

Beschreibung: Die Website führt Besucher*innen in eine attraktive Tourismusregion ein. Sie stellt Sehenswürdigkeiten, Aktivitäten, Unterkünfte und regionale Besonderheiten vor. Ziel ist es, Lust aufs Reisen zu machen und konkrete Informationen bereitzustellen.

Use Cases:

  1. Interaktive Karte mit Hotspots und Kurzinfos zu jedem Ort.
  2. Themenspezifische Erlebniswelten (z. B. Natur, Kultur, Familie).
  3. Galerie mit Impressionen der Region (z. B. im Card-Layout mit Bootstrap Grid).
  4. Downloadbare PDF-Broschüre mit Reiserouten.
  5. Kontaktformular für individuelle Fragen oder Gruppenanfragen (z. B. Bootstrap Form mit Validierung).

Beschreibung: Diese Plattform bietet aktuelle Nachrichten zu verschiedenen Themenfeldern. Sie soll eine klare Struktur, leichte Navigation und multimediale Inhalte haben. Zielgruppe sind internetaffine Nutzer*innen, die sich regelmässig über das Tagesgeschehen informieren wollen.

Use Cases:

  1. Artikelvorschau auf Startseite mit Kategorie-Labels (z. B. als Cards mit Badges in Bootstrap).
  2. Detaillierte Artikelseiten mit eingebetteten Medien.
  3. Filterfunktion nach Datum, Thema oder Autor (z. B. mit Dropdowns und Selects).
  4. Kommentare oder Reaktionen zu Beiträgen (optional).
  5. Newsletter-Anmeldung für wöchentliche Zusammenfassungen (z. B. via Bootstrap Input Group mit Button).

Beschreibung: Das Online Museum bietet Besucher*innen einen digitalen Zugang zu einer Sammlung von Exponaten, Ausstellungen und Hintergrundwissen. Ziel ist es, Bildung und Kultur niederschwellig zugänglich zu machen. Auch interaktive Formate sollen integriert werden.

Use Cases:

  1. Virtuelle Ausstellung mit interaktivem Rundgang.
  2. Detailseiten für Exponate mit Bild, Text, Audioerklärung (z. B. mit Cards und Tabs).
  3. Kalender für kommende Online-Events oder Workshops.
  4. Downloadbereich für Arbeitsblätter oder Zusatzmaterial (z. B. über Bootstrap List-Groups).
  5. Feedbackformular zur Verbesserung des digitalen Angebots.

Beschreibung: Diese Website widmet sich der Vorstellung und Promotion unabhängiger Computerspiele. Entwickler*innen präsentieren hier ihre Spiele mit Trailern, Screenshots und Infos zur Entwicklung. Die Plattform dient auch als Sprungbrett für Crowdfunding oder Community-Aufbau.

Use Cases:

  1. Spieleseiten mit Beschreibung, Screenshots, Trailer (z. B. mit Cards und Carousel für Screenshots).
  2. Entwicklerporträts mit Biografie und Projektinfos.
  3. Blog über Entwicklungsfortschritte und technische Hintergründe.
  4. Kommentarfunktion für Feedback und Community-Austausch.
  5. Bereich mit Download-Demos oder Links zu Plattformen (z. B. mit Badges und Buttons in Bootstrap).

Beschreibung: Eine professionelle Website für ein Architekturbüro, die realisierte Projekte, Designphilosophie und Team vorstellt. Die Gestaltung soll klar, elegant und technisch anspruchsvoll wirken.

Use Cases:

  1. Projektgalerie mit Vorher-Nachher-Vergleichen (z. B. mit Bootstrap Grid oder Carousel).
  2. Detaillierte Projektseiten mit Grundrissen, Fotos und Beschreibung.
  3. Teamseite mit Kurzvorstellungen der Architekt*innen (z. B. als Cards mit Bildern und Text).
  4. Newsbereich mit aktuellen Bauprojekten oder Wettbewerbsteilnahmen.
  5. Kontaktformular mit Möglichkeit zur Projektanfrage oder Bewerbungen (z. B. mit Validierung und Input-Groups).

Kamil Demirci

  • modul/m287/learningunits/lu00/lb02-projektbeschreibung.txt
  • Zuletzt geändert: 2025/05/23 08:23
  • von kdemirci