Herangehensweise
Anforderung des Projekt
Umfang
Entwicklung einer Webseite mit mindestens drei Seiten, die zudem responsive sein musste.
Funktionen
- Ein Slider mit automatischer Wiedergabe und einer Start-Stopp Funktion.
- Eine klickbare Navigation.
- Ein mit JavaSript validierter Kontaktformular
Zusatzmodul
Als Wahlmodul entschied ich mich für CSS-Animationen, um die Webseite mit interaktiven Elementen aufzuwerten.
Konzept
Es war erforderlich, ein detailliertes Konzept für das Design und die Struktur der Webseite zu entwickeln, um die Zielgruppe und die Anforderungen des Restaurants optimal zu berücksichtigen.
Bei der Zielgruppenanalyse ging es darum, sowohl bestehende als auch potenzielle Gäste des Restaurants Linde anzusprechen. Eine kleine Marktanalyse half mir, die Bedürfnisse der Nutzer zu identifizieren und die Anforderungen an die Webseite zu schärfen. Das Ziel war es, eine moderne und benutzerfreundliche Webseite zu gestalten, die die Atmosphäre des Restaurants widerspiegelt und neue Gäste anspricht.
Projektplanung
Da es mein erstes Projekt dieser Art war, begann ich mit einer groben Auflistung der Arbeitsschritte anstelle eines detaillierten Zeitplans. Diese umfassten:
- Entwurf eines Logos
- Recherche zu den wichtigsten Elementen einer Restaurant Webseite
- Erstellung von Skizzen und Wireframes
- Beschaffung passender Bilder
- Screendesign für Desktop und mobile Geräte
- Website programmieren
Diese Planung diente mir als Leitfaden, um die einzelnen Schritte strukturiert und effizient umzusetzen
Corporate Design erstellen
Um dem Restaurant eine klare visuelle Identität zu geben, habe ich ein passendes Corporate Design entwickelt
Schrift
Für das Corporate Design war die Wahl der richtigen Schrift entscheidend. Die Schrift, die auf der Menükarte des Restaurants verwendet wird, sollte auch im Logo wieder aufgegriffen werden. Da es sich um eine kostenpflichtige Schriftart handelte,
entschied ich mich für die Schriftart Kunstler Script, die auch auf den Arbeits-T-Shirts des Restaurants zu finden ist.
jedoch stellte ich fest, dass Kunstler Script für den Webauftritt nicht optimal geeignet war, da sie schwer leserlich ist. Um die Lesbarkeit auf der Webseite zu gewährleisten und gleichzeitig eine moderne Ausstrahlung zu bewahren, entschied ich mich für die Schriftart Roboto. Diese Schrift wirkt neutral und passt gut zu den geplanten, farbigen Design-Elementen.
Ein weiterer wichtiger Punkt war, dass ich in diesem Projekt lernen wollte, wie man Schriften korrekt in HTML und CSS einbindet. Daher entschied ich mich bewusst gegen Standard-Webschriften und wählte eine Schrift aus, die vielseitig ist und verschiedene Varianten bietet. So konnte ich die gleiche Schriftart auf unterschiedliche Weise einsetzen, was für ein harmonisches und flexibles Design sorgt.
Farben
Für das Design des Projekts wählte ich eine Kombination aus Braun, Grün und Orange. Diese Farben habe ich bewusst gewählt, um die Besonderheiten des Restaurants widerzuspiegeln: Das Restaurant Linde ist ein Holzhaus, weshalb ich Braun als Hauptfarbe gewählt habe. Orange wurde gewählt, da es das Logo widerspiegelt, und Grün steht für die Lindeblüte, die symbolisch mit dem Namen des Restaurants verbunden ist.
Logo & Favicon
Da das Restaurant Linde noch kein eigenes Logo hatte, habe ich eines mit Abobe Illustarot entworfen. Das Logo besteht aus einem runden Kreis, inspiriert vom Arbeits-T-Shirt, auf dem „Linde“ auf einem orangen Oval geschrieben ist.
Der Kreis spiegelt also das T-Shirt-Design wider.
Um das Restaurant und seinen Namen besser zu verbinden, habe ich ein Lindeblütenblatt in das Logo integriert. Der Lindenbaum, der früher vor dem Restaurant stand, war die Inspiration dafür.
Das Logo sollte auch die Spezialität des Hauses – das Cordon Bleu – hervorheben.
Deshalb habe ich den Slogan „House of Cordon Bleu“ direkt im Logo eingebaut, um klarzumachen,
was das Restaurant besonders macht.
Das gleiche Design habe ich auch für das Favicon verwendet,
um eine einheitliche Markenpräsenz auf allen Geräten zu gewährleisten.
Struktur und Inhalte der Webseite
Ich begann mit einer kleinen Sitemap, um die Struktur der Webseite festzulegen Die bestehende Navigation der Webseite war zu umfangreich, also habe ich sie auf die wichtigsten Punkte reduziert und mich für fünf Rubriken entschieden:
Navigation vorher
Neue Sitemap
- Startseite
- Mittagsmenü
- Restaurant
- Menü
- Galerie
- Über uns
- Kontakt
Diese Struktur sollte den Nutzern eine einfache Navigation und alle wichtigen Informationen bieten.
Ich entschied mich für folgede drei Seiten:
Startseite
Eine Übersicht über das Restaurant mit einem Slider und kurzen Infos
Galerie
Eine Seite, die die Atmosphäre und Gerichte des Restaurants mit Bildern zeigt.
Kontakt
Ein Kontaktformular und wichtige Informationen wie Adresse und Öffnungszeiten.
Design und technische Umsetzung
Für jede Seite habe ich zunächst mit Figma Screendesigns für Desktop und mobile Geräte erstellt.
Startseite
Das Screendesign enthält eine Begrüssung, die wichtigsten Informationen wie Öffnungszeiten und eine Karte sowie einen auffälligen
Call-to-Action-Button für Reservierungen.
Technisch habe ich hier einen Slider mit JavaScript integriert, der visuelle Highlights des Restaurants zeigt. Dabei war es eine Vorgabe, den Slider so zu programmieren,
dass er automatisch abläuft und zusätzlich eine Stop- und Play-Funktion bietet
Galerie
Die Galerie-Seite diente mir dazu, die Grundlagen von CSS Grid zu erlernen, weshalb ich mich bewusst für eine bildbasierte Seite entschieden habe.
Zusätzlich wollte ich spannende visuelle Effekte in die Website integrieren, und eine Galerie-Seite bot dafür die perfekte Grundlage.
In der Galerie habe ich eine Lightbox implementiert, um die Bilder ansprechend darzustellen und gleichzeitig weitere JavaScript Kenntnisse anzuwenden.
Kontakt
Das Design dieser Seite beinhaltet ein Kontaktformular, eine Google Maps-Karte sowie die wichtigsten Kontaktdaten. Bei der Umsetzung habe ich ein interaktives Formular mit validierbaren Feldern programmiert. Ausserdem ist die Karte direkt eingebunden, sodass Nutzer sofort sehen können, wo sich das Restaurant befindet
CSS-Animationen für die Landingpage
D Als Wahlmodul habe ich eine Landingpage mit CSS-Animation erstellt, die als Startseite für die Website dient. Die Seite hat eine einfache Navigation mit Links zu den Bereichen Startseite, Galerie und Kontakt. Oberhalb befindet sich das Logo des Restaurants.
Die Animation zeigt, wie Blätter kreisend nach unten fallen. Sie passt zur Linde im Logo und soll den Bezug zum Restaurant unterstreichen
Für die Umsetzung habe ich CSS-Animationen mit Keyframes genutzt, wobei jedes Blatt eine eigene Bewegung hat, damit es natürlich wirkt.
