{"id":16,"date":"2008-08-29T13:48:56","date_gmt":"2008-08-29T11:48:56","guid":{"rendered":"http:\/\/www.centigrade.de\/blog\/en\/?p=16"},"modified":"2020-01-25T19:50:05","modified_gmt":"2020-01-25T18:50:05","slug":"resolution-independent-icon-design-part-1","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/en\/blog\/resolution-independent-icon-design-part-1\/","title":{"rendered":"Resolution Independent Icon Design – Part 1: Introduction to Resolution Independence"},"content":{"rendered":"

About two years ago there have been some lively discussions on resolution independent user interfaces in the context of icon design. An interesting start page for past discussions is Sven Porst\u2019s blog article<\/a>. At that time, resolution-independent UI-related products such as Mac OS X Leopard, Windows Vista or Silverlight were either yet to come or have been used solely by a small bunch of insiders. Now, almost two years later, these are established brands \u2013 reason enough to shed some light on this topic again and to see if something has changed during this time, and if so what.<\/p>\n

After finishing my initial draft, I thought it would make sense to split this article into a series of four parts. The first part will acquaint you with resolution independence in the context of icon design while the second part outlines the two possible ways of achieving such resolution independence. The third part shows how Centigrade deals with current technical constraints during our everyday work. Finally, I will make an out-of-the-box suggestion on how a better tool support could ease the creation of resolution-independent icons.<\/p>\n

Resolution vs. Pixel Density<\/h3>\n

First of all, let\u2019s start with a quick introduction to resolution independence in general. Most commonly, a monitor\u2019s resolution is understood as the number of pixels it can display in horizontal and vertical direction. I heard people that can hardly remember their own phone number say: \u201cI want a 1920 by 1080 resolution display so that I can watch my HD movies\u201d. Though the count of pixels in each dimension is indeed important (to watch those movies) it does not tell the buyer anything about how large one pixel is and in turn how large the display\u2019s physical size is.<\/p>\n

The iPhone, for example, has a resolution of 480 x 320 pixels \u2013 that\u2019s pretty many pixels, and one could expect a huge device just by hearing these numbers. Sure enough, if the pixels were as large as those of a standard desktop monitor, the iPhone\u2019s display would have been about 8 x 12 cm in size. Needless to say, that this would have been a pretty clumsy device with small market acceptance. In fact however, the display is just 5 x 7,5 cm in size (which corresponds to a display diagonal of 3.5 inches). The display\u2019s small dimensions can be explained by the iPhone\u2019s pixels being so tiny that 160 of those fit into one inch, which is why we talk of a pixel density of 160 ppi (pixels per inch), in contrast to standard desktop monitors which currently just have a pixel density of 100 ppi.<\/p>\n

So what\u2019s the reason for making pixels smaller and this way increasing the pixel density? Why not just offer less of them in order to build smaller displays? The answer is of course a simple one: An increased pixel density results in improved display sharpness. If you ever had the chance to read a crystal clear text on an iPhone display, you will get the point.<\/p>\n

The terms pixel density and display resolution are oftentimes confused. However, in the following when I speak of display resolution I think of pixel count. In contrast, when I speak of pixel density I refer to pixels per inch. Similarly, I will not use the term dpi (dots per inch) as this is more fitting for ink-based printing devices rather than for pixel-based screen devices for which ppi is more appropriate.<\/p>\n

Shrinking Icons<\/h3>\n

Now, how does this all relate to icon design? As stated, the smaller the pixels are at a constant pixel count, the less physical space is occupied by them. A 16×16 pixel icon on a standard 100 ppi monitor is about 0,40 cm\u00b2 of size. On a 160 ppi iPhone display, the same icon would be just 0,25 cm\u00b2 large. Though displays of 300 ppi aren\u2019t as common as expected by technology geeks, the trend goes towards such high ppi devices. An illustrative table on the development of ppi values<\/a> in the last 20 years supports this statement. In fact 300 ppi displays do exist (see this press release<\/a> about a high ppi device from Samsung). The high pixel density of such devices would shrink our 16×16 pixel icon to a physical size of only 0,14 cm\u00b2 \u2013 each pixel of our icon would be as tiny as a human hair is thin. Of course, such an icon would be too small to be easily recognizable.
\n\"Shrinking
\nObviously a higher pixel density must be compensated through the use of larger icons (e.g. 32×32 pixels instead of 16×16 pixels). And this is where the discussion about resolution-independent icon design starts: How can we effectively create and deliver icons that work on different screen devices from low to high pixel densities? (At the risk of splitting hairs, the discussion should in fact be about \u201cppi-independent icon design\u201d).<\/p>\n

In the next part<\/a>, I am going to look at resolution independent icon design from a more technical perspective, briefly discussing what tools exist and what are their limitations are.<\/p>\n","protected":false},"author":5,"featured_media":0,"template":"","tags":[20,22,21],"class_list":["post-16","blog","type-blog","status-publish","hentry","tag-icon-design","tag-iphone","tag-resolution-independence"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/16","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/users\/5"}],"version-history":[{"count":0,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/blog\/16\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/media?parent=16"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/en\/wp-json\/wp\/v2\/tags?post=16"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}