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 Doku

In diesem Kurs bei Thomas Manig, haben wir uns mit dem Thema Icons & Piktogramme beschäftigt mit dem Ziel am Ende des Kurses ein einheitliches, funktionierendes und sauber gestaltetes Icon-Set zu kreieren, zu einem bestimmten Thema. Ich selbst habe diesen Kurs im 3.Semester belegt in meinem Interface-Design-Studiengang.

Motivation

Diesen Kurs habe ich gewählt, weil meine Hauptkenntnisse rund um Design sich mit dem Thema Icons, Piktogramme und Logos beschäftigten. Mir fehlte jedoch ein gewisses Know-How, welches ich mir nicht selbst aneignen konnte. Das Thema ist zu umfassend, um sich mit allem zu beschäftigen und man verliert sich schnell in unrelevanten Informationen wieder. 

Dieser Kurs sollte mir dabei helfen die notwendigen Richtlinien kennen und was ein gutes Set von Icons ausmacht. Erhofft habe ich mir auch, durch das Kennen dieser neuen Richtlinien, bessere Icons erstellen zu können.

Meine größte Schwierigkeit lag darin ein Icon zu erstellen, dass ohne Erklärung, genau erkennbar ist, was ich darstellen wollte. Dies erhoffte ich mir durch den Kurs zu erleichtern.

1. Aufgabe - Kennenlernen

Beim 1. Treffen, sollten wir zum Kennenlernen 3 Symbole zeichnen, die uns ausmachen.

Ich entschied mich hier für meine Job-Erfahrungen darzustellen.

- Icon 1: Grafikdesigner für eine Firma die Mini-Stempel mit Motiven erstellt hat
- Icon 2: Customer Care Service für ein E-Commerce Unternehmen.

- Icon 3: Logo-Design auf Auftragsbasis. (Oben rechts das Symbol ist das letzte Logo, was ich gemacht hab für ein DJ)

IMG_20230130_153859.jpgIMG_20230130_153859.jpg

2. Aufgabe - 10 Icons zum Thema Angst

Unsere 1. Hausaufgabe war ein erstes Icon-Set aus 10 Icons zu erstellen. Wir hatten zu diesem Zeitpunkt bereits 1-2 Theorie-Vorträge gehört von Thomas aber dies war unsere erste Übung, die wir per Hand machen sollten. 

Wichtig war, dass wir keine Wörter und vor allen Dingen keine Farbe verwenden sollten. Lediglich einen schwarzen Stift. Wir durften frei auswählen, welches Thema wir für diese Icons nehmen.

Bei der Themenwahl ist mir immer wichtig ein Thema auszusuchen, welches mich gerade beschäftigt, weil ich dadurch länger motiviert bin daran zu arbeiten.

Als Hilfestellung für die Gestaltung wurden uns 10 Begriffe genannt, zu denen wir ein Icon erstellen sollten, passend zu unserem ausgesuchten Thema.

1 Objekt

2 Funktion

3 Hinweis

4 Pflicht (Gebot)

5 Verzicht (Verbot)

6 Ort

7 Merkmal (Besonderheit)

8 Geste/Emotion

9 Handlung

10 Person/Personengruppe

Bonus: Wesen

IMG_20230130_154428.jpgIMG_20230130_154428.jpg
IMG_20230130_154450.jpgIMG_20230130_154450.jpg

Neben Design interessiere ich mich privat sehr für Psychologie und würde auch gerne nach dem Studium in dieser Branche gerne als Designer Fuß fassen. Daher habe ich mir das Thema Angst ausgesucht. Zu diesem Zeitpunkt, wurde ich krank und musste zu mehreren Ärzten, weil nicht ganz klar war, was ich habe. Daher basierten einige Symbole auf medizinischen Grundlagen.

IMG_20230130_154140.jpgIMG_20230130_154140.jpg
IMG_20230130_154333.jpgIMG_20230130_154333.jpg

Im folgenden erkläre ich kurz das Symbol und was ich mir dabei gedacht habe. In den oberen beiden Bildern, haben die Icons dieselbe Reihenfolge, wie ich sie hier erkläre.

1 Objekt: Stethoskop

Angst vor der Krankheit = d.h. der Moment, beim Abhören des Herzens, wo ungewiss ist, was das eigene Leiden verursacht

2 Funktion: Schloss

Symbol für Schutz = Angst ist ein Urinstinkt, der uns vor Gefahr schützt

3 Hinweis: Warnsignal

Warnung vor Gefahr = Ob im Straßenverkehr oder als Hinweis an Geräten, soll es zur Handlung bewegen. Als Motivation der Handlung steht das Grundgefühl Angst im Raum, da wir ohne diese Angst verursacht durch das Warnsignal nicht handeln würden, denn wir wüssten nicht, dass etwas nicht stimmt.

4 Pflicht (Gebot): muskolöser Oberarm

Dieses Symbol steht für Stärke. Man benötigt Stärke um Angst zu überwinden

5 Ort: Krankenbett und Höhleneingang

Krankenbett = Angst vor der Ungewissheit, wie lange man noch im Krankenhaus ist oder wie lange man noch hat.

Höhleneingang = Angst vor der Dunkelheit / Platzangst / Angst vor dem was einem erwartet

6 Verzicht (Verbot): Glück und Stahl

Glück: Dies steht dafür, was passiert, wenn man sich der Angst hingebt. Man bleibt stehen, entwickelt sich nicht weiter und gibt dem Glück keine Chance.

Stahl: Man kann sich auch gegen die Angst entscheiden, in dem man mutig ist. Um mutig zu sein, muss man so hart und standhaft sein wie Stahl.

7 Merkmal (Besonderheit): Schneeflocke

Angst sorgt manchmal dafür, dass wir erstarren. Man ist dann bewegungsunfähig wie als wäre man eingefroren.

8 Geste/Emotion: der Schrei

Der Schrei, erinnert etwas an eine Panikattacke, welches die größte Form der Angst widerspiegelt. 

9 Handlung: geknickt sitzen und Ohren zuhalten und Smartphone

geknickt sitzen und Ohren zuhalten: Flucht von der Außenwelt durch blockieren der Sinne (Ohren zuhalten, Augen schließen, Erstarren)

Smartphone: Flucht in eine andere Welt um der Angst zu entfliehen und das Gefühl nicht spüren zu müssen.

10 Wesen: Maus

klein, zerbrechlich, flink - die Maus muss sich vor vielen Gefahren schützen und hat die perfekten Eigenschaften in meinen Augen, um das Sinnbild für Angst zu sein.

Da dies mein erster Versuch war zu einem meines Erachtens nach recht komplexen Thema Icons zu gestalten, bin ich mit dem Ergebnis recht zufrieden. Persönlich denke ich, dass es zwar schon eine eigene Bildsprache hat aber die einzelnen Themen könnten gestalterisch noch besser zusammen passen. Hier wäre es besser gewesen im medizinischen Kontext zu bleiben, um die Verbindung deutlicher zu machen, denke ich.

Finales Projekt: Icon-Set für Räume der FHP

Beim finalen Projekt habe ich gemeinsam mit Louis Tartz und Andreas Tischner gearbeitet. Wir haben uns entschieden die Räume der FHP in ein Icon-System umzuwandeln, so dass man leichter die Räume innerhalb der Uni finden kann.

Da jeder seinen eigenen Stil hat, ist es unfassbar schwer gemeinsam an Icons zu arbeiten. Anfangs haben wir noch dieselben Icons designet und versucht auf einen gemeinsamen Nenner zu kommen, jedoch entschieden wir uns dann dazu, dass jeder sein eigenes Icon-Set zum selben Thema gestaltet.

Wir sollten 10 Icons erstellen. Es gibt Werkstätten, Labore, Seminarräume und Atelierräume. Zwar gibt es noch die Mensa und das Designstudio zum Beispiel, jedoch wollte ich mich auf die Räume konzentrieren, wo Lehrveranstaltungen stattfinden.

Es gibt viele verschiedene Werkstätten und Labore, weshalb man im Icon selbst eine Gemeinsamkeit als Obersymbol und einen Unterschied als Untersymbol finden muss. Ich wollte, dass alle Werkstätten und Labore auch als solche erkennbar sind.

Mein erster Ansatz war die Symbole direkt miteinander zu verbinden. Das sah dann wie folgt aus:

I&P Skizze final project.JPGI&P Skizze final project.JPG

Ich habe versucht die Elemente miteinander zu fusionieren, was nicht sehr einfach ist und auch eher aus dem Logo-Ursprung stammt. Man erkennt jedoch nur schwer, um was es sich hier handelt. 

Bei meinem zweiten Ansatz, wollte ich dann doch etwas mehr die Bestandteile brechen und dennoch verbinden. Aus diesem Grund habe ich mir folgendes Konstrukt ausgedacht:

I&P Aufbau Icons.JPGI&P Aufbau Icons.JPG

Gestalterisch sah der Hammer noch nicht besonders gut aus aber mir hat der Grundaufbau schon einmal gut gefallen, zu mal dieser auch leicht verständlich war für meine Begriffe.

In diesem Stil habe ich dann ein ganzes Set erstellt:

erstes Set.JPGerstes Set.JPG

Als grobes erstes Set, war dies schonmal nicht schlecht, jedoch gab es viele Details, die nicht stimmten. Es war auch nicht anhand eines Rasters ausgerichtet.

Wir lernten im Kurs das saubere Erstellen von Icons anhand eines Rasters, weshalb ich mir zur Aufgabe gemacht habe, das Set noch einmal zu überarbeiten und zu perfektionieren.

Ein großer Nachteil dieses Sets ist auch, dass einige Icons schwarz ausgefüllt sind und andere nicht. Dahinter war kein System, was dem ganzen Set nicht gut getan hat.

Daher habe ich das 2. Set mit mehr Detail bearbeit:

zweites Set.JPGzweites Set.JPG

Dies entspricht nun dem finalen Ergebnis, womit ich persönlich sehr zufrieden bin, da in jeder Design-Entscheidung ein von mir ausgedachtes System steckt.

Das 1. Symbol, welches an dem Rahmen ist, dient als Oberkategorie wie Werkstatt oder Labor. Dieses Symbol ist als Vereinheitlichung nicht ausgefüllt. Da es auch etwas größer ist, ist es mit Konturen auch leicht erkennbar. 

Das 2. Symbol ist innerhalb des Rechteckes. Das Rechteck gilt als Raum oder auch als Darstellung für das Designgebäude. Das 2. Symbol ist ausgefüllt, da ich bemerkt habe, dass es dadurch leichter zu erkennen ist, wenn es sehr klein wird dann.

Fazit

Ich bin mit dem Endergebnis meines Projektes sehr zufrieden. Es ist keinesfalls perfekt aber nach meinem aktuellen Kenntnisstand, finde ich die Arbeit, die entstanden ist sehr gut. Gerade wenn man die Icons der anderen Gruppen sieht, erkennt man, das man noch einen weiten Weg zu gehen hat. Betrachtet man jedoch meine Entwicklung alleinstehend, ist das Ergebnis gut gelungen finde ich.

Die Arbeit in der Gruppe, war in dem Projekt nicht einfach aber wir haben einen guten Kompromiss gefunden. Eventuell wäre hier noch mehr gegangen und so schwer es auch ist, muss man aus der Komfortzone öfter raus und in Gruppen arbeiten, da man im Berufsleben später nicht drumherum kommt.

Mir persönlich hat der Kurs sehr gut gefallen. Thomas war eine unfassbare, hilfsbereite und motivierte Lehrkraft. Es war eine Kommunikation auf Augenhöhe, die die Teilnahme an dem Kurs verbessert hat. Er hat uns meines Erachtens nach auf dem richtigen Level gefördert und uns auf theoretischer Ebene viel beigebracht.

Die Tutorials, waren umfangreich und präzise, wenn auch für meinen Geschmack etwas zu schnell, aber das ist ein persönliches Manko, da ich doch manchmal etwas schwer von Begriff bin und etwas länger brauche, um Dinge zu verstehen.

Das wurde mir auch bei den Theoriebeiträgen etwas zum Verhängnis, weshalb ich es umso besser finde, dass die Slides im Nachhinein bei Incom nochmal anzuschauen sind.

Wenn ich diesen Kurs nochmal belegen würde, würde ich mehr Aufmerksamkeit auf die Theorie legen und nicht nur zuhören, sondern auch mitschreiben. Das ist etwas, dass ich von diesem Kurs ganz besonders mitgenommen habe, denn bei der Gestaltung haben mir sehr viele Informationen gefehlt, die jedoch im Kurs behandelt und von Thomas in einem Theorieteil erwähnt wurden. Das erschwerte mir die Arbeit aber brachte mir auch eine wichtige Lektion bei.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Keine Angabe

Betreuung

foto: Thomas Manig

Zugehöriger Workspace

Icons und Piktogramme

Entstehungszeitraum

Wintersemester 2022 / 2023