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 Kurs von Thomas Manig gibt einen Einstieg in Icons und Piktogramme. Es wurde erarbeitet, was Icons und Piktogramme eigentlich sind, wie sie sich von einander und von anderen Graphiken unterscheiden und wofür sie gebraucht werden. Außerdem war Teil des Kurses, wie sich Icons and Piktogramme eigentlich zudem entwickelt haben, wie wir sie heute kennen. Natürlich war der Kurs nicht nur theoretisch, sondern es wurde auch in Programme(v.a. Illustrator) eingefüht und die benötigten Techniken gelehrt, um eigene Icons zu entwickeln. So sind wir im Laufe des Kurses von schnellen Marker-Skizzen zu pixelperfekten Vektorgraphiken gelangt.

Projekt #1: Erste Icons

Unsere erste Aufgabe war es, schnell drei Icons mit einem Marker zu Skizzieren:

ersteicons.pngersteicons.png

  • Fahrrad statt Auto

  • Icons als Teil von Userinterfaces

  • Icons sind (meistens) nicht von Sprache abhängig

Projekt #2: Wald-Piktogramme

Im zweiten Projekt haben sich die Studierenden ein Sachthema, in meinem Fall „Wald“, herausgesucht und zu folgenden Aspekten Piktogramme entworfen:

  • Objekt: „Baum“
  • Funktion: „Luftreinigung“
  • Hinweis: „Astbruchgefahr“
  • Gebot: „Watch your steps“
  • Verbot: „Feuerverbot“
  • Ort: „Flussufer“
  • Besonderheit: „Artenvielfalt“
  • Emotion: „Relaxing“
  • Handlung: „Mountainbiking“
  • Person: „Forstarbeiter*in“

waldpiktos.pngwaldpiktos.png
1objekt.png1objekt.png
2funktion.png2funktion.png
3hinweis.png3hinweis.png
4gebot.png4gebot.png
6ort.png6ort.png
5verbot.png5verbot.png
7besonderheit.png7besonderheit.png
8emotion.png8emotion.png
9aktivitaet.png9aktivitaet.png
person.pngperson.png

Neben dem regulärem Piktogramm habe ich noch versucht eine heruntergebrochene/abstrahierte Version zu erstellen, was mal besser mal weniger gut funktioniert hat.

Projekt #3: Werkstatt-Icons

Das finale Projekt hat in einer Gruppenarbeit begonnen; wir hatten uns darauf geeingigt Icons für die Räume bzw. die Werkstätten an der FH zu entwerfen. Allerdings haben wir nach der ersten Ideensammlung festgestellt, dass wir alle völlig verschiedene Ideen bzw. Herangehensweisen für das Set haben, weshalb dann jede*r ihren*einen eigenen Weg fortgeschritten ist.

Prozess

1 Skizzen auf Papier:


Schnelle Bleistift Zeichnungen um eine Idee zu bekommen:

firstsketch_werkstatt.jpgfirstsketch_werkstatt.jpg
skizzen_werkstatt.jpgskizzen_werkstatt.jpg

2 Ungenaue Versuche und Sketches im Vektorgraphik Programm


Idee für Konzept konkretisieren und Designstyle festlegen

exportV0.1.pngexportV0.1.png

Ergebnis

Ich habe mich auf nur 8 Werkstätten beschränkt:

  • Siebdruck-Werkstatt

  • Interfacelab

  • Fotolabor

  • Lackierwerkstatt

  • 3D-Print-Labor

  • Holz-Restaurationswerkstatt

  • Modellbauwerkstatt

  • Handsatz/Typographie Werkstatt

Dafür aber verschiedene Varianten erstellt:

32px mit Perspektive:


Frame 7icons.pngFrame 7icons.png

Die größten Icons haben oben rechts in Ecke eine Badge, die die Art der Werkstatt(also „normale“ Werkstatt, Restaurationswerkstatt oder Labor), indiziert.

24px ohne Perspektive:


Frame 1924pxohne.pngFrame 1924pxohne.png
24pxohneactuall24.png24pxohneactuall24.png

Diese Variante ist weiter reduziert, ohne Perspektive und ohne Badge. Die Icons sind 24px groß und auch bei einer 1:1 Rasterisierung noch recht gut zu erkennen(siehe zweites Bild, hier natürlich stark vergrößert).

16px Rasterisiert


Frame 2016pxraster.pngFrame 2016pxraster.png

Diese Variante ist mehr just for fun entstanden. Ich habe die Vektorgraphiken genommen und versucht sie in Paint(.net) Pixel für Pixel möglichst gut nachzusetzen. Dabei habe ich bewusst auf Anti-Aliasing verzichtet um diesen Pixelstyle zu erreichen.

24px mit Perspektive


Frame 2124pxmit.pngFrame 2124pxmit.png

Auf dem Feedback der finalen Präsentation basierend, habe ich die Icons nocheinmal überarbeitet. Diese Variante verzichtet auch auf den redundanten? Badge, behält aber die Perspektive. Hier ist die Sicht allerdings nur frontal von oben, was es mir erleichtert hat alle Icons mit der gleichen Perspektive darzustellen.

Fazit

Der Kurs war auf jeden Fall sehr eindrucksreich und hat viel Spaß gemacht. Die Mischung aus Theorie und Praxis hat super gepasst.., ok ich komme lieber mal zum Punkt. Hier die (wichtigsten) Dinge die ich aus dem Kurs mitgenommen habe oder die mir einen Denkanstoß gegeben haben:

Reduktion auf Erkennungsmerkmal

Um Etwas als Icon darstellen zu können, reicht es oft nicht aus die Grundform(-en) zu nehmen und sie 1:1 als Linen in ein 32x32px Grid zu packen. Es ist vielmehr wichtig die Essenz zu erfassen bzw. festzustellen was das menschliche Gehirn wahrnehmen muss um eine Verbindung mit dem realen Etwas herzustellen. Das ist ziemlich schwer und ich muss auf jeden Fall noch einiges an Erfahrung sammeln um andere Etwase? (ohne spicken mit der Suchmaschine) so reduzieren zu können.

Arbeitszeit in Perfektion

Während das Reduzieren/auf den Punkt bringen der Formen schwierig ist, ist es -sobald die Idee da ist- mit einem Marker relativ schnell erledigt. Wirklich Zeit fressen tut dann das -bestenfalls pixelperfekte- ausbalancieren der Path-Nodes im Graphikprogramm. Auch wenn ein Icon erstmal easy zu machen aussieht, jedenfalls im Vergleich zu anderen Illustrationen, gibt es doch extrem viel zu beachten. Die Pfade müssen auf, nicht nicht einfach zwischen den Pixeln liegen, es steht nur eine Strichstärke zur Verfügung, der Versuch möglichst viele Winkel, Grundformen und Proportionen im Set wiederzuverwenden, im Raster laufen dann doch noch Pixel zusammen, das Program snappt die Pfade nicht so wie gewünscht, laggt und stürzt dann auch noch ohne Autosave ab… dass kann ganz schön frustrierend werden und ist irgenwann ein richtiges Geduldsspiel. Nachdem ich aufgrund meines Adobe-Boykotts erst trusted Inkscape, dann Figma(ja, ich weiß, Adobe) und schließlich Affinity Designer (jaja, Apple ist auch nicht wirklich besser, I know), probiert habe, alle mit ihren eigenen Vor- und Nachteilen, kann ich sagen: Am meisten Spaß hat das manuelle Pixelsetzten in Paint.net gemacht ;P (Immerhin habe ich mein Programm-Repertoire etwas erweitert).

Reduzierung und Komplexitätsgrad

Ein weiteres Ding, was mir zu schaffen gemacht hat und wofür ich immer noch keine richtige Lösung habe, sind die verschiedenen Komplexitätsgrade. Für manche Icons reicht eine recht einfache Form aus, während mensch für andere schon fast ans Limit des Pixel-Grids gehen muss. Zwar ist es meist technisch noch möglich die Icons umzusetzen, allerdings bringen stärkere Schwankungen des Komplexitätsgrads innerhalb eines Sets eine optische Diskrepanz zwischen die Icons. Auszutarieren, wo dieser Grad nun sein soll, auch in Anbetracht der Skalierbarkeit des Sets, ist immer noch eine Challange für mich (aber ich habe inzwischen auf jeden Fall ein besseres Verständnis dafür).

Minimalismus, Ästhetik und Charakter

Etwas abseits der technischen Problematiken, hat mich der Kurs auch zum philosophieren? gebracht: Durch die immer weitere Reduktion von Icons, bis auf die kleinst mögliche Größe (bzw. das Erstellen ausgehend von der minimalsten Form), werden alle Icons irgendwie auch zu einem Einheitsbrei, ohne dass sie noch eigenen Charakter aufweisen können. So wurde auch die alltägliche Welt, besonders Websites und Userinterfaces, noch ein Stück langweiliger. Glücklicherweise erlauben, die inzwischen weitgehend etablierten, höheren Bildschirmauflösungen, wieder für mehr Detail in den GUIs. Dennoch sehen wir gerade in der Corporate-World, dass fast alle größeren Konzerne, DEM „moderen Trend“ hinterherlaufen und/oder auch setzen. Dabei prägen sie (zwangsläufig?) auch die ästhetische Wahrnehmung der Allgemeinheit(oder zumindest von mir). Ist das gut oder schlecht? Lassen sie durch das Trendhunting evtl. sogar mehr abgrenzenden Spielraum für Kunst und Kultur in der Gestaltung? Braucht es eine Abgrenzung? Ich weiß es nicht.
Was ich weiß, ist dass ich im Vergleich zu anderen Projekten im Kurs relativ simple „Mainstream-Icons“ entworfen habe, was sicher auch auf eine Prägung durch das Corporate-Design zurückzuführen ist. Aber ich habe mich auch aktiv dazu entschlossen, um an die Grenzen der Reduktion zu gehen (deshalb auch die 16px Rastericons). Um dem wieder ein wenig entgegenzuwirken, wollte ich noch die Icons mit Perspektive erstellen, um auch eine Eigenheit hineinzubringen. Kritisch betrachtet, beinhalten auch diese die unoriginellen Grundformen; allerdings: Ziel war es ja auch Icons zu entwerfen und keine Illustrationen zu gestalten.

Kulturelle Komponente

Es war zwar kaum Teil, jedenfalls nicht bewusst, in meinen Arbeiten während des Kurses; dennoch finde ich es wichtig im Hinterkopf zu behalten, dass wir als Designer*innen immer voreingenommen gestalten. Auch Icons an denen ja „eigentlich nicht viel dran ist“ können (still und leise) diskriminierend sein. Das beste Beispiel dafür sind die inflationär genutzten „Toilettensymoble“ bestehend aus einer Person, entweder in Kleid oder in Hose.

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

zusätzliches Material