Eine sorgfältige Überarbeitung der Icons von Mole

Ich möchte ein paar Gedanken dazu teilen, wie man die Icons eines Produkts überarbeitet: worauf man achten sollte und wo sich noch etwas verbessern lässt.

Heute Morgen habe ich die Icons von Mole sorgfältig überarbeitet. Bisher nutzte die App die Systemsymbole, und für ein einfaches Produkt reichen die meiner Meinung nach völlig aus, aber bei genauerem Hinsehen fehlt ihnen etwas Charakter.

Welche Icon-Bibliothek

Nach etwas Recherche kamen für App-Icons vor allem zwei Bibliotheken infrage: Remix Icon und Phosphor Icons. Remix habe ich beim Webentwickeln viel benutzt, schlicht und angenehm, aber in einer App gefiel es mir nicht besonders, also bin ich zu Phosphor gewechselt, das richtig Charakter hat und sehr gut aussieht. Etwa 70 % der Icons ließen sich unverändert übernehmen, die restlichen 30 % habe ich selbst gezeichnet, indem ich Opus 5.5 das SVG schreiben ließ, damit das Ganze einheitlicher wirkt.

Immer im Produkt beurteilen

Im Vergleich oben fällt der Unterschied vielleicht kaum auf. Oft muss man die Icons tatsächlich ins echte Produkt setzen, und ich achte auch darauf, wie eine ganze Gruppe von Icons in einem Modul zusammenwirkt. Manchmal sieht jedes Icon für sich gut aus und die Gruppe trotzdem nicht, so wie ein Gesicht, dessen einzelne Züge alle hübsch sind, die zusammen aber nicht recht passen. Mein Rat ist deshalb einfach: Wenn Sie Icons austauschen, schauen Sie sie sich im echten Produkt an, alle zusammen, dann wird das Ergebnis gut.

Kleine Ideen geben dem Produkt Leben

Zweitens denke ich schon lange, dass die Produkte, die wir machen, etwas Lebendiges haben sollten, statt das kalte Ergebnis von AI Coding zu sein, in dem kein eigener Gedanke steckt. Kleine Details wie Icons sind ein guter Ansatzpunkt, um einem Produkt dieses Leben zu geben. Für „Bildschirm wach halten“ habe ich eine Tasse Kaffee genommen, die Caffeine-Metapher: Ihr Mac hat einen Kaffee getrunken und kann nicht einschlafen. „Über Mole“ bekommt meist ein eingekreistes i, aber für mich ist es ein Hallo, also ist es eine winkende Hand. Die „Diagnose“ hätte normalerweise ein Symbol für Fehlersuche, hier ist es ein Stethoskop, eher so, als würde ein Arzt Ihr Problem untersuchen. In einem Produkt ist Platz für viele solcher kleinen Ideen, und zusammen machen sie es deutlich unterhaltsamer.

Ausrichtung, Größe und Zentrierung

Zuletzt: Gutes Design kommt fast immer auf dieselben Grundsätze zurück, Ausrichtung, Ordnung und einen stimmigen Rhythmus. Damit Icons, Inhalte und die Bereiche darüber und darunter für das Auge ausgerichtet, gleich groß und sogar vertikal zentriert wirken, muss man sie einzeln ansehen und anpassen. Dazu gehört die Ausrichtung von Schrift und Icon, und auch der Umgang mit chinesischen und lateinischen Zeichen, die von vornherein keine gemeinsame vertikale Mitte haben. Daran kann man lange feilen, und das macht mir großen Spaß.

Ein paar Beispiele aus dieser Runde. Die Batterie war zuerst ein leerer Umriss, der bei jedem Ladestand gleich aussah, sodass eine volle Batterie leer wirkte; jetzt füllt sie sich in Vierteln. Die Icons in den Menüs richteten sich zuerst nach der Größe der Systemsymbole und wirkten dort zu groß und zu kräftig; von 14,3 pt ging es auf 12,5 pt, noch etwas zu groß, und am Ende auf 11 pt. Manche Icons waren nach ihrer Breite skaliert, andere nach ihrer längeren Seite, deshalb wirkten der hohe Besen und der Abmelde-Pfeil groß, der breite Käfer und die Linienkurve dagegen klein. Jetzt werden sie nach dem Mittel aus Breite und Höhe skaliert, mit einer Obergrenze für die längere Seite, und neue Icons folgen automatisch derselben Regel. Und im Vergleichsbild für einen Tweet steht das Wort Mole im Titel in einer chinesischen Serifenschrift, deren lateinische Buchstaben 4 pt höher saßen als die chinesischen Zeichen daneben; sie mussten einzeln etwas nach unten, bevor beides auf einer Linie lag.

Auf die Nutzer hören, dann noch eine Runde

Nach der Veröffentlichung kamen nach und nach Rückmeldungen von Nutzern. Ein paar Icons, mit denen ich zufrieden war, fanden sie nicht so hübsch oder ungewohnt: „Nach Updates suchen“ nutzte ein Download-Icon und wurde als Download gelesen, der kleine Würfel für die GPU sah nicht nach Grafikkarte aus, das Archiv-Icon war unverständlich, zwei gestapelte Riegel sagten nicht recht Arbeitsspeicher, und manche fanden den Schwamm bei „Bildschirm wischen“ und die winkende Hand bei „Über Mole“ nicht schön.

Genau dann bringt ein kurzes Gespräch mit Nutzern mehr, als allein davon überzeugt zu sein, also ging jedes dieser Icons nach ihren Vorschlägen noch eine Runde. Die Update-Suche wurde zu einem Pfeil im Uhrzeigersinn, die GPU zu einer Grafikkarte mit zwei Lüftern, das Archiv zu einer Aufbewahrungsbox, und Audio wechselte von Noten zu Kopfhörern. „Bildschirm wischen“ kehrte zum Pinsel des allerersten System-Icons zurück, „Über Mole“ bekam wieder das klassische i im Kreis, neu gezeichnet in der Strichstärke der übrigen Spalte, und der Arbeitsspeicher wurde wieder ein Chip. Einige haben sich unterwegs dreimal geändert.

Die Zeit, die KI spart, ins Feilen stecken

Diese Art von Arbeit wirkt vielleicht überflüssig, aber ich mache sie sehr gern. KI hebt guten Code und einen ordentlichen Geschmack enorm an, und es kann so aussehen, als müsse man nur noch Anweisungen geben. Ich sehe es umgekehrt: Die Rolle des Menschen ist hier noch größer geworden. Die Zeit, die KI einem spart, ist genau die Zeit, um das Produkt zu verfeinern, damit das eine Prozent der Nutzer, das darauf achtet, beim Benutzen hin und wieder das Gefühl hat, sofort zu verstehen, „wow“ zu denken, einen kleinen Zaubertrick zu erleben. Das ist wirklich wertvoll und macht Spaß, und vielleicht ist es genau das, was ich an unabhängigen Produkten so interessant finde.