Auftrag

1. Icons

Entwickle drei Illustrationen/Icons zum Thema "So geht das!". Zum Beispiel: Das Öffnen einer Verpackung, Tee-Zubereitung, Mondlandung, Streit-Schlichtung, Gassi-Gehen, Bezahlen mit Smart Watch, Fahrradreparatur … alles, was sich in drei Bildern/Icons erklären lässt.

2. Anleitung

Entwickelt eine vollständige Gebrauchsanweisung. Sie besteht aus einem Mix von Zeichen: Bildern, Icons, Text, Hinweiszeichen, ggf. Fotos. Entweder aufbauend auf den vorhandenen Icons aus Übung 8 oder mit einem neuen, frei gewählten Thema.

Gestalterischer Ansatz

1. Icons

Bei der Entwicklung von Icons habe ich zunächst in verschiedene Richtungen gedacht. Vom „How to order a beer“ bis zum „How to delete your system32“. Am Ende ist es ein wirklich existentes Problem geworden, das viele Menschen bei verschiedenen Websites mit 2FA haben. Daher möchte ich erklären, was zu tun ist, wenn die E-Mail nicht im Postfach auffindbar ist.

2. Anleitung

Ich habe mich für eine Umsetzung in Form einer kleinen Website entschieden. Diese ermöglicht durch Klicken eines Buttons das Aufklappen der Anleitung zum Empfangen einer E-Mail, die nicht im Postfach gelandet ist. Diese soll erklären, wo die Bestätigungsmail aufzurufen ist, wenn diese nicht im Eingang des Mail-Clients landet. Ich habe mich für eine Umsetzung in HTML, CSS & JS entschieden, um den direkten Anwendungsfall zu erklären. Hier kann man sich auch selbst unter der gegebenen URL oder direkt über die verify.html ein Bild von der Handhabung machen. Die Seite wurde komplett eigenständig erstellt.

1. Icons: E-Mail verloren geglaubt?

2. Anleitung: Verifizierung mit Bestätigungscode

Live Preview:

Anzeigen in neuer Seite

Source Code:

https://github.com/maxigoldy/gestaltung-portfolio/blob/main/arbeiten/icons/verify.html

Reflexion

1. Icons

Trotz nicht mangelder Ideen empfand ich diese Aufgabe als sehr anspruchsvoll. Das Reduzieren auf die wichtigsten, klar erkennbaren Einzelheiten von Objekten und insbesondere dem Ausführen von Aktionen ist schwierig als Aufforderung in ein Icon zu fassen. So soll der Mauszeiger ein Öffnen / einen Klick symbolisieren, denn ein Dreieck mit Ausrufezeichen wäre hier eher als Warnung zu verstehen gewesen. Also gibt es für die verschiedensten Möglichkeiten immer auch die Chance, diese falsch zu verstehen. Die Umsetzung in Adobe Illustrator empfand ich als recht schwierig, da für vereinfacht-komplizierte Figuren teilweise die Skills und vorallem die Erfahrung fehlen. Somit war diese Aufgabe auch mit viel Recherche und erlernen bestimmter Programmbereiche verbunden.

2. Anleitung

Ich habe mir für diese Aufgabe eine ganz eigenständige, nicht so vorgesehene, aber durchaus passende Ausarbeitung überlegt. Es hat mir sehr viel Spaß gemacht, eine solche Website zu erstellen und auch hier Gestaltgesetze, wie das Gesetz der Nähe & Region, anzuwenden. Mein gestalterische Ansatz war es eine moderne, in Weiß gehaltene kleine und einfache Seite zu erstellen. Passend zu einem Eingabefeld habe ich mich für die Schriftart San Francisco entschieden. Die Anleitung als Popup in einem Anwendungsfall darzustellen, insbesondere als funktionierende Website ist ein anderer, ganz eigener Ansatz. Ich habe mich für eine Umsetzung in Form einer kleinen Website entschieden. Diese ermöglicht durch Klicken eines Buttons das Aufklappen der Anleitung zum Empfangen einer E-Mail, die nicht im Postfach gelandet ist. Diese soll erklären, wo die Bestätigungsmail aufzurufen ist, wenn diese nicht im Eingang des Mail-Clients landet. Ich habe mich für eine Umsetzung in HTML, CSS & JS entschieden, um den direkten Anwendungsfall zu erklären. Hier kann man sich auch selbst unter der gegebenen URL oder direkt über die verify.html ein Bild von der Handhabung machen. Die Seite wurde komplett eigenständig erstellt.

Verwendete Programme

1. Icons

Adobe Illustrator, Adobe Express

2. Anleitung

Visual Studio Code, Adobe Illustrator, Adobe Express, Adobe Stock (Mauszeiger Icon Bild 1)