{"id":632,"date":"2009-03-01T08:00:23","date_gmt":"2009-03-01T07:00:23","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/en\/?p=632"},"modified":"2010-12-16T16:12:40","modified_gmt":"2010-12-16T14:12:40","slug":"aufloesungsunabhaengiges-icon-design-teil-3-so-arbeitet-centigrade","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-3-so-arbeitet-centigrade\/","title":{"rendered":"Aufl\u00f6sungsunabh\u00e4ngiges Icon Design \u2013 Teil 3: So arbeitet Centigrade"},"content":{"rendered":"<p>Im <a href=\"http:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-2\/\">vorigen Teil<\/a> wurde erl\u00e4utert, warum sowohl eine rein pixelbasierte als auch eine rein vektorbasierte Herangehensweise an das Icon Design Nachteile mit sich bringt. Da wir bei Centigrade professionelle Icon Design Dienstleistungen bieten, \u00fcberlegen wir stets, wie wir die Effizienz unseres Icon Design Prozess steigern und wie wir bestimmte technische Unzul\u00e4nglichkeiten \u00fcberwinden k\u00f6nnen.<br \/>\n<!--more--><\/p>\n<h3>Vorbereitungsphase<\/h3>\n<p>W\u00e4hrend des ersten Schrittes unseres Prozesses zur Iconerstellung k\u00fcmmern wir uns \u00fcberhaupt nicht um Pixel oder Vektoren \u2013 hier geht es nur darum, eine angemessene Metapher zu finden. Dies ist wichtig, da ein Icon selbsterkl\u00e4rend oder zumindest leicht lernbar sein sollte, damit seine Existenz \u00fcberhaupt gerechtfertigt ist. \u00c4sthetik ist in diesem Arbeitsschritt des Designprozesses noch unwichtig. Die Passung von metaphorischer und konzeptueller Welt muss intuitiv und eindeutig sein. Beispielsweise ist die Verwendung eines Zahnrades als Metapher f\u00fcr das Konzept \u201eAktion\u201c als intuitiv zu bewerten. Die gleiche Metapher f\u00fcr \u201eAufgabe\u201c zu verwenden w\u00e4re ebenso intuitiv. Wenn unsere konzeptuelle Welt aber sowohl Aktionen als auch Aufgaben enth\u00e4lt, w\u00e4re die Verwendung der Zahnrad-Metapher f\u00fcr beide Konzepte uneindeutig und verwirrend f\u00fcr die Benutzer. Wir m\u00fcssen dies bedenken, um eine eindeutige Zuordnung zwischen Metapher und Konzept zu gew\u00e4hrleisten. Dies ist der Grund daf\u00fcr, dass Centigrade neue Icons nicht im luftleeren Raum entwirft \u2013 wir ber\u00fccksichtigen immer, in welchem Kontext das Icon benutzt wird und welche anderen Icons und Metaphern bereits belegt sind bzw. noch ben\u00f6tigt werden, um Uneindeutigkeiten zu vermeiden.<br \/>\nWenn alle relevanten Metaphern gekl\u00e4rt sind, definieren wir einen visuellen Stil, der sich gut in die Software des Kunden einf\u00fcgt. Um die Kunden an der Stil-Auswahl-Phase teilhaben zu lassen,<\/p>\n<ul>\n<li> pr\u00e4sentieren wir ihnen bereits bestehende Icons verschiedener Stile<\/li>\n<li> erstellen wir von Hand eine oder mehrere grobe Skizzen pro Icon, um mit Ideen zu jonglieren oder<\/li>\n<li> wir gestalten drei oder vier detaillierte Icons verschiedener Stile<\/li>\n<\/ul>\n<p>In jedem Fall ist Kommunikation unabdingbar, wenn es um die Erstellung individueller, qualitativ hochwertiger Icons geht, da es wichtig ist, herauszufinden, was genau der Kunde bevorzugt.<br \/>\n<img decoding=\"async\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/homeicon-fromscribblestoicons2.png\" alt=\"Home metaphor as scribble and as final icon\" \/><\/p>\n<h3>Hauptphase<\/h3>\n<p>Erst nachdem diese Vorbereitungsarbeiten abgeschlossen sind beginnen wir, uns mit Pixel- und Vektor-Angelegenheiten zu befassen, wozu wir Programme wie <strong>Microsoft\u00ae Expression\u00ae Design<\/strong>, <strong>Adobe\u00ae Photoshop\u00ae<\/strong> oder <strong>Adobe\u00ae Illustrator\u00ae<\/strong> verwenden.<br \/>\nMit einem dieser Programme erstellen wir jedes Icon als Vektorgrafik, zun\u00e4chst optimiert f\u00fcr eine bestimmte Pixelgr\u00f6\u00dfe, die meist derjenigen Gr\u00f6\u00dfe entspricht, in der das Icon haupts\u00e4chlich genutzt wird (heutzutage meist 32&#215;32 Pixel). Wenn eine gewisse Anzahl von Icons in dieser spezifischen Gr\u00f6\u00dfe fertig gestellt ist, schicken wir diese f\u00fcr eine erste Design Feedback Diskussion an unseren Kunden. So hat dieser die M\u00f6glichkeit, \u00c4nderungsvorschl\u00e4ge einzubringen. Selbst der beste Icondesigner muss erst ein Gef\u00fchl f\u00fcr den Geschmack des Kunden entwickeln, damit dessen Erwartungen genau getroffen werden k\u00f6nnen. Das ist auch der Grund daf\u00fcr, dass wir bei Centigrade die M\u00f6glichkeit einer \u00c4nderung pro Icon als Standard in allen Projekten etabliert haben.<\/p>\n<h3>Abschlussphase<\/h3>\n<p>Nachdem ein Icon in der spezifischen Gr\u00f6\u00dfe vom Kunden abgesegnet wurde, beginnen wir mit der Erstellung der verbleibenden Gr\u00f6\u00dfen. Wegen des <a href=\"http:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-2\/#vektor-raster-dilemma\">Vektor-Raster-Dilemmas<\/a> wird diese Arbeit von Hand erledigt und kann leider nicht durch bestehende Programme automatisiert werden. Da wir aber viel Sorgfalt in der Vorbereitungsphase haben walten lassen, beinhaltet diese Arbeit keine Revisionen mehr, und kann daher in einem einzigen Arbeitsgang abgeschlossen werden. Die durchzuf\u00fchrenden Arbeitsschritte beinhalten im Einzelnen: <strong>Detailreduktion bzw. -erweiterung, Rasterkorrektur\/ -anpassung<\/strong> und <strong>Kontrastverbesserungen<\/strong>.<br \/>\nManchmal ist es notwendig, die kleinen Gr\u00f6\u00dfen des Icons von Grund auf neu zu gestalten, um uneingeschr\u00e4nkte Erkennbarkeit zu gew\u00e4hrleisten. Auch wenn dies eine etwas undankbare Arbeit ist, ist sie enorm wichtig f\u00fcr die Qualit\u00e4t des Designs. Betrachten wir einmal Apple\u2019s Mac OS X Leopard: in meinen Augen ist die bemerkenswerteste Verbesserung bez\u00fcglich der Icons nicht, dass sie mit einer Icongr\u00f6\u00dfe von 512&#215;512 Pixel noch gr\u00f6\u00dfer geworden sind \u2013 es ist eher die Tatsache, dass die 16&#215;16 Icons komplett \u00fcberarbeitet wurden, so dass sie besser erkennbar geworden sind.<br \/>\nIm Folgenden wird jeweils ein kurzes Beispiel f\u00fcr jeden der notwendigen Arbeitsschritte gegeben.<\/p>\n<h4>Detailreduktion bzw. -erweiterung<\/h4>\n<p>In diesem Arbeitsschritt, werden Icons hoch- oder herunterzuskalieren. F\u00fcr herunterskalierte Icons nutzen wir das Mittel der Detailreduktion, f\u00fcr hochskalierte Icons die sogenannte Detailerweiterung. Detailreduktion bedeutet, alle grafischen Elemente zu entfernen, die nicht absolut notwendig sind, um das Icon zu erkennen. Dies ist eine Gratwanderung, da das Icon weiterhin \u00e4sthetisch und interessant aussehen soll \u2013 beides visuelle Aspekte, die eigentlich aus der <em>Nutzung<\/em> von Details resultieren. Bei sehr kleinen Icons entfernen wir nicht nur grafische Elemente, sondern verbannen auch jegliche Perspektiven- oder 3D-Effekte.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-33\" title=\"printiconintwodifferentsizes-detailreduction\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/printiconintwodifferentsizes-detailreduction.png\" alt=\"Print icon in two different sizes using detail reduction\" width=\"438\" height=\"320\" \/><br \/>\nDie Detailerweiterung ist hingegen eine dankbarere Arbeit. Sie umfasst das Hinzuf\u00fcgen von Details wie Lichteffekten, Schatten, Reflektionen usw. \u2013 die Dinge, die letztendlich die \u201eAhs\u201c und \u201eOhs\u201c der Kunden ausl\u00f6sen.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-35\" title=\"stockiconintwodifferentsizes-detailenhancement\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/stockiconintwodifferentsizes-detailenhancement.png\" alt=\"Stock icon in two different sizes using detail enhancements\" width=\"438\" height=\"370\" \/><\/p>\n<h4>Rasterkorrektur\/ -anpassung<\/h4>\n<p>Vektorgrafiken basieren in erster Linie auf Mathematik. Aber in diesem Fall hat Mathematik leider wenig mit \u00c4sthetik zu tun, da die mathematischen Algorithmen der Vektorprogramme einen Vektorpfad mitunter so berechnen, dass ieser nicht perfekt ins Pixelraster f\u00e4llt. Besser w\u00e4re es zu berechnen, was seine beste visuelle Position im Pixelraster w\u00e4re Wenn beispielsweise ein schwarzer Vektor-Strich (mathematisch) in der Mitte zweier Pixel liegt, wird das Grafikprogramm ihn in grau (50% schwarz) darstellen, statt in 100% schwarz.<br \/>\n<img decoding=\"async\" class=\"alignnone size-full wp-image-32\" title=\"barcharticon-withandwithoutrastercorrection\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/barcharticon-withandwithoutrastercorrection1.png\" alt=\"Barchart icon with and without raster correction\/grid fitting\" \/><br \/>\nDas f\u00fchrt dann zu verschwommenen, schlecht kontrastierten Icons, wie bereits im vorigen Teil beschrieben. Bei Centigrade schauen wir uns jeden Vektorpfad an, der im Icon genutzt wird, und verschieben ihn gegebenenfalls, um auf diese Weise Interpolationsprobleme zu vermeiden. Meistens ist dies relativ unkompliziert, es kann jedoch, besonders bei Icons in sehr kleinen Gr\u00f6\u00dfen, auch sehr m\u00fchsam sein. Manchmal m\u00fcssen wir sogar akzeptieren, dass wir das gew\u00fcnschte Ergebnis mit dem Einsatz von Vektoren nicht erreichen k\u00f6nnen. Das ist der Punkt, an dem wir das altbew\u00e4hrte Bleistiftwerkzeug im Grafikprogramm einsetzen und die n\u00f6tigen Grafiken auf Pixelebene bearbeiten.<\/p>\n<h4>Kontrastverbesserung<\/h4>\n<p>Bei Icons, die verschiedene Farben beinhalten, verschwimmen diese im Auge des Betrachters, sobald das Icon herunterskaliert wird. Der Designer muss dieser nat\u00fcrlichen Konsequenz entgegenwirken, indem er h\u00f6here Farbkontraste einsetzt. Anders gesagt: Farbwerte m\u00fcssen \u201e\u00fcbertrieben\u201c werden (z.B. durch Ver\u00e4nderung des Farbtons), um sie unterscheidbarer und somit das Icon letztendlich wieder erkennbar zu machen. Dieser Schritt verlangt betr\u00e4chtliche F\u00e4higkeiten vom Designer, da im Endeffekt nicht sichtbar sein soll, dass die kleineren Icons eigentlich andere Farben nutzen als die gr\u00f6\u00dferen \u2013 zumindest nicht, wenn sie hintereinander gezeigt werden (nat\u00fcrlich zerst\u00f6rt das Aneinanderreihen zwangsl\u00e4ufig den Zauber). Es ist ein bisschen wie in der Musik: Ein Lied ist nicht \u201egroovy\u201c, wenn jeder Musiker genau auf den Punkt spielt, sondern genau dann z.B. das Schlagzeug durchg\u00e4ngig ein winziges bisschen schneller spielt als der Rest der Gruppe \u2013 nur genau so viel, dass es nicht bewusst h\u00f6rbar ist.<br \/>\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-34\" title=\"producticon-withandwithoutcontrastenhancement\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/producticon-withandwithoutcontrastenhancement.png\" alt=\"Product icon with and without contrast enhancement\" width=\"438\" height=\"405\" \/><\/p>\n<h3>Fazit<\/h3>\n<p>Der strukturierte Icon Design Prozess, der sich unterteilt in Vorbereitungsphase, Hauptphase und Abschlussphase, vermeidet so viel manuelle oder unn\u00f6tige Arbeiten wie nur m\u00f6glich. Die drei Verbesserungsschritte der Abschlussphase garantieren, dass selbst Vektor-basierte Icons ihr atemberaubendes Aussehen in allen m\u00f6glichen Gr\u00f6\u00dfen behalten. Auch wenn diese Schritte etwas mehr Arbeitsaufwand bedeuten, so f\u00fchren sie doch auch zu wesentlich besseren Ergebnissen \u2013 und wesentlich zufriedeneren Kunden.<\/p>\n<p>Im <a href=\"http:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-4-unterstuetzung-durch-moderne-tools\/\">n\u00e4chsten und letzten Teil<\/a> werden wir ein wenig spekulieren, wie der Prozess sogar noch weiter perfektioniert werden k\u00f6nnte \u2013 n\u00e4mlich durch eine angemessene Software-Unterst\u00fctzung.<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[96,100,68,116],"class_list":["post-632","blog","type-blog","status-publish","hentry","tag-aufloesungsunabhaengigkeit","tag-design-prozess","tag-icon-design-d","tag-konzeptuelles-design"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/632","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/632\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=632"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=632"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}