Shopyy-Beauty-Webdesign: Chroma Dewy, Make-up und Farben

Projektübersicht

Für Chroma Dewy gliederten wir den Shopyy-Shop nach Make-up-Looks und farbigen Produkten. Augennahaufnahmen und Kollektionstexte bilden das Startbanner; Paletten und Kategorien führen weiter zum Einkauf. Orange Markenakzente, heller Hintergrund und satte Bilder verbinden Kollektionserkundung, Vergleiche und Produktdetails.

Gestalterische Herausforderung

Eine Beauty-Website muss Make-up-Effekte zeigen und Farben sowie Werkzeuge vergleichbar machen. Nahaufnahmen vermitteln das Thema; regelmäßige Raster zeigen Paletten, Pinsel und Verpackungen, ohne beide Informationsebenen konkurrieren zu lassen.

Strategie: Make-up-Looks und farbige Produkte

Augennahaufnahmen und Texte bilden das Startbanner; Paletten und Kategorienbilder führen zum Katalog. Die Startseite orientiert, Kategorien ermöglichen Vergleiche und Produktseiten erläutern Aussehen und Eigenschaften. Navigation und Links verbinden die Ebenen.

Josefin Sans strukturiert Titel, Navigation und Text über Größe, Gewicht und Absatzbreite. Orange Akzente, helle Flächen und satte Bilder prägen die Hauptseiten. Gruppen bleiben kompakt; mehr Raum zwischen Abschnitten trennt Bilder, Erläuterungen und Aktionen.

Bewegung und Funktionen unterstützen die Auswahl

Das Banner behält Links-/Rechtspfeile; Kategorienbilder öffnen weitere Kataloge. Mengenwahl, Bilder und gruppierte Beschreibungen konzentrieren sich auf das Produkt. Mobil bündelt ein klares Menü die Navigation bei durchgehendem Besucherpfad.

Startbanner: Augen-Make-up als erster Blickfang

Zwei Augennahaufnahmen stehen rechts im Banner, der Thementext links; das orange Chroma-Dewy-Logo sitzt im schlichten Kopfbereich. Nahansichten zeigen Farbe und Textur, Pfeile öffnen andere Kollektionen.

Die leichte Josefin Sans verbindet Navigation und Produkttexte. Helle Flächen geben den satten Looks Raum. Bild und Text haben getrennte Bereiche, ohne den ersten Bildschirm mit vollständigen Produktdetails zu überladen.

Neuheiten: Farben im regelmäßigen Raster vergleichen

New Arrivals zeigt mehrere Spalten von Paletten, deren Lidschattenfarben auf hellem Grund vergleichbar sind. Namen und Preise bleiben kurz; danach folgen Kategorienbilder für Brushes, Eyes und Lips.

Gleiche Palettengrößen und Kartenbreiten schaffen Ordnung, mit gleichmäßigen Kategorieabständen. Orange markiert die Marke nur punktuell; die Produkte liefern die Hauptfarben.

Pinselkategorie: Formen und Set-Inhalte sichtbar machen

Unter Makeup Brushes stehen Einzelpinsel und Sets im selben Raster. Die Bilder zeigen zunächst Köpfe, Griffe und Stückzahlen; Namen und Preise folgen darunter.

Weißer Hintergrund und größere Kartenabstände vermeiden Enge. Feine Navigation und ein zentrierter Titel wirken leicht. Katalogwerkzeuge erhalten einen eigenen Platz, ohne Vergleiche zu unterbrechen.

Produktseite: Verpackungsbilder führen ins Produkt ein

Bei The Volturi steht die rot-schwarze Verpackung links, rechts folgen Name, Preis, Menge und Kurzbeschreibung. Das Bild vermittelt die visuellen Merkmale, bevor der Text Details erklärt.

Rot grenzt sich deutlich vom hellen Seitenhintergrund ab. Feine Rahmen und kompakte Abstände ordnen Bedienelemente. Freiraum zwischen Bild und Text macht das dunkle Thema in der leichten Oberfläche klar erkennbar.

Weitere Details: Informationen und Empfehlungen trennen

Darunter bleiben Miniaturen, Bewertungen und You May Also Like erhalten. Abschnittsabstände verbinden diese Inhalte und trennen Produktinformationen von weiteren Einkaufsmöglichkeiten.

Empfehlungsbilder teilen eine Spaltenbreite. Porträts, Verpackungen und Werkzeuge bleiben auf hellem Grund. Zwischenüberschriften und vertikaler Raum gliedern Gruppen und führen zu interessanten Produkten.

Mobile Startseite: Kompaktes Menü, Thema und Neuheiten

Mobil wird die horizontale Navigation zum roten MENU-Zugang; Logo und Suche stehen darüber untereinander. Das Banner führt zu New Arrivals und bewahrt die Reihenfolge von Make-up-Inspiration zu Produkten.

Auf schmalen Bildschirmen erhalten Bilder mehr Platz, Titel und Preise folgen vertikal. Der rote Menübalken hebt sich von hellen Inhalten ab und hält Kategorien erreichbar.

Mobile Produktseite: Bilder und Details nacheinander

Mobil erscheinen zuerst Breadcrumbs und das große Verpackungsbild, dann Name, Preis und Menge. Das Bild bewahrt das Thema; Desktop-Spalten werden zu einer fortlaufenden Lesefolge.

Linksbündige Titel umbrechen natürlich; Preis und Bedienelemente haben Abstand. Heller Grund, feine Rahmen und Markenfarben verbinden die Produktseite mit den übrigen Seiten.

Gestaltungsfazit: Thema und praktische Details verbinden

Bei Chroma Dewy führen Looks und Farben durch orange Markenakzente, helle Flächen und satte Bilder auf Start-, Kategorie- und Produktseiten. Bilder vermitteln das Thema, Texte erläutern Details und Katalog und Optionen ermöglichen den nächsten Schritt. Mobil bleibt die Reihenfolge für ein stimmiges Erlebnis erhalten.

Planen Sie eine klare Shopyy-Website für Ihre Marke

Teilen Sie Ihre bestehende Website, Markenmaterialien und benötigten Seiten. Gemeinsam prüfen wir Produkte, Zielmarkt und Inhaltsprioritäten und planen passende Seiten, Gestaltung und Funktionen.