p. 1

ruhr.2010 online seite 1

[close]

p. 2

c orpor at edesignruhr 2 0 1 0 inhalt der styleguide für www.ruhr2010.de farben schriften schriftarten labels verwendung bemaßung bemaßung auf der startseite seitenraster elementbezeichnung seitenraster navigationsebenen 1 2 seitenraster navigationsebenen 3 4 elementraster Übersichtsseite definierte seitenelemente elementbezeichnungen header header element navigation header element sprachauswahl bühne bühne flash bühne element suche bühne element programmübersicht navigationsleiste linke spalte element navigation ebene 1 element navigation ebene 2 element navigation ebene 3 element navigation ebene 4 element logo ruhr.2010 Übersichtsseite inhaltsspalte1 element teaser-rubrizierung element teaser link/mehr element teaser 1 3 4 5 5 6 6 7 7 8 8 8 9 10 10 10 11 11 11 11 12 12 13 13 14 14 15 16 17 18 19 19 19 19 20 element teaser 2 element teaser 3 element teaser 4 element teaser 5 element teaser 6 element teaser 7 inhaltsspalte 2 element aktuell-teaser element tagcloud element label-teaser element content-teaser 1 element content-teaser 2 element slider-hauptsponsoren element slider-gesellschafter footer element footer navigation elementebezeichnungen artikelseite definierte seitenelemente auf der artikelseite inhaltsspalte1 content element breadcrumb content element funktionsleiste artikel-element download-element artikel-element absatz artikel-element absatz mit bild listen-element ohne bild listen-element mit bild element contentbrecher element detailansicht sponsorenintegration hauptsponsoren sponsorpartner offizielle partner kooperationspartner Öffentliche förderer impressum online 21 22 23 24 25 26 27 27 28-29 30 31 32 33 33 34 34 35 35 35 36 36 36 37-38 39 40 41 42 43 44-45 46-47 48 48 49 50 51 52 53 seite 2

[close]

p. 3

c orpor at edesignruhr 2 0 1 0 der styleguide für www.ruhr2010.de auf den folgenden seiten finden sie einen styleguide für alles was online passieren kann dieser styleguide hat die aufgabe die technischen daten der website zusammenzufassen und ist deshalb eine nahezu reine sammlung aus zahlen und fakten wundern sie sich bitte nicht dass die einzelnen bemaßungen in allen möglichen varianten nun nicht mehr wortreich erklärt werden ein computer ist eben eine maschine die nur einsen und nullen kennt und wenig spielraum für das augenmaß lässt dementsprechend sind die folgenden angaben keine richtlinien sondern klare befehle ­ die man einhalten muss damit die internetseite www.ruhr2010.de funktioniert sollten sie beim lesen der exakten pixelzahlen dennoch besonderen spaß haben dann hörten sie in ihrem letzten leben möglicherweise auf den namen r2d2 aber nun ab ins internet seite 3

[close]

p. 4

c orpor at edesignruhr 2 0 1 0 farben für die gestaltung sämtlicher digitalen kommunikationsmaßnahmen dürfen ausschließlich die folgenden farben genutzt werden die farben leiten sich aus dem printbreich ab und wurden für den einsatz in digitalen medien angepasst die medienübergreifende Ästhetik und optimierung der usability wird dadurch gewährleistet rgb hex 88-88-90 #58585a rgb hex 205-205-205 #cdcdcd rgb hex 255-255-255 #ffffff rgb hex 0-181-227 #00b5e3 seite 4

[close]

p. 5

c orpor at edesignruhr 2 0 1 0 schriften schriftarten arial die systemschrift arial wird für die kommunikation im internet verwendet für reine grafiken oder flash-elemente kann auch die kampagnenschrift akzidenz-grotesk bq verwendet werden abcdefghijklm nopqrstuvwxyz abcdefghijklmnopqrs tuvwxyz 1234567890 seite 5

[close]

p. 6

c orpor at edesignruhr 2 0 1 0 online labels verwendung labels in der bühne die labels sind auf dem bildmotiv so zu positionieren dass der gesamteindruck des bildmotives nicht gestört wird die farbe des labels ist im rahmen der vordefinierten labelfarben an das bildmotiv anzupassen es ist ein mindestabstand von 35 px zwischen label und bühnenrand einzuhalten die mindestgröße für labels beträgt 200 px in der breite labels im text die labels können im fließtext rechts oder links positioniert werden das label wird dabei textumfließend gesetzt der abstand zwischen label und dem umfließenden text beträgt 10px labels in der funktionsleiste seite 6 siehe element label-teaser

[close]

p. 7

c orpor at edesignruhr 2 0 1 0 online bemaßung bemaßung auf der startseite 20px 10px 7px 280px 30px 35px 20px 80px 20px 20px 32px 20px 20px 200px 20px 270px 10px 550px 970px 270px 20px 180px 20px 7px seite 7

[close]

p. 8

c orpor at edesignruhr 2 0 1 0 online seitenraster elementbezeichnung seitenraster navigationsebenen 1 2 header bühne navigation inhaltsspalte 1 inhaltsspalte 2 footer seite 8

[close]

p. 9

c orpor at edesignruhr 2 0 1 0 online seitenraster elementbezeichnung seitenraster navigationsebenen 3 4 header bühne navigation 3 4 ebene inhaltsspalte 1 footer seite 9

[close]

p. 10

c orpor at edesignruhr 2 0 1 0 online elementraster Übersichtsseite definierte seitenelemente header bühne navigation aktuell-teaser teaser 1 logo teaser 4 tagcloud teaser 6 label-teaser slider-hauptsponsor teaser 5 teaser 5 content-teaser 1 teaser 3 slider-gesellschafter teaser 2 teaser 3 content-teaser 2 footer seite 10

[close]

p. 11

c orpor at edesignruhr 2 0 1 0 online elementbezeichnungen header header element navigation 23px 10px bemaßung breite abstand oben abstand links abstand zw menüpunkten position variabel 23 px 10 px 28 px links arial 10 px #58585a versalien schriftfarbe #cdcdcd menüpunkt schriftart schriftgröße schriftfarbe schreibweise status mouse over header element sprachauswahl 23px 10px bemaßung breite abstand oben abstand rechts abstand zw menüpunkten position variabel 23 px 10 px 28 px rechts arial 10 px #58585a versalien schriftfarbe #cdcdcd menüpunkt schriftart schriftgröße schriftfarbe schreibweise status mouse over seite 11

[close]

p. 12

c orpor at edesignruhr 2 0 1 0 online elementbezeichnungen bühne bühne flash vollansicht 10px half-ansicht 10px bemaßung breite höhe abstand oben eckradius 970 px 300 px 10 px 15 px die bühnenbilder werden sowohl in der vollansicht als auch in der half-ansicht mit einer größe von 970 x 300 px angelegt die art der ansicht wird durch die bühne flash gesteuert bühnenbilder mit labels müssen immer als vollansicht angezeigt werden seite 12

[close]

p. 13

c orpor at edesignruhr 2 0 1 0 online elementbezeichnungen bühne bühne element suche link suche schriftart schriftgröße schriftfarbe schreibweise arial 17 px #ffffff versalien bühne element programmübersicht link programmübersicht schriftart schriftgröße schriftfarbe schreibweise status mouse over arial 11 px #00b5e3 versalien schriftfarbe #cdcdcd seite 13

[close]

p. 14

c orpor at edesignruhr 2 0 1 0 online elementbezeichnungen navigationsleiste linke spalte element navigation ebene 1 32px bemaßung breite höhe abstand oben 200 px variabel 32 px arial 12 px #58585a 12 px 14 px versalien schriftfarbe schriftfarbe #ffffff #ffffff menüpunkt schriftart schriftgröße schriftfarbe abstand zw punkten abstand links schreibweise status mouse over status aktiv seite 14

[close]

p. 15

c orpor at edesignruhr 2 0 1 0 online elementbezeichnungen navigationsleiste linke spalte element navigation ebene 2 bemaßung schriften linie oben siehe navigation ebene 1 siehe navigation ebene 1 breite dicke farbe abstand oben abstand unten 200 px 1 px #58585a 7 px 16 px 200 px 1 px #58585a 20 px 0 px linie unten breite dicke farbe abstand oben abstand unten seite 15

[close]