Plana website in iMockups

shows you how you can use iPad to quickly mock up a site wireframe and logo design to show clients

Designers often use wireframes to visualise a website before entering a design application. They are used to determine functionality, which makes it easier for clients to focus on what the application does rather becoming preoccupied with colour and aesthetics.The iPad has introduced some really interesting tools for creatives, whether it comes to sketching, drawing or, in this case, mock-ups for web design.

In this tutorial, I will be looking at how to create an easy wireframe of your web design idea, iMockups has a decent library of elements that help you visualise a website. I will also be using two other apps: Harmonious, which I use for illustration, and SketchBook Pro, which I mainly use for colouring and grading.

Sketching mock-ups like this takes just minutes, and moving objects around is a breeze. Download iMockups (it costs £3.99) and get to it...

01 - Start by opening iMockups. As you can see from the start-up screen illustration, the main function of the app is to replace the pencil and stencil. 

02 - Right, let's begin by creating the project and/or slide title, if you have several different art boards in your project library, it's wise to give each one a title that makes sense so you can identify it easily later. For example,'Clientname-mainpage'.'Clientname-aboutpage' and so on. 

03 - To get the most out of your mock-up, you can access an overview of the available elements in the iMockups Library. If the library isn't present on your screen, slide it out from the right and start flicking downwards/upwards to see ail the premade elements. 

04 - Stan by dragging out the Web Browser element from the library Position it where you want it on the canvas. 

You can use one of the four corners to rescale the element and point and drag to reposition it. Tapping it brings up an Inspector that gives you more options. 

 05 - For the logo placement, create an Image Placeholder. You can lock the object to its position or delete it easily. I often lock down the position so that the object is safe from deletion, and so that there's no chance of it being nudged away from where it should be.

 Not just sites
iMockups for iPad can be used to create mock-ups for all manner of devices
and applications - not just websites. There are library items for iPhone and
iPad apps, along with web apps. It's a versatile tool to nave when going :o any
client meeting - you can quickly show events positioning without
rescheduling or emailing at a later date. It's also great for putting ideas down
quickly while on the move or in staff meetings.   

06 - Continue by dragging in the desired elements you need to create the mock-up for your client's approval. In this example, I've added more images (scaled down) and some text to explain what's going on. When adjusting position and size, there are guides to make the process easier. 

07 - The last thing to do is to share the mock-up(s) you've created with your client and/or colleague. You can choose to either export the current page or the entire project with its subpages (Main Page, Home, Contact and so on). 

08 - Here's The final design for the counter page; we've gone from mock-up to final  design in a few simple steps. You can view a demo of the counter at http://adrem.no/kunder/sundt-counter . 

09 - As an aside. I'd like to mention two other apps I use in my workflow. The first one is an amazing sketching app called Harmonious, which we used to sketch the logo for this client. The brushes in this app take some time to get used to, but the results are extremely crisp and very nice to look at. 

10 - The third app is SketchBook Pro. If you have decent drawing skills, you can create some reaily attractive work with this app. it supports various natural media brushes, layers and more. In this case, I only used it to colour the logo for client approval. 

11 - This is the web version of the logo as the client approved it. Being an architecture firm and having orange as their signature colour, the client liked the results with the 'S'and 'A'combining to create an original, geometric form.