1

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:

  1. 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?
  2. 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.
  3. 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.

  • 1
    Welcome to gd.SE! Your question is very broad, you should break it down in multiple separate questions to get better answers. – Luciano Mar 2 '16 at 9:37
1

If you are making graphics, make Scalable Vector Graphics (SVG) because you cannot necessarily know the pixel size your graphics will be rendered at. Generally speaking, the way you support multiple displays and pixel resolutions is by scaling. That is why SVG is so popular today.

Where you have to use bitmap images — for example, photos — you have to include one photo for each pixel density:

  • 1x pixel density means the display shows 1 pixel of your photo on 1 pixel of the display

  • 2x pixel density means the display shows 1 pixel of your photo on 4 pixels of the display, because the 2x works in both width and height.

A key thing to understand is the concept of “virtual pixels.” You still do your layout in 1x pixels as we have done for decades now, but today they are virtual pixels, not real pixels. They may be shown at 1x and match up to real pixels, or they may be shown at 2x and not match up to real pixels.

So, for example, if your layout calls for a photo to be displayed at a maximum size of 960x540, you have to provide 2 photo files:

  • a 960x540 version called “photo.jpeg” for 1x displays

  • a 1920x1080 version called “photo@2x.jpeg” for 2x displays.

What is confusing here is that you refer to them both as being “960x540” photos. The 1x one is a “960x540 photo at 1x pixel density” (960x540 in real pixels) and the 2x one is a “960x540 photo at 2x pixel density” (1920x1080 in real pixels.)

Note that pixel densities can go higher than 2. So you follow the logic up as you support screens with additional 3x assets.

  • Hello Simon. Thanks for contributing to GD. Please take into account the quality of questions before you choose to answer them. I've noticed that you tend to answer many questions that are later closed by the community. Please try to refrain from answering questions that do not meet our community requirements as it encourages more questions like them to be asked. Thanks a lot! If you have any questions, we'll be happy to talk about it in the Graphic Design Chat – Zach Saucier Mar 2 '16 at 20:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.