Ausgang & Ziel

Ziel der Aufgabe war es, auf Basis der in den vergangenen Wochen erworbenen Kenntnisse einen professionellen Webauftritt für einen Friseursalon vollständig von Grund auf zu entwickeln. Die Menüstruktur war vorgegeben und umfasste die Bereiche Start, Team, Leistungen, Portfolio und Kontakt. Hero-Bereich sowie Inhalte wurden jeweils passend zu den einzelnen Menüpunkten konzipiert und gestaltet, sodass ein stimmiges, benutzerfreundliches Gesamtbild entstand.

Meine Aufgaben

• Ideenfindung durch Skribbels
• Festlegung von Schriften, Farben und Bilder durch in Figma erstelten Stylesheet
• Erstellung eines Wireframes
• Umsetzung des Webauftritt mit Visual Code

Prozess

Der Gestaltungs- und Entwicklungsprozess begann mit einer Ideenfindung anhand von Scribbles, um erste Layout- und Strukturansätze schnell zu visualisieren. Darauf aufbauend wurden in Figma Schriften, Farben und Bildwelten definiert und in einem übersichtlichen Stylesheet festgehalten. Anschließend entstand ein Wireframe, der die Seitenstruktur und Nutzerführung klar abbildete. In der finalen Phase wurde der Webauftritt auf Basis dieser Vorarbeit mit Visual Studio Code technisch umgesetzt und zum Leben erweckt.

Ergebnis

Das Ergebnis ist ein moderner, übersichtlicher Webauftritt für einen Friseursalon, der sowohl gestalterisch als auch funktional überzeugt. Die Website wurde vollständig responsiv umgesetzt und für Desktop-, Tablet- und Smartphone-Ansichten optimiert. Durch die klare Struktur, ein stimmiges visuelles Konzept und eine intuitive Navigation wird ein konsistentes Nutzererlebnis über alle Endgeräte hinweg gewährleistet.

Ausgang & Ziel

Für dieses Projekt bestand die Aufgabe darin, eine Kontaktseite mit Formular mithilfe von Bootstrap zu erstellen. Der Fokus lag dabei auf einer responsiven Umsetzung, sodass die Seite auf unterschiedlichen Bildschirmgrößen zuverlässig funktioniert. Zusätzlich wurde für die Tablet- und Smartphone-Ansichten ein Burgermenü integriert, um auch auf kleineren Endgeräten eine übersichtliche und benutzerfreundliche Navigation zu gewährleisten.

Meine Aufgaben

• Konzept für Kontaktseite erstellen
• Festlegung von Schriften, Farben und Bilder durch in Figma erstelten Stylesheet
• Erstellung eines Wireframes
• Umsetzung des Kontaktformular mit Visual Code mit nutzung von Bootstrap

Prozess

Zu Beginn wurden die Inhalte und Anforderungen des Kontaktformulars definiert. Dazu gehörten die Felder Vorname, Nachname, E-Mail-Adresse, Telefonnummer, die Auswahl der gewünschten Leistungen, die Angabe, um welche Art von Objekt es sich handelt, sowie ein Textfeld für individuelle Anfragen. Zusätzlich wurde die Möglichkeit integriert, bis zu drei Dateien hochzuladen. Um den rechtlichen Anforderungen gerecht zu werden, wurde außerdem ein Pflicht-Checkbox für die Datenschutzerklärung ergänzt. Auf der rechten Seite der Kontaktseite wurde ein separater Bereich mit einem Ansprechpartner inklusive Bild gestaltet. Dieser enthält alle relevanten Kontaktdaten wie Telefonnummer, E-Mail-Adresse, Adresse sowie die Öffnungszeiten. Das Formular ist so umgesetzt, dass es erst nach korrekt ausgefüllten Pflichtfeldern abgesendet werden kann, um eine saubere und nutzerfreundliche Datenerfassung sicherzustellen.

Ergebnis

Das Ergebnis ist eine responsive Kontaktformular-Seite, die auf allen Endgeräten zuverlässig funktioniert. Korrekt ausgefüllte Felder werden grün markiert, während fehlerhafte oder unvollständig ausgefüllte Eingaben rot hervorgehoben werden. So erhält der User sofort ein klares visuelles Feedback und erkennt auf einen Blick, welche Angaben korrekt sind und wo noch Anpassungen erforderlich sind.