Share
In der letzten Folge haben Sie die Geschichte des Ikonendesigns kennengelernt und wie es sich von Schwarzweißdarstellungen von Büroartikeln zu vollfarbigen, glasartigen, hypergerenderten, isometrischen Darstellungen von… Büroartikeln entwickelt hat. In dieser Folge werde ich weiter in die Welt der Ikonen eintauchen und untersuchen, was Ikonen heute für uns bedeuten.
Dieser Beitrag ist Tag 8 unserer Interface Design Session. Tag der kreativen Sitzungen "Tag 7Symbol - Substantiv (Computer) ein Bild oder ein Symbol, das auf einem Monitor angezeigt wird und zur Darstellung eines Befehls dient, als Dateiauszug zur Darstellung von Ablage - dictionary.com
Wir kennen also die Bedeutung von "Icon" im traditionellen rechnerischen Sinn des Wortes, aber wie erklären sich all die illustrativen Icons, die wir heute sehen? Wie soll ein schön gerendertes Bild einer Teekanne, eines Weltraumschiffes oder eines Eimers Huhn etwas in der Benutzeroberfläche darstellen? Auf diese Frage gibt es einige Antworten.
Egal wie streng oder ungewöhnlich Ihr Design ist, alle Icons sollten genauestens sein - dazu wird es bald mehr geben.
Unten sehen Sie eine Übersicht über das moderne Ikonendesign. Einige Leute argumentieren möglicherweise, dass die Symbole auf der "Illustrationsseite" des Diagramms nicht als Symbole betrachtet werden sollten. Dies trifft teilweise zu, sie sind keine traditionellen Symbole, sondern moderne Symbole in dem Sinne, dass sie Anwendungen, Spiele oder einen bestimmten Kontext darstellen können.
Bei den Symbolen auf der linken Seite des Diagramms handelt es sich um Symbole, die als traditionelle Symbole mit einem modernen Touch betrachtet werden. Wir verbinden diese Symbole sofort mit ihrer Funktion. Dies wird durch eine über 30-jährige Bildsprache erreicht, die einen großen Einfluss auf den Designerfolg hat.
Die Symbole in der Mitte des Diagramms sind Symbole, die weder illustrativ noch informativ sind, sondern eine Kombination aus beiden. Der Umschlag ist aufgrund seiner Form traditionell, er kann jedoch aufgrund seiner Wiedergabe anders wahrgenommen werden. Ein solches Design funktioniert am besten in einem bestimmten Kontext. Der Blue Twitter Bird wird von den Internetnutzern sofort erkannt, ist jedoch für Nichtbenutzer (wie meine Mutter) auf die Abbildung eines blauen Vogels reduziert, und der stilistische GTalk Bubble ist auch ziemlich abhängig von der Markenvereinigung.
Links zu den Symbolen oben (in keiner bestimmten Reihenfolge)
Pump It Up von mgilchuk, My Breafast von blink, SNOW.E 2 XP von RADE8, CS3 iKons - Win, by -kol, iChat Bubble von Delta909, Icecream-Icon-Set von Miniartx, Batman Mask von Svengraph, In Spirited We Love von Raindropmemory, Twitter Bird von freakyframes, StarWars Vehicles Archigraphs von Cyberella74, Systematrix Full von royalflushxx, New Moshii World von anekdamian, Somatic Rebirth Extras von The Iconfactory und David Lanham
Beim Entwerfen von Symbolen für eine Schnittstelle können Sie die Konventionen nicht überschreiten. Überprüfen Sie in den vorherigen Entwürfen, wie Sie sich nähern können. Sie werden feststellen, dass die meisten Softwarepakete und Benutzeroberflächen ähnliche Symbole aufweisen. Dies liegt an der Benutzererfahrung (User Experience, UX). Wenn ein Benutzer plötzlich mit einem Design konfrontiert wird, das er nicht erwartet oder mit dem er nicht vertraut ist, wird er wahrscheinlich verwirrt.
Wenn Sie für eine bestimmte Plattform entwerfen, sollten Sie immer die Entwicklerhinweise lesen, bevor Sie beginnen. Diese geben Ihnen einen Überblick über Größe, Perspektive und Farbpalette, die Sie verwenden sollten. Links zu den Apple- und Microsoft-Entwicklernotizen finden Sie im Abschnitt "Ressourcen und weiterführende Literatur" am Ende dieses Beitrags.
Grün = Gut - Blau = Hilfe - Gelb = Warnung - Rot = Fehler
Mit jeder neuen Technologie oder jedem Betriebssystem werden die Symbolspezifikationen komplizierter. Windows und Mac befinden sich in einem Rüstungswettlauf über einer Symbolgröße, wobei das bisher größte Symbol riesige 512 Pixel misst. Der Trend zu großen Icons hat viel mit modernen Bildschirmauflösungen zu tun, aber es gibt auch eine gewisse Sicherheit Sabberfaktor mit einem riesigen, perfekt gerenderten Symbol. Sehen Sie sich die Beispiele unten an, wenn Sie mir nicht glauben!
AppZapper, Billings, Dinge und Coda-Anwendungssymbole für Mac (für diesen Beitrag angepasst!)
Nun, da ich dir das gezeigt habe Sabber würdig Icons, gehen wir auf einige Icons, die ich selbst entworfen habe. Das folgende Beispiel ist eine dekonstruierte .ICO-Datei, die in meinem früheren Leben als Icon- und Interface-Designer erstellt wurde (wer mich als LoungeKat kennt, hat diese Tatsache wahrscheinlich nicht gewusst). Das Hauptsymbol mit 256 Pixeln wurde in Adobe Photoshop mit Formen und Ebenenstilen erstellt. Anschließend wurde es für jede einzelne Größe (64, 48, 32, 16) neu skaliert und in Microangelo Toolset importiert, um es als .ICO zu kombinieren. Das 256px-Symbol ist nicht Teil der Symboldatei selbst, sondern in der Software als transparentes PNG enthalten, das von Windows aufgerufen wird, wenn die Größe erforderlich ist. Dies hält die Dateigröße gering.
Wie Sie sehen, habe ich je nach Farbtiefe und Größe des Symbols einige Variationen des Designs verwendet. Die Symbole enthalten alle diese Größen und Farbräume, um alle Arten der Anzeige für das Betriebssystem zu berücksichtigen.
Es ist wichtig, jede Größe separat zu entwerfen. Durch die Skalierung eines großen Bildes kann das Design unscharf wirken. Wenn Sie ein 16px-Symbol entwerfen, ist es immer am besten, direkt in die Pixelansicht zu gelangen. Wie Sie sehen, können ein paar gut platzierte Pixel viel mehr vermitteln, als Sie denken. Weitere Informationen zu Symbolen, verschiedenen Spezifikationen und Branchenempfehlungen finden Sie im Symbolhandbuch von Axialis Software.
Ein Beispiel für die Skalierung
Um die Symbole besser zu verstehen, schlage ich vor, möglichst viele unterschiedliche Betriebssysteme, Programme, Schnittstellen und Portale zu betrachten. Denken Sie darüber nach, auf welche Weise Farbe und Metapher für jede Anwendung verwendet werden. Welche Symbole sind leicht verständlich (der Ordner oder der Papierkorb kann Ihnen als das Erkennbarste erscheinen?), Welche Symbole müssen weiter erklärt werden? Vertrauen Sie mir, Sie werden überrascht sein, was Sie über die Psychologie hinter der Bildsprache erfahren, die wir täglich verwenden und oft als selbstverständlich betrachten.
Accentsconagua