50 Shades of Wireframes: Tools and Resources

First things first, I’ve seen many people often confusing between the terms: Sketches, Wireframes, Mockups and Prototypes, when talking about the early stages of design work. Sketches are a raw freehand drawing on paper, Wireframes are low-fidelity skeletons that are a bit more structured, Mockups are a more consistent medium-fidelity representation with colors, fonts, images, etc. And Prototypes are a high-fidelity representation of the final look and feel and that includes actual user interaction.

If seeking to know more, there is an interesting discussion about the differences on Quora.

What is a wireframe?

Just like the blueprint of an architectural structure, a wireframe is a low-fidelity visual representation of an interface using simple shapes. More specifically, it is used to communicate the following elements:

  • Structure: How will the elements of the interface be connected and put together?
  • Content: What messages are communicated and what services are provided?
  • Informational hierarchy: How is this information organized?
  • Functionality: How will this interface work?
  • Behavior: How does it interact with the user?

For examples of wireframes check my Pinterest Board.

pexels-photo-196644

Why use wireframes?

The most important aim, in my opinion, would be brainstorming and iteration. Wireframes make it possible for all team members, to put in ideas, modify and discuss the options. It also fits well in a lean process: before any time and energy is wasted, it is a good idea to explore all possibilities, build, test and recycle. Without bothering with font sizes and background colors: content and functionality first!

Formalizing early-stage designs allows stakeholders to make sure that the product meets the requirements and objectives of the business model. It’s an important step in the overall product strategy. It gives managers an early, close-up view of the interface design as well as the time to operate changes and re-designs before any further resources are put into work.

Often designers are working with a team with different skills and backgrounds, it is more simple to communicate an idea through wireframes and ensure that everyone is on the same page. It is very important to avoid the guesswork and get a more clear grasp of the product’s aspects and features by everyone involved before tackling its development.

Last but not least, it inspires visual designers, leading to a more fluid creative process. Graphic mockups and interactive prototypes resulting in a final design are much more easier to create.

Best Practice: Content Wireframe

As designer Stephen Hay elegantly put it: design from the content outwards. I must say, focusing on content first is as much a wireframes best practice as it is for responsive web design and cross-platforms design. People use their devices on the go, they want their information clear, uninterrupted and front and center on any type of screen.

Since no one actually visits your interface for its icons and background colors, it’s probably a smart idea to put your highest energy phase on the content. So how do we create a wireframe from content you ask. It really isn’t that complicated, just follow these 2 steps before creating your wireframe:

Content inventory: Deconstruct all your interface information into topics. Not only according to pages but the sections inside the pages as well. Then decide which are important to keep, which need to be rewritten and which need to be deleted. The goal is to decide what the visitor should exactly get from his interaction with the interface.

For more information: Maadmob

Visual Hierarchy: Ordering information in a way that leads the users in they journey across the interface that ultimately results in users finding what they were looking for. By the end we should have a clear idea about the importance of a chunk of information and how much of the site’s space and the user’s while it should take.

To master Information Architecture.
To master Content Strategy.

Tools:

The best tool is the cheapest and most basic one: pen and paper (a marker and a whiteboard are also a good option)! To save time, there are even devices/screens templates you can print out and stenciling kits to make your own. Although, this technique might get you fast results and easily modified sketches but it won’t communicated the message to all the team members as easily and it’s definitely not how you are going to present your vision to the stakeholders.

Because I believe that wireframing and prototyping shouldn’t be done in two different platforms, otherwise you will just be wasting time you don’t have: the following is a list of my favorite softwares that will not only help you wireframe but also get high-fidelity prototypes of your final designs as well.

Adobe XD  (the one I currently use)

Adobe XD stands out with its intuitive tools that make every task feel effortless. The tool seems to somehow predict your actions and makes it easier to tackle a white page and create something out of it. I most of all appreciate the time saving actions like “Repeat Grid” and the drag-and-drop linking between actions, views and pages. Last but not least, it helps you create everything from low-fidelity wireframes to fully interactive prototypes with an option of trying the results on a device as well as recording the interactions.

xd-riverflow1-720x620

Price: part of the Creative Cloud
Trial:
No
Best for: Websites, mobile, and touch
Fidelity: Low to high
User community: Large community
Collaboration features: Feedback and sharing

UXPin

UXPin stands out with its built-in UI libraries (Bootstrap, Foundation, Android, iOS, etc) and CSS code integration to customize any element. It also has built-in usability testing and design management and like Adobe XD it allows sharing. I also recommend the UXPin STUDIO: they offer many free high quality eBooks and Webinars for designers.

uxpin (2)

Price: $29 to $49 /month and custom price for entreprises (Purchase UXPin)
Trial
 : 30 days
Best for: Websites, mobile, and touch
Fidelity: Low to high
User community: Large community
Collaboration features: Feedback, sharing, user testing

Axure RP

One of the widely used prototyping tools, it stands out with its animations, data friendly actions and maths functions. It allows creating notes on elements, then decide which notes to present in the HTML or in an auto-generated Word document that includes screenshots. It allows both high to low-fidelity wireframes, no coding required. This tool is also great when it come to sharing and collaborating but only in Pro version.

shape-transforms

Price: $29 to $99 /month (Purchase Axure)
Trial: 30 days
Best for: Websites, mobile, and touch
Fidelity: Low to high
User community: Large community
Collaboration features: Feedback and sharing (Pro only)

InVision

InVision stands out with its ideation-focused design, it allows you to create visual hierarchy for your ideas as well as a context around your projects with Boards—flexible spaces to store, share, and talk about design ideas. It has built-in layouts, intuitive tools, friendly interface and it allows team collaboration. InVision is also announcing the upcoming of their Invision Studio, the “world’s most powerful screen design tool” in January 2018. Meanwhile you can go ahead and try the current edition for free as long as you keep it to one project.

invision

Price: for more than one project 13$ to 89$ /month and custom price for entreprises.
Trial: No
Best for: Websites, mobile, and touch
Fidelity: High
User community: A very large community
Collaboration features: Feedback, sharing, user testing

Other tools worth checking out are: Balsamiq and Proto.io and if using a Mac Sketch (unless you really want to have Sketch on your Windows device then read this article by Martijn Schoenmaker)

Wireframe Libraries

webwithoutwords.com

It’s all in the title. It gathers popular websites, deconstructs them by removing all words and images, leaving only the primitive wireframes. I don’t know about you, but I love the idea!

wireframeshowcase.com

It’s a user-submitted blog of wireframes, with comments and juxtaposed with the final design. It contains all sorts of wireframe examples, from photos of paper prototypes in the workplace, to annotated screenshots describing the design process. However, there is no search option. So it’s a good resource if you have time and just looking for inspiration and not a specific template.

wireframes.linowski.ca

It’s not a wireframe example library, and there is no search option. But it does have a great amount of examples. The blog is run by Jakub Linowski, an interaction
designer from Toronto.

Other platforms to look for Wireframe examples: Behance, Dribbble, Pinterest

Pattern Libraries

pttrns.com

What I love about this library besides the high-quality content is that it’s search-friendly: you can sort by year, device, or tag. And there is an alphabetically ordered list of categories. Although it may contain only Mobile patterns, it is definitely one must-check patterns library.

uxarchive.com

This is a patterns library that is focused on the most interesting user flows. It studies most famous apps and is beautifully search-friendly: everything is organized by path so you can directly head over what interests you. A perfect place to get inspired by what’s already done by other designers.

ui-patterns.com

It contains only Web patterns. But I love how it is well structured and all the patterns are in order and easy to access.  It actually has detailed descriptions of the patterns, what problems they’re solving, and tips when using these patterns.

 


 

So now all you need is to do is get inspired, grab your favorite tool, start designing and never forget about your user!

P.S A quick comparing grid of prototyping tools : prototypingtools.co/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s