Icons in Stud.IP

Seit der Version 2.0 bringt Stud.IP ein einheitliches Icon-Set mit. Das Set zeichnet sich durch eine klare und einheitliche Gestaltung, nach Aufgaben und Einsatzbereichen getrennte Farb-Sets, barrierearme Bedienung durch klare Formen/optische Zusätze für bestimme Aufgaben und eine Reihe weiterer Merkmale, die die Stud.IP-Formensprache vereinheitlichen, aus. Des weiteren liegen alle Icons bereits als Vektorgrafiken vor, so dass eine Verwendung in anderen Kontexten (zB. Print) und eine Veränderung der Icon-Größe in Stud.IP (etwa für eine verbesserte Touch-Bedienung) zukünftig möglich ist. Das Iconset findet grundsätzlich für alle grafischen Schaltflächen, Markierungen, Objekt-Darstellungen usw. Anwendung. Als einzige Ausnahme davon existieren in Stud.IP weiterhin die Textbuttons und einige wenige Sonderformen oder nicht-iconartige Grafiklelemente (zB. Linien oder Trenner).

Dieses Dokument gibt eine Übersicht über grundlegende Form und Gestaltung der Icons, Nutzung der unterschiedlichen Farben und Verwendung von Zusätzen.

Gestaltung

Die Iconlandschaft wurde deutlich entschlackt, moderner und effizienter gestaltet. Skalierbarkeit und eine einfache, klare Formensprache standen bei der Entwicklung im Mittelpunkt. Das neue Iconset ist funktional und selbsterklärend. So wird die Übersichtlichkeit der Funktionen und die intuitive Bedienung gefördert. Es gibt nun für alle Größen und Einsatzgebiete eine einheitliche Optik der neuen Icons. Die Verwendung von festen Grundformen zusammen mit förmlich und farblich abgegrenzten Zusätzen, die Funktionen und Zustände markieren, gewährleistet eine barrierearme Nutzbarkeit bei hohem Wiedererkennungseffekt.

Icons in Studip 2.0 sind nach einem festgelegten Raster gestaltet und minimalistisch in Farbe und Form. Sie sind grundsätzlich monochrom in festgelegten Farben gehalten. Linienstärke und Farbfüllungen werden so eingesetzt, dass die Icons ein einheitliches optisches Gewicht erhalten. Diese Regeln sollen künftig auf alle in Stud.IP verwendeten Icons übertragen werden.

Sicher gibt es zusätzlich zur normalen Projektentwicklung viele Plugins und Erweiterungen, bei denen einen Bedarf gibt, bestehende Icons anzupassen oder neue zu erstellen. Die dafür notwendigen Arbeiten übernimmt der Stud.IP e.V., der für die Entwicklung in Budget in gewissem Umfang bereithält. Koordiniert die Entwicklung über den Vorstand des Stud.IP e.V.

Farben

	Blau: Die blauen Icons sind der Standard für alle klickbaren Icons, unabhängig davon, in welchem Kontext sie verwendet werden (Ausnahme: Übersicht "Meine Veranstaltungen"). Insbesondere freistehende Aktionen sollten immer neben dem Linktext ein solches Icon zeigen.
	Schwarz: Diese Icons werden ausschließlich in den Infoboxen verwendet und sind nie klickbar. Sie erläutern grafisch die Aktionen, die die Infobox anbietet. So können hier Aktionen mit dem zugehörigen Icon gezeigt werden, Informationen mit einem "I" illustriert werden oder Verweise auf andere Systembereiche mit den zu diesen Bereichen passenden Icons ergänzt werden.
	Grau: Diese Variante kommt zum Einsatz, wenn Icons nicht klickbar sind und nicht innerhalb von Infoboxen eingesetzt werden. Sie drücken auch oft einen Status aus und werden für alle Objekte wie News, Votings oder Dateien verwendet, um ein solches Objekt zu klassifizieren. Eine Ausnahme bildet "Meine Veranstaltungen". Auch hier drücken die grauen Icons einen Zustand aus ("nur bekannte Objekte eines Types") aber können trotzdem geklickt werden, da von hier aus auch die jeweiligen Bereiche direkt angesprungen werden können. Dieser Sonderfall gilt jedoch nur für "Meine Veranstaltungen"
	Rot: Die Farbe Rot dient dazu, Neues darzustellen oder hervorzuheben. Rote Icons kommen auf "Meine Veranstaltungen" zum Einsatz, wenn einer der Bereiche einer Veranstaltung für den Nutzer neue Inhalte führt. Aus Gründen der barrierearmen Bedienung reicht die rote Färbung allein nicht aus, es muss immer auch der Zusatz "neu" verwenden werden, um dem Icon auch eine eindeutige Form zu geben, es sei denn, die Kombination von Farbe und Form des Icons selbst ist eindeutig (etwa ein rotes X).
	Weiß: Die weiße Variante wird immer dann verwendet, wenn Icons innherhalb einer dunklen Umgebung (in der Regel die Kopfzeile von frei schwebenden Fenstern mit dunkelblauer Zeile) vewendet werden. Auch graue Tabellenköpfe erhalten ggf. weiße Icons. In der Regel sind diese nicht klickbar. Das weiße Icon kann auf weißem Hintergrund nicht gesehen werden.
	Gelb: Gelbe Icons werden ausschließlich zum Verschieben von Objekten benutzt. Daher existieren in diesem Set auch nur Dreiecke und Pfeile in allen Varianten.
	Grün: Grün kommt nur in dem Fall, dass der Bestätigungs-Haken gezeigt wird, zum Einsatz.

Zusätze

Es existieren eine Reihe von grafischen Zusätzen, die vielfältig eingesetzt werden können, um Aktionen, die hinter Icons liegen oder auch Zustände zu visualisieren. In der Regel werden Zusätze immer in rot dargestellt. Eine Ausnahme bildet der gelbe Zusatz „Verschieben“.

	Hinzufügen: Das Plus-Zeichen drückt aus, dass hier ein neues Objekt erzeugt werden kann. Das Anlegen eines Objektes oder der Sprung auf einen Bereich, in dem das Anlegen möglich ist, wird mit diesem Zusatz belegt. Er kann an blauen Icons mit Klick oder schwarzen und grauen Icons verwendet werden.
	Neu: Das Sternchen drückt einen neuen Inhalt aus. Das Sternchen wird (außer in der Kopfzeile) mit einem roten Icon kombiniert.
	Löschen/Entfernen: Mit einem Minus wird die Möglichkeit, das entsprechende Objekt zu löschen, markiert.
	Verschieben: Um ein Objekt zu verschieben, gibt es den Zusatz eines gelben Pfeils, analog zu den gelben Verschiebepfeilen.
	Aktion gesperrt: Zuweilen werden Aktionen als "nicht möglich" dargestellt. In diesem Fall erhalten die Aktions-Icons ein X als Zusatz.

Das Icon-Set enthält im Bausatz noch weitere Zusätze, die aktuell jedoch nicht verwendet werden. So finden sich Pfeile in alle vier Richtungen, Pause-Zeichen, Bestätigen-Zeichen (als Gegenstück zum "X"), Minus-Zeichen (als Gegenstück zum Hinzufügen) und Aktualisieren.

Größen

Gegenwärtig liegen die Icons in der festen Größe von 16*16 und 32*32 Pixeln vor. Die zweite Variante wird im Header benutzt und verwendet derzeit Pixelmaps für die Darstellung. Die hier gemachten Ausführungen beziehen sich überwiegend auf die 16er Variante, in den restlichen Bereichen des System verwendet wird. Zukünftig ist es denkbar, anhand der Vektorgrafiken auch andere Größen zu erstellen.

Verzeichnisstruktur

Für alle Icons gilt eine modulare Verzeichnisstruktur:

icons/<Größe>/<Farbe>/<Zuatz>/<Name des Icons>.png

Beispiele

• Weitere Infos zu den Pfaden

Liste der verfügbaren Stammicons

Für alle in Stud.IP vorhandenen Objekte existieren Stammicons, von denen alle weiteren Formen oder Varianten logisch abgeleitet werden. Gegenwärtig existieren folgende Stammicons:

Tools und Bausätze

Für die Erstellung neuer oder eigener Icons existieren mittlerweile eine Reihe von Tools, Vorlagen, Bausätzen und anderen Elementen, die für die Gestaltung herangezogen werden können. Vorlagen für Adobe-Photoshop, Adobe-Illustrator und SVG-Dateien liegen im Developerserver im Dateibereich der Veranstaltung GUI-Redesign.

• Bausatz für die Kopfzeile: Für Plugins können eigene Plugin mir eigenen Icons ein komptaibles Kopfzeilen-Icon mit folgendem Tool erstellen: http://develop.studip.de/studip-iconfactory/
• Photoshop-Baukasten: Es existiert ein Baukasten, insbesondere für 16*16-Dateien. Mit etwas Photoshop-Geschick kann aus dieser Datei eine beliebige Kombination aus Icon und Zusatz erstellt oder auch ein neues Set in einer anderen Farbe generiert werden. Die Zusätze existieren in dieser Datei als eigene Ebenen, in die die Icons geschoben werden können. Damit wird dann ein Icon incl. Zusatz komponiert. Die weiße Schutzzone, die jeder Zusatz zur klaren Abgrenzung benötigt, ist entsprechend mit vorgesehen. Eine 32*32-Variante existiert ebenfalls, enthält jedoch nur die Kopfzeilen-Icons.
• Illustrator-Baukasten: Auch für Illustrator existiert ein Baukasten, mit dem sich die Icons in beliebiger Größe aus den Vektorvorlagen erstellt werden können. Die SVG-Variante kann alternativ benutzt werden.