Find out how Wireframes can help you develop your projects

Knew what they're for, what types exist, what programs to use, concepts, and tips for crafting a wireframe

Wireframe model

Yeah! Td bele?

In the process of developing a site beyond Graphic Design (the color-filled layout you make in the PSD) there may also be other parts such as Information Architecture, UX, etc.

Thinking about it, I'll talk in this article about the prototyping part, more specifically wireframes.

If you haven't heard about it, you'll probably listen. If you've never used one, you're probably going to use... Because a designer, especially if you're freela, is much more than using Photoshop or Illustrator. You are a designer: you must know how to plan what will be done and how to be done.

And you thought it would just do some gradients in the photohop, right Galucho?

So, without further ado, let's get to know this tool widely used in the development of interfaces. Come with me!

In this article you will find out:

What is a Wireframe?

Wireframe is a sketch: a simulation of how the interface should work.

Basically it is to unite all the information that we collect in the briefing for the paper, in a structured way predicting how the construction will be.

Therefore, it portrays the layout, in a simple way, of the page organizing the content and elements of the interface in the space that we intend to use.  In addition to providing the entire framework for the designer to elaborate the layout, it provides the functional elements (such as navigation, for example) that will be used by a developer.

The wireframe generally has no typographic style, color, or graphics, since the primary focus is on functionality, behavior, and content.

And also it needs to be flexible to rapid changes, thus allowing testing of the various points of the project (usability, navigation, interaction, readability, for example)

The importance of prototyping

T&L Skills Council - Wireframes

The great advantage of wireframes is that through them we can demonstrate what will be the information and elements that are contained in the project, besides how it should work, in a simple, practical and much faster way than building the direct layout Photoshop.

They are much easier to make and cheaper. And they can be quietly reviewed, adapted and discarded almost instantly.

They are very useful when you need to present your work, either to your client, or your superior, because it allows him (his client) to better visualize their ideas thus facilitating the understanding of the project and optimizing the time of both.

Regardless of the complexity of the site, doing this prototyping helps clarify doubts, and define exactly what needs to be done by all areas involved in the project.

What to put in wireframe?

Although the wireframe contains only the essentials, when you're working on it –think about what the design will be like, think about every action (and your reaction too), think step by step.

So the first step, of course, is to think. And know that during the preparation you will have to redo and test things several times. It's part of the process.

And one tool that can help you in this part of the organization of thoughts is the mind map. After reading this article, check out this bonus on mind maps.

Structure:

Working in Visio - Redesign

Start with common elements: headers and footers, content areas, navigation, sidebars, search, etc. And then add the rest, such as widgets, images, buttons.

Also place overlapping elements such as modals, check boxes, radio buttons, and other features.

If necessary, when placing measurements, for example, use labels and arrows to highlight.

navigation:

DSC_9811
That part is very important.  It should show the relationship between the links, the mode that will be presented to users, and the existing options for navigating the site.

Content:

Lorem, Wireframes

Put where that banner, that title, that text box, that box.

In titles, in navigation texts and/or links use generic terms that show the size and importance, for example "H1 Title" or "Link Nav 1"

Don't waste time putting real content on your wireframe. Use, for example, Lorem Ipsum to fill the space.  The important thing is not what is written but the formats, positioning and margins of this content.

Types of Wireframes

Basically there are two types of wireframes: low fidelity and high Fidelity.

Sketches - app Rock in Rio iPhone

Low fidelity wireframes are basically composed only of squares, lines, circles, triangles on a simple background (usually blank) and with some labels.

This type of wireframe can be hand-drawn or in some graphic software.

Mock Election - 1.0-home

High-fidelity wireframes are further incremented.  This style usually takes advantage of elements of the design of the project, such as colors, images, icons, the customer logo, etc.

The goal of this wireframe style is to get closer to the project layout by conveying a better idea of what the site will look like.

The level of detail of the wireframe depends on the design, purpose and preference of who is designing.

If you research more about this, within this ai issue, you will also find 3 different types of models : Wireframe, Mockup and Prototype.

In my opinion, only one of them is enough in most projects, because there is no need to use three different layers for the same thing. But it's still good to know how things work, especially in some companies.

Wireframe: As we've seen, it's a simple outline of the interface. Organizes the content and interface elements into the space we intend to use. It can be done by hand or in some graphic software.

Mockup: it's a faithful preview of the design of the project. It usually includes the final design and all the elements that will make up the page, but are usually static.

Prototype: it is a functional preview of the final result. It typically does not contain all the functionality that will exist in the project, but does provide customers with the ability to interact with the interface and simulate the final result. A prototype may or may not have design design elements.

How to create wireframes?

Creating wireframes is simple: you can do it by hand, on a sheet of paper, in some software of your choice, such as Illustrator, Photoshop, or some specific for this function like Axure.

How you create it will depend on your style and also the demand of the project.

Simpler projects probably won't require as much, while larger projects may require a little more.

The important thing is to do something useful and with quality.

Soon, it doesn't matter as much if you're going to use a program or sheets of paper. "Capisce?"

If you choose to do on paper in addition to pencils, erasers and pens, something that can help you in crafting is to use checkered paper.

Visualize your ideas quickly

You can also use this browser template with the checkered body: http://www.raincreativelab.com/paperbrowser/.  Just download and print.

If you choose to create using some software, you can use specific programs. Below are some of them:

Desktop:

Online:

Templates:

And to make your life easier here are some links to galleries with numerous examples of wireframes:

And to help you even more also see this Jason Santa Maria Method. It describes your process of creating wireframes, from sketching on paper to Illustrator

Conclusion

The wireframe helps designers know what screens will be and how they should be layoutd.

The wireframe helps developers ask questions about what behaviors, functionality, and other things will be like.

The wireframe helps you show your customer what you have in mind and thereby increase your chances of getting better feedback.

So, Galucho, this tool can help you a lot in the process of developing an interface.

It is something simple, inexpensive, editable and that can predict and avoid problems.

I hope that you enjoyed.

And you use wireframe in your day-to-day life? Do you have any questions about anything?  Do you use another prototyping tool I didn't mention here?

Leave your comment.  I'm curious to know about your experiences with wireframes.

Until later.

Strong hug!

References:

http://sixrevisions.com/user-interface/website-wireframing/
http://www.richardbarros.com.br/blog/artigos/dicas-para-desenvolvimento-de-wireframes

Images:

https://www.flickr.com/groups/ilovewireframes

David Arty

Hi I am David Arty, founder from the blog Chief of Design.
I am from São Paulo, Brazil. I work with design, mainly with web design, since 2009. I try to transform crazy and complex ideas into simple, attractive and functional pieces.