Inhalt. Designguide. ddd+ Das Logo. Farbwelt Einsatz. Elemente. Farben in Textelementen

Transkript

1 Designguide Inhalt Das Logo Farbwelt Einsatz Typographie Elemente ddd Farben in Textelementen Grid-Layout Breakpoints Fluid-Layout Beispiel einer 4-Spaltigen Struktur (z.b. Kategorie mit Artikeln) Beispiel einer 2-Spaltigen Struktur Icons Vector-Icons 6 6 Seite 1

2 Das Logo Farbwelt Das Logo der Ergo GmbH ist ein Schriftzug aus der neuen Helvetica. Es werden insgesamt vier Schriftschnitte verwendet. Von Rechts nach Links: Fein, Normal, Halbfett und Fett. Die Hausfarbe der ERCO GmbH ist #F6F6F6, ein sehr helles Grau. Weitere Grau-Abstufungen komplettieren die ERCO-Farbwelt in der dargestellten Verteilung. Hexcode: #000, RGB: Hexcode: #666, RGB: Hexcode: #777, RGB: Hexcode: #DBDBDB, RGB: Hexcode: #F6F6F6, RGB: Einsatz Hexcode: #FFF, RGB: Farbe Einsatz #000 Logo, Fließtext, Links: Hoverzustand #666 Hinterlegung von Fließtext in Artikeln / Berichten, Fließtext auf weißem Hintergrund, Buttons: Hoverzustand #777 Links im Fließtext und im Menü #DBDBDB #F6F6F6 #FFF Footerhintergrund Links, Buttonhintergründe, Hintergrund der Website Hinterlegung von Produktbeschreibungen auf Startseite, Fließtext und dunkelgrauem Hintergrund Seite 2

3 Typographie Aa Lorem Ipsum Elemente Die Hausschrift der ERCO GmbH ist die Rotis Semi Sans. Die Schriften zeichnen sich durch Klargheit und Prägnanz aus und gewährleisten einen modernen Auftritt der ERCO GmbH. Die Rotis Semi Sans wird als Webfont in die Website eingebunden. Bei Browsern, die Webfonts nicht unterstützen, wird eine Standardsans-serif Schriftart zur Anzeige genutzt. Element Schriftschnitt Schriftschnitt H1 Rotis Semi Sans / Light (200) 38px Farben in Textelementen H2 H3 H4 H5 H6 Fließtext #666 auf #FFF #FFF auf #666 32px 24px 18px 14px 12px 14px Seite 3

4 Grid-Layout Nach dem Bootstrap3-Standard kann sich auch die erco.com Website eines bis zu zwölfspaltigen Grid-Layouts bedienen (30px Abstand der Spalten), oft genutzt wird auf der Desktop-Variante der Page das vier- oder zweispaltige Layout, auf einer mobilen Variante das ein- und zweispaltige Layout. Durch fullsize-bilder und Videos, die sich breitentechnisch über den gesamten Viewport des Browsers erstrecken (siehe Startseite), werden die Blicke des Besuchers und potentielle Käufers bestmöglich auf die Website gelenkt. Breakpoints Die Seite wird je nach Endgerät und nach zur Verfügung stehende Fensterbreite anders angezeigt - so existieren drei verschieden Versionen. Beispielsweise werden auf der Desktop-Variante (mit mindestens 1024px Fensterbreite = Breakpoint zum nächsten Layout bei 1024px) in der Kategorieansicht vier Artikel pro Zeile angezeigt. Auf einem Tablet, welches mindestens 800px Bildschirmbreite bietet, sind es dann nur noch drei Artikel pro Zeile. Auf Mobilgeräten wird noch einmal auf zwei Artikel pro Zeile reduziert. Seite 4

5 Produktkategorieansicht Fluter auf dem iphone (2-Spalten- Layout).. und im Desktop-Browser (1100px Breite). Fluid-Layout Zu der Breite einer Spalte lässt sich keine genauen Angaben festlegen, da das Layout auf Fluid- Container (CSS-Klasse.container- fluid) setzt. So sind die die einzelnen Spalten-Breiten innerhalb zweier Breakpoints in Prozentangaben (relativ zur Fensterbreite) festgelegt. Dies hat den Vorteil das immer die komplette Fensterbreite ausgenutzt wird - egal ob man mit einem Smartphone mit 400px oder 750px Fensterbreite eine Kategorie ansieht - es sind immer zwei Artikel pro Zeile zu sehen, die jeweils ca. 50% Breite des Fensters nutzen. Beispiel einer 4-Spaltigen Struktur (z.b. Kategorie mit Artikeln) Seite 5

6 Beispiel einer 2-Spaltigen Struktur Icons Um bestimmte Funktionen zu untermalen und der Website in Puncto Usability nach vorne zu bringen, werden Icons auf fast jeder Unterseite eingesetzt. Die Icons im Footer Bereich werden in einem Schwarz mit 60% Transparenz dargestellt. Es werden 2 verschiedene Zustände eingesetzt. Der Normal-, und der Hover Zustand. Im Hover Zustand verändert sich die Transparenz auf 100%, sodass die Icons in einem 100% Schwarz dargestellt werden. Vector-Icons Es ist anzumerken das alle Icons in einer SVG-Vector-Grafik liegen (CSS-Sprite, so muss nicht jedes Icon einzeln geladen werden = weniger HTTP-Requests) - so wird auch auf Retina-Geräten alles scharf dargestellt. Seite 6