Learn to code, Part 2: Wireframing tools

Have I got a treat for you! Today you’ll learn how to hack The NASA! Okay, not really. Coding is not about hacking and in Part 1, I promised to make you a super hero, remember?

Part 1 also talked about asking why, Today we’re going to learn about mocking – or wire framing.

Choosing an app that doesn’t hate you

There are tons of apps out there. Just google 20 best wireframe tools. A lot of them are online, collaborative tools, while some are download-and-installable. All of them say they’re gonna empower you to make quick, accurate sketches of desktop apps, websites or mobile apps. One of them, however, distinguishes itself from the bunch by their why: 

Helping rid the world of bad software

Personally, I fell in love with Balsamiq Mockups four years ago, when I started working for my current employer. I was hired as a web developer, and my focus was their next big web app that would run anywhere, on any device. Scalable, sleek, futuristic, yeah. I stumbled upon balsamiq, and liked it immediately. And they have a cute logo:

Bilderesultat for balsamiq logo

Trying to be as ugly as possible

I told my brothers, Dan and Benjamin, that wireframing tools kind of balance between pretending-that-I-am-a-photoshop-clone and quick-and-simple. However, along that road many tools end up trying to be as-ugly-as-possible-because-simple-is-ugly-or-something.

Wireframing tools are not supposed to be a replacement for the design process. Come on! We have great design tools out there. On the other hand, if they become too basic, they also tend to become be super ugly and hard to use. I’ve seen a few.

Is Balsamiq the best? Yeah, definitely. Okay, maybe not – I haven’t objectively dissected every tool. But I’ve seen a few tools and I’ve tried using some of them. I even did today! I went on a hunting trip across the web, trying to find a great tool with a free community license. I finally ended up sending an e-mail to Balsamiq’s CEO Giacomo “Peldi” Guilizzoni, asking if I could get a few licenses for this teaching project.

I got a sweet reply from their Head Chef of the Wow! Division, Valerie Liberty where she told me it was her pleasure to give me three licenses to the “Pedersen Brothers”. Little did I know that they have actually given away more than 10 000 licenses up through the years.

Remember how we talked about the reason for existing in part 1? Balsamiq is all about that.

Golden links

It’s getting late, and I have not even started talking about UX and wireframing! For now, I’ll leave you with some links I found on Balsamiq’s website. Enjoy and see you in part 3, where we’ll start digging into wireframing with Balsamiq!

Balsamiq Success Stories – a free book on nine people’s experience of how Balsamiq helped them and how it didn’t help them

Little Big Details – a curated collection of the finer details of design, updated every day.

Inspire UX – a blog that posts articles and quotes relating to User Experience Design (UX)

Learn Balsamiq through the UX Apprentice.

 

Learn to Code, Part 1: Start With Why

This is the first post in a series where I’ll teach you how to code. My friends and I anyhow. We’re gonna take you from zero to hero. Ready?

Before we start conquerring the world with code, increasing our income by three-digit-per-cents and becoming more athletic, let’s start at the beginning – before the beginning:

Why

Simon Sinek says you should start with why. Like Apple. When Steve Jobs was alive, anyhow. So why should you code? What do you want to code? No, wait – start with why:

The intention of your coding project. What do you want to achieve? What is the core belief of the business you’re about to embark on? Start with why – right after you’ve watched Simon’s video (he’s at TED-talks – so he’s a part of the inner circle – right?)

Now that you’ve become a believer in why, just for kicks, let’s say out core value is:

Make people’s work life more meaningful and less exposed to financial stress

How

The thing of it is: We work – earn money – spend money – go to start. However, how can we relate to work and money in a way that takes some of the stress off the income part. How can we help people in a way that makes them stand ahead of their peers and at the same time bring meaning and value to their work life?

Remember our core value? We want to make people’s work life more meaningful and less exposed to financial stress. We want to make people more able to produce value than their peers (no, not just better than Peer). How can we do this? I think I’ve got an idea! Check this out:

Make people stand ahead of their peers by raising their skill set to a level where they can deliver a far higher value.

What

Now that we know the why and the how, let’s find out what we’re gonna make. We’re taking code here, right? So my suggestion is that we make:

A web based learning platform with an accompanying cross platform mobile app

Sounds good? We – obviously – don’t know anything about coding, programming, web development, nada, zip, so we have to start at the very bottom.

A digression

Ever heard about the horse that had fallen into a rather deep ditch?

The owner did what he could to pull the horse out, but the ditch was too deep and the horse was too heavy. After a few days, he decided it was better to end the poor animal’s misery quickly than to let it die from thirst.

He decided to bury the animal (alive) and started shoveling dirt into the ditch. As the dirt hit the horse, it shook the dirt off and stomped it down under it’s feet. As the man continued shoveling dirt, the horse continued shaking it off and stomping it down – being lifted a few millimeters at a time – until it was finally able to leap out of the ditch.

You might feel as though I’m going to throw piles of dirt at you, trying to bury you alive. But take heart, my friend. The dirt will be what helps you learn, master and conquer a programmer’s skill. Just like the horse. It must have been a unicorn.

In Part 2, we’re going to talk about prototyping and mocking. Stay tuned, unicorn!