HM CSS-Vorlage

Cremefarbene Freiflächen und senfgelbe Flächen prägen das Modestyling

Der einleitende Kollektionsbereich legt die visuellen Regeln fest, die sich durch die gesamte Seite ziehen. Große Modefotografien tragen den Hauptteil der Botschaft, während cremefarbene und weiße Flächen den Bildern Raum geben, sich klar vom Text abzuheben. Senfgelbe und rote Akzentblöcke kennzeichnen redaktionelle Aktionsinhalte wie den Geschenkkartenbereich, die Valentinstagskollektion und die auf Studierende ausgerichtete UNiDAYS-Fläche. Durch diesen Kontrast erhält jede Kampagnenbotschaft ein eigenes Gewicht, ohne die gemeinsame redaktionelle Ausrichtung zu durchbrechen.

Die geteilten Abschnitte greifen das abgestimmte Zusammenspiel von Bild und Text immer wieder auf. Eine Collage kann eine Seite einnehmen, während rechtsbündiger Text auf der anderen Seite für eine klare Kante sorgt – zu sehen bei den Aktionen für Geschenkkarten, Valentinstag und Studierende. Die Denim-Kollaboration mit Eytys setzt ein farbiges Textfeld neben eine große Aufnahme, während die datierte Unisex-Story auf ein ruhigeres, zweiteiliges Arrangement setzt. Diese Varianten sind gestalterische Nuancen innerhalb eines einheitlichen visuellen Systems und keine zusammenhangslosen Layouts.

Der Bereich „Inside H&M“ führt dieselbe Formensprache über übereinander angeordnete redaktionelle Module fort und kombiniert ein farbiges Highlight-Element mit kleinen und großen Modebildern. Kontraststarke Serifenschriften für Schautexte schaffen eine klare Hierarchie für Kampagnenüberschriften wie LIEBE & MODE und INSIDE H&M. Die wiederkehrenden Beziehungen zwischen Farbe, Abständen, Bild und Typografie machen die Seite ideal für eine Weiterentwicklung als CSS-basiertes Design, während ihre unverwechselbare modische Identität vollständig erhalten bleibt.