Share
In de laatste aflevering leerde je over de geschiedenis van pictogramontwerp en hoe het is geëvolueerd van zwart-witrepresentaties van kantoorartikelen naar volledig gekleurde, glazige, hyperweergegeven, isometrische weergaven van ... kantoorartikelen. In deze aflevering ga ik verder in de wereld van iconen en zoek ik uit wat iconen voor ons vandaag betekenen.
Dit bericht is dag 8 van onze Interface Design Session. Sessie Dag 7 van Creative Sessionsicoon - zelfstandig naamwoord (Computers) een afbeelding of symbool dat op een monitor verschijnt en wordt gebruikt om een opdracht weer te geven, als een bestandslabel die bestand is - dictionary.com
Dus we kennen de betekenis van "Icon" in de traditionele computerzin van het woord, maar hoe verklaart dit alle illustratieve pictogrammen die we vandaag zien? Hoe wordt een prachtig gerenderde afbeelding van een theepot, ruimteschip of emmer kip verondersteld iets in de gebruikersinterface te vertegenwoordigen? Er zijn een paar antwoorden op deze vraag.
Het maakt niet uit hoe strikt of ongebruikelijk uw ontwerp is, alle pictogrammen moeten worden gemaakt volgens specificatie - daar komt binnenkort meer over.
Hieronder ziet u een overzicht van het moderne pictogramontwerp. Sommige mensen beweren dat de pictogrammen aan de "illustratie" -zijde van het diagram niet als pictogrammen moeten worden beschouwd. Dit is gedeeltelijk waar, het zijn geen traditionele iconen, maar het zijn moderne iconen in die zin dat ze applicaties, games of een specifieke context kunnen vertegenwoordigen.
De pictogrammen aan de linkerkant van de grafiek zijn pictogrammen die als traditionele pictogrammen met een moderne draai worden beschouwd. We associëren deze pictogrammen onmiddellijk met hun functie, dit wordt bereikt door meer dan 30 jaar visuele taal, wat een krachtige factor is in het succes van het ontwerp.
De pictogrammen in het midden van het diagram zijn pictogrammen die niet illustratief of informatief zijn, maar een combinatie van beide. De envelop is traditioneel vanwege zijn vorm, maar hij kan anders worden waargenomen vanwege de weergave, een ontwerp als dit werkt het beste binnen een bepaalde context. De Blue Twitter Bird heeft onmiddellijke erkenning van internetgebruikers, maar is gereduceerd tot een illustratie van een blauwe vogel voor niet-gebruikers (zoals mijn moeder) en de stilistische GTalk Bubble is ook redelijk afhankelijk van merkassociatie.
Links naar de iconen hierboven (in willekeurige volgorde)
Pump It Up, door mgilchuk, My Breafast, by knink, SNOW.E 2 XP, door RADE8, CS3 iKons - Win, by -kol, iChat Bubble, door Delta909, Icecream icon set, door Miniartx, Batman Mask, door Svengraph, In Spirited We Love, door Raindropmemory, Twitter Bird, door freakyframes, StarWars Vehicles Archigraphs, door Cyberella74, Systematrix Full, door royalflushxx, New Moshii World, door anekdamian, Somatic Rebirth Extras, door The Iconfactory en David Lanham
Bij het ontwerpen van pictogrammen voor een interface kun je niet voorbij conventie gaan. Controleer eerdere ontwerpen voor een indicatie van hoe u de uwe benadert. U zult merken dat de meeste softwarepakketten en gebruikersinterfaces vergelijkbare pictogrammen hebben, dit komt door User Experience (UX). Als een gebruiker plotseling wordt geconfronteerd met een ontwerp waarvan hij niet verwacht of zich niet prettig voelt, raken ze waarschijnlijk in de war.
Als je ontwerpt voor een specifiek platform, controleer dan altijd de ontwikkelaarsnotities voordat je begint, dit geeft je een idee van de grootte, het perspectief en het kleurenpalet dat je zou moeten gebruiken. Je vindt links naar de opmerkingen van Apple en Microsoft-ontwikkelaars in de sectie 'Bronnen en verder lezen' aan het einde van dit bericht.
Groen = Goed - Blauw = Help - Geel = Waarschuwing - Rood = Fout
Iconspecificaties worden ingewikkelder met elke nieuwe technologie of besturingssysteem. Windows en Mac zitten in een wapenwedloop boven de pictogramgrootte, met het grootste pictogram tot nu toe met een enorme 512 pixels. De trend voor enorme pictogrammen heeft veel te maken met moderne schermresoluties, maar er is ook een zekere drool factor met een gigantisch, perfect weergegeven pictogram. Kijk naar de onderstaande voorbeelden als je me niet gelooft!
AppZapper, Billings, Things en Coda Applicatiepictogrammen voor Mac (verkleind om in deze post te passen!)
Nu dat ik je de Kwijl waardig pictogrammen, laten we doorgaan naar enkele pictogrammen die ik zelf heb ontworpen. Het onderstaande voorbeeld is een gedeconstrueerd .ICO-bestand dat ik in mijn vorige leven als pictogram en interfaceontwerper heb gemaakt (degenen die me kennen als LoungeKat wisten dit feit waarschijnlijk niet). Het belangrijkste 256px-pictogram is gemaakt in Adobe Photoshop met shapes en laagstijlen, het werd vervolgens opnieuw geschaald voor elke individuele grootte (64, 48, 32, 16) en geïmporteerd in Microangelo Toolset om te worden gecombineerd als een .ICO. Het 256px-pictogram maakt geen deel uit van het pictogrambestand zelf, maar wordt in de software opgenomen als een transparante PNG die door Windows wordt aangeroepen als het formaat vereist is. Hierdoor blijft de bestandsgrootte beperkt.
Zoals u kunt zien, heb ik een paar variaties op het ontwerp gebruikt, afhankelijk van de kleurdiepte en de grootte van het pictogram. Pictogrammen bevatten al deze formaten en kleurruimten voor alle verschillende manieren waarop ze door het besturingssysteem kunnen worden bekeken.
Het is belangrijk om elke maat afzonderlijk te ontwerpen, het schalen van een grote afbeelding kan het ontwerp wazig maken. Wanneer u een 16px-pictogram ontwerpt, is het altijd het beste om rechtstreeks naar de pixelweergave te gaan. Zoals u kunt zien, kunnen enkele goed geplaatste pixels veel meer overbrengen dan u denkt. U kunt aanvullende informatie over pictogrammen, verschillende specificaties en aanbevelingen voor de industrie lezen in de pictogramhandleiding van Axialis Software.
Een voorbeeld van schalen
Om een beter begrip van pictogrammen te krijgen zou ik willen voorstellen om zoveel mogelijk verschillende besturingssystemen, programma's, interfaces en portals te bekijken. Denk na over de verschillende manier waarop kleur en metafoor voor elke toepassing worden gebruikt. Welke pictogrammen onderscheiden zich als gemakkelijk te begrijpen (misschien kan de map of prullenbak u het meest herkenbaar maken?), Welke pictogrammen moeten nader worden uitgelegd? Vertrouw me, je zult verrast zijn wat je te weten komt over de psychologie achter de beeldtaal die we dagelijks gebruiken en vaak als vanzelfsprekend beschouwen.
Accentsconagua