HANDOUT Neues Internetdesign der TU Chemnitz Grafik und Corporate Design Arbeitsstand

Transkript

1 HANDOUT Neues Internetdesign der TU Chemnitz Grafik und Corporate Design Arbeitsstand

2 Inhalt Startseite 3 Allgemeine Gestaltungshinweise 4 Layout 5 Linke Navigationsleiste 6 Layout 7 Bilder 8 Anwendungsbeispiel 9 Anwendung der Farben im Internet 10 Hausfarben und Fakultätsfarben 11 Zeichen 12 CSS-Formate 13 Überschriften 13 Besondere Überschriften 14 Links 15 Mouse-over 15 Auswahl 15 Tabellen 16 Listenansicht 17 Aufzählung 17 2

3 Startseite Suchwort Direkt-Links English Kontakt Universität Fakultäten Studium Zentrale Einrichtungen International TU-Spektrum : Pack dein Studium. Am besten in Chemnitz. Das Magazin der TU Chemnitz stellt aktuelle und ehemalige Studierende der Universität vor, die in allen Bundesländern Deutschlands ihre Kisten gepackt und ihr Studium in Chemnitz begonnen haben 1 von 5 Schüler und Bewerber Studierende Promovierende Forschung & Wirtschaft Weiterbildung Freunde, Förderer & Alumni Uni aktuell Veranstaltungen + Tipps 01 DEZ PERSPEKTIVEN VON MENTORING 13:30 Uhr Weinhold-Bau Workshop Anmeldung hier CAMPUS Bist du ein Macher, dann mach was! Peter Rose ist ehrenamtliches Mitglied im Club der Kulturen - Dem Mitgliederschwund tritt er aktiv entgegen, denn das Spektrum an Mitgestaltung ist genauso breit wie das an Angeboten. weiterlesen INTERNATIONALES Mir gefällt Chemnitz. Ich glaube, das ist eine Gedankensache. Für ein Auslandsstudium kam Qian Sun 2002 aus China an die TU Chemnitz - sie blieb und gründete die deutsch-chinesische Vermittlungsfirma S-Glory. weiterlesen 04 DEZ 20 DEZ HOFFEST ab 14:30 Uhr Weinhold-Bau NEUE UNI-SHOP- COLLECTION 2014 Studenten ab dem 20. Semester bekommen 50% Rabatt Uni-Shop StraNa bitte zweimal klingeln 24 DEZ FEIERLICHE IMMATRIKULATION :00 Uhr Neues Hörsaalgebäude VERANSTALTUNGEN Neue Ideen für Sachsen CAMPUS Bist du ein Macher, dann mach was! TU-Rektor Prof. Dr. Arnold van Zyl brachte seine Expertise beim Zukunftssymposium in Dresden ein Peter Rose ist ehrenamtliches Mitglied im Club der Kulturen - Dem Mitgliederschwund tritt er aktiv entgegen, denn das Spektrum an Mitgestaltung ist genauso breit wie das an Angeboten. weiterlesen weiterlesen Alle Artikel Veranstaltungskalender BETAVERSION Medien: Pressemitteilungen, Newsletter, Fakten & Zahlen Die Uni und Ihre Stadt: Studieren in Chemnitz Campusplan: Standorte der TU Chemnitz, Campusfinder, virtueller Rundgang Service: Uni-Shop, Corporate Design 2013 Technische Universität Chemnitz Universität von A - Z Impressum Hinweise zum Datenschutz Universität Fakultäten International Zentrale Einrichtungen Kontakt Webmaster - letzte Änderung: 01. Januar 1970 Login Druckansicht Diese Seite zu den Lesezeichen/Favoriten hinzufügen Textversion Barrierefreie Gestaltung 3

4 Allgemeine Gestaltungshinweise Folgende Hinweise bitte prinzipiell beachten: korrekte Rechtschreibung und Verständlichkeit Verzicht auf 3D und andere Effekte: Schlagschatten, räumliche Darstellungen, Farbverläufe, schrille Farben, Laufschriften, animierte Bilder Verwendung der vordefinierten CSS-Formate Die Universitätskommunikation erarbeitet mit dem Universitätsrechenzentrum Vorlagen die dem Corporate Design entsprechen und verwendet werden sollen. Wenn mehr Bedarf oder Anpassungenswünsche bestehen wird gebeten dies per Mail mitzuteilen. 4

5 Layout Das grundlegende Raster der Homepage ist in 3 Spalten unterteilt. Diese Struktur soll als Grundlage für den Gestaltungsraum dienen. Suchwort Direkt-Links English Kontakt Universität Fakultäten Zentrale Einrichtungen International TU-Spektrum : Pack dein Studium. Am besten in Chemnitz. Das Magazin der TU Chemnitz stellt aktuelle und ehemalige Studierende der Universität vor, die in allen Bundesländern Deutschlands ihre Kisten gepackt und ihr Studium in Chemnitz begonnen haben 1 von 5 Schüler und Bewerber Studierende Promovierende Forschung & Wirtschaft Weiterbildung Freunde, Förderer & Alumni Uni aktuell Veranstaltungen + Tipps 01 DEZ PERSPEKTIVEN VON MENTORING 13:30 Uhr Weinhold-Bau Workshop Anmeldung hier CAMPUS Bist du ein Macher, dann mach was! Peter Rose ist ehrenamtliches Mitglied im Club der Kulturen - Dem Mitgliederschwund tritt er aktiv entgegen, denn das Spektrum an Mitgestaltung ist genauso breit wie das an Angeboten. weiterlesen INTERNATIONALES Mir gefällt Chemnitz. Ich glaube, das ist eine Gedankensache. Für ein Auslandsstudium kam Qian Sun 2002 aus China an die TU Chemnitz - sie blieb und gründete die deutsch-chinesische Vermittlungsfirma S-Glory. weiterlesen 04 DEZ 20 DEZ HOFFEST ab 14:30 Uhr Weinhold-Bau NEUE UNI-SHOP- COLLECTION 2014 Studenten ab dem 20. Semester bekommen 50% Rabatt Uni-Shop StraNa bitte zweimal klingeln 24 DEZ FEIERLICHE IMMATRIKULATION :00 Uhr Neues Hörsaalgebäude VERANSTALTUNGEN Neue Ideen für Sachsen CAMPUS Bist du ein Macher, dann mach was! TU-Rektor Prof. Dr. Arnold van Zyl brachte seine Expertise beim Zukunftssymposium in Dresden ein Peter Rose ist ehrenamtliches Mitglied im Club der Kulturen - Dem Mitgliederschwund tritt er aktiv entgegen, denn das Spektrum an Mitgestaltung ist genauso breit wie das an Angeboten. weiterlesen weiterlesen Alle Artikel Veranstaltungskalender 5

6 Linke Navigationsleiste Ebene 2.1 Ebene 2.2 Ebene 2.3 Ebene 2 Ebene 2... Fakultät Institut Professuren Forschung Studium Internationales Service / Infos Ebene Ebenen soll grundsätzlich 7 und max. 9 Menüpunkte beinhalten Ebene 2: Anzahl nicht definiert Beispiel: Fakultätsseite Die Navigation findet innerhalb von 2 Ebenen statt. Die mehrstufige Navigationsstruktur des bisherigen Internetauftrittes muss neu geordnet und angepasst werden. Ziel ist es, das der Nutzer durch möglichst wenige Verzweigungen den Überblick behält. Die Inhalte zu dem Menüpunkt Professuren der Fakultäten werden aus dem Strukturverzeichnis generiert. Jeder Menüpunkt in und Ebene 2 benötigt einen Link zu einer Seite. Links zu externen Seiten sind innerhalb der zwei Ebenen nicht vorgesehen. Folgende Struktur ist für die Fakaltätsseiten anzuwenden: Fakultät = Faculty Institute = Institutes Professuren = Professorships Forschung = Research Studium = Studies Internationales = International Service/ Infos = Service/ Information Wenn zum Beispiel kein Institut vorhanden ist kann dieser Menüpunkt weggelassen werden. 6

7 Layout Ebene 2.1 Ebene 2.2 Ebene 2.3 Ebene 2.4 frei mind. frei Der Gestaltungsraum ist neben der Navigationsleiste zweispaltig. Danach können alle drei Spalten verwendet werden. Der Gestaltungsraum im dreispaltigen Bereich kann nach unten beliebig erweitert werden. 7

8 Bilder Suchwort Direkt-Links English Kontakt Universität Fakultäten Zentrale Einrichtungen International TU Chemnitz Fakultät Professur Ebene 2.1 Ebene 2.2 Ebene 2.3 Ebene 2.4 Lorem Ipsum Ucit arcimporit et lautem susdaerferro blab ipsam consequis incilis dolore plaborepudi dolorro rehenis dem vitis es at ut quat atquo odit magniet restemped quatis aut eatempedis eribustiusam qui occus qui digenimusam volupta temporerchit ium sincit, odisciis aut ellorest, inveles dolo tectur? Quidebitat experem dolorest, quamus, qui ipsum as es pos acium aliquaspe coreris totatqui resse cum is volupta tinvelitae. Modipsus aut que voloria pores am inim es est, sit aut aut estis dolupta sperfero dundit, erorit a ditae sape molupta doloris moluptaquae Auf der Startseite soll im zweispaltigem Bereich ein Bild im Format 8:2 dargestellt werden. Innerhalb dieser Fläche kann ein Logo angeordnet werden. Die Positionierung von Logos (Professur, Institut, Fördermittelgeber) wird noch erarbeitet und mittgeteilt. 8

9 Anwendungsbeispiel Ebene 2.1 Ebene 2.2 Ebene 2.3 Ebene 2.4 Lorem Ipsum Ucit arcimporit et lautem susdaerferro blab ipsam consequis incilis dolore plaborepudi dolorro rehenis dem vitis es at ut quat atquo odit magniet restemped quatis aut eatempedis eribustiusam qui occus qui digenimusam volupta temporerchit ium sincit, odisciis aut ellorest, inveles dolo tectur? Quidebitat experem dolorest, quamus, qui ipsum as es pos acium aliquaspe coreris totatqui resse cum is volupta tinvelitae. Modipsus aut que voloria pores am inim es est, sit aut aut estis dolupta sperfero dundit, erorit a ditae sape molupta doloris moluptaquae Ignam fugitio: Ignam fugitio nseque plamus adictat emporum exerem fuga Berehen diossi te et aut as dolorio Odis re rere nuscill aborit simaios veres dolupta simoluptaes Lorem Ipsum Git, sitae qui a peria auta vendit lam, qui alia que aut etur andaecturit aut quibeatia volore volum doloreprae rereri to mo incias alis dolorio mos alique veriberum volupta sit fuga. Ut est pedic tenis aut lab initam faccae. Natis velibus estin nat andi volupta debit et doluptatus. Dit rehendu ndelicipsa doluptas dolorit ent dolenim aionser itaspic tem faccum quibus quiaerita dundunt ab ipsae verit ma cusandandi occuptae nulliquam fugia sinctur, con repersp editibusdae coneture, conse porat. Et aut videllis ad eossequo eaque et alit del et hit eiur as event ut optam labor rem. Sed quis conecus nihil in num quo exerspis estilo que sitas sandis esciistrum voluptate quis eum fuga. At optibea quia de nonse volentium nobis verore, quam ulpa sunt volupta que volor restis et et alit occatur itendanda ium restius tiorit harcipicto officatur sectem venistias ut maio dem quam es core, occum ipis solor acea pedissum aut quasperat evelest ibearum eum fuga. Ed que inciatiae voluptatiam, aut rem que arcillignist faceptatur am alicit ut illaut dolor acereptat lation re dolupta aut faccus velenihilla sequo conecab oreruntiis doluptae plitati busamus mosam repudaeped quissi iuscil eost qui ab ium et que veremporit omnimilit ut ipsande nessit, nia nullam fuga. Itate nullestium quos et laut eaque sit as iuri remporum quis porectas ducia dolorio quae et eum int im sus. Nequi tectem. At unt a quam, as mi, omnime nietur soluptaquis et qui veraepudae dolecte vit etur, omnis nus corem re nobis et aut aceatur? Us sa verum et andam, comnist, nos ut adi blauta velias ma que laborem eum eos aceptaepel ium volendia aut aut aut et facit que rem qui ressita tquatem. Lorem Ipsum Git, sitae qui a peria auta vendit lam, qui alia que aut etur andaecturit aut quibeatia volore volum doloreprae rereri to mo incias alis dolorio mos alique veriberum volupta sit fuga. Ut est pedic tenis aut lab initam faccae. Natis velibus estin nat andi volupta debit et doluptatus. Dit rehendu ndelicipsa doluptas dolorit ent dolenim aionser itaspic tem faccum quibus quiaerita dundunt ab ipsae verit ma cusandandi occuptae nulliquam fugia sinctur, con repersp editibusdae coneture, conse porat. Et aut videllis ad eossequo eaque et alit del et hit eiur as event ut optam labor rem. Sed quis conecus nihil in num quo exerspis estilo que sitas sandis esciistrum voluptate quis eum fuga. At optibea quia de nonse volentium nobis verore, quam ulpa sunt volupta que volor restis et et alit occatur itendanda ium restius tiorit harcipicto officatur sectem venistias ut maio dem quam es core, occum ipis solor acea pedissum aut quasperat evelest ibearum eum. Lorem Ipsum Git, sitae qui a peria auta vendit lam, qui alia que aut etur andaecturit aut quibeatia volore volum doloreprae rereri to mo incias alis dolorio mos alique veriberum volupta sit fuga. Ut est pedic tenis aut lab initam faccae. Natis velibus estin nat andi volupta debit et doluptatus.voluptate quis eum fuga. At optibea quia de nonse volentium nobis verore, quam ulpa sunt volupta que volor restis et et alit occatur itendanda ium restius tiorit harcipicto officatur sectem venistias ut maio dem quam es core, occum ipis solor acea pedissum aut quasperat evelest ibearum eum. 9

10 Anwendung der Farben im Internet Die Haus- und Fakultätsfarben des Corporate Design der TU Chemnitz sind verbindlich. Für alle Seiten der Universität ist die Hausfarbe anzuwenden. Eine Ausnahme bilden die Fakultäten. Dort werden die Fakultätsfarben verwendet. Für die zur Fakultät zugehörigen Institute, Einrichtungen und Professuren gilt die jeweilige Fakultätsfarbe. Die Fakultätsfarbe soll als Akzentfarbe verwendet werden. Ausnahmeregelung für die Fakultät Naturwissenschaften in der Akzentuierung: Farbwechsel nicht in Fakultätsfarbe, sondern in der Hausfarbe. Der Farbton im Topmenü bleibt jedoch die Fakultätsfarbe. 10

11 Hausfarben und Fakultätsfarben Hausfarbe Hex # 00 5e 58 Schwarz Hex # Grauton 03 Hex # Grauton 02 Hex # Grauton 01 Hex # e6 e6 e6 Bildhintergrund Hex # 5b 7d 96 Naturwissenschaften Pantone 431 Hex # 5f 6a 72 Mathematik Pantone 431 Hex # 71226b Maschinenbau Pantone 512 Hex # Elektro- und Informationstechnik Pantone 1655 Hex #e75113 Informatik Pantone 377 Hex # Wirtschaftswissenschaften Pantone 1945 Hex # aa 11 3f Philosophische Fakultät Pantone 1375 Hex # ff a1 2d Human- und Sozialwissenschaften Pantone Process Blue Hex # cf 11

12 Zeichen Folgende Zeichen werden verwendet: Linie Punkt Pfeil 01 Pfeil 02 Pfeil 03 Waagerechte und senkrechte Linien sollen inhaltliche Trennungen visualisieren. Punkte dienen als Auszeichnung von Aufzählungen und Listen. Pfeil 01 wird als Symbol für Navigationsfunktionen verwendet. Mit Hilfe des Pfeil 02 werden Links kenntlich gemacht. Pfeil 03 wird für Auszeichnung von Links zu externen Seiten verwendet. 12

13 CSS-Formate Überschriften Die Angaben von pt oder mm sollen proportionale Verhältnisse verdeutlichen. <h1> Überschrift ist eine Schrift, die drüber steht</h1> Schriftgröße: 14 pt, Arial, bold <h2> Überschrift ist eine Schrift, die drüber steht</h2> Schriftgröße: 14 pt, Arial, regular <h3> Überschrift ist eine Schrift, die drüber steht</h3> Schriftgröße: 12 pt, Arial, bold <h4> Überschrift ist eine Schrift, die drüber steht</h4> Schriftgröße: 12 pt, Arial, regular <h5> Überschrift ist eine Schrift, die drüber steht</h5> Schriftgröße: 10 pt, Arial, regular Farbigkeit bei der Schriftart der Überschrift entfällt. Alle alten Darstellungen sind nicht mehr vorgesehen und sollen durch die dargestellten CSS-Formate ersetzt werden. 13

14 Besondere Überschriften Die Angaben von pt oder mm sollen proportionale Verhältnisse verdeutlichen. <h1> Überschrift ist eine Schrift, die drüber steht </h1> Schriftgröße: 14 pt, Arial, bold, Hausfarbe <h2> Überschrift ist eine Schrift, die drüber steht </h2> Schriftgröße: 14 pt, Arial, regular, Grauton 02 <h3> Überschrift ist eine Schrift, die drüber steht </h3> Schriftgröße: 12 pt, Arial, bold <h4> Überschrift ist eine Schrift, die drüber steht </h4> Schriftgröße: 12 pt, Arial, regular Haarlinien als Abtrennung, in jeweiliger Fakultätsfarbe sowie Unigrün, schwarz und hellem grau möglich Abstand Linie zu Text = Zeilenabstand <h3> Überschrift ist eine Schrift, die drüber steht</h3> Schriftgröße: 12 pt, Arial, bold, Laufweite 90 <h5> Überschrift ist eine Schrift, die drüber steht</h4> Schriftgröße: 10 pt, Arial, bold, Laufweite 90 Lorem Ipsum ite nim as doluptaquunt aspe pa et ommoluptatio ex expla quae sundae. Nequat eos ma dia abor a aped maximiniae recta cusapiciae volor simo eos des aut lis arunt maiorum siti cus moloreres aut pos moluptatiore nonet ini consequi acim quas asperiae id unt Für besondere Hervorhebungen bei Texten mit wichtigen informativen Gehalt können auch zwei Linien oberhalb und unterhalb des Textes stehen. Die Linien sind in der Hausfarbe oder der jeweiligen Fakultätsfarbe zu verwenden. 14

15 Links Die Angaben von pt oder mm sollen proportionale Verhältnisse verdeutlichen. weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... weiterlesen/ mehr/... Schriftgröße: 10 pt, Arial, im Unigrün oder der jeweiliger Fakultätsfarbe, die Auszeichnung eines Links erfolgt vorzugsweise mit einem Pfeil (Schriftart Windings 3) oder bei Bedarf ohne Pfeilauszeichnung Mouse-over Fakultät Anschrift Dekanat Mouse-over bei Links oder Funktionsflächen = schwarze Einfärbung Auswahl Fakultät Anschrift Dekanat bei Auswahl = Wechsel/Einfärbung in das Unigrün oder in die jeweilige Fakultätsfarbe Ausnahme! bei Fakultät Naturwissenschaften = Farbwechsel in Uni-grün 15

16 Tabellen Die Angaben von pt oder mm sollen proportionale Verhältnisse verdeutlichen. Titel Name Telefon: Herr Prof. Dr. Fred Hamker [Vorsitzender] (0371) Herr Prof. Dr. Wolfgang Benn (0371) Herr Jun.-Prof. Dr. Paul Rosenthal (0371) Herr Dipl.-Math. Jens Flohrer (0371) Titel Name Telefon: Herr Prof. Dr. Fred Hamker [Vorsitzender] (0371) Herr Prof. Dr. Wolfgang Benn (0371) Herr Jun.-Prof. Dr. Paul Rosenthal (0371) Herr Dipl.-Math. Jens Flohrer (0371) Titel Name Telefon: Herr Prof. Dr. Fred Hamker [Vorsitzender] (0371) Herr Prof. Dr. Wolfgang Benn (0371) Herr Jun.-Prof. Dr. Paul Rosenthal (0371) Herr Dipl.-Math. Jens Flohrer (0371) Titel im Tabellenkopf: Arial, Schriftgröße: 10 pt, bold Daten: Arial, Schriftgröße 10 pt, regular Tabelle 1: ohne Abtrennung Tabelle 2: Haarlinien zur Abtrennung = Schwarz Tabelle 3: Haarlinien zur Abtrennung = Grauton 01 16

17 Listenansicht Die Angaben von pt oder mm sollen proportionale Verhältnisse verdeutlichen Listeninhalte werden in grauton dargestellt oder in der jeweiligen Fakultätsfarbe. Maus-over-Effekt = schwarz Aufzählung et as aut quidessus voloreius rem volorem ea de eris usapis ente poreprat que con nonesti isciis Aufzählung von Text (SG= 10 pt), ZA = 13 pt., kleine Punkte zur Aufzählung (7 pt) Abstand zu Text = 4,5 mm = 5 LZ, komplett in schwarz 17

18 Allgemeine Fragen Universitätskommunikation Telefon: Fax: Mail: Fragen zu Grafik und Corporate Design Jacob Müller Telefon: Mail: Fragen zur technischen Realisierung Universitätsrechenzentrum Mail: (Priorisierung über Ticketsystem) 18