Webdesign-Auswahl

Webdesign „Grüne Genusswelt“

Dieses Webprojekt entstand im Rahmen meiner Fortbildung in HTML und CSS. Das Ziel war es, eine moderne, responsive Landingpage für einen fiktiven Food-Blog zu entwickeln, die sowohl ästhetisch anspruchsvoll als auch technisch sauber umgesetzt ist. Das Projekt wurde in enger Zusammenarbeit und unter Anleitung meiner Tutorin programmiert.

Design-Philosophie & Zielsetzung

Die visuelle Gestaltung folgt dem Leitmotiv „Nachhaltiger Genuss“. Das Design sollte nicht nur Rezepte präsentieren, sondern ein Lebensgefühl vermitteln, das Natürlichkeit, Bewusstsein und moderne Ästhetik vereint.

Farbpsychologie: Ich habe mich bewusst gegen ein grelles „Öko-Grün“ und für ein tiefes Waldgrün in Kombination mit warmen Beige-Tönen entschieden. Diese Palette wirkt hochwertiger und unterstreicht den kulinarischen Anspruch der Seite. Der gelbe Akzent-Button im Hero-Bereich dient als gezielter Eye-Catcher.
Typografie-Konzept: Um den redaktionellen Charakter eines Kochmagazins zu betonen, habe ich eine klassische Serifenschrift für die Headlines gewählt. Dies schafft Vertrauen und wirkt zeitlos, während die serifenlose Schrift im Fließtext die moderne digitale Nutzbarkeit (Usability) sicherstellt.
Struktur & User Experience: Bei der Programmierung der Sektionen (Rezepte-Grid, Newsletter, Über uns) lag der Fokus auf einer klaren Hierarchie. Durch den gezielten Einsatz von White Space wirkt die Seite luftig und einladend, was die Verweildauer der Nutzer erhöhen soll.

Der Entwurf der Landingpage:

Technische Umsetzung

Die Realisierung erfolgte mittels HTML5 und CSS3. Gemeinsam mit meiner Tutorin habe ich dabei besonders auf folgende Aspekte geachtet:

Semantischer Code: Einsatz korrekter HTML-Tags für eine bessere Struktur und SEO-Grundlagen.
Layout-Techniken: Anwendung von modernen CSS-Methoden (wie Flexbox oder Grid), um die Karten-Elemente der Rezepte präzise auszurichten.
Responsivität: Sicherstellung, dass das Design auf verschiedenen Bildschirmgrößen harmonisch skaliert.

Webdesign im Wireframe-Stil

Für eine Bettenfirma habe ich ein umfassendes Redesign der Website umgesetzt. Da das bestehende Layout nicht mehr zeitgemäß war, wurde die Gestaltung von Grund auf neu gedacht. Basierend auf einem InDesign-Konzept und einer ausführlichen Wettbewerbsrecherche habe ich zwei moderne Design-Entwürfe entwickelt. Diese beinhalten einen strukturierten Header mit Social-Media-Anbindung (Top Bar), einen flexiblen Footer sowie einen Body-Bereich im Wireframe-Stil, der eine spätere, gezielte Content-Pflege ermöglicht.

Das visuelle Konzept der Homepage basiert auf einer kontrastreichen Palette aus Gelb, Schwarz und Grau. Um eine klare Struktur zu bewahren und das Design modern zu halten, wurde der Body-Bereich bewusst in Weiß gestaltet. Ziel ist ein zeitgemäßes Erscheinungsbild, das durch eine intuitive Benutzerführung überzeugt, ohne den Besucher zu überfordern.