Monday, October 24, 2011
Places Demo & The Graphics Designer BoF
A day before the BoF Martin created this Graphic PSD, he and Chen worked quite allot to get it into a working demo state. I initially dismissed the attempt to do this when I glanced at the graphic he prepared, there are several "mistakes" you can see in the graphics if you have any experience in building UI's to scale to multiple resolutions/devices.
The first and obvious "mistake" is the background, its a texture. If we will scale it, it would look "odd" and when a device is rotated we won't have an option. Not to mention supporting multiple device resolutions.
Sure we can add a version for every resolution but once you start going down that path you enter the maintenance hell that is the true cost of software development.
The second mistake isn't quite as obvious, the icons for the 4 options are round and perfectly aligned to the content. This might not seem like a problem but it is quite a big one. The font will have different sizes on different devices (due to device density variation) but the icons have a fixed size that doesn't depend on the font size. Due to the box that surrounds the font the text effectively becomes dependent on the icon size. So the text might appear grotesquely small or freakishly large in comparison to the icon and the box that surrounds it.
Martin "solved" this by using a bitmap font, however that's a poor solution since it might look good on one device and awful on a higher/lower DPI device.
The last major issue isn't as obvious, the map on the bottom wouldn't have enough space in landscape mode due to the large amounts of whitespace distributed all around.
This might actually be the easiest issue to resolve by moving the map graphic to the side in landscape mode.
Its unclear from the graphic but Martin intended to have the map animate and the cities in the bottom to be swipeable, Chen and Martin actually implemented this full demo with a few additional screens not shown here. In the next few weeks I will try to go over the process of creating a demo like this from a PSD deliverable and adapting that demo to partially resolve these various issues I raised.