Een zorgvuldige vernieuwing van de iconen van Mole

Ik wil een paar gedachten delen over het vernieuwen van de iconen in een product: waar je op let en waar nog ruimte is om te verbeteren.

Vanmorgen heb ik de iconen van Mole zorgvuldig vernieuwd. Tot nu toe gebruikte het de systeemiconen, die volgens mij prima zijn voor een eenvoudig product, maar als je goed kijkt ontbreekt er iets: een beetje karakter.

Een iconenbibliotheek kiezen

Na wat rondkijken zijn de twee bibliotheken die het best bij appiconen passen Remix Icon en Phosphor Icons. Ik gebruikte Remix veel bij het bouwen voor het web, en het is eenvoudig en prettig, maar in een app zag het er voor mij niet goed uit, dus stapte ik over op Phosphor, dat echt karakter heeft en er sterk uitziet. Ongeveer 70% van de iconen kon zo gebruikt worden, en de andere 30% heb ik zelf getekend door Opus 5.5 de SVG te laten schrijven, zodat de hele set consistent blijft.

Beoordeel ze altijd in het product

De vergelijking hierboven laat op het eerste gezicht waarschijnlijk weinig verschil zien. Vaker moet je de iconen in het echte product zetten, en ik kijk ook hoe een hele groep iconen in één module samenwerkt. Soms ziet elk icoon er op zichzelf goed uit en klopt de groep nog steeds niet, zoals een gezicht waarvan elke trek op zich prima is en ze toch niet goed bij elkaar zitten. Mijn advies is dus eenvoudig: als je iconen vervangt, bekijk ze in het echte product, allemaal samen, en daar komen ze goed uit.

Kleine ideeën geven een product leven

Ten tweede kom ik steeds terug op het idee dat de producten die we maken enige geest moeten hebben, een gevoel dat ze leven, in plaats van de koude uitvoer van AI-programmeren zonder iets van je eigen denken erin. Kleine details zoals iconen zijn een goede plek om dat leven toe te voegen. Voor Scherm aan houden gebruikte ik een kop koffie, de cafeïnemetafoor: je Mac heeft koffie gehad en kan niet in slaap vallen. Over krijgt meestal een i in een cirkel, maar ik zag het als een hallo, dus het is een zwaaiende hand. Dokter zou normaal een of ander storingssymbool krijgen, en hier is het een stethoscoop, meer als een dokter die je probleem nakijkt. In een product is ruimte voor veel van zulke kleine ideeën, en samen maken ze het een stuk leuker.

Uitlijning, formaat en centreren

Tot slot komt goed ontwerp bijna altijd terug op uitlijning, orde en een goed gekozen ritme. Iconen, tekst en de onderdelen erboven en eronder uitgelijnd, even groot en verticaal gecentreerd laten lijken, zoals het oog ze echt ziet, betekent ze een voor een controleren en bijstellen. Dat omvat tekst met iconen uitlijnen, en omgaan met Chinese en Latijnse tekens die niet hetzelfde verticale midden delen. Je kunt hier lang aan schaven, en ik vind dat erg leuk.

Een paar voorbeelden uit deze ronde. De batterij begon als een lege omtrek die er bij elke lading hetzelfde uitzag, zodat een volle batterij leeg leek; hij vult nu per kwart. De iconen in de menu's volgden eerst het formaat van de systeemiconen en oogden daar te groot en zwaar; 14,3 pt ging naar 12,5 pt, nog een beetje groot, en kwam uit op 11 pt. Sommige iconen werden op hun breedte bemeten en andere op hun langere zijde, zodat de hoge bezem en de afmeldpijl groot oogden terwijl de brede bug en de lijngrafiek klein oogden. Ze worden nu bemeten op het gemiddelde van breedte en hoogte, met een maximum op de langere zijde, en nieuwe iconen volgen dezelfde regel automatisch. En in het vergelijkingsbeeld dat ik voor een tweet maakte, staat het woord Mole in de titel in een Chinees schreeflettertype waarvan de Latijnse letters 4 pt hoger zaten dan het Chinees ernaast, dus het moest apart omlaag worden geschoven voordat de twee op één lijn stonden.

Naar gebruikers luisteren, en dan nog een ronde

Nadat het stuk online stond, begonnen gebruikers terug te schrijven. Een paar iconen waar ik tevreden over was, zagen er voor hen scheef uit of voelden onbekend: Zoek naar updates gebruikte een downloadicoon en las als downloaden, het kleine blokje voor GPU leek niet op een videokaart, het archieficoon zei niets, twee gestapelde staafjes zeiden niet echt geheugen, en sommigen vonden de spons voor Scherm schoonmaken en de zwaaiende hand voor Over onaantrekkelijk.

Juist dan wint een kort gesprek met gebruikers het van zeker zijn in je eentje, dus elk van deze ging nog een ronde in, langs hun suggesties. Zoek naar updates werd een pijl met de klok mee, GPU een videokaart met twee ventilatoren, het archief een opbergdoos, en audio ging van muzieknoten naar een koptelefoon. Scherm schoonmaken ging terug naar de borstel van het allereerste systeemicoon, Over keerde terug naar de gewone i in een cirkel, opnieuw getekend op het gewicht van de rest van de kolom, en geheugen ging terug naar een chip. Een aantal veranderde onderweg drie keer.

De tijd die AI bespaart aan afwerking besteden

Dit soort werk kan zinloos lijken, maar het is iets waar ik echt van geniet. AI geeft een flinke zet aan goede code en aan smaak die ermee door kan, en het kan lijken alsof mensen niets meer te doen hebben dan praten. Ik denk dat het omgekeerde waar is: de persoon telt hier meer. De tijd die AI je bespaart, is precies de tijd om het product af te werken, zodat de 1% van de gebruikers die het opmerkt af en toe dat gevoel krijgt van meteen snappen, van "whoa", van een klein goocheltrucje. Dat maakt het waardevol en leuk, en misschien is dat wat ik het interessantst vind aan het bouwen van onafhankelijke producten.