{"id":610,"date":"2008-08-29T13:48:56","date_gmt":"2008-08-29T11:48:56","guid":{"rendered":"https:\/\/www.centigrade.de\/blog\/en\/?p=610"},"modified":"2010-05-11T11:21:42","modified_gmt":"2010-05-11T09:21:42","slug":"aufloesungsunabhaengiges-icon-design-teil-1","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/aufloesungsunabhaengiges-icon-design-teil-1\/","title":{"rendered":"Aufl\u00f6sungsunabh\u00e4ngiges Icon Design – Teil 1: Einf\u00fchrung in das Thema Aufl\u00f6sungsunabh\u00e4ngigkeit"},"content":{"rendered":"

Vor ca. zwei Jahren bereits gab es eine lebhafte Diskussion zum Thema aufl\u00f6sungsunabh\u00e4ngige User Interfaces im Kontext von Icon Design. Ein interessanter Ausgangspunkt dieser vergangenen Diskussion ist Sven Porsts Blog Artikel<\/a>. Zum damaligen Zeitpunkt waren aufl\u00f6sungsunabh\u00e4ngige Systeme und Technologien, wie Mac OS X Leopard, Windows Vista oder Silverlight entweder noch Zukunftsmusik oder wurden nur von einer kleinen Gruppe von Insidern genutzt. Heute, fast zwei Jahre sp\u00e4ter, sind dies etablierte Marken \u2013 Grund genug, das Thema erneut zu beleuchten und zu sehen, ob sich in der Zwischenzeit etwas ver\u00e4ndert hat und, falls ja, was.
\n
\nNachdem ich den ersten Entwurf dieses Artikels fertig gestellt hatte, ist mir bewusst geworden, dass es sinnvoll w\u00e4re, ihn in vier Teile zu gliedern. Der erste Teil wird sich mit Aufl\u00f6sungsunabh\u00e4ngigkeit im Kontext von Icon Design befassen, w\u00e4hrend der zweite Teil die zwei Arten, auf die sich Aufl\u00f6sungsunabh\u00e4ngigkeit erreichen l\u00e4sst, darstellt. Der dritte Teil zeigt, wie Centigrade den derzeitigen technischen Beschr\u00e4nkungen im Arbeitsalltag begegnet. Zum Schluss werde ich eine Anregung geben, wie besserer Tool-Support die Entwicklung von aufl\u00f6sungsunabh\u00e4ngigen Icons vereinfachen k\u00f6nnte.<\/p>\n

Aufl\u00f6sung vs. Pixeldichte<\/h3>\n

Beginnen wir mit einer kurzen Einf\u00fchrung in das Thema Aufl\u00f6sungsunabh\u00e4ngigkeit im Allgemeinen. In der Regel wird unter \u201eBildschirmaufl\u00f6sung\u201c die Anzahl der Pixel, die ein Bildschirm in horizontaler und vertikaler Richtung anzeigen kann, verstanden. Ich habe schon Leute, die sich kaum ihre eigene Telefonnummer merken k\u00f6nnen, sagen h\u00f6ren: \u201eIch will eine 1920 mal 1080 Bildschirmaufl\u00f6sung, damit ich meine HD-Filme gucken kann\u201c. Auch wenn die Pixelanzahl nat\u00fcrlich wichtig ist (um diese Filme zu sehen), sagt sie dem K\u00e4ufer jedoch noch \u00fcberhaupt nichts dar\u00fcber, wie gro\u00df ein Pixel ist \u2013 und dementsprechend auch nichts dar\u00fcber, wie gro\u00df der Bildschirm an sich ist.<\/p>\n

Das iPhone beispielsweise hat eine Aufl\u00f6sung von 480 x 320 Pixel \u2013 eine ganze Menge \u2013 und man k\u00f6nnte ein gro\u00dfes Ger\u00e4t erwarten, wenn man nur diese Zahl h\u00f6rt. Und tats\u00e4chlich, wenn die Pixel so gro\u00df w\u00e4ren wie die eines Standard-Computermonitors, w\u00fcrde das iPhone einen Bildschirm mit einer Gr\u00f6\u00dfe von ca. 8 x 12 cm haben. Nat\u00fcrlich w\u00e4re das ein ziemlich unhandliches Ger\u00e4t, das vermutlich auf dem Markt wenig Akzeptanz gefunden h\u00e4tte. In Wahrheit ist der Bildschirm aber nur 5 x 7,5 cm gro\u00df (dies entspricht einer Bildschirmdiagonale von 3,5 Zoll). Diese kleinen Abmessungen sind m\u00f6glich, weil die Pixel des iPhones so klein sind, dass 160 von ihnen auf einen Zoll passen. Deshalb spricht man von einer Pixeldichte von 160 ppi (pixels per inch\/Pixel pro Zoll) im Vergleich zu Standard-Computermonitoren, die derzeit eine Pixeldichte von nur 100 ppi aufweisen.<\/p>\n

Was ist aber nun der Grund daf\u00fcr, die Pixel kleiner zu machen und so die Pixeldichte zu erh\u00f6hen? Warum nimmt man nicht einfach weniger Pixel um kleinere Bildschirme zu bauen? Die Antwort ist nat\u00fcrlich simpel: Eine h\u00f6here Pixeldichte f\u00fchrt zu verbesserter Bildschirmsch\u00e4rfe. Wenn Sie je die Gelegenheit hatten, einen kristallklaren Text auf einem iPhone Bildschirm zu lesen, werden Sie wissen, was ich meine.<\/p>\n

Die Begriffe Pixeldichte und Bildschirmaufl\u00f6sung werden h\u00e4ufig verwechselt. Wenn ich im Folgenden von Bildschirmaufl\u00f6sung spreche, meine ich also die absolute Pixelanzahl. Wenn ich hingegen von Pixeldichte spreche, beziehe ich mich auf das Ma\u00df Pixel pro Zoll. Ich werde au\u00dferdem auf den Begriff dpi (dots per inch\/Punkte pro Zoll) verzichten, da dieser eher f\u00fcr Tinten-basierte Drucker angemessen ist als f\u00fcr Pixel-basierte Bildschirme, f\u00fcr die ppi die angemessenere Einheit ist.<\/p>\n

Schrumpfende Icons<\/h3>\n

Aber wie h\u00e4ngt das jetzt alles mit Design zusammen? Wie bereits erw\u00e4hnt ist es so: Je kleiner die Pixel bei konstanter Pixelanzahl sind, desto weniger Platz nehmen sie ein. Ein 16×16 Pixel Icon ist auf einem Standard 100 ppi Monitor ca. 0,40 cm\u00b2 gro\u00df. Auf einem 160 ppi iPhone Bildschirm w\u00e4re dasselbe Icon nur 0,25 cm\u00b2 gro\u00df. Obwohl Bildschirme mit 300 ppi nicht so h\u00e4ufig sind, wie damals von einigen Technologiefanatikern prophezeit, geht der Trend doch zumindest in Richtung solch hoher ppi Ger\u00e4te. Eine anschauliche Tabelle \u00fcber die Entwicklung der ppi-Werte<\/a> in den letzten 20 Jahren st\u00fctzt diese Aussage. 300 ppi Bildschirme existieren also tats\u00e4chlich (siehe dazu auch diese Pressemitteilung<\/a> von Samsung \u00fcber ein Ger\u00e4t mit hohem ppi Wert). Die hohe Pixeldichte solcher Ger\u00e4te w\u00fcrde unsere 16×16 Icons auf eine Gr\u00f6\u00dfe von nur 0,14 cm\u00b2 schrumpfen lassen \u2013 jeder Pixel unseres Icons w\u00e4re dann so winzig wie ein menschliches Haar d\u00fcnn ist. Nat\u00fcrlich w\u00e4re ein solches Icon zu klein, um einfach erkannt zu werden.
\n\"Shrinking
\nEs ist offensichtlich, dass eine h\u00f6here Pixeldichte durch den Einsatz gr\u00f6\u00dferer Icons (z.B. 32×32 Pixel statt 16×16 Pixel) kompensiert werden muss. Und das ist der Punkt, an dem die Diskussion \u00fcber aufl\u00f6sungsunabh\u00e4ngiges Icon Design beginnt: Wie k\u00f6nnen wir effektiv Icons erstellen und ausliefern, die auf verschiedenen Bildschirmen, von niedriger bis hin zu hoher Pixeldichte, funktionieren? (Auch auf die Gefahr hin, kleinlich zu wirken \u2013 eigentlich m\u00fcsste man die Diskussion \u00fcber \u201eppi-unabh\u00e4ngiges Icon Design\u201c f\u00fchren).<\/p>\n

Im n\u00e4chsten Teil<\/a> werde ich aufl\u00f6sungsunabh\u00e4ngiges Icon Design aus der technischen Perspektive betrachten und die existierenden Tools und deren Grenzen diskutieren.<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[96,68,78],"class_list":["post-610","blog","type-blog","status-publish","hentry","tag-aufloesungsunabhaengigkeit","tag-icon-design-d","tag-iphone-de"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/610","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\/610\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=610"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}