The Uncorked Workbench
A place where we experiment, explore, test and innovate.
When developing a product, whether it’s a mobile app or mobile website, formulating the information architecture and user experience is a major portion of the project. We use a variety of wireframing and mockup tools to start creating the product flows, formulate the user experience, and build a foundation for the user interface. One major tool for this process is Omnigraffle, which offers a variety of stencils to help interactive planners quickly access common frameworks and standard graphics used in interactive products and flows. During a recent project, I realized I didn’t have a stencil to help demonstrate how the screens should transition after a user action (swiping, tapping, flicking, etc.) So I created this new stencil that shows some of the most common screen transitions and these graphics can be added to wireframes to clearly show how each screen should transition in or out.
Download it here and load it into your Stencils folder for Omnigraffle.
Check it out on graffletopia.
Recently I’ve been experimenting with the Processing language to see how we can push its boundaries when creating images, animations or interactions. I came up with this idea while falling asleep one night. I place a randomly rotated letter on random pixels that match up with text (and logo) in our logo. The color is matched to the color of the pixel. The image below was generated using a Processing script. Click here to see it in action.
We tested 5 different iphones with different operating systems to see if animations were rendered the same across all versions. What did we find out? Definitely not.
As expected the iPhone 3G was a little slower than the newer devices, but notice how long the iPhone4 on iOS 4.1 takes. What should you take away from this? Upgrade your iOS if you have a iPhone 4 still on 4.1.
Phones tested:
- iPhone 3G iOS 4.2.1
- iPhone 3GS iOS 4.2.1
- iPhone 4 iOS 4.1
- iPhone 4 iOS 5
- iPhone 4 iOS 5
When creating a mobile website you need to consider a few different sized phone screens and phone resolutions. Here’s the Uncorked guideline template to make sure the most important information on your screen fits within the safe areas on most mobile phones.
View the link below on a mobile device to get a better idea of where the lines fall on your device.
View it on a phone.
The psd, available below, is setup in the standard iPhone retina size, 640px by 960px.
Download the psd »
Here’s a helpful tool for viewing pixels on mobile devices. One is made at only standard size. The other is designed to adapt when the user is on a device with higher density resolutions or retina displays. Make sure to check these out on a mobile device (or multiple) to see the differences in screen resolutions and sizes.