Using Soulver for design
When done well, screen design can get quite technical. Grids, guides, gutters and ensuring distributed elements land on whole pixel values becomes complex when there’s many moving parts.
There’s nothing wrong with shuffling and resizing layers around until reaching the desired outcome, but I often get quicker results by breaking out a calculator. And for this kind of work, Soulver is my favourite, because of the way it handles constants and multiline equations (disclaimer: Acqualia have no affiliation with Bjango, I just like their app). It’s a nice mid-point between a physical calculator (remember those?) and a spreadsheet, often trumping both for speed for designer-y calculations.
It’s possible to add custom constants to Soulver. Here’s mine.
Yes, they’re all in iOS points, rather than Retina pixels. phi and gr are the Golden Ratio. iphi and igr are the inverse of the Golden Ratio. With those constants set, it’s possible to create an expression to work out how wide each tab bar button would be on an iPhone, if you wanted four even width buttons.
What if you needed a 10pt margin each side?
What about the same for landscape orientation?
Splitting the iPhone 5’s display into two vertically by the Golden Ratio, but excluding the status bar?
Let’s say you’re working on an iPad design, and you’d like to figure out the width of columns in a two column design with margins, a gutter and you’d also like to see how it translates to portrait and landscape orientation.
The results fall on non-integer values (464.5 and 336.5), which isn’t ideal. What if we tweak the gutter size?
That’s better. You can now choose the rectangle tool in Photoshop, and with a single click on the canvas, type in the exact value you need.
Perfect.
Update: If you’d like to use my Soulver variables, Marc Boquet has done all the work for you, and shared his variables preferences file: Variables.plist on Gist
Published 17 July 2013.