Wireframes, Mockups and Prototypes (Post #12)

The image above is one of the screens from our original wireframe. We just had a mini white board and would draw screens and then take pictures and send them to each other. We would decide which ones we liked and which ones we did not and then put them into POP. That blue circle with a +100 inside of it was our idea for a point animation that would fly up through the screen when the user got an answer correct. Never heard of POP? It’s a useful service for wireframes. Read below to learn more.

Wireframes

You make these first.

Wireframes: visual guides for websites or apps that lay out the rough structure for where the content is going to go.

Wireframing is the first step to take in order to materialize your idea.

Wireframes have a low fidelity/accuracy.

As you gather feedback, you add more details and more fidelity.

Tools: Balsamiq, Axure, Omnigraffe, Hotgloo, POP.

For us, we really just started with sketching. We would draw out what each screen would look like and take a photo with our phone. Pretty simple. POP was the best in my opinion.

You can get the app at www.popapp.in

This app helps you use your phone to add basic user flow and interaction to your wireframe.

Create a project. Select your device. Take photos of all your sketches. Add relationships between the screens by creating tapable buttons that link them.

POP helps you communicate your ideas more easily.

Balsamiq

Also useful for creating low fidelity wireframes.

Web and desktop versions. Free trial for both.

You can add elements to the canvas. There are categories for mostly any element you want to add. You can add comments for other people who are looking at your sketch. You have the option to export your wireframe or share it with others.

Mockups

Static displays of what the final product looks like.

They have more details and color as compared to the wireframe. The designer does mockups.

Tools: photoshop, sketch, illustrator, axure, UXPin

We had a graphic designer that we were comfortable with. He did our logo. Did a good job. Then we just moved onto building out all of our screens. Of course there were a lot of iterations and probably the majority of the work he did never even made it to the actual app. Here’s the logo he did for us.

Prototypes

They handle usability.

They have basic interactions and high fidelity.

You can see potential problems in the user flow.

Tools: keynote, POP, Axure, Proto.io, InVision

As a side note, don’t ask me how we came up with our name. I don’t know. It was a huge waste of time and took forever. But at the end of the day we like the name. It sounded like get smart quickly, which was kind of the idea. It played on the old phrase “smart as a whip.” I think the logo cost us $200. This was and is the app icon.