Ratchet iPhone app prototyper
Ratchet is a tool that let you mock up iPhone apps with HTML, CSS and JS. Great for testing flows and IA. Prototyping iPhone apps isn’t going to get much easier than this.
Resources for mobile designers brought to you by someone who cares. Follow along on Twitter or subscribe to the RSS feed. Excuse the mess while I get this thing off the ground.
Ratchet is a tool that let you mock up iPhone apps with HTML, CSS and JS. Great for testing flows and IA. Prototyping iPhone apps isn’t going to get much easier than this.
Sam Vermette (Shows, Transit) shares some mockups of iPhone apps he never finished. Unique insight in the process he goes through designing his apps.
The Photoshop and Lightroom teams are pleased to announce we will provide support for HiDPI displays in the coming months, including the Retina Display available on the new MacBook Pro. Supporting this new technology requires significant work by our product teams and we’re committed to provided a free update to all Photoshop CS6 customers this Fall and Lightroom 4 as soon as the work is complete.
I’m interested in how they’re going to tackle this. Will there be a shortcut to preview a canvas at 50% (and thus displaying all the pixels 1:1), will 50% zoom level be default on retina screens? Excited though, really glad Adobe’s rolling out update after update of an already amazing update that was CS6.
Chris Downer of Realmac (known for their gorgeous apps) wrote down some excellent tips you should keep in mind when designing for Apple’s new Retina MacBook Pro’s (and soon their entire line of laptops and desktop computers).
Neven Mrgan (you know, that guy I interviewed once) explains how he handles the artwork of The Incident.
I’m often asked this question about those games: do you draw your art at double size? If you think the answer is completely obvious, you’re not alone; I think so too. But since it’s not obvious to everyone, I’ll explain.
Sebastiaan de With wrote an interesting article about the obstacles he encountered while designing Alarm Clock for Android. Great insight into the world of designing for a thousand different devices.
How did we overcome the challenge of designing for such a wide target and ensure a legible design that didn’t appear banded, jagged or otherwise completely screwy on [insert screen technology]? […] The answer is quite simple: an exhaustive process of testing.
Huge collection of high-quality textures, totally free to use. Time to get skeuomorphic!
Louie Mantia (ex-product designer at Apple!) goes into detail about the different ways of styling buttons on iOS. I suggest you download the PSD-file he attached and take a look at the different layer styles being used.
A great way to learn how to design for mobile is by examining other apps. Even better is looking at the resource files and how they’ve been sliced. That’s where Crunch comes in; it allows you to extract all the assets from any iOS app you ever installed in one click (I suggest you start with taking a look at the insides of Apple’s new Podcast app). Also: Made in Belgium!
The past couple of months we’ve seen a steady stream of new tools that are perfect for mobile designers. We can now add Slicy by MacRabbit (known from their web-editing software Espresso) to that list.
The concept of Slicy is best explained in their screencast. Basically, it’s a magic slicing tool for your PSD files, wrapped in a beautiful and fun to use package (it even auto-generates your @2x assets by simply adding +@2x to your layer name).
The first tool I ever used to live-preview designs on iOS devices was LivePreview. The downside of this app was that you needed to have a window the size of your design visible on your Mac at all times so I started using Silkscreen which would send your designs to its iOS helper app every time you hit save. As PSD’s got bigger (retina, or just more complicated app designs), the time it took to save a file went from one second to 20.
Skala doesn’t have any of these issues. It uses Photoshop’s Remote Connection feature to display whatever you’re seeing in Photoshop on your device, together with a range of different display options.
Whether you hate noise textures or not, they still look amazing when used appropriately. Instead of having multiple assets for different background colors, NoisePNG allows you to generate a transparent PNG asset your developer can then combine with all the background colors and gradients you want.
Although described as a tool for iOS and Mac developers, this tool is equally handy for us designers to keep track of all the many resources we slice. Pretty sure the developer(s) you’re working with will appreciate you using it as well.
9to5Mac:
Both of these phones sport a new, larger display that is 3.95 inches diagonally. Apple will not just increase the size of the display and leave the current resolution, but will actually be adding pixels to the display. The new iPhone display resolution will be 640 x 1136. That’s an extra 176 pixels longer of a display.
Don’t worry, this isn’t going to be another Apple rumors site, but you might just need to start thinking how that interface you’re designing right now will scale on a taller iPhone…
Detailed article about the many design decisions that went into Frameographer’s interface. The result is an iOS app with a lot of unique interactions that looks and feels great.
