Justinmind

BLOG

Expand your prototyping knowledge

Justinmind process of creating a wireframe


We suggest some basic designing steps to increase speed and facilitate the creation of your wireframe:

1 – Use some sort of grid. For example, 960 framework. This is very commonly used by developers, and give some sense of proportion to your project. It may also help the coders further on. There’s a template of 960 framework on Justinmind’s blog.

Most designers have their own rule of thumb to dispose objects on a blank page. You can also create your templates and import guidelines from your company, client, etc.

2 – Create containers for your objects: headers, navbars, buttons, etc. Just drag them and drop them where they’ll stay. It’s going to help you further on.

Containers can be invisible, too. They help, for example, to hide everything at a click, or to replace content for other content.

3 – When you have everything on its right place, create a template and move your objects there. Then, you can start creating your pages and adding content.

Templates can be very useful when you need to create several similar pages. You put the structure there and it’ll be repeated in every screen you want. You can define which template to use in a determined screen by right-click and defining Properties.

4 – The objects that appear very frequently can be masters or be created directly on the template if they appear on all pages. For example, if you’re creating a website that has the navbar and header on all pages, you can create it on the template and only insert the links once.

Masters can appear anywhere on your screen and change position, while templates are fixed. Another advantage of Masters is that they can be broken in objects, and edited (for example, if you want this specific object to be green, but equal to others in every other aspect).

5 – Create your links by dragging the objects to the pages, or vice-versa.

Bidirectional linking can really help your project. Drop your screens over the links, or the links on the screens in your Screen Panel.

6 – Optional, just for the designer: Change objects properties to match your layout. We recommend inserting the images at the end, to reduce memory usage while working. This will transform your low-fi wireframe in an interactive mockup.

It’s better to first put the content inside the project, define what goes where, and then create the look. You can also replace containers for images, logos, pictures or special visual effects. It is also possible to embed HTML snippets and code.

Xavier Renom

About the Author

How to define, validate and review applications before starting to code are his thing. He is interested in everything related to web, mobile and desktop apps and how to prototype and simulate them before development starts. After hours he’s flexing his math muscles.

Comments are closed.