Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Icons & Piktogramme

Der angebotene Kurs von Thomas Manig, hat mir einen tief reichenden Einblick in das Entwerfen von Icons, Piktogramme, Zeichen und Symbolen gegeben. Wo liegen eigentlich die Unterschiede und wo die Gemeinsamkeiten? Worauf kommt es bei der Gestaltung drauf an und wie gehe ich vor?

All diese Fragen beantwortete uns Thomas im Verlauf des Kurses und ging dabei sowohl auf die Historie sowie auch die Umsetzung ein und konnte uns somit einen umfassenden Einblick im Rahmen des Grundstudiums bieten.


Icon Set - Kaffee

Coffee_Icon_Set_final.pngCoffee_Icon_Set_final.png

01 Kaffeebohne (Objekt); 02 Batterie (Funktion); 03 Wasserstand (Hinweis); 04 Bohnen mahlen (Gebot); 05 entkoffeiniert (Verzicht); 06 Cafe (Ort); 07 Kaffeemaschine (Merkmal); 08 Siebträger leeren (Geste); 09 Kaffee trinken (Handlung); 10 Barista (Person)

Aufgabenstellung

Die erste Aufgabe im Kurs war es, ein eigenes, kleines Icon-Set zu gestalten. Das Thema war uns frei überlassen, jedoch sollten wir zunächst ausschließlich analog arbeiten und die Icons einfarbig und ohne Text auf quadratischen Kärtchen zeichnen. Weiterhin wurden uns 10 Begriffe vorgegeben, anhand derer wir gestalten sollten.

Da ich neuerdings ein bisschen zu enthusiastisch dem Thema Kaffee gegenüber gestellt bin, habe ich mich auch für eben dieses Thema entschieden. 

Icon Erläuterung

1 Objekt = Kaffeebohne als klassisches Symbol für den Kaffee

2 Funktion = Batterie als Metapher für die Wirkung des Koffein im Kaffee

3 Hinweis = Meldung des Wasserstandes in abstrakter Darstellung

4 Gebot = Kaffeebohnen mahlen als Grundlage für die Zubereitung

5 Verzicht = durchgestrichene Kaffeebohne als Symbol für „entkoffeiniert“

6 Ort = ein Café mit Markise zur besseren Verdeutlichung

7 Merkmal = Die Kaffeemaschine als typisches Merkmal

8 Geste = Das Leeren des Siebträgers als häufig aufkehrende Geste

9 Handlung = Das genießen/trinken des Kaffee

10 Person/Personengruppe = Barista in genderneutraler Darstellung

Prozess

IMG_3400.pngIMG_3400.png

Meine Vorgehensweise bei der Gestaltung des Icon Set kann man sehr gut am obigen Bild erkennen. Ich habe SEHR viele Entwürfe angefertigt, um zu verstehen, welche Details funktionieren, wo die Visualisierung stimmig ist und ob sie auch ohne Überschrift ihre Bedeutung vermitteln.

Bei dem Zeichnen der Icons nahm ich mir Empfehlungen aus dem Kurs zu Herzen und arbeitete lediglich mit einem Edding in einer Strichstärke. Diese Entscheidung trägt dazu bei, dass das Set am Ende möglichst einheitlich erscheint. Auch bei der generellen Formensprache bemühte ich mich um Kontinuität und arbeitete weitestgehend mit abgerundeten Ecken und wiederkehrenden Symbolen (z. B. Kaffeebohne, Kaffeetasse). 

Doch gerade in der Retrospektive fallen mir einige Details auf, die ich in der weiterführenden Entwicklung des Sets anpassen würde. Icons wie die Kaffeemaschine wirken durch die schwarze Füllung schwer und nicht zugehörig zum Set. Das Icon für den entkoffeinierten Kaffee ist für mich nicht eindeutig genug und sollte mit dem Icon für Energie (=Koffein) harmonieren. Dennoch bin ich für mein erstes eigenes Icon Set in analoger Form zufrieden und die Arbeit daran hat mein Auge fürs Detail stark geschärft. Gute Voraussetzungen für den weiteren Verlauf des Kurses!


Icon Set - FHP Modulplan

Das zweite Icon Set erfolgte in Zusammenarbeit mit @Emil Dax, @Oliver Lehmann und @Felix Magnus Newrzella

Gemeinsam nahmen wir uns vor, den FHP Modulplan mit Icons zu versehen, um so Kursbeschreibungen oder /-workspaces mit einer symbolische n Ebene zu klassifizieren.

Ist das jetzt ein Grundlagenkurs? 

Welchen Werkstattschein bekomme ich hier? 

Fragen wie diese wollten wir damit angehen und dadurch das Hochschulleben und das Kurswahlsystem etwas optimieren. Der Mensch liest nun mal in Bildern.

Die Vorbereitung

Erster Schritt zum Icon Set war es, sich mit der Ausgangssituation zu beschäftigen. Wir nahmen uns also den Modullehrplan zur Hand und notierten alle Begriffe, die der Plan vorzuweisen hat. Und zu unsere Überraschung waren das doch einige… 88 Begriffe, um genau zu sein.

Das Ziel des Kurses war es, ein Icon Set im Rahmen von 20-30 Icons zu gestalten. Somit war der nächste Schritt zu priorisieren, zu welchen Begriffen wir Icons visualisieren möchten. Um einen Anfang zu finden, beschränkten wir uns auf unsere Top 10 und arbeiteten zunächst in diesem Rahmen.

Der gemeinsame Nenner

Frame 3.pngFrame 3.png

So schön die Aufgabenteilung im Team auch ist, eine gemeinsame Stilsprache zu finden war schwerer als gedacht. Der Prozess war lang und mit einigen Kompromissen im Team versehen.

Um überhaupt zu wissen, welchen persönlichen Stil jeder hat und wo wir eventuell gemeinsame Nenner finden können, teilten wir uns auf die zehn gewählten Begriffe auf und gestalteten jeweils individuell, ohne Absprache unsere Icons. Das Ergebnis sieht man im obigen Bild. Auf den ersten Blick gar nicht so schlecht würde meinen, jedoch sieht man hier schon starke Unterschiede im Detailgrad, in der Abstraktion und Formsprache.

Stilvorgaben

Frame 4.pngFrame 4.png
Bildschirm­foto 2023-01-31 um 19.37.28.pngBildschirm­foto 2023-01-31 um 19.37.28.png

Was wir eigentlich mündlich und dann fix schriftlich über WhatsApp festgehalten haben, habe ich euch mal in einer kleinen Übersicht visualisiert. Denn eins war klar, ohne feste Vorgaben für die Icons würden wir es nicht schaffen, ein einheitliches Set zu gestalten. Also machten wir uns Gedanken um die Rastergröße, die Strichstärke, die Strichenden und verpassten allem, was wir irgendwie mit Zahlen festhalten konnten einen Wert. Außerdem probierten wir mit den Adjektiven „minimalistisch“ und „abgerundet“ die generelle Wirkung zu beschreiben.

Weiterhin haben wir uns darauf geeinigt, alle Werkstattkurse mit der gleichen Hand zu symbolisieren. Dadurch ermöglichten wir eine kontinuierliche Symbolsprache im Set, die vom Betrachter schnell gelesen werden kann.

Frame 5.pngFrame 5.png

Endspurt

Mittlerweile haben wir weitere 14 Begriffe hinzugenommen und kommen so auf ein Set in der Größe von 24 Icons. Auch die neuen Begriffe haben wir fair auf alle Teammitglieder aufgeteilt. Durch die festgelegten Stilvorgaben waren unsere Icons dieses Mal schon viel näher beieinander.

Zum Ende hin, mussten wir dadurch nur noch Details an den von uns individuell gestalteten Icons anpassen, die das Icon Set insgesamt einheitlich wirken ließen.

Das Icon Set

icons_screen.pngicons_screen.png

01 Video-/Audiowerkstatt; 02 Produktdesign; 03 Flexmodule; 04 digitale Modellbauwerkstatt; 05 Theorie; 06 Projektwochen; 07 Perspektiven und Social Skills; 08 Werkstattpraxis; 09 Entwurfsgrundlagen; 10 Interfacewerkstatt; 11 Kolloquium; 12 Modellierwerkstatt; 13 Grafiklabor; 14 Buchbindewerkstatt; 15 Kommunikationsdesign; 16 Grundstudium; 17 Projektorganisation; 18 Form + Interaktion; 19 Entwurfsgrundlagen; 20 analoge Modellbauwerkstatt; 21 Schrift + Ausdruck; 22 Druckwerkstatt; 23 Interfacedesign; 24 Fotowerkstatt


Fazit

Ich starte mal mit der mutigen Aussage, dass sich jeder Interfacedesigner mal genauer mit Icons beschäftigen sollte. Sie sind allgegenwärtig und auch wenn es zahlreiche Icon Sets gibt, deren Verwendung definitiv seine Daseinsberechtigung hat, sollten wir wissen, wann auch diese Sets an ihre Grenzen kommen.

Thomas Manig hat im Kurs durch seine Vorträge die Bedeutung und Tragweite von gut gestalteten Icons und Piktogrammen gut verdeutlicht. Im Kurs habe ich ein erweitertes Interesse für das Thema entwickelt und betrachte Icons mit einem höheren Stellenwert im Interface.

Die praktischen Aufgaben gaben für das Grundstudium einen guten Rahmen, in dem wir frei waren, uns auszuprobieren, mit begleitender Unterstützung durch Thomas. Ich habe viel gelernt, besonders im Arbeiten von Rastern und wenigen Pixeln und konnte mein Auge fürs Detail schärfen.

So wichtig Gruppenarbeiten auch sind, bin ich jedoch der Meinung, dass besonders dieser Kurs davon profitieren würde, wenn jeder individuell ein Set gestaltet. Bei einem Icon Set ist besonders wichtig, dass alle Icons dieselbe Stilsprache verfolgen. Diese Bedingung mit vier unterschiedlichen Individuen und Stilen zu verwirklichen war nicht nur fast unmöglich, sondern benötigte auch viele Kompromisse, bei den individuelle Stile in den Hintergrund traten.

Bis auf diesen Aspekt bin ich aber sehr zufrieden mit dem Kurs und bin froh, diesen in meinem letzten Semester des Grundstudiums mitgenommen zu haben. Ich bin motiviert, in Zukunft weitere Icon Sets zu verwirklichen und aus meinen Fehlern zu lernen! (PFADE! keine Formen... Pfade.)

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Thomas Manig

Zugehöriger Workspace

Icons und Piktogramme

Entstehungszeitraum

Wintersemester 2022 / 2023

Keywords