Design Guidelines verbund.edeka

Dieser Leitfaden bietet die Grundlage für die gestalterische Arbei an der Website des EDEKA-Verbunds. Hier finden sich alle Elemente, die auf der Seite genutzt werden sowie eine kurze Anleitung, wie diese zu nutzen sind. Dieses Dokument wird in regelmäßigen Abständen aktualisiert und beschreibt die Richtlinien, nach denen einzelnen Elementen und komplexe Module der Website gestaltet werden.

  • Farben

    Bei der Farbgestaltung der EDEKA-Webseite wird zwischen CI- und UI-Farben unterschieden. Die CI-Farben Gelb und Blau sind die EDEKA-Hausfarben. UI-Farben werden hauptsächlich für Typografie und UI-Elemente eingesetzt.

  • Typographie

    In der EDEKA-Kommunikation wird zwischen der Headline- und der Copyschrift unterschieden. Die Headline-Schrift ist die Plak Black Condensed. Die Work Sans ist die Copyschrift. Das bedeutet, dass in der Works Sans grundsätzlich alle Mengentexte in gemischter Schreibweise (Klein- und Großbuchstaben) gesetzt werden.

  • Vertical Spacing

    Durch die Anwendung strenger vertikaler Abstandsprinzipien können wir eine konsistente Konstruktion auf der Y-Achse erreichen. Es regelt den Abstand zwischen gestapelten Elementen innerhalb einer Komponente sowie den Abstand zwischen Objekten auf einer Seite.

  • Layout

    Das responsive Verhalten des Layout-Grids bietet eine optimale Anzeige- und Interaktionserfahrung für eine Vielzahl von Geräten - von Desktop-Monitoren bis hin zu Mobiltelefonen.

  • Icons

    EDEKA-Verbund Icons zeigen Informationen und Interaktionen auf einfache und direkte Weise an. Die Icons bestehen aus so wenig Elementen wie möglich. Alle Icons befinden sich in einem unsichtbaren quadratischen Bereich, der bei der Positionierung hilft und sind als SVG oder als Sammlung in einer Sktechdatei verfügbar.

  • Buttons

    Buttons ermöglichen Interaktion. Aktionen sind vorrangig funktional und finden im Kontext der Seite statt. Buttons können auch als Navigationselemente verwendet werden, um Verlinkungen besonders hervorzuheben. Es existieren primäre (Primary) und sekundäre (Secondary) Buttons.

  • Backgrounds

    Die Hintergrundfarben dienen dazu, die verschiedenen Inhalte auf der Webseite zu strukturieren. Die Hintergrundfarben sind flexibel einsetzbar. Primär sollte der weisse Hintergrund eingesetzt werden und nur einzelnen Module mit grauen oder gelben Hintergrund abgesetzt werden.

  • Berufserfahrene im EDEKA Markt

    Bildsprache

    In der Bildsprache spiegelt sich der EDEKA-Charakter wider. Keine geschönten, arrangierten Bildkompositionen, sondern echte Bilder, die Atmosphäre und Qualität ausstrahlen. Eine natürliche, frische Farbigkeit und eine eher zufällige Anordnung. Starke Anschnitte konzentrieren den Blick auf das Wesentliche. Dazu gehören ungewöhnliche Perspektiven und/oder Close-ups.