Annotated hand-drawn wireframe for an add-post form with title, media upload, categories, tags, options and save controls

UX Tools: Wireframing and Prototyping Tools

• 6 min read

670 Shares
Save

Today, let's look at some great value options for developing wireframes and prototypes for your project. If you’re not sure what these are; let’s refresh your memory.

What is a Wireframe?



A wireframe is a model of your site without the coding and design. It can be used to test ideas for your UX project before you deploy expensive design and development resources. In general this tends to be a low-fidelity approach and won’t look too much like the end project.

What is a Prototype?

Similarly, a prototype is also a model of your site/app but often some of the design elements are already developed and a high-fidelity prototype will include visual mock-ups and even some of the functionality that you intend to test.

Pencil


It’s hard to beat free as a price point for a tool and Pencil is a fully open source prototyping tool. It’s easy to use and has a good support community too. There are a number of stencils and templates available that help you mock up an app in the correct environment. The drag and drop interface makes building prototypes easy.

FileSquare

FileSquare is a free to use, community based online product for developing simple prototypes that work on a click-through basis. You just upload some mocked up images and then connect them using the software. There are premium options available which add functionality too.

Handcraft

For those who want a bit more oomph from their prototyping tools; they might want to consider Handcraft which is a paid for tool (though there is a 30 day free trial) starting at just under $20 a month to use. You can develop your prototypes using HTML, JavaScript and CSS. The website is not the prettiest though and you’ll need to use the trial to gain some appreciation for the features.

PowerMockup


PowerMockup is focused on turning PowerPoint into a wireframing and prototyping tool; they supply templates and tools to do just that. The price point is not extortionate starting at about $60 for a permanent license but there are always going to be limits to just how much you can do from within PowerPoint.

Moqups

Moqups is a completely online tool and won’t be a favorite of UX folks working in areas with dodgy internet connections. It is however incredibly simple to use and there’s no mucking around – as soon as you land on the Moqups page – you’ll be starting to create that first mockup. It is a paid for product and licenses start at less than $10 a month.

JustInMind


JustInMind has a free trial and after that it has a monthly subscription cost of around $20. It works on Windows and Mac OS and is designed for web and mobile application prototypes. It’s pleasing on the eye too.

One More Thing

As usual IxDF does not recommend any specific tool for your project; you need to decide which tool is the right one for your team. 

Header Image: Author/Copyright holder: Unknown. Copyright terms and licence: Unknown. Img

Image Source:

ZURB (link to image)

Best Vendor (link to image)

PowerMockup (link to image)

Graphic Rating (link to image)

Kim Bieler (link to image)

Learn More in This Course:

Learn Design and AI From the Best

Get one powerful email each week, like 312,428 others.

Next email in:

What You Should Read Next

  • Read full article
    The Relationship Between Visual Design and User Experience Design - Article hero image

    The Relationship Between Visual Design and User Experience Design

    A common perception about UX designers is that we are artists who can create beautiful interfaces from a blank canvas. While the aesthetics of products are important, visual design is only one aspect of the design process – in which team members with different skillsets and expertise collaborate

    Social shares
    802
    Published
    Read Article
  • Read full article
    You’re Not Bad at Presenting; You Just Haven’t Mastered the Right Way (Yet) - Article hero image

    You’re Not Bad at Presenting; You Just Haven’t Mastered the Right Way (Yet)

    Ever walked out of a presentation thinking, “That could’ve gone so much better, maybe I’m just not a presenter”? You’re not alone. And you’re not the problem. You simply haven’t been shown an easy, clear, repeatable way to prepare, deliver and follow up.Presenting is not an innate talent; it’s a ski

    Social shares
    359
    Published
    Read Article
  • Read full article
    The Power of Mapping - Article hero image

    The Power of Mapping

    The map is one of the earliest and most important human inventions. It helps us to navigate our complex world. Maps simplify complex spaces, create shared understanding, reveal hidden insights and help us coordinate action. Around 25,000 B.C. a person carved the earliest known map into a mammoth tus

    Social shares
    588
    Published
    Read Article
  • Read full article
    The Past, Present, and Future of Virtual Reality - Article hero image

    The Past, Present, and Future of Virtual Reality

    Virtual Reality (VR) has come a long way since its humble beginnings—with stereoscopic images back in the 1800s—“astronomically” far, in fact! Twenty-first century VR catapults users into immersive and interactive 3D environments, ones that let them experience something far beyond what they find in

    Social shares
    647
    Published
    Read Article
  • Read full article
    Turn Your Non-Design Experience into Design Portfolio Gold - Article hero image

    Turn Your Non-Design Experience into Design Portfolio Gold

    Have you ever wondered how to transition into UX and product design from a different career background without feeling insecure? Let's uncover strategies to confidently bridge the gap and showcase your skills to prospective employers with confidence and clarity.In this video, Morgane Peng, Desi

    Social shares
    508
    Published
    Read Article
  • Read full article
    Structure First: The Inverted Pyramid and Visual Organization - Article hero image

    Structure First: The Inverted Pyramid and Visual Organization

    This clip examines two principles that work hand in hand to make web content readable: the inverted pyramid approach to information order and the use of visual structure to help users scan efficiently. William Hudson, UX Strategist and Founder of Syntagm Ltd, describes the theoretical basis and prac

    Social shares
    206
    Published
    Read Article
  • Read full article
    What Is Card Sorting? - Article hero image

    What Is Card Sorting?

    In this video, William Hudson, UX Strategist and Founder of Syntagm Ltd, introduces card sorting: what it is, where it comes from, and the broad range of problems it can help solve.Card sorting is a research technique in which participants organize a set of items into groups that make sense to them,

    Social shares
    173
    Published
    Read Article
  • Read full article
    Design Accessible Navigation for Keyboards and Screen Readers - Article hero image

    Design Accessible Navigation for Keyboards and Screen Readers

    Accessibility is often treated as a finishing touch, but for navigation, it belongs at the foundation. Menus are how users reach everything else on a site, so a menu that works only with a mouse quietly shuts out anyone who depends on a keyboard, a screen reader, or another form of assistive technol

    Social shares
    173
    Published
    Read Article
  • Read full article
    The Scent of Information: Give Users the Confidence to Click - Article hero image

    The Scent of Information: Give Users the Confidence to Click

    William Hudson, UX Strategist and Founder of Syntagm Ltd, introduces the scent of information as a model for understanding how users navigate toward their goals, and sets out the principles for writing navigation links that strengthen that scent.Information Foraging and the Scent of InformationThe s

    Social shares
    173
    Published
    Read Article
  • Read full article
    4 UI Design Tips Every Designer Needs to Know - Article hero image

    4 UI Design Tips Every Designer Needs to Know

    User interface (UI) design can make or break any digital product. A user often won’t even notice when they interact with a great UI. They feel the visual appeal and simply trust it. On the contrary, a bad UI design can prevent the user from interacting with a product intuitively or at all and lead t

    Social shares
    646
    Published
    Read Article

Top Articles

Top Topic Definitions

39% of Today's Skills Will Change by 2030

The World Economic Forum expects 39% of today's skills to be transformed or become outdated by 2030.

The good news is that jobs in UX / UI design and AI are among the fastest-growing professions globally.

Build Skills That Keep You Relevant

Privacy Settings

By using this site, you accept our Cookie Policy and Terms of Use.
Customize
Accept all

Be the One Who Inspires

People remember who shares great ideas.

Share on:

Academic Credibility — On Autopilot

Don't waste time googling citation formats. Just copy, paste and look legit in seconds.

Learn Design and AI From the Best

Get one powerful email each week, like 312,428 others.

Next email in: