Create a blueprint with wireframes – This Mobile Life Season 1 Episode 10

Create a blueprint with wireframesWe have a new podcast episode for This Mobile Life! Season 1 Episode 10 (S1E10) is on “Create a blueprint with wireframes”. Its an in-depth chat on why we use wireframes and write requirements. We also discuss how we do it. I interview my good friend Jenny Hsu, business analyst from GPY&R.

Continue reading

Mobile wireframes – PicStagr.am

Here are some mobile wireframes that I have been playing with. Its my first attempt to wireframe anything. I call it “PicStagr.am”, a mashup of PicPlz and Instagr.am. These are two photosharing apps that I really like. I’ve also been using Path (love it), Liveshare (cool) and Color (sux).

So I’ve tried to create my own photo app, based on my experiences with these apps. But it pretty much ended up looking like Instagr.am.

Why? Because I really love the UI, look & feel and everything about Instagram. It is just so easy to use, and I have tried to replicate some of the features that I like about it. I believe that elements of it can be used for other mobile apps. The numbers don’t lie, 2.5 million users in 6 months. PicPlz has about 200k users. And hey, they say that imitation is the best form of flattery =)

Wireframe 1: Onboarding of friends

What I really like about instagr.am was how easy it was to onboard your friends. By that I mean how easy to add them to your new social network on Instagr.am. It uses facebook connect, and you can easily see who in your network is using the app. You just touch “add”, and voila!

There’s also an option to select all, but I havent included it. I rarely use any “add all” option. This interface is just so simple, and enticing to just touch the “add button” for all the people you want to include. You don’t have to go to each person’s profile. You already know who they are because you are friends with them on Facebook. Much easier than using a mouse, just tap “add”!

I’ve also included an option to add friends via email that are not in your facebook network of friends.

Wireframe 2: Uploading photos

What I like about Instagr.am, Path and also Dropbox is that they keep the UI really simple. And it looks gorgeous. Same with Airbnb as well. I think there’s been a renewed focus on user centered design and designing things that just look awesome. I believe that Apple helped pave the way for this.

Here, we’ve kept it really simple. I wanted to keep the layout very similar to the first wireframe. Give it a consistent user experience, so the user does not get confused and knows exactly where everything is.

You hold the phone camera in front of the subject and can select one of these four buttons at the bottom:

1. Share to social network: Facebook, Posterous, Tumblr, etc…

2. Filters: What Instagr.am does is that it makes ordinary pictures look extraordinary by giving it an older or tinted look. Potentially their business model could be selling additional filters. Filters that other people don’t have.

3. Camera icon

4. Delete the current pic

Button 1, 2, 4 cannot happen without taking the photo first. I like to keep the camera icon in the middle, because the user will naturally look for it.

I probably should have put a “done” button in Wireframe 1 in the top right hand corner as well. Its pretty much a save button.

Wireframe 3: View Stream

I actually really like what Picplz does with this. Their grid of pics shows the best pics from the public. Your network of pics on PicPlz is actually vertical. You scroll down, but sometimes it takes too long or you don’t want to see too many of a particular person’s photo. I also like how instagr.am also allows for content discovery of cool pics as well.

I like the grid format because it enables you to view a lot of thumbnail pics at once. Similar to how Facebook albums works, you can view them all and select the ones you like.

I’ve tried to keep a consistent format with top banner and bottom banner with the 4 icons.

That’s all for now. I’d love to hear your feedback on my first attempt to do some mobile wireframes and my analysis.

I’m out like digital cameras,

Matt Ho.

Wireframes – The blueprint of good web design

It is important before any website development or design begins, that wireframes are drawn up. Think first, then code. This is considered as best practice for designing websites. After the wireframes are finished and signed off, then designs and backend functionality are added.

What are wireframes?

So to my non-technical audience, I’m sure you are thinking, “what is a wireframe?”. My definition is that it is the layout of the fundamental elements of the website. It is the visual representation without the graphics.

Think about a new property development. You wouldn’t just build straight away. You would consult an architect, draw up a blueprint, thinking about the structure and where to put certain things like walls, windows, etc… I consider a wireframe as something similar. It is the skeleton of the website. Wireframes are also used for product design (i.e. real world products).

In an optimal process, we would produce one wireframe for each template. Some people like to also produce wireframes to show interactions on the page as well.

The developer will typically work off this “blueprint” along with documentation known as a functional specification (func spec). The func spec will describe in detail how the functions work on every page of the wireframe. E.g. How the interaction of a button on the website works.

Learning by doing

I’ve usually been involved with high level reviews of wireframes for websites in my role as an account manager. I believe that to be able to review wireframes properly and design a website, you need to have the skillset of being able to build a wireframe and understand what is good wireframing.

So I have decided to learn how to wireframe and to seek to learn what is good wireframing, interaction design, and user experience.

As someone that is non-technical (not a developer, designer or BA), I believe that the best way for me to learn is by doing.

Why you should wireframe

Here are the key reasons that you should start with wireframes:

  • It saves time and money. As it is less costly to update a wireframe than a design
  • Fairly easy to build a wireframe. There is software out there where you can easily drag in shapes, move boxes and fields around, add icons for function, construct a simple form, etc..
  • As it is the bare bones, people don’t get caught up in things like “this is the wrong colour”, which can easily be added later.
  • Can use this to build a clickable prototype to test.

Wireframing Software

At the most basic level, you could start by sketching it on a blank piece of paper or a whiteboard. It is about visualising the layout and the interaction. I would start with this (and I love sketching my ideas). I need to draw and it helps communicate my ideas.

There is also a lot of software products out there that you can use. Options include:

We use Visio at work and I’ve had a quick look at the other tools on this list. I’ve decided to try Omnigraffle, using the 14 day trial for the standard version. It looked fairly easy to use and had a large 3rd party community called Graffletopia which provides stencils. The stencils are wireframes you can build on top of.

As I’m interested in mobile and tablet apps, I downloaded a bunch of stencils for iPhone and iPad. It includes the Apple hardware elements, outline of the devices, keyboard, the UI (user interface), buttons. The examples I found look like this:

If you have any thoughts about wireframing, tips or good resources I should check out, please put them in the comments section.

I’m like sketching on paper,

Matt Ho.