It is important to use your hands. This is what distinguishes you from a cow or a computer operator.
— Paul Rand
Last week, I did a small exercise to play with the new layer animations in iOS7. I took the Spotify app and tried to create an alternate UI which would allow me to play with some new animations. The zoom out side menu is a concept that I saw some folks playing with on dribbble and I decided to take that as a starting point.
A few details:
The animation should explain more:
I really enjoy creating stuff and design intrigues me like nothing else. For the past few years, I’ve been trying to grab any opportunity that allows me to spend as much of my time tinkering and exploring the range of design disciplines. I still feel a little uncomfortable calling myself a "designer".
I am still learning the basics of what makes up things that I love and how I can use it to create such stuff myself. I am still trying to learn about the building blocks of design as a general practice. Learning the ins and outs of creating gradients to make shiny stuff always felt way too specific, it never appealed to me and I always felt a bit lazy to spend too much time on it.
With the new iOS7, I feel designers won’t be able to rely much on pixel skills and will have to really understand how interactions create experiences that stand out and delight. This is scary to me. But I’m excited as well, even if only as a foolish kid who knows too little.
One thing is clear though. If you’ve called yourself an "iPhone UI designer" for the past half a decade – you’re already obsolete, because that UI doesn’t exist anymore.
Designers are usually the most aware of the problems in their work, and I can imagine a bunch of them in Cupertino reading Twitter during the keynote saying, “I told you we had to fix that before we shipped!” Every time I assume a talented person isn’t painfully aware of the flaws in their work, I am wrong.
Frank Chimero’s thoughts on the new iOS7 beta release – which seems to have shipped in, well, a beta state. There’s all kinds of great about that actually. There is little sense in thinking that the talented guys at Apple don’t realize what they have shipped. Kudos to them for being so brave.
One those awesome ads that get you on your feet & ready to kick:
(don’t think too much about it though, you’ll ruin it)
Last weekend I was invited to give a (very) short talk at the Singapore iOS Hackathon about wire framing mobile apps. Instead of going into a “how-to”, I decided to talk about “why”. I was going to hang around all day, so I thought if someone needed help on how to get started, I could always talk to them one-on-one.
These are the slides from my talk:
Imagine an artist working on a painting in his studio. You probably see him at his easel, maulstick in hand, beret on head, diligently mixing colors on his palette or gingerly applying paint to the canvas, working from dark to light to recreate what is before him. You may see him judging the light, or speaking to his model, or loading his brush with a slated green to block in the leaves in his muse’s hair.
But, if you have ever painted, you know that this image is not a full picture of the process. There is a second part where the artist steps back from the easel to gain a new perspective on the work. Painting is equal parts near and far: when near, the artist works to make his mark; when far, he assesses the work in order to analyze its qualities.
Painting’s near and far states are akin to How and Why: the artist, when close to the canvas, is asking How questions related to craft; when he steps back, he raises Why questions concerned with the whole of the work and its purpose.
If the development (coding) is the “how”, I see wire framing phase as being the “why”. It’s important to think of your product from a holistic perspective. It’s easy to get lost into achieving technical wins, but it’s equally important to think about why those are necessary at the same time.
Wire framing should be treated as a process where you explore all the possibilities – of a product, as well as an interface. Thinking of the “how” (be it coding or the specifics of interface design) can sometimes be too restrictive.
This is close to the thoughts I had in mind when I designed Sketchkit – a wire framing tool meant to help you create quick wireframes (so you have more time to iterate and explore) in Keynote. Right now it’s only available for wire framing iPhone apps.
Of course there are quite a few “keynote based” wire framing tools out there, but they all try too hard to look like the actual UI. This distracts you as a UX researcher and misleads the client.
My slides also contained wireframes to an app that I had been working on last year with a few other friends from Singapore – these were available for anyone who needed an “idea” to start their hacking with.
It’s essential to step back and think about the “why”, it can reveal quite a few insights and uncover startling surprises – as made evident in the last few slides ;-)
Fun fact: the slides are based on a grid inspired by the Marber Grid (designed in 1961) which is used as the base grid for the covers of all Pengiun Books.
When I make website mockups, I’ve been putting a browser chrome (taken from safari) around them. It sometimes helps me visualize things better. I’m sharing the psd so it might be of use to someone else as well. The psd includes:
You can download it here
Follow me on twitter.com/isnav for updates