Sketch, Wireframes, Prototypes, and more: A question of fidelity

I would love to say that I seamlessly transitioned from ideation to producing wireframes. As I cannot, I will take the opportunity to explain how I eventually made this transition by better understanding the differences between sketches, wireframes, prototypes, and mockups (comps). Also, it’s a reminder of why hands-on practice is needed to fill in the gaps that theory often cannot bridge.

So why did I need to learn the distinctions between sketches, wireframes, prototypes, and mockups to make wireframes? The reason is that they’re all similar and really only differ in fidelity (or how much resemblance there is to an actual, polished product). As I read articles about wireframes to get tips, everyone had a slightly different approach to what a wireframe was exactly.

The difficulty is that with the exception of mock-ups, the other three– sketches, wireframes, and prototypes– can be executed with various levels of fidelity, which at each extreme makes them begin to resemble each other. A hi-fidelity sketch begins to resemble a typical wireframe. An “interactive” wireframe is a prototype, even if that means manually moving papers around in front of the user. Continue reading “Sketch, Wireframes, Prototypes, and more: A question of fidelity”

Idea Dumping

Last week, I posted a few pages of sketches with ideas for a restaurant discovery mobile site.

Today, I am posting yesterday’s massive ideation sketches, and what’s interesting is the difference between the two results, despite no other work done in between.

Whereas the previous set honed in on UI elements and rather specific details, this set, in the quickness of its execution, contains a wide range of ideas. Continue reading “Idea Dumping”

Ideation through Sketching

Normally, when beginning the ideation process– coming out with so many ideas– we don’t want to confine our solutions to a specific channel.

Initially, I wasn’t sure how much detail to put into my sketches. I decided eventually that I could go into detail once, or with each variation, but afterwards, the other screens wouldn’t include it or only a simplified version.

For example, for Pokémon Go players, some entrepreneurs helped them catch Pokémon automatically without going to their phone through a physical clip they keep with them which notifies them of nearby Pokemon and successful catches through lights. If they had stuck to only phone application solutions, they would have missed out on a good idea.

However, my learning project specifically asks me to design a website for a phone, so I will skip that step of imaging different channels. I’ll go directly to figuring out a mobile-first responsive website that helps users discover restaurants, cafés, bars, and other interesting finds.

The customer journey maps come in handy here. Although scenarios would have sufficed, the journey maps provide a push to come up with ideas to solve frustrations and pains. Continue reading “Ideation through Sketching”