Inhalt

Aufgabenstellung 1. Block

Dauer: 1 Laborblock (4h) + Fertigstellen der Aufgaben

img.png 99designs.de

1. Erster Kundenkontakt, Kickoff-Meeting und Besprechungsprotokoll

Aufgabe: Kickoff-Meeting und Besprechungsprotokoll

Ein Kunde lädt zu einem Pitch ein und schickt untenstehendes E-Mail an deine Agentur.

Bereite Fragen für das erste Treffen vor, damit anschließend folgende Punkte klar sind, und ein Konzept, ein Angebot und ein erstes Design erstellt werden können.

Führe das Gespräch anhand der vorbereiteten Fragen durch und halte die Ergebnisse in einem Besprechungsprotokoll schriftlich fest.

E-Mailanfrage Variante – Fitness & Gesundheit

Betreff: Neuer Internetauftritt für Fitnessstudio

Hallo, mein Name ist Michael Brandstätter vom FitZone Gym. Wir möchten unsere Website erneuern – sie soll moderner wirken und unsere Mitglieder besser ansprechen.

Könnten Sie uns dazu beraten?

Mit freundlichen Grüßen
Michael Brandstätter
FitZone Gym
m.brandstaetter@fitzone.at
+43 699 1234567

E-Mailanfrage Variante – Gastronomie

Betreff: Anfrage zur Erstellung einer neuen Website

Sehr geehrte Damen und Herren, ich bin Laura Ebner, Inhaberin des Café Sonnendeck. Unsere aktuelle Seite ist etwas in die Jahre gekommen, und wir überlegen, sie komplett neu zu gestalten. Ich freue mich über einen Terminvorschlag zur Besprechung.

Viele Grüße
Laura Ebner
Café Sonnendeck
laura.ebner@sonnendeck.at
+43 512 556677

E-Mailanfrage Variante – Kreativwirtschaft / Mode

Betreff: Unterstützung für Mode-Label-Website gesucht

Guten Tag, mein Name ist Nina Kovacs von Urban Threads, einem kleinen Modelabel aus Wien. Wir möchten unseren Online-Auftritt überarbeiten, wissen aber noch nicht genau, in welche Richtung es gehen soll. Könnten Sie uns bei der Planung unterstützen?

Beste Grüße
Nina Kovacs
Urban Threads
nina@urbanthreads.at
+43 1 2223344

E-Mailanfrage Variante – Hotellerie/Tourismus

Betreff: Website-Überarbeitung für Boutiquehotel

Sehr geehrte Damen und Herren, mein Name ist Anna Leitner vom Hotel Alpenhof. Wir möchten unseren Webauftritt modernisieren und besser für unsere Gäste nutzbar machen. Könnten wir einen Termin vereinbaren, um Vorgehen und Möglichkeiten zu besprechen?

Mit freundlichen Grüßen
Anna Leitner
Hotel Alpenhof
anna.leitner@alpenhof.at
+43 512 123456

Beispielhafte Struktur eines Besprechungsprotokolls

2. User Stories

User Stories helfen dabei, eine Website aus der Sicht der Nutzer:innen zu planen und sicherzustellen, dass Funktionen einen echten Mehrwert bieten. Sie machen Anforderungen verständlich, klar und überprüfbar und bilden damit eine wichtige Grundlage für gutes Design und sinnvolle Umsetzung.

Aufgabe: User Stories

Überlege, welche Zielgruppen die Website besuchen (z.B. Gäste, Tourist:innen, …) und welche Bedürfnisse diese haben.

Formuliere für die wichtigsten Zielgruppen passende User Stories nach dem bekannten Schema „Als … möchte ich … damit …“.

Jede User Story soll klar machen, wer etwas nutzt, was diese Person tun möchte und warum das wichtig ist. Die User Stories dienen anschließend als Grundlage für Struktur, Design und Funktionsumfang eures Prototyps.

Beispielhafte User Story für ein Cafe:
Als berufstätige Person, die spontan ein Café besuchen möchte, möchte ich auf der Website schnell Öffnungszeiten, Standort und Reservierungsmöglichkeit finden, damit ich ohne lange Suche entscheiden kann, ob das Café für mich gerade geeignet ist.

Ausführliche Vorlage einer User Story

User Story Nr.: ________

Als (Wer ist der Nutzer? z. B. Gast, Tourist:in, Café-Betreiber:in, Student:in …)
→ __________________

möchte ich (Was möchte die Person tun? möglichst konkret)
→ ________________
→ __________________
→ __________________

damit
(Warum ist das wichtig? Welcher Nutzen entsteht?)
→ ________________
→ __________________
→ __________________

Kontext / Situation (optional, aber empfohlen)<

In welcher Situation befindet sich der Nutzer?
→ ________________
→ __________________
→ __________________

Akzeptanzkriterien (Was muss erfüllt sein?)

  1. __________________
  2. __________________
  3. __________________
  4. __________________

Priorität

☐ Hoch ☐ Mittel ☐ Niedrig

Zugehörige Seite / Funktion

(z. B. Startseite, Speisekarte, Kontakt …)
→ ________________
→ __________________
→ __________________

Notizen / Ideen

(Skizzen, Hinweise fürs Design, technische Ideen …)
→ ________________
→ __________________
→ __________________

3. Funktionelles Konzept - Featurelist

Aufgabe: Featurelist

Fasse die wichtigsten Features in einer Featurelist zusammen. Konzentriere dich dabei auf folgende Kategorien:

Allgemeine Informationen zur Featurelist

Die Featurelist bezieht sich auf eine detaillierte Liste von Funktionen und Eigenschaften, die eine Website oder Webanwendung haben soll.

Beispielhafte Kateogorien können sein:

  1. Design-Features
  2. Navigation und Benutzererfahrung (UX), Mobiles Design
  3. Interaktive Elemente
  4. SEO (Suchmaschinenoptimierung)
  5. Technische Aspekte
  6. Integration Dritter (Social Media, …)
  7. Analytik und Reporting

Jede dieser Kategorien kann spezifischere Features und Details enthalten, je nach den individuellen Bedürfnissen und Zielen des Projekts. Eine gut ausgearbeitete Featurelist hilft nicht nur bei der Planung, sondern auch bei der Kommunikation zwischen dem Webdesigner oder der Agentur und dem Kunden, um sicherzustellen, dass alle Parteien die Anforderungen und Erwartungen klar verstehen.

4. Inhaltliches Konzept - Sitemap

Aufgabe: Sitemap

Erstelle eine Sitemap des Webauftritts und stelle ihn in grafisch ansprechender Form dar.

Allgemeine Informationen zur Sitemap

Eine Sitemap ist eine strukturierte Darstellung aller Seiten und Unterseiten einer Website, die die Hierarchie und die Verbindungen zwischen den Seiten visualisiert.

Sie dient als Navigationshilfe für Benutzer und Suchmaschinen, um den Aufbau der Website besser zu verstehen und effizient durch sie zu navigieren und ist auch ein wichtiger Anhaltspunkt für die Angebotserstellung.

Eine Sitemap kann in Form einer Grafik, Tabelle aber auch als einfache hierarchische Liste dargestellt werden:

img.png Beispielhafte Sitemap, milanote.com

5. Erstes grafisches Konzept - Scribbles

Aufgabe: Scribbles

Erstelle mehrere Scribbles für die wichtigsten Seiten und Inhaltselemente. Diskutiere Sie anschließend mit deinem Partner oder deiner Partnerin.

Allgemeine Informationen zu Scribbles

Ein Scribble ist eine grobe, handgezeichnete Skizze einer Webseite, die dazu dient, die grundlegenden Designideen, Layouts und Platzierungen von Elementen wie Texten, Bildern und Links visuell darzustellen.

Es ist ein frühzeitiger Schritt im Designprozess, der hilft, Konzepte schnell zu visualisieren und zu kommunizieren, bevor detaillierte Designarbeiten beginnen.

img.png Beispielhaftes Scribble einer Detailseite

Abgabe

Beginne ein Webdesign-Portfolio mit folgenden Inhalten:

Webdesign - Konzeption, Prototyping und Präsentation