Zum Inhalt
IT & Medien Centrum der TU Dortmund
Informationen

Text-Elemente

Die Text-Elemente wurden gezielt so gestaltet, dass sie unabhängig vom Einsatz ein einheitliches Gesamtbild erzeugen. Je nach Inhalt bietet sich ein anderes Element zur optimalen Gestaltung Ihrer Seite an. So lockert das Intro-Element, das auch hier verwendet wird, die Seite optisch auf und bietet einen Überblick über die Inhalte. Der Intro-Text steht immer am Anfang einer Seite, bzw. eines Themenblocks. Bitte nutzen Sie ihn nicht zwischendurch.

Das Text-Element können Sie nutzen, um den Nutzerinnen und Nutzern Informationen zu präsentieren. Sie haben die Möglichkeiten, den Text mithilfe einer Überschrift und einer Dachzeile zu strukturieren. Die Darstellung des Inhalts wird dabei komplett vom CSS übernommen, um ein einheitliches Design zu garantieren. So sind unter anderem die verschiedenen Überschriften und Linkstile schon fest definiert.

Das Element „Text in zwei Spalten“ kann zusätzlich zum regulären Text-Element verwendet werden. Es kann genutzt werden, um eine Seite mit viel Text und wenig Bildern aufzulockern. Dies bietet sich allerdings nur für einen zusammengehörigen Textblock an. Der Umbruch in die zweite Spalte erfolgt automatisch, sodass Sie hier keine manuelle Trennung des Textes erzeugen können. Versuchen Sie auf Leerzeilen zu verzichten, da diese unschöne Auswirkungen auf die Darstellung haben. Benutzen Sie dieses Element bitte nur bei einer entsprechenden Menge an Text, um ein harmonisierendes Gesamtbild zu erzeugen.

Linkstile

Links sind durch Textunterstreichung und grüne Farbgebung gekennzeichnet. Dies gilt sowohl für interne als auch für externe Links. Für externe Links und Downloads gilt darüber hinaus, dass je nach Linkziel weitere Icons hinzukommen. Diese Icons dienen der Visualisierung und helfen dem User, ein externes Linkziel von einem internen Linkziel ohne Icon zu unterscheiden.

Externe Links sind zustätzlich durch ein Icon gekennzeichnet.

Links ins ServicePortal haben ebenfalls ein eigenes Icon.

Eine Dateiverlinkung wie hier auf die Checkliste vor dem Relaunch kennzeichnet sich durch das bekannte Downloadsysmbol.

Zusätzlich haben Sie die Möglichkeit, die Verlinkungen gesondert als Buttons zu gestalten. Dies bietet sich zum Beispiel bei Links an, die einen Bereich abschließen. Das dem Linkziel zugehörige Icon wird ebenfalls im Button angezeigt. Durch die grüne Farbe hebt sich der primäre Link-Button besonders vom Rest der Seite ab. Bitte nutzen Sie den Link-Button nur vereinzelt zur gezielten Hervorhebung bestimmter Elemente.

Primärer Link-Button Interner Link

Primärer Link-Button Externer Link

Primärer Link-Button ServicePortal

Primärer Link-Button Download

Zusätzlich haben Sie die Möglichkeit, die Verlinkungen gesondert als Buttons zu gestalten. Dies bietet sich zum Beispiel bei Links an, die einen Bereich abschließen. Das dem Linkziel zugehörige Icon wird ebenfalls im Button angezeigt.

Primärer Link-Button Interner Link

Primärer Link-Button Externer Link

Primärer Link-Button ServicePortal

Primärer Link-Button Download

Element „Text auf Bild“

Text auf Bild kann als auflockerndes Element eingesetzt werden, um die Seite grafisch anzureißen. So können z.B. Zitate von externen Personen formschön dargestellt werden. Achten Sie bitte darauf, dass der Text und die Grafik ins Gesamtkonzept der Seite passen.

© Roland Baege​/​TU Dortmund
Zum Seitenanfang