STYLEGUIDE WEBSITE 2012

Transkript

1 STYLEGUIDE WEBSITE

2 FORMAT / RASTER Format / Raster / Satzspiegel 2 Die Website ist auf 1020 x 769 Pixel angelegt. Die Website ist mit einem Raster von 12 x 12 Pixeln aufgebaut. Dadurch entsteht auch die Breite von 1020 Pixeln. Der Contentbereich beträgt 972 Pixel inklusive einem 12 Pixel-Rand. Der Satzspiegel beträgt damit 948 Pixel. Zum Browserfenster gibt es einen Rand von jeweils 24 Pixeln. Es ist aussreichend Spielraum für den vertikalen Scrollbar vorhanden, so dass der horizontale Scrollbar bei einem Browserfenster von 1024 Pixeln nicht erscheint. Abstände sind meistens 12 Pixel oder eine Teilsumme wie 6 Pixel oder ein Vielfaches wie 24 Pixel. Grundsätzlich befinden sich alle Designelemente und Bilder innerhalb dieses Rasters, ebenso die Navigation. Bei größeren Bildschirmen sind das Hintergrundbild und der rote Header bildschirmfüllend. Bei größeren Bildschirmen wird die Seite immer mittig positioniert.

3 BILDER & FLÄCHEN & LINIEN Formate / Abstände Die Breite von Bildern und Flächen ergibt sich aus dem Raster von 12 x 12 Pixeln. Es gibt fest definierte Bildgrößen, die Höhe ist flexibel. Bildgrößen siehe Seite Raster. Bevorzugt verwendet wird die Breite von 180 Pixeln. Kleine Bilderleisten befinden sich teilweise nicht mehr im Raster. Die Abstände bei Text und Bild sind immer 12 Pixel, die Abstände zwischen Bildern möglichst 2 Pixel. Z. B. Format Teaser: Breite 180 Pixel, Höhe variabel Bilderleiste Bilderleiste Originalgröße 3 2 Pixel 12 Pixel

4 SCHWARZ UND GRAUSTUFEN FÜR ALLE BRANDS G1 Dunkelgrau G2 Hellgrau G3 Hellgrau G4 Hellgrau G5 Hellgrau RGB 51/51/51 RGB 102 / 102 / 102 RGB 153 /153 /153 RGB 204/ 204/ 204 RGB 235/ 235/235 Headlines Copytext Verlauf Text Navigation Linien Navigation Verlauf Linien Tabellen Abschluss Teaser & Bilderflächen Teaserbox RGB 51/51/51 RGB 153 /153 /153 RGB 153 /153 /153 RGB 245 / 245 / 245 RGB 153 /153 /153 RGB 235/235/235 Verlauf RGB 51/51/51 RGB 153 /153 /153 Unterschiedliche Farbverläufe werden möglichst durch verschiedene harte oder weiche Übergänge erreicht Buttons Flächen Seitenzahle Flächen Anwendungen VERLAUF UM 90 GEDREHT suchen PLZ Händler Service Händler finden LINIEN CONTAINERWECHSEL-SYSTEME BRÜCKENINSPEKTIONSGERÄTE 4 DOLOR SIT CONSECTETUER SIT AMET LOREM IPSUM lorem ipsum dolor sit amet 21,0 m 16,8 kn dolor amet, consectetuer 21,0 m 16,8 kn

5 FARBEN PALFINGER DUNKELROT PALFINGER ROT RGB 168/23/26 RGB 197/47/37 CMYK 0/100/100/20 CMYK 0/100/100/0 Verlauf Links Rollover Links Navigation aktiv Produkticons HELLROT PALFINGER GELB 206 /103/ 39 CMYK 0 /75/100/ 0 RGB 248/ 236/26 CMYK 0/5/100 /0 Verlauf Linien Navigation Formularfelder Logo Schrift Navigation aktiv Rollover VERLAUF über 1024 PIXEL BREITE < 1024 px DUNKELROT > 1024 px HELLROT Links Navigation aktiv Produkticons Anwendungen VERLAUF HORIZONTAL GELB VERLAUF UM 90 GEDREHT KNICKARMKRANE Header Footer Schrift Navigation aktiv Rollover Logo Hauptnavigation Rollover Subnavigation Reiternavigation Header Teaserboxen ROT Menüpunkt Linkfarbe HELLROT FR Suchbegriff Benutzer Passwort Login registrieren Passwort vergessen Der Farbverlauf geht im Header bei den den Textfeldern ist von Dunkel auf Hell, anders als bei Hautpnavigation, Rollover etc. Bitte diese Info noch einfügen. 5

6 FARBEN EPSILON DUNKELROT PALFINGER ROT G1 Dunkelgrau PALFINGER GELB RGB 168/23/26 RGB 197/47/37 CMYK 0/100/100/20 CMYK 0/100/100/0 RGB 51 /51/ 51 RGB 248/ 236/26 CMYK 0/5/ 100 /0 Verlauf Links Rollover Verlauf Schrift Logo Schrift Navigation aktiv Rollover Links Navigation aktiv Produkticons < 1024 px DUNKELGRAU VERLAUF über 1024 PIXEL BREITE > 1024 px HELLGRAU Anwendungen VERLAUF HORIZONTAL VERLAUF UM 90 GEDREHT GELB KNICKARMKRANE Header Footer ROT Menüpunkt Linkfarbe 6 Hauptnavigation Rollover Subnavigation Reiternavigation Header Teaserboxen Schrift Navigation aktiv Rollover Logo

7 FARBEN MARINE PALFINGER BLAU BLAU HELLBLAU PALFINGER GELB RGB 7/43/90 CMYK 100/72/0/56 RGB 45 /72 /153 CMYK 100 /70/ 0/ 10 RGB 94/ 110/171 CMYK 75/ 50/0/15 RGB 248/ 236/26 CMYK 0/5/ 100/0 Verlauf Links Rollover Links Navigation aktiv Produkticons Verlauf Linien Navigation Logo Schrift Navigation aktiv Rollover < 1024 px DUNKELBLAU VERLAUF über 1024 PIXEL BREITE > 1024 px HELLBLAU Anwendungen VERLAUF HORIZONTAL VERLAUF UM 90 GEDREHT GELB KNICKARMKRANE Header Footer BLAU Menüpunkt Linkfarbe 7 Hauptnavigation Rollover Subnavigation Reiternavigation Header Teaserboxen Schrift Navigation aktiv Rollover Logo PALFINGER BLAU

8 SCHRIFTEN-GRÖSSEN SCHRIFTEN H1 H1 Headline auf der Startseite TRADE GOTHIC bold, 34 pt, VERSALIEN, Weiß Trade Gothic Next LT Pro regular & bold H2 H2 Seitenheadline am Seitenanfang TRADE GOTHIC bold, 24 pt, VERSALIEN Dunkelgrau (G1) H3 H3 Zwischenheadline TRADE GOTHIC bold 14 pt, VERSALIEN Schwarz oder Dunkelgrau (G1) COPY Headline Arial bold 12 pt, Dunkelgrau (G1) COPY Arial regular 12 pt, Dunkelgrau (G1) ZAB 15 pt abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLM NOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Arial/Arial bold abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ TABELLE Arial bold 12 pt, Dunkelgrau (G1) für Header Arial regular 12 pt, Dunkelgrau (G1), ZAB 15 Anwendung H1 LOREM IPSUM H2 LOREM DOLOR SIT AMET IPSUM H3 LOREM IPSUM DOLOR SIT AMET Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis Consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum vulputate eget, arcu. justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Vivamus elementum 8 Hyperlinks sind farbig mit der jeweiligen Brand-Farbe hervorgehoben.

9 SCHRIFTEN NAVIGATION ANFORDERUNGEN Das wesentliche Element der Navigation ist ein roter Balken in unterschiedlichen Größen mit weißer bzw. gelber Schrift (im aktiven Zustand). Man findet ihn beim Hauptmenü, Submenü, Rollover, Zusatzmenü und Footer. L1 HAUPTNAVIGATION TRADE GOTHIC 12 pt, bold VERSALIEN passiv: Weiß / hover & aktiv: Gelb PRODUKTWAHL BRANCHENWAHL KUNDENNUTZEN ÜBER PALFINGER L2 Unterpunkt L2 Subnavigation Layer unter Hauptmenü TRADE GOTHIC regular 11 pt passiv: Weiß / hover & aktiv: Gelb L2 Unterpunkt L2 Subnavigation vertikal in der linken Seitenspalte TRADE GOTHIC 11 pt, VERSALIEN passiv: regular & Grau hover & aktiv: bold & Gelb auf roter Fläche L2 UNTERPUNKT L3 Unterpunkt L4 Unterpunkt L4 Unterpunkt L3 / L4 Subnavigation Layer vertikal in der linken Seitenspalte TRADE GOTHIC 12 pt passiv: Grau / hover & aktiv: Brand-Farbe L3 / L4 sind jeweils einen Tab mehr eingerückt MITNAHMESTAPLER 24 px EPSILON FORST- UND RECYCLINGKRANE 36 px XY PRODUKTNAME Rollover Produkte Seitenzahlen TRADE GOTHIC 11 pt, VERSALIEN passiv: Dunkelgrau / hover: Gelbe Schrift auf Balken in Brand-Farbe 3 4 XY PRODUKTNAME Reiter / Rollover Bilder TRADE GOTHIC bold11 pt, VERSALIEN passiv: Weiß / hover: Gelb PRODUKTSUCHE KENNWERTE MODELL ZUSATZLINKS (HEADER) TRADE GOTHIC bold 11 pt passiv: Weiß / hover: Gelb FR IT Corporate Kontakt Suchbegriff Benutzer Passwort Login registrieren Passwort vergessen FOOTER TRADE GOTHIC bold 11 pt passiv: Weiß / hover: Gelb 2012 Copyright PALFINGERauf AGroter Fläche AGB - Linien &Text Formularfelder LINKS Arial, passiv: Palfinger Rot, hover & besucht: Dunkelrot 9 Impressum Sitemap

10 TEASER L2 TEASER rechts vertikal 12 px 178x GENERALVERTRETER PARTNERSUCHE PLZ Händler 6 px Service 12 px 6 px 14 px 12 px Max Mustermann T px Händler finden 12 px AKTUELLES MESSEN Frankfurt dolor sit amet München dolor sit amet cum ore dolor sit amet, consectetuer adipiscing elit dolor sit amet, consectetuer adipiscing elit. dolor sit amet, consectetuer adipiscing elit. L1 TEASER unten horizontal 216 px AKTUELLES dolor sit amet, consectetue adip iscing elit. dolor sit amet, consectetuer adipis dolor sit amet, consectetuer adipiscing elit. dolor sit amet, consectetuer adipiscing elit.cing elit. 10 GENERALVERTRETER PLZ Händler Händler finden Service return

11 TABELLEN Tabelle Arial 12 Pt LOREM IPSUM DOLOR DOLOR SIT AMET, CONSECTETUER SIT AMET LOREM IPSUM DOLOR AMET lorem ipsum dolor sit amet 21,0 m 16,8 kn 1000 kg dolor amet, consectetuer 21,0 m 16,8 kn 1000 kg 11

12 MEGALAYERMENÜ Definition Gestaltung & Inhalt Das Format des Megalayermenüs scaliert bei der Bildschirmgröße mit. In der Breite gibt es höchstens sechs Spalten und mindestens eine Spalte (dann werden alle Produkt-Icons untereinander angeordnet). Die Höhe und Breite des Megalayermenüs richtet sich nach der Anzahl der Icons und der Bildschirmgröße. Die Produkt-Icons haben immer die gleiche Größe. Die Anzahl der Produkt-Icons ist variabel. Getrennt werden die Produktbilder durch eine hellgraue Linie von einem Pixel. Bei großen Bildschirmen hat das Megalayermenue maximal 6 Spalten und die Marine-Icons sind zusammen in den letzten 2 Spalten angeordnet. Die letzten zwei Spalten dürfen über alle Zeilen hinweg nur Marine-Icons beinhalten. Um eine rechteckige Form zu gewähren können einzelne Felder leer bleiben. 456 px 930 px 12

13 LIGHTBOX Definition Gestaltung & Inhalt Das Format der Lightbox hängt vom Inhalt ab. Es können Filme, Bilder und Texte dargestellt werden. Absoftung Hintergrund 80% Schwarz. Definierter Schließen-Button und Vorwärts-Button. Randabstände Buttons 12 Pixel. 12 px 12 px 13