Webdesign

Für die Gestaltung von Webseiten steht eine Figma Library zur Verfügung. Durch die einheitliche Nutzung dieser Komponenten stellen wir sicher, dass unsere digitalen Auftritte klar als RUB erkennbar sind und Nutzende sich sofort im RUB-Kontext orientieren können.

Derzeit gibt es noch keine gemeinsame technische Basis für alle RUB-Webseiten. Die Figma Library bildet daher die gestalterische Grundlage, die unabhängig von der technischen Umsetzung eingesetzt werden kann.

Design-Komponenten

Sie enthält alle wichtigen Design-Komponenten wie Header, Navigation, Content-Module, Footer und weitere Bausteine.

Unsere Design-Komponenten bauen aufeinander auf. Kleine Elemente wie Buttons oder Icons werden zu größeren Bausteinen zusammengefügt, etwa zu einer Navigation oder einem Kartenmodul. Diese wiederum lassen sich zu kompletten Seitenbereichen kombinieren.

Dieses Prinzip nennt sich Verschachtelung: Kleinere Bausteine stecken in größeren, und alle sind miteinander verknüpft. Der Vorteil: Wenn wir ein Element an einer Stelle anpassen, aktualisiert es sich automatisch überall dort, wo es verwendet wird. So bleibt das Design konsistent und Änderungen lassen sich effizient umsetzen.

Icons für Interfaces

Für die Gestaltung von Benutzeroberflächen nutzen wir die Icon-Bibliothek Lucide (lucide.dev). Sie umfasst über 1.700 einheitlich gestaltete Icons für moderne Interfaces: von Navigation über Aktionen bis hin zu Symbolen für Inhalte und Funktionen. Die Icons sind schlank, gut lesbar und fügen sich nahtlos in digitale Anwendungen ein.

Lucide ist Open Source und steht unter der ISC-Lizenz. Das bedeutet: Die Icons sind kostenlos für kommerzielle und nicht-kommerzielle Nutzung. Bitte beachte bei Verwendung der Icons die Nennung laut Lizenzvereinbarung: https://lucide.dev/license

Wichtig: Lucide Icons dürfen aus rechtlichen Grünen ausschließlich für Benutzeroberflächen genutzt werden, nicht für Illustrationen, Infografiken oder Printmaterialien.

UI Icons für die Web Nutzung

Design-Komponenten in Figma

Die Design-Komponenten sind in Figma dokumentiert. Zugang zum Figma-File kann über cd@rub.de angefragt werden.

Ein Figma-Abo muss selbst abgeschlossen werden. Es gibt unterschiedliche Lizenzen – unter Umständen ist auch eine kostenfreie Lizenz ausreichend.

Bei der Nutzung von Figma muss folgendes berücksichtigt werden:

Wir verarbeiten keine internen oder sensiblen Daten, die Nutzung ist für die Einsatzzwecke Webdesign und Öffentlichkeitsarbeit vorgesehen und wird ausschließlich für diese Zwecke empfohlen.

Wir exportieren keinen Code über Figma. Zwar besteht die technische Möglichkeit, dies zu tun, der erzeugte Code entspricht aber nicht zwangsläufig den rechtlichen Standards zur Barrierefreiheit. Code für RUB-Weberzeugnisse muss gemäß der Verordnung BITV 2.0 barrierefrei sein.

Wichtig! KI-Funktionen deaktivieren

Beim Arbeiten mit der Figma Library müssen die KI-Funktionen deaktiviert sein. So verhindern wir, dass Designinhalte der RUB für das Training von KI-Modellen verwendet werden.

So geht’s (für Team-Admins):

  1. Zusätzlich „Content training“ ausschalten, um die Nutzung von Inhalten für das KI-Training zu verhindern
  2. Figma öffnen und zum File Browser wechseln
  3. In der linken Sidebar das Team auswählen und auf „All Projects“ klicken
  4. Auf den Pfeil neben dem Team-Namen klicken und „View settings“ wählen
  5. Zum Tab „Settings“ wechseln und zum Abschnitt „AI“ scrollen
  6. „AI features“ per Toggle ausschalten

Siehe auch: https://www.figma.com/legal/ai-terms/

Wenn Sie sich für die Nutzung von KI interessieren, empfiehlt die RUB folgendes Angebot: https://ki-campus.org/lernangebote/kurse/ki-kompetenzen-der-hochschulverwaltung

Nach oben scrollen