Let’s continue our journey in the Mockup universe, started with this post.

Although easy to make, Mockups have their rules for a good final result. I’ll put down one by one the steps to follow with screenshot.

Just for the record, it’s not my intention to promote a specific software. The pictures that you’ll find in this post are made using UxPin but you’re free to use whatever suits you better.

1. Prepare a grid

If your software can do it, use a grid to draw your layout. It’ll give you the guide lines to insert all the components in a tidy way.

I usually use a standard width of 960px, split in 12 columns.

2. Prepare a project map

Take your project index back, and move it in the online version. If it’s a website, it will be a pages list.

3. Cut the distactions

Your mockup audience will be interested in the elements disposition, in how they’re working and their relation.

In this stage, design is pushed into the background and shouldn’t divert the attention. Imagine the mockup as an house blueprint, with walls and furniture arrangement.

It’s still not time for bright colors and beautiful images… Structure is what it matters.

Using green color for a confermation button could be an exception. Or even blue for some links. Or you could use simple icons if you need them.

Basically the design shouldn’t turn attention away from structure, but it have to make it more clear.

4. Do not use Comic Sans

Just don’t!

5. Get rid of your Ego

I’m perfectly aware that a wireframe won’t please your eyes. You’ll always have the drive to make it better and nicer.

Well, don’t do it. Mockups aren’t mean to be nice to see but their purpose is to comunicate clearly and quickly.

6. Make your Mockup interactive

Once your drawing is over, it’s time to link the different parts of your project.

Check your links and choose the important ones.

For example, not all the buttons on your navigation toolbar are necessary. Just link the important ones and leave the others disabled. This will spare al lot of your time.

7. Spread the word

Ok, your Mockup is finally ended. Now it’s time to share it to your co-workers.

Softwares as UxPin allow you to insert comments in the shared project. This tool makes everyone able to write their opinion and ask questions.

Sometimes being prolix is not that bad!

Conclusion

I hope it will be helpful in your future projects.

It could intimidate at the beginning (instead create the sketch immediately on Photoshop) but I can assure you to spear time and get a better final quality.