Mind Map - Styleguide

Jetzt loslegen. Gratis!
oder registrieren mit Ihrer E-Mail-Adresse
Mind Map - Styleguide von Mind Map: Mind Map - Styleguide

1. Farben

1.1. Aufzählung

1.1.1. Newsfeed

1.1.1.1. hell

1.1.1.1.1. aktiv

1.1.1.1.2. inaktiv

1.1.1.1.3. aktiv & inaktiv (Collage)

1.1.1.2. dunkel

1.1.1.2.1. aktiv

1.1.1.2.2. inaktiv

1.1.2. Artikel

1.1.2.1. Daten

1.1.2.1.1. Trennlinie

1.1.2.1.2. Schrift

1.1.2.2. Übersicht

1.1.2.2.1. Tabellenhintergrund

1.1.2.2.2. Tabellen-Trennlinien

1.1.2.3. Liste

1.1.2.3.1. Tabellenhintergrund (oben)

1.1.3. Produkte

1.1.3.1. Variante 1

1.1.3.1.1. Fläche

1.1.3.1.2. Schrift 1

1.1.3.1.3. Schrift 2

1.1.3.1.4. Markierung

1.1.3.2. Variante 2

1.1.3.2.1. Fläche

1.1.3.2.2. Schrift 1

1.1.3.2.3. Schrift 2

1.1.3.3. relevante Produkte

1.1.3.3.1. Fläche

1.1.3.3.2. Schrift 1

1.1.3.3.3. Schrift 2

1.1.4. Downloads

1.1.4.1. #f4f4f4

1.1.5. Maps

1.1.5.1. Kontinente

1.1.5.1.1. #d5d5d5

1.1.5.2. beleuchtete Projekte

1.1.5.2.1. #fe8008

1.1.5.3. Projekte im Light Scout

1.1.5.3.1. #8190ad

1.2. Rubriken

1.2.1. Navigationsmenü

1.2.1.1. Links

1.2.1.1.1. mit Hover-Effekt

1.2.1.1.2. ohne Hover-Effekt

1.2.1.2. Icons

1.2.1.2.1. aktiv

1.2.1.2.2. inaktiv

1.2.1.3. aufgeklappt (Fläche)

1.2.1.3.1. #FFFFFF

1.2.1.4. nicht aufgeklappt (Fläche)

1.2.1.4.1. #f4f4f4

1.2.1.5. Sprachauswahl

1.2.1.5.1. Schrift 1

1.2.1.5.2. Schrift 2

1.2.1.5.3. Schrift 3

1.2.1.5.4. Fläche

1.3. Headline

1.3.1. Artikel

1.3.1.1. hell

1.3.1.1.1. Variante 1

1.3.1.1.2. Variante 2

1.3.1.2. dunkel

1.3.1.2.1. Fläche

1.3.1.2.2. Schrift 1

1.3.1.2.3. Schrift 2

1.3.2. Kategorie (Überbegriff)

1.3.2.1. Hintergrund

1.3.2.1.1. #f4f4f4

1.3.2.2. Fläche

1.3.2.2.1. #FFFFFF

1.3.2.3. Schrift

1.3.2.3.1. #434343

1.4. Mengentext

1.4.1. Text

1.4.1.1. #262626

1.4.2. aktiver Link

1.4.2.1. #040404

1.4.3. inaktiver Link

1.4.3.1. #646464

1.5. Farbschema

1.5.1. http://imgur.com/Bb2tPPZ

2. Interaktionselemente

2.1. Home

2.1.1. Navigation

2.1.1.1. Navigationsmenü

2.1.1.1.1. Navigationsbutton active

2.1.1.1.2. Navigationsbutton hover

2.1.1.1.3. Navigationsbutton inactive

2.1.1.1.4. Service download

2.1.1.1.5. service download hover

2.1.1.1.6. service breadcrumbs

2.1.1.2. Homebutton

2.1.2. Content

2.1.2.1. Ansicht ändern

2.1.2.1.1. Grid Standard

2.1.2.1.2. Grid pressed

2.1.2.2. Bild vergrößern

2.1.2.2.1. Bild

2.1.2.2.2. Bild pressed

2.1.2.3. Nähere Informationen zum Bild button_active

2.1.2.4. Nähere Informationen zum Bild button_inactive

3. Typographie

3.1. Allgemein

3.1.1. Schriftfarbe: #333333 - Dunkelgrau

3.1.2. Zeilenhöhe: 1,43px

3.1.3. Schriftart: Rotis

3.1.4. Schriftgröße: 14px

3.2. Seitentitel

3.2.1. Schriftfarbe: #FFFFFF - Weiß

3.2.2. Schriftgröße: 24px

3.2.3. Schriftstärke: 200 - light

3.3. Links

3.3.1. Schriftfarbe: #777777 - Grau

3.3.2. Schriftfarbe (hover): #000000 - Schwarz

3.3.3. Text-Dekoration (hover): unterstrichen

3.4. Navigation

3.4.1. Haupt-DropDown-Menü

3.4.1.1. Produktseiten

3.4.1.1.1. Headline_24px_mit_Subheadline_Rotis_12px

3.4.1.1.2. Überschrift

3.4.1.1.3. Suchfunktion

3.4.1.1.4. Kategorien

3.4.1.1.5. Mengentext

3.4.1.1.6. Produktbeschreibung

3.4.1.1.7. Rubriken

3.4.1.1.8. Artikelfilter

3.4.1.1.9. Navigationsleiste

3.4.1.1.10. Bild/Videobeschreibung_12px

3.4.2. Inaktives Element

3.4.2.1. Schriftgröße: 16px

3.4.2.2. Schriftstärke: 200 - light

3.4.3. Aktives Element

3.4.3.1. Schriftfarbe: #000000 - Schwarz

3.4.3.2. Schriftstärke: bold

3.5. Breadcrumb

3.5.1. Inaktives Element

3.5.1.1. Schriftfarbe: #FFFFFF - Weiß

3.5.1.2. Schriftstärke: 200 - light

3.5.1.3. Schriftgröße: 12px

3.5.2. Aktives Element

3.5.2.1. Schriftfarbe: #999999 - Grau

3.6. Hervorgehobene Inhalte (Startseite)

3.6.1. Schriftfarbe: #FFFFFF - Weiß

3.6.2. z.T. 70% Opazität

3.7. Impressum

3.7.1. Copyright_Rotis_14px

3.7.2. Copyright_Rotis_14px Mouseover

3.8. http://imgur.com/81k3Het

4. Layout & Raster

4.1. Startseite

4.1.1. 3 spaltiges Raster

4.1.1.1. Spaltenbreite: 345px

4.1.1.2. Außenabstand: 7px

4.1.2. Header über 3 Spalten

4.1.2.1. http://imgur.com/a/QzYaE#0

4.1.3. Video über ganze Bildschirmbreite

4.1.3.1. http://imgur.com/a/QzYaE#1

4.1.4. Headline, 3 Spalten

4.1.4.1. http://imgur.com/a/QzYaE#2

4.1.5. Bildelemente (Teaser): 2 Spalten Bild, 1 Spalte Beschreibungstext

4.1.5.1. http://imgur.com/a/QzYaE#3

4.1.5.2. http://imgur.com/a/QzYaE#4

4.1.5.3. http://imgur.com/a/QzYaE#5

4.1.6. Footer: 3 Spalten

4.1.6.1. http://imgur.com/a/QzYaE#6

4.2. Leuchten finden / Light Finder

4.2.1. 2 spaltiges Raster

4.2.1.1. Spaltenbreite: 532,5 px

4.2.1.2. Außenabstand: 14 px

4.2.2. Header über 2 Spalten

4.2.3. 1 Bildelement (Teaser): wie in Startseite

4.2.3.1. 2 Spalten

4.2.4. Auswahlmöglichkeit (Innenraum / Außenraum)

4.2.4.1. 2 Spalten

4.2.5. Text: Wo möchten Sie beleuchten?

4.2.5.1. 1 Spalte

4.2.6. Footer

4.2.6.1. 2 Spalten

4.3. Licht entdecken

4.3.1. 4 spaltiges Raster bei Galerieübersicht

4.3.1.1. Spaltenbreite: 255px

4.3.1.2. Außenabstand: 7px

4.3.2. 3 spaltiges Raster bei Hero, wie Teaser

4.3.3. Bildergalerien

4.3.3.1. vierspaltig

4.3.3.2. Teaserbild über gesamte Seitenbreite

4.3.3.3. Bilder über alle vier Spalten

4.3.3.4. Beschreibungstext über zwei rechte Spalten