0

when designing iphone icons,but in general designing something that is bigger or smaller than my screen size, I have problems in understanding how far can I go with using smaller/larger fonts (and drawings) so that everything is clear and fully readable when it is seen by the user at 100% its size.

Is there any trick? or something I should know?

Improve this question

2 Answers 2

Reset to default
2

It sounds like you're having issues with target devices having a higher pixel density, or PPI, than your monitor. It's a confusing topic but there are a few things to keep in mind and a few options to help.

Basically, we design for the screen at 72dpi because there are 72 "points" in an inch. This makes 1pt in your document equal to 1 "pixel", theoretically. Unfortunately most screens nowadays are 96 or higher pixels per inch, so working at 72 dpi is mostly helpful only for specifying pixel based type sizes.

The reason it's hard to estimate a design for an iPhone 4 or other high resolution device is that the design will appear literally 2-3 times smaller than it does on your monitor. Regardless, when designing for the screen changing dpi (dots per inch...for printing) in your document has no effect on anything but point size ("a pixel is a pixel"). You can never change PPI on a document.

Now, with that understood, there are a couple ways to be able to preview what you're making at the actual target size:

  • export images and view them in the device if possible (guess and check)
  • if designing for iphone and you have one, liveview is indispensable
  • if you don't have the target device, But you know the resolution, you can set that as the dpi in your document and try printing to get an approximate mockup of actual screen size
  • the most low tech method is zooming out to the target size in your document window...this can be a good quick check for button and icon sizes

Hope that helps!

Improve this answer
2
  • and how you behave with much bigger illustration (let's say a big poster) to see if everything looks clear (font sizes and drawings) at 100% its size? there's any rule to obej when designing or you just can print it out and check??
    – luca
    Commented Mar 2, 2012 at 8:36
  • I think printing it out is the only real way to know. I suppose you could mock it up in a photograph but it wouldn't be as effective
    – pdv
    Commented Mar 2, 2012 at 14:47
1

In most cases specific to iOS there's more involved than just resizing your high-res images down to the lower-res dimensions.

For example, you may have a nicely detailed image for your high-res @2x app icon but you may take a lot of those details out of the low-res version because those details start to get muddy or illegible when simply resized at the smaller dimensions.

It might be necessary to do pixel-level manipulation on the lower-res version that you wouldn't do on the high-res version.

It sounds simple, but in the end you just have to ask yourself if you can clearly make out and read what you've created. It's okay to have wide variation between the normal image and the @2x image.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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