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 Zusammenarbeit mit meiner Tutorin umgesetzt. Die Realisierung erfolgte mittels HTML5 und CSS3.

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:

Landingpage-Konzept „Beautiful Planet Earth“

Im Zuge meiner Weiterbildung ist dieses Landingpage-Konzept zum Thema Natur- und Artenschutz entstanden. Zunächst haben wir die visuelle Konzeption und die Bildredaktion gemeinsam im Team ausgearbeitet, daraufhin habe ich die technische Umsetzung sowie die Programmierung der Seite mit HTML5 und CSS3 realisiert.

Das Design-Konzept: Die Landingpage setzt auf ein tiefes, edles Dunkelgrün/Anthrazit als Hintergrundfarbe. Dadurch wird eine cineastische, immersive Atmosphäre geschaffen, die die Farbintensität und Strahlkraft der Natur- und Tierfotografien perfekt in den Vordergrund rückt. Ein frisches, lebendiges Grün dient als gezielter Akzent für Call-to-Action-Elemente (wie den Button „Entdecke mehr“) und leitet die User intuitiv durch die Sektionen.
Struktur & User Experience: Der großflächige Hero-Bereich fesselt den Betrachter sofort emotional. Darunter folgt eine minimalistische Icon-Leiste zur Navigation nach Kontinenten, gefolgt von einer bildgewaltigen Slider-Sektion. Das Herzstück bildet ein harmonisch abgestimmtes Kachel-Grid,
das die Tierwelten der Erde über kontrastreiche Nahaufnahmen und clevere Text-Overlays präsentiert. Ein klares, emotionales Abschluss-Banner („Werde aktiv für die Natur!“) rundet die User Journey ab.
Die technische Umsetzung: Bei der Programmierung mit HTML5 und CSS3 stand ein sauberer, semantischer Code im Fokus. Die präzise Ausrichtung des Rasters, die feinen Trennlinien der Grid-Elemente sowie die fließenden Bild-Text-Überlagerungen wurden mit modernen CSS-Layout-Methoden pixelgenau realisiert.

Die Landingpage:

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.