Andrés Max

Recommended


Recent Posts


Getting Started with Wireframes

Andrés MaxAndrés Max

I love making wireframes, they make my job a whole lot easier, definitely one of the most important elements in my ux toolbox.

What is a wireframe?

On simple terms, a wireframe takes a webpage layout back to the basics, it’s a simple rendering of where the elements and text are placed on a page. By creating a wireframe you make sure you get colors and visuals out of the way and you focus on what really matters: content and user experience.

I won’t get into too much detail on how to make wireframes, you can find lots and lots of information on the matter by just googling around. I highly recommend Fuzzymath’s recent series of posts on the matter, very informative.

What are they good for?

Thinking about elements and layout first is very important, wireframes help you do exactly that. There is no right or wrong way to do a wireframe, just get a piece of paper or fire up your favorite design app and start sketching away. Once you see elements and content on a piece of paper or on your monitor you will start realizing what works and doesn’t and start moving elements around, adding in more, or completely eliminating useless parts. This is the beauty of a wireframe.

Beside from helping you out in your design process, wireframes will also help you to:

Wireframes and user interaction

This is where I find wireframes to come most handy, when defining the user interaction of an app. There are certainly a few of cases I can think of where you could simply skip making a wireframe, normally when the layout is very simple or the requirements are very well documented.

On my previous post about UX design, I discussed a few ideas around creating the right UX for your users. Wireframes are a handy tool for that, they allow you to lay out the user interaction, specify user flows and in general see how a user will move around your app or website.

The great thing about this is that you, your team and stakeholders get to see and experience how everything will work – and change it as necessary at a very early stage.

Stuff to keep in mind

When creating a wireframe always consider:

Wireframes get you…

Well that’s it, hope you enjoyed reading a bit about wireframes and why I love them so much. I hope this inspires you to sketch and wireframe before you start out your next design. Trust me, wireframing only makes the process way easier.

 

<p>CEO/Founder @ideawareco and @taskware. Passionate about #ux, #design, #apps, #gadgets and #family.</p>

Comments 0
There are currently no comments.