3

As you know phones like the Nexus 5 and Moto G come with virtual navigation navigation bar like in the stock Android with the back, home and multitask buttons and there are phones like the new Asus Zenphone etc. which have the hardware/capacitive buttons.

Both the Moto G and phones like the Zenphone have a 720x1280 resolution.

Around 144pixels go to the Moto G virtual navigation bar compared to other phones with zero pixels allotted to them for the same purpose. How can I overcome this when designing wireframes?

Moto G with Virtual navigation bar

Other phones without the virtual navigation bar

I need my wireframes to look exactly the same on both kind of phones, I usually add the navigation bar in my psd and do not use the space behind it, but on phones with hardware navigation buttons, this space remains empty? I asked the developer and he has no clue about this? I hope I am clear.

Improve this question
4
  • Do you need your wireframes to be pixel perfect? I don't understand the problem.
    – mcrumley
    Jul 16, 2014 at 14:34
  • Yes I need my wireframes to be pixel perfect. How do I achieve this for phones with virtual navigation bar and the ones without one?
    – Dheeraj Shetty
    Jul 17, 2014 at 6:33
  • Well if they really need to be pixel perfect then it's quite simple. Do a separate wireframe for each Android device on the market at the moment. Which, according to Wikipedia is about 400-odd (excluding all the miscellaneous brand Chinese devices that pop up every week or so).
    – JonW ♦
    Jul 17, 2014 at 8:05
  • Thanks for the reply but how do others approach this? Do they design wireframes for apps keeping in mind the virtual navigation bar or not, or is it just me taking this too seriously?
    – Dheeraj Shetty
    Jul 17, 2014 at 8:37

2 Answers 2

Reset to default
3

First off, wireframes are not high-fidelity screens, so striving pixel perfection should not be the main goal.

Having said that, Android screens are dependant on size as well as density. Reading up on Google's screen support page should help clarify.

Having developed for Android before, it's more important to create a basic layout, than to achieve total perfection. Start off with the most popular phone for your audience (Galaxy or Nexus line). Create a screen for each virtual and hardware buttons, and then move on to one or two more devices if you have time.

For your Hi-Fi, just pick a phone - I prefer the Nexus 5 as it looks cleaner than the Galaxy S series since there's no texture - and then put your work inside that.

PS. When exporting, help your dev out and make sure you save for xhdpi, hdpi, etc.

Improve this answer
0
1

1) Wireframes should NEVER be pixel perfect.

2) When designing apps for multiple screens, design with room for "play" so that small differences between screen sizes don't affect your design. So no - no pixel accurate positioning of elements unless your short-term goal is to reside in an asylum.

3) Pick 3 of the more common Android resolutions. Assume your work on that for testing.

4) Cultivate great a relationship with your developers. Working together is FUNDAMENTAL, by setting the standard by which individual devs can resolve small individual issues.

Don't mean to sound bossy with the bullet points, but they get the job done :)

Cheers!

Improve this answer

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.