Planning a website, mobile app or web app? It all starts with Wireframes! Get it down on paper first and save big $$$$ in the development process.
Full Transciption
Over the last 12 months my wife and I’ve been working with an architect on the plans for the renovation of our house. It’s been a really emotional rollercoaster ride and one that we’ve experienced highs massive highs of exciting “hey this is how we really want it to be” and then going to council… they go “can’t do it like” that so you have to rewind and change the whole approach. And eventually we’ve come to a consensus of what that design is and how it’s going to how’s going to work and we were actually really super excited to get into that build process with the Builder at least that’s where we’re at the moment. But how does that apply to designing websites and apps. It’s a critical part of the whole process exactly like what architects do for house design and construction, we do for website and app development, and we call them wireframes so you’ve seen me do sketches on paper with boxes and headings and all that sort of thing heaps of times, and you can see a basic wireframe here.
What do they look like? Well representations of screens, headers perhaps big banners here, we represent with a with another box, we might have calls to action buttons, we might have headers here. So this might be a generic homepage that we would use. But, how do we represent this page on mobile on mobile, on iPad in portrait or landscape so there’s all these other elements that need to be thought about before we go to the developer. If we just went to the developer with just this, then we might have to get the developer to do things three or four times over because they haven’t interpreted what we thought we wanted down the track. The value of wireframing is it removes mystery. It resolves mystery, gets all of the stakeholders around the table, talking the same language, thinking of the same ideas getting all those ideas down exactly like with an architect, but on your website project or your app project. Especially in apps and mobile apps it can be very very complex process we’ve got small screens to work with we’ve got to fit a lot of data and potentially into those screens it’s a balance between form versus function.
So “design”, making the the sexiness of the design versus how we’ve got to make this application or website work. So finding that balance is really important and it’s about real estate you know, what “weight” do we give to this image when we go across to mobile view Mobile is very skinny we’ve got menu burger menu pop out here our logos here, maybe we have to get a “call to action” above the fold line, so you know that might be the end of our screen so we don’t have a lot of room to play with. So getting all this down on paper first is a critical part of the process it really does help remove all that mystery as I said before. So let’s have a few a look at a few different examples of wireframes that we’ve done for different projects that gives you idea of the complexity and the flow that we do in that process.
I’m going to work through two websites moving to a mobile app and then into a larger web app so a website example always starts with a site map and you can see here a hierarchy version of that. This particular project is for seeping a start up project which is just awesome and it’s about to be published in the next few months so we’re really really looking forward to it. You can see this wireframe is actually quite high res. we’re using real images and real wording that looks quite busy, but we’re just using real content to give an indication to the designer what the volume of content is going to be like as it’s used so you can see here we get a quiz we dropped into some sub pages standard boxes content volume what images we’re going to use so that’s fairly straightforward. That, can turn into this… which is the finished art version so after the wireframes it moves into finished art with a UI designer and it just looks awesome, so we’re really looking forward to seeing this live very soon.
The second example is another website slide our standard kind of entry points for different user groups you can see you were looking at these highlighting different parts of the site to feed users into each of those areas, again we’ve not gone the high fidelity we’re just using lorem ipsum text dropping in boxes for video examples, form examples, whether calls to action are… that, turned into this! So you can see the UI designer really brings the wireframes to life the wireframe is about information weightage and calls to action and function and then the UI designer overlays you know a great design over the top. The third example is a mobile app, deployed, so you can see here’s a gaming app so we’re looking at designing a fastest flow for a particular action, and you can see here the steps that we’ve designed in this process to make that work so his first screen user taps bet, user selects the game, user selects the buy in, user places bet, so within four clicks we can make that happen within the site so that’s can be a lot more complicated in an app to make you know we don’t have a lot of room to work with, and the wireframes really allow you to plan that in great detail and have the arguments with the development team to set a benchmark for what is important in each screen. That flow is demonstrated in this one particular page just to give you an indication of what that looks like from a finished art point of view. you know we’re moving to an app that looks absolutely awesome inside the screen and compared to the wireframes it’s it’s a fantastic transformation I love that process.
The last but not least, is a larger app, again this client came to us with a very complicated, highly used, complex application that needed some refinement, the app had been used for many years you know in larger organizations so they’re looking at simplifying the display of the screens and the workflow. And that turns in to this! So yeah, you can see we’re using we’re giving the indication. We’re giving the indication back to the designer is what’s important so notifications are important here, and that flows through, and this status bar at the top is important, that flows through to the design, the status bar and the notifications of what we really want the user to see. So the takeaway from all this I guess is… just don’t skip the process. Give the design process and wireframing and then finished art process, a vested interest in, when you’re thinking about your project. Don’t just jump to “I’m gonna choose this template and jam stuff in”… it never works in our experience, you end up fighting over different ideas but if you’re not out on paper get those wireframes done first then you end up with a much better experience I’d love to hear your ideas about wireframing and your experience wireframing, just put them in the comments below and we can get started conversation about what is really important about the wireframing process.