Nav

Via Medium: Goals

Goals

Sketching a short story

1 2 3 4 5 6

Just sketching one page at a time.

Via Medium: “Inspiration to-do”

Inspiration to-do

Hands

It is important to use your hands. This is what distinguishes you from a cow or a computer operator.

— Paul Rand

An iOS7 animation experiment

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.

spotifymockups

A few details:

  • The screen title moves when zooming out of the view so you can read it easily.
  • You pull the player down to see the history, and push it up to see your queued tracks.

The animation should explain more:

Scary times

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.

This is brave

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.

“How To Change Cars Forever”

One those awesome ads that get you on your feet & ready to kick:

via Dodge

(don’t think too much about it though, you’ll ruin it)

On Wireframing

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:

Summary:
In Frank Chimero’sThe Shape of Design”, he gives a great analogy to the creative process of a painter:

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.

Browser chrome PSD for website mockups

Browser chrome

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:

  • A view port of 1280px by 1024px
  • Guides for a 960px grid based on the http://960.gs
  • Edittable URL and page title
  • The chrome (and the background behind the browser) sits on top of the mockup, so it acts as a mask for your content

You can download it here

Follow me on twitter.com/isnav for updates