Cyclo Redesign

I redesigned the entire interface today – well, not exactly a complete redesign but all menu elements needed resizing. Apple’s guidelines suggest 42px hit areas & mine were sitting at 32px (on the main menu), this seemed quite large to me & I thought it would be fine. When viewed on an ipad however, as the pixel density is different (see previous post) it shrinks the entire interface somewhat. Everything looks really sharp but having a “test-clicking” session with a friend revealed that these hit areas would indeed be too small.

This also brings up another tricky area. Initially I had intended to design for retina display iPads – this became problematic as everything effectively “doubles up”. That is, a canvas size of say, 1024 by 768 becomes a 2048 x 1536 canvas size from a design perspective. This is great and it is what gives these new Apple devices such sharp displays – but I do not have a retina display Apple and so the 2048 x 1536 canvas size I needed to design in was bigger than the size of my monitor. It also felt ridiculous designing HUGE buttons and very difficult to get a gauge on exactly how the interface was pulling together. So, for the purpose of this exercise I went for the 1024 x 768, iPad 1 & 2 screen size – which is non-retina and a lot easier to design for. I hope that software developers are thinking about these issues and creating solutions for these kind of resolution design problems. Multi screen size design is problematic.

The pixel density of Apple devices complicates this further – for example a 1024 x 768 screen size for iPad is actually quite large when viewed on a desktop or laptop. When viewed on an iPad (which has a tighter pixel density), everything shrinks somewhat. I quickly got into regularly emailing screenshots over to an iPad to check the sizes of graphics.