On this page you will find examples of how the design elements ("Paragraphs") available in the new Drupal should not be used.
The central web team will take corrective action if these things are noticed.
Bad: Wild mix of elements in the column layout
...especially if it is obvious that the element is not displayed correctly in the column layout.
Example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Info
Contact us
If you have any questions, please contact...
Forbidden: Use of tables for layout purposes
... Tables are only to be used to display data!
| Contact person | |
|---|---|
Max Mustermann Akademiestrasse 6 Office 3 | To the employee profile |
Max Mustermann Akademiestraße 6 Office 3 | To the employee profile |
Schlecht: Elemente im Layout-Paragraph...
..., die nicht in der Höhe angeglichen sind.
Beispiel 2
Beispiel:
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Besser:
Beispiel 2
Beispiel:
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Forbidden: Use of headings for formatting
...and thus non-compliance with the heading hierarchy!
--
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Bad: VERSALIEN
... in headings, buttons, accordions, etc. should be avoided to emphasise texts.
EXAMPLE
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
.
Better:
... write normally for more clarity.
Example
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Schlecht: Lange Fließtextseiten
... ohne jegliche Auflockerung oder keine Navigation woanders hin.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Besser: Mix verschiedener Elemente
... für eine bessere Übersichtichkeit.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Beispiel 1
Beispiel 2
Bad: Too many lines
Applying for a leave of absence
Students can generally apply for a leave of absence for important reasons until the beginning of the semester. The reason for the leave of absence must be stated and documented.
Reasons for a leave of absence
- Illness,
- preparation for repeat examinations,
- study abroad, ...
A leave of absence is not permitted
- for the first subject-related semester or for the subject-related semester into which the student is enrolled. for the semester in which the student was classified when changing university or degree programme and during preparatory studies, except in the case of long-term illness or maternity protection or parental leave,
- after completion of the courses or lecture period for the current semester, ...
Duration of the leave of absence
- The duration of the leave of absence is regulated by § 20 para. 2 SächsHSFG and should not exceed a total of two semesters. If TUBAF has discretionary powers regarding the duration, TUBAF shall decide in consultation with the responsible examination board...
Better:
Applying for a leave of absence
Students can usually apply for a leave of absence for important reasons until the beginning of the semester. The reason for the leave of absence must be stated and documented.
Reasons for a leave of absence
- Illness,
- preparation for repeat examinations,
- study abroad, ...
A leave of absence is not permitted
- for the first subject-related semester or for the subject-related semester into which the student is enrolled. for the semester in which the student was classified when changing university or degree programme and during preparatory studies, except in the case of long-term illness or maternity leave or parental leave,
- .
- after completion of the courses or lecture period for the current semester, ...
Duration of the leave of absence
- The duration of the leave of absence is regulated by § 20 para. 2 SächsHSFG and should not exceed a total of two semesters. Insofar as TUBAF is granted discretion regarding the duration, TUBAF shall decide in consultation with the responsible examination board...
Schlecht: Fehlende Abstände zwischen Inhalten
...obwohl die Inhalte thematisch nicht zusammengehören.
Abteilung 1
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Abteilung 2
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Besser: Abstände einfügen
...um nicht zusammenhängende Inhalte voneinander zu trennen und so für bessere Übersichtlichkeit zu sorgen.
Abteilung 1
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Abteilung 2
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Schlecht: Nutzung von Tabellen zur Gliederung von Text (Tabellenzeilen als Zwischenüberschriften)
Praxisorientierung steht bei uns im Fokus, und dank unserer intensiven Kontakte in die Wirtschaft können unsere Studierenden Praktika oder Abschlussarbeiten bei führenden Unternehmen und Forschungspartnern absolvieren sowie Kontakte zu potenziellen Arbeitgebern knüpfen. Internationale Abkommen und Austauschprogramme fördern den Austausch von Studierenden aus aller Welt und bieten unseren Studierenden viele Möglichkeiten ins Ausland zu gehen. |
| Informieren, orientieren, entscheiden |
| Sich vor dem Studium zu informieren ist wichtig, um die richtige Studienwahl zu treffen. Um die TU Bergakademie Freiberg bereits im Vorfeld kennenzulernen, gibt es vielfältige Angebote, wie Studienmessen ganz in der Nähe Ihres Heimatorts, den TUBAF-Campustag, eine Studienberatung vor Ort in Freiberg oder eine Schüleruni-Woche in den Ferien. |
Schlecht: Wechsel Spalten-/Zeilenlayout nicht stimmig
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden ...
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
Rechte und Pflichten
- Während der Zeit der Beurlaubung bleiben die Rechte und Pflichten des Studierenden, mit Ausnahme der Verpflichtung zum ordnungsgemäßen Studium, unberührt ...
Semesterbeitrag und Gebühren
- Vor der Beurlaubung muss die Rückmeldung - Zahlung des Semesterbeitrages- erfolgen ...
Besser: Einheitliches Layout
Beantragung der Beurlaubung
Studierende können auf eigenen Antrag in der Regel bis Semesterbeginn aus wichtigem Grund vom Studium beurlaubt werden.
Gründe für eine Beurlaubung
- Krankheit,
- Vorbereitung auf Wiederholungsprüfungen,
- Studienaufenthalt im Ausland, ...
Eine Beurlaubung ist unzulässig
- für das erste Fachsemester bzw. für das Fachsemester in das eine Einstufung bei Hochschul- oder Studiengangwechsel vorgenommen wurde ...
Dauer der Beurlaubung
- Die Dauer der Beurlaubung regelt § 20 Abs. 2 SächsHSFG und soll die Zeit von insgesamt zwei Semestern nicht überschreiten ...
...
Nicht-Nutzung der Funktion "Weiteren Eintrag hinzufügen"
... bei Akkordeons, Linklisten und Kacheln, da es zu uneinheitlichen Darstellungen führt.
Schlecht:
Besser:
Bad: Accordions without content/use as link list
Schlecht: Download spärlich bezeichnet
Beispiel:
Hier findet man ein Dokument mit einer schlechten Beschreibung des Dateidownloads.
Besser: Genauere Beschriftung für Verständnis
Beispiel:
Hier findet man ein Dokument mit einer besseren Beschreibung des Dateidownloads.
Bad: Buttons without a link to highlight text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
.
Bad: reformatting buttons in bold/italics
Schlecht: Buttons mit "Zum", "Hier geht es zu"... bezeichnen
Besser:
Schlecht: Bildkacheln als Visitenkarten
...u. a., da Text für Kontaktangaben keine Zeilenumbrüche erlaubt.
Dr. Sabine Schellbach
Besser: Bildkacheln nur als Link zum Profil
... sorgt für eine bessere Übersichtlichkeit.
Schlecht: Bildkachel ohne Link
... (Nutzung als "Foto mit Bildunterschrift") - nur temporär erlaubt, wenn Inhalte noch erstellt werden!
Negativbeispiele
Besser: Bildkachel mit Link
... zur Auflockerung und besseren Übersichtlichkeit der Seite.
Negativbeispiele
Bad: Duplication in tile heading
Negative examples
Better: "Learn more" in link text
Negative examples
Better: Use button
...via text/image paragraph, set link, select link, select style. Arrow appears automatically.
Better: equalisation with buttons or similar.
Bad: Pixelated images
... "The main thing is to have a picture first".
Bad: Text in pictures
...cannot be read by screen readers. Is only permitted if the content is explained directly on the image.
Bad: Use layout paragraph for images
... Use of layout paragraph to "make images small" should be avoided.
Better: Text with image
... Image size can be standardised here (small, medium, large).
Bad: Info boxes for contact details/directions
Career Centre
Prüferstraße 2, Zi. 2.405 to 2.407
09599 Freiberg
kontakt [at] cc [dot] tu-freiberg [dot] de (kontakt[at]cc[dot]tu-freiberg[dot]de)
Bad: Info boxes for normal text
Our degree programmes include a variety of Bachelor's, Master's and diploma courses, including unique degree programmes such as Applied Science, Materials Science and Technology, Robotics and Engineering.
We focus on practical orientation, and thanks to our intensive contacts in industry, our students can complete internships or theses with leading companies and research partners and establish contacts with potential employers.
Forbidden: Reproduction of menus
Navigation
Home (this page)
Institute
- Prof. ...
- Publications
- History
Staff
Research
- ...
- ...
- ...
Equipment
- ...
- ...
- ...
Schlecht: Infoboxen in Layouts
... da nicht bündig.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
At vero eos et accusam et justo duo dolores et ea rebum.
Besser:
... untereinander anordnen.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
At vero eos et accusam et justo duo dolores et ea rebum.
Further negative examples
(will be added successively with examples)
Infoboxes in layouts (because not flush)
Manual insertion of blank lines (not barrier-free, technical implementation of spacing before headings is in progress): Central University Administration
pure accordion pages
Downloads sparsely labelled: Study forms (better: what is the application for? What needs to be considered?...)
missing spacing: Department 5
Long continuous text pages without any break-up, no navigation to other places
Links to documents that are not recognisable as such
Image tiles without a link (use as "photo with caption") - only temporarily permitted, if content is still being created
Use of tables to structure text (table rows as subheadings)
Elements in the layout paragraph that are not levelled in height
Buttons with "To", "This way to"... labelled
Not using the "Add another entry" function for accordions, link lists, tiles
More than 7 contacts with picture --> prefer tabular overview
Very short individual pages
Team pictures in the hero (often pixelated, are cut off)
English page was not taken into account when making changes on the German page: Beschäftgite/ Employees
Column/row layout changes not consistent: International researchers