Apps: Where do I start?
Had this question again yesterday – wanted to share the answer…
Where to start
Okay, so, I had a great conversation with a client yesterday who had very early stage concept about a mobile application.
They were considering going ahead, hadn’t yet committed to going ahead with it.
And the conversation touched on many different points but, perhaps the most salient question was: What do I do next?
They literally didn’t know where to go next.
They had a idea; they thought there was some, some sort of magic in this idea but, hadn’t yet fully realised it and needed to take it a stage forward, but didn’t really know how to do that.
Now, there’s actually a thousand different ways to answer that question, perhaps none of those are really right or wrong but, I want to attempt to give a very specific answer to that question here which will fit for probably ninety percent of cases if not more.
The answer I’m gonna give is wire frames.
Start with wire frames.
If you’ve got even the basic concept and you think, “Yeah there’s something in this, something I wanna explore further,” start with a wire frame.
Now, what is a wire frame?
A wire frame is a sketch or, better put, a doodle. A very basic, rudimentary sketch, doodle is a better word,
I think, in this case, illustrating what, how this thing might work, right? And you’re not trying to get it right. The whole point is to, so, this is the difference between a good solution and a bad solution.
If there was one way to describe the difference, something that works well, something that doesn’t, it’s evolution, right?
So, if you find a good website, a good product, a good device, right?
I guarantee you it’s had many evolutions. If you look at Amazon, Amazon redesigns their website three hundred times a day, right? Sometimes an hour. And that’s how constantly they are fine-tuning, improving, and enhancing their services.
There’s literally tens, hundreds, in their case, millions of iterations and each time they do that, they have a chance to improve the service.
So, someone comes along and tries to replicate Amazon, it’s just gonna be an impossible task. They are already millions of iterations ahead. And I’ll go into detail that, about that another time.
So, the more times you have a go at designing the solution, the better it will be, right?
‘Cause if you have another go at it and the next idea is bad, you rip it up and you go into the next one.
And every time will help, even confirm, the idea is good or find improvements upon it.
So, okay, let’s have a look at what a wire frame sketch is, and it really is very underwhelming, but it’s incredibly useful. I can’t over-dramatize how big a deal it is, alright?
So, I got my white board here, which I never, almost never ever use, apart from, like, shopping lists and other rubbish stuff.
So, everything’s gonna be out of shot now, so forgive me.
So, I’ll draw a line. Fantastic image of a mobile application. So, hopefully you can see that, it’s a big rectangle. That’s all it is. And, yes, it, being this basic is absolutely fine. I mean I can, by the way, I always design, or we always design for the smallest device.
So, I was actually looking ’round for my iPhone there for a second, which I’m actually using to record this, which is, yeah, yeah, genius. Anyway, so, I actually own a iPhone SE, which is the small one, right? The really small one.
Because if you can design a application that fits and works, behaves well on a small screen, it’s gonna behave really beautifully and easy to use on a bigger screen, but that’s another question for another day.
Okay, so I have my big rectangle representing iPhone or Android phone, alright? Basic proportions, right? Took me, what, a second to do that, right?
And then, I start the flap. Now you’re going to start with start, if you don’t know where to start, start at the beginning. That makes the most sense. Even I do this right now. The very first thing I design is the splash page. A splash page is the graphic that gets loaded onto the screen whilst the application is loading up.
Now the chances are, every splash screen is going to be the same, in the sense that it’s probably just a graphic, maybe some pretty pictures, or maybe a couple of words on it that displays whilst loading the app. So, any image you just represent with a big X.
That means, image goes there, right? That’s that good placeholder.
First page done, and underneath it, I always scribble down what that page is. Splash page, right? In my brilliant writing there which you might not be able to see.
Then I will draw another rectangle. And by the way, I wouldn’t do this on this white board. I would do this on a piece of paper. So, and I have lots of pieces of paper, and I can tear them up, throw them away as I see fit.
I can also, I actually like doing this on layout paper. So then I can put one piece of paper over there. If I’ve got one that’s like, “Oh that’s actually pretty good.” But I just wanna change that a bit, I pull that piece of paper over the top, I’ll trace it through, and I’ll change the bit I wanna change.
The most important thing about this stage is it needs to be quick, rough and ready, down and dirty. And it actually needs to be. I’ll go inside a little bit in a second.
So, I might have a title at the top. So I’ll draw a box and I’ll write ‘title’ in it.
And I’m not sure how well this is showing up on the video. I’m just giving an example here, it could be anything. If I’ve got a sort of selection page, I might draw three squares to represent an icon. Then I’ll do parallel lines with a squiggle in the middle to represent text. And if there’s an arrow to go through to the next page, then I would draw an arrow.
And again, apologies if you can’t, I don’t know how well this gonna show up in the video. That would be my page. And I would write underneath it what this page is. So this might be, I don’t know, a selection page. A selection screen, right?
Then I would go onto the next page and do that again. And, you do that until you’ve got all the critical pages designed, or sketched down, doodled down. And once you’ve done that, but even halfway through doing it you go,
“Oh shit, it would be better if we didn’t have boxes like that. What I want instead is, cause I think it would look a bit cooler, let’s have three big images that fill the screen, rather than the kind of more boring kind of icon there. Yeah I like that.”
Maybe you have an arrow next to it, maybe you don’t. Whatever, right? Great, and then you’re like, “No I don’t like that, go back to the previous one”, whatever.
You do this a few times and you end up with your cool kind of pages sketched out.
Should you be doing Wireframes?
Now, should you be doing this or should you be leaving this to your developer? That’s usually the question I get. The quick answer is, you should be doing this. So let me explain why.
So, if you go to a software developer, a mobile application developer. Guess what, they get paid to develop. They probably offer some “design” services. If you’re not paying them separately for the design, you’re not gonna get a great design.
They’re not gonna spend a huge amount of time. I’m sure they’re gonna do the best job they can. They’re gonna try to provide you with a good service. Right, they’re gonna try. But they are not going to really take a lot of time, they’re not gonna give you a hundred different evolutions of the design to get the design just right. They’re gonna move ahead into development as quickly as they can cause that’s when they get paid.
That’s also, depending on their skill set, probably where their skills lie and where they’ll perform best, alright?
If you were to go to a separate design, a mobile app design company, maybe the company’s totally separate from the develop team you’re gonna use, you’re gonna get a better design, aren’t you?
So, you kind of get what you pay for a little bit here.
Now, how much of this should you be doing yourself and how much should you be leaving to them? Well it’s really down to your situation.
No in-house design department?
So if you have an in-house development team, an in-house design team, then you can give this project to them and pay them for their time through salary or for the project and get them to do, you know, multiple iterations until you get to a point where this is really starting to sing now.
This is really looking elegant, finesse is a really important word, and elegant solution, providing a solution to the problem that you want to solve. If you don’t have that and you’re going to an external person, then the very least you need to be a part of that process.
So, the analogy I always use, and I think it works really well is, if you were gonna build a house, alright, you would want to spend some time with the architect. You wouldn’t just say, “Hey architect, build me a house.” You would wanna spend some time with him, make sure that you share a vision, share a direction, and you are in communication, and you are at the very least steering that architectural solution.
I think that, well you shouldn’t learn how to lay the bricks and be mixing cement, which in the app world would be actually writing code,
I do think that you should be partly involved with the architecture of it. Ultimately, this application is going to win or fail, right, or bits in-between. And the benefits of that are for you.
The development team is gonna get paid, they’re gonna move onto the next job, and now so on and so on.
Developers don’t build commercial products!
Yes, they would love that you’re application is a big success, they really generally would like that. But it actually, unless you’re gonna pay them a commission for the sales that you produce, the chances are they don’t get rewarded in that way. And also, chances are the development team hasn’t got a freaking clue how to make a commercially successful application because most of them have never made a commercially successful application so they’re not from themselves, right?
One that have made a probably bit for themselves is a bit of a portfolio piece. Making something commercially successful is very different. You know, I could probably lay a few bricks but I wouldn’t know how to build a house. I could sell on the, it’s just not my skill set. But applications, that’s my skill set, that’s where I can help. Anyway, going on a bit of a rant.
So, let me bring it back to wire frame. So wire frames, it’s really important that you do these doodles in a rough and ready way. If you use devices like, there’s lots of devices on the market.
App Sketch Tools
This is a device by UI Stencils. Now I got this years ago now. And I was actually looking really forward to getting it. I thought it looked kind of cool. We even actually created these little sets and stuff. We gave those away to some of our customers and stuff which they liked which was great. But, when you start to use one of these devices you get really kind of fussy about the detail. “Oh that box isn’t quite lined up with that box, and oh that circle is a bit too small.”
And you actually forget to look at the important things at that stage which is, what is this page for, what’s it trying to convey, and does it explain to the user what they need to do and how to do it?
You start to worry about the style of the page, right?
It’s a million times too early to be looking at that. You want it to be rough and ready. The reason being, you don’t wanna be attached to it. It’s really important that you’re not emotionally attached to that. And if I used a ruler and I got I think just measured and just beautiful, I’m not then gonna wanna change it quickly. I need it to be ugly so that I can just go, “No that’s crap, I don’t want that. I now want, what do I want? I’m gonna get rid of one of these options and I’m just gonna give two options and I’m gonna have two big circles.”
Okay, if my pen works. And I’ll put option one, option A, option B. Okay, maybe that’s what I’m gonna do. And ten seconds later, you’ve got a different sketch, right? What, five seconds, ten seconds?
Less is More
If you were to spend half an hour doing wire framed sketches, you would have evolved the project more than a month of development work just by doing that. And if you use one of these devices you would’ve spent half an hour doing something like that and it’s less valuable, right?
It probably sounds like a really small point, that’s why I’m always saying to just use a pen, don’t use a sketch, but actually it’s a really important point. If you screw up this early stage your project won’t even go anywhere, right?
What we use
Now, what do we use?
We do use pen and paper.
I actually have a nice page printed out with the iPhone and the right dimensions, we have a little grid in the background which I sketch on the top with. The only problem, and it’s a real pain in the ass, is you’ve gotta kind of photograph that or scan it in, crop it out, to send it somewhere.
So what I do now is yes, I do use a tool. So all my talk of not using flashy things, I use an iPad. We’ve got a little template that we’ve created here this is our AppMan app template.
You can probably see there we’ve got very basic kind of outline in the right dimensions.
This is for an iPhone SE.
You design for a small screen first, you can use it then to transfer to a big screen later. And then, I’ve got a separate laptop. There’s many, many different sort of sketch doodle tools on the market. I happen to use the Abode Draw. I think it’s called Abobe Draw, or is it Adobe Sketch? Adobe Draw.
Then at the top of it, I will draw my rectangles. And I’d be no more fussy than I would on my white board. So there we are, I’ve got a very, very basic sketch. And then underneath that sketch I would make some notes, and usually I might use a different colour, actually.
And, I would put some arrows and some text at the top of it to tell me, well that’s done to remind me. And then I move on to the the next sketch and do that. And I do that a few times. I would create a new layer, and sometimes what I do is I actually would duplicate the layer here, erase the things that I don’t like, and then re-draw a sketch.
And the space of a few minutes, literally, maybe five minutes, I could do sketch that whole application, actually probably throw in a couple of evolutions in there as well, and actually end up with something pretty half decent. It’s phenomenally quick.
Now you don’t need to go and download this tool if you are not doing applications everyday. Just use a pen and paper. Just get yourself a pen and paper. You know, I won’t even worry about getting the dimensions right first of all.
I’ve seen sketches that have arrived to us in every form from sketch on a piece of paper. A lot of people use Excel, never quite understood that. Don’t use Excel.
Again, it’s too regimented, you’re thinking too deeply. Let us or a designer worry about kind of fine tuning it and making it look beautiful.
Just draw a rectangle, and, you know, start to put some bits on top of it, alright? I mean, Jesus. I mean, that’s terrible, right? You probably can’t even make out what that is. But I understand what that means, alright? But my shorthand, if you’re got an image, you just put an X for it, that means image. For text, just draw two parallel lines and do a squiggle in the middle of it. You know, if you’ve got an arrow that means arrow, right? Just a little bit of shorthand like that. And you can create these wire frames very, very quickly.
Now, what we do, we take it to the next level because we, you know, it’s kind of what we do. We will do these iterations a few times. Once we feel we’ve got it right and kind of page this thing together with it like the overall navigation of it, and we try, especially what we’re looking for, is try and make it elegant.
I really think that’s an important word. So, I can never get the quote exactly right but Einstein said it well and was like, “You need to make it as simple as possible but no simpler,” right? And I think that’s a really good approach. You want your application to be as simple as possible, but no simpler.
You need to make it as simple as possible but no simpler. Einstein
The Biggest Challenge
Perhaps, this is a conversation for another time, but the most difficult thing with an application is to know what to leave out, not what to put in. I’m not sure I’ve ever had a customer that’s not tried to put too much in their application. It takes some bravery, it takes some balls not to include everything. But a product doesn’t become better just by adding more weight to it, it becomes bloatware.
Anyway, conversation for another time. Don’t do that though, right?
So where was I? Yes, we take it to the next level.
Live App Demo in under 5 mins
Once we got out sketches together we have a platform, we can put those sketches into our platform one screen at at time, on our computer. We draw a rectangle around each button and we tell the app, actually, or web application what page that will link to.
We can do it for every screen so that we create a visual mock-up. Then we can hit on the play button and actually, we can play the application. We can click on each button, we can see which page it’s gonna take us to, and the sketches will be just as basic as that, at least for the start.
And I would say, “This works. I can go from here, I can go back to the home page. This is all working together.”
At that stage we can then start you know, making it look pretty, and looking at design, and branding, and colours, and fonts, and all the rest of it. But getting this basic wire frame down is really, really valuable. So that’s it, that’s my little rant on wire frames. I hope that’s been of valuable to you.
If you would like to get, despite what I’ve said, you still would like a template to sketch on the top with? We have an AppMan template, we’ll find a link for that, send it to you.
If you actually want to get your hands on this device so that you can actually put your sketches, your doodles into it, actually create a working mock-up, it usually takes about, well, less than five minutes to create the actual mock-up using the tool, we can give that to you as well.
So, if you have any questions around app wire frames then ping me an email firstname.lastname@example.org.
And, we will get back to you and hopefully we can take your application and your idea forward and then up to the next level. Okay, that’s all for me, til next time.