I am quite confused in a way of designing interface elements (icons for example) for different resolutions and densities for Iphone apps for instance. I would be grateful to anybody who can put lights on these questions:
- On this link have been mentioned all Iphone devices and each resolution: http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions. If we are designing an icon, do I understand right that for Iphone 4s (326 ppi) and Iphone 6 (also 326 ppi) we will use the same icon (with the same dimension) and we don't need to resize it?
- Do we have to resize design element only when device has resolution difference? It doesn't make sense in a case when there is a difference in device dimensions only.
- Take a look on this article: https://www.smashingmagazine.com/2010/11/designing-for-iphone-4-retina-display-techniques-and-workflow/. Vector is definitely a necessity for perfectly quality all the time.
But, when reading that article I can't understand, why vector-based images tends to be more resource-hungry and lacks pixel level control?
What is the perfect practice to design icons and handle widely different resolutions and pixel densities?
I thought that the best practice is to create vector graphics and export as SVGs or create an icon font. Since the pixel density of devices change, we can't easily plan for them all so you'll be providing many duplicate images at different sizes.
But, for now I've got lost absolutely.
I also found that Photoshop allows for greater flexibility in layering effects (for drop-shadows, gradients… for an embossed look).
What if icon has to be designed in photoshop? In this case we must built each icon for specific devices, at specific resolutions: bespoke designs for each required size. It’s more work, but pre-rendering images ensures everything always looks as good as possible. Am I right here.
P.S.: Please, I am appealing to all UI specialists here. Could you bring an order in this issue.