{"id":2725,"date":"2026-07-20T13:42:59","date_gmt":"2026-07-20T13:42:59","guid":{"rendered":"https:\/\/markenportal.ruhr-uni-bochum.de\/application-and-design\/web-design\/"},"modified":"2026-08-27T15:00:40","modified_gmt":"2026-08-27T15:00:40","slug":"web-design","status":"publish","type":"page","link":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/websites\/web-design\/","title":{"rendered":"Web Design"},"content":{"rendered":"\n
\n

Web Design<\/h1>\n\n\n\n

A Figma library is available for designing websites. It contains all key design components such as header, navigation, content modules, footer, and more. By using these components consistently, we ensure our digital platforms are instantly recognisable as RUB\u2014helping users orient themselves right away. <\/p>\n\n\n\n

There is currently no shared technical foundation for all RUB websites. The Figma library therefore serves as the design basis, independent of technical implementation. <\/p>\n\n\n\n

<\/div>\n<\/div>\n\n
\n
\n

Design Components<\/h2>\n\n\n\n

It includes all the key design components, such as the header, navigation, content modules, footer, and other elements.<\/p>\n\n\n\n

Our design components build on one another. Small elements like buttons or icons combine into larger building blocks, such as navigation bars or card modules. These can then be assembled into complete page sections. <\/p>\n\n\n\n

This principle is called nesting: smaller elements sit within larger ones, and all are interconnected. The benefit: when we update an element in one place, it automatically updates everywhere it’s used. This keeps the design consistent and makes changes efficient to implement. <\/p>\n<\/div>\n\n\n\n

\"\"<\/figure>\n<\/div>\n\n
\n
\n

Interface Icons<\/h2>\n\n\n\n

For user interfaces, we use the Lucide icon library (lucide.dev). It includes over 1,700 consistently designed icons for modern interfaces\u2014covering navigation, actions, content, and functionality. The icons are clean, legible, and integrate seamlessly into digital applications. <\/p>\n\n\n\n

Lucide is open source under the ISC licence. The icons are free for commercial and non-commercial use. The licence notice must be retained in the project’s source code; visible attribution in the interface is not required. <\/p>\n<\/div>\n\n\n\n

Important<\/strong>: For legal reasons, Lucide Icons may only be used for user interfaces; they may not be used for illustrations, infographics, or print materials.<\/p>\n\n\n\n

\n
\n
\"\"
UI Icons for Web Use<\/figcaption><\/figure>\n<\/div>\n\n\n\n
<\/div>\n<\/div>\n<\/div>\n\n
\n
\n

Figma Access<\/h2>\n\n\n\n

(Request for Figma access: TBD)<\/em><\/p>\n\n\n\n

When using Figma, keep the following in mind:<\/p>\n\n\n\n

We do not process any internal or sensitive data;<\/strong> this tool is intended for use in web design and public relations and is recommended exclusively for these purposes.<\/p>\n\n\n\n

We do not export code via Figma.<\/strong> Although it is technically possible to do so, the generated code does not necessarily comply with legal accessibility standards. Code for RUB web products must be accessible in accordance with the BITV 2.0 regulation. <\/p>\n<\/div>\n<\/div>\n\n

\n

Important! Disable AI features <\/strong><\/p>\n\n\n\n

When working with the Figma Library, AI features must be disabled. This prevents RUB design content from being used to train AI models. <\/p>\n\n\n\n

Here’s how (for team admins):<\/p>\n\n\n\n

    \n
  1. Also, disable “Content training” to prevent content from being used for AI training<\/li>\n\n\n\n
  2. Open Figma and go to the File Browser<\/li>\n\n\n\n
  3. In the left sidebar, select your team and click “All Projects”<\/li>\n\n\n\n
  4. Click the arrow next to the team name and select “View settings”<\/li>\n\n\n\n
  5. Go to the “Settings” tab and scroll to the “AI” section<\/li>\n\n\n\n
  6. Turn off “AI features” using the toggle<\/li>\n<\/ol>\n\n\n\n

    See also: https:\/\/www.figma.com\/legal\/ai-terms\/<\/a><\/p>\n\n\n\n

    If you are interested in using AI, the RUB recommends the following program: _https:\/\/ki-campus.org\/lernangebote\/kurse\/ki-kompetenzen-der-hochschulverwaltung<\/a><\/p>\n<\/div>\n\n

    <\/p>\n","protected":false},"excerpt":{"rendered":"

    Web Design A Figma library is available for designing websites. It contains all key design components such as header, navigation, […]<\/p>\n","protected":false},"author":7,"featured_media":0,"parent":3204,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2725","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/pages\/2725","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/comments?post=2725"}],"version-history":[{"count":6,"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/pages\/2725\/revisions"}],"predecessor-version":[{"id":3738,"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/pages\/2725\/revisions\/3738"}],"up":[{"embeddable":true,"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/pages\/3204"}],"wp:attachment":[{"href":"https:\/\/markenportal.ruhr-uni-bochum.de\/en\/wp-json\/wp\/v2\/media?parent=2725"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}