My 5 BEST wireframe & prototyping tools for UI/UX Designers (2020)

Summary

In this informative video, Sara, a product designer, introduces five essential wireframing and prototyping tools that enhance workflow and skill implementation. She clarifies the distinction between wireframes and prototypes, emphasizing the importance of fidelity and functionality. Sara shares her personal experiences with tools like Lucidchart, Adobe XD, Figma, Procreate, and Webflow, offering insights into their unique features and benefits. She concludes with three practical tips for efficient wireframing and prototyping, encouraging designers to embrace versatility and continuous learning.

Takeaways

• 😀 Sara, a product designer, shares her experience with wireframing and prototyping tools.
• 🔍 The difference between wireframes and prototypes is fidelity and functionality level; wireframes are the skeleton, and prototypes simulate the final product for user testing.
• 📊 Wireframes come in two types: low fidelity (static, simple) and high fidelity (more complex, not interactive).
• 🛠 Lucidchart is used for creating diagrams, flowcharts, and wireframes, facilitating remote collaboration and feedback gathering.
• 🎨 Adobe XD is a vector-based design tool for designing and prototyping, with features like Auto-animate that enhance prototyping.
• 🌐 Figma is a web-based interface design tool, offering real-time collaboration and a variety of plugins, including Figma Mirror for mobile viewing.
• 🖌️ Procreate, typically for artists, is used by Sara for sketching wireframes on her iPad, offering a digital alternative to pen and paper.
• 🌐 Webflow is a website building tool that allows for the design, build, and launch of responsive websites, used by Sara for interactive prototyping.
• 💡 Sara recommends being flexible with tools and not limiting oneself to just one or two, depending on the project and client needs.
• 📝 Three tips for wireframing and prototyping: focus on interactivity over pixel perfection, use simple tools like pen and paper, and don't be too attached to one solution.
• 🚀 Sara encourages learning new technologies and being a hybrid designer, combining design skills with development, writing, illustration, and more.

Q & A

What are the main differences between wireframes and prototypes according to the video?

The main difference lies in the level of fidelity and functionality. Wireframes are simple representations of a digital product, acting as a skeleton that includes elements and their interactions but without animations or interactions. Prototypes, on the other hand, are simulations of the final product used to test the interface and functionality with users, and they can be interactive but don't need to be high fidelity or pixel perfect.

What is the purpose of wireframing in the design process as described in the video?

The purpose of wireframing is to decide what elements to include, their position on the page, and how they will interact with each other. It helps in gaining clarity around the whole project before moving on to the prototyping phase.

What role does Lucidchart play in the design process as per the video?

Lucidchart is used for creating diagrams, flowcharts, and wireframes. It is used across product and engineering teams for brainstorming and managing projects, and it facilitates remote collaborations, sharing processes, and gathering feedback.

How does Adobe XD differ from Photoshop or Illustrator according to the video?

While Adobe XD shares similarities with Photoshop and Illustrator, it has been specially created for designing websites and apps. It is used for designing landing pages and is effective for collecting feedback from stakeholders or team members.

What are the benefits of using Figma as mentioned in the video?

Figma is a web-based interface design tool that allows for real-time collaboration and sharing of work with clients without the need for constant email updates. It is free, comes with useful plugins, and has an app called Figma Mirror for viewing designs on mobile devices.

Why is Procreate recommended for wireframing in the video?

Procreate is recommended because it is a powerful application for sketching and prototyping artworks on an iPad. It is useful for wireframing landing pages during the ideation phase, allowing for the generation of many ideas and iteration towards the best solution.

How does Webflow differ from other tools mentioned in the video?

Webflow is a website building tool that allows for the design, build, and launch of responsive websites. It is used for creating interactive prototypes and can be used for actual web development, offering a more hands-on approach to building functional prototypes.

What are the three tips shared in the video for wireframing and prototyping?

The three tips are: 1) A prototype should have a high degree of interactivity rather than being pixel perfect. 2) You don't need an expensive machine for sketching; pen and paper or sticky notes can be used effectively. 3) Don't get too attached to a particular solution; be open to iterating based on user feedback.

What is the significance of the Auto-animate feature in Adobe XD mentioned in the video?

The Auto-animate feature in Adobe XD is significant because it allows for the creation of animations within the design tool, which can be impressive and is not commonly found in other prototyping tools.

How does the video suggest using Webflow for learning purposes?

The video suggests checking out Webflow University for hundreds of free tutorials that teach the basics of HTML, CSS, and JavaScript, which can be beneficial for those considering becoming proficient in web development.

What is the video's stance on the future of design roles?

The video suggests that the future will belong to hybrid designers who combine design skills with other abilities such as development, writing, illustration, 3D animation, and information architecture.

Outlines

00:00

🎨 Introduction to Wireframing and Prototyping Tools

Sara, a product designer, introduces the video's focus on five essential wireframing and prototyping tools she uses in her professional and freelance work. She clarifies the difference between wireframes, which are basic representations of a digital product's layout and interactions, and prototypes, which simulate the final product for user testing. Sara emphasizes the importance of using different tools for flexibility and collaboration with clients and stakeholders.

05:01

🛠️ Exploring Lucidchart and Adobe XD for Design

The video script discusses two primary tools: Lucidchart, a cross-platform tool for creating diagrams, flowcharts, and wireframes, and Adobe XD, a vector-based design tool for prototyping. Sara explains how Lucidchart aids in brainstorming and project management, while Adobe XD is used for designing landing pages and collecting feedback. She highlights Adobe XD's Auto-animate feature, which sets it apart from other prototyping tools.

10:06

🌐 Figma and Procreate: Web-Based and iPad-Driven Design

Sara introduces Figma, a web-based interface design tool that allows for real-time collaboration and file sharing, making it ideal for client interactions. She also mentions Procreate, an iPad application for sketching and prototyping, which she uses as a digital alternative to pen and paper. The script details how Procreate facilitates the ideation phase by enabling the rapid generation of wireframe ideas.

🌐 Webflow: From Wireframe to Functional Prototype

The script introduces Webflow, a website building tool that enables the transition from wireframing to creating fully functional prototypes. Sara uses Webflow to build interactive prototypes after refining solutions in Adobe XD. She suggests that Webflow can be a powerful tool for freelancers, especially when combined with other skills like development, writing, and 3D animation, and encourages viewers to explore Webflow University for tutorials.

📝 Tips for Effective Wireframing and Prototyping

In the final paragraph, Sara shares three tips for wireframing and prototyping. She advises that prototypes need not be pixel-perfect but should be interactive for faster testing. She also recommends using simple tools like pen and paper for sketching and emphasizes the importance of not getting too attached to a single solution, as user feedback may require changes.

Keywords

💡Wireframing

Wireframing is the process of creating a visual guide for the structure and layout of a digital product or website. It serves as a blueprint, focusing on functionality and user interaction without the distraction of visual design elements. In the video, wireframes are differentiated from prototypes by their simplicity and static nature. Sara, the speaker, uses wireframes as the initial phase of the design process to decide what elements to include and how they interact.

💡Prototyping

Prototyping refers to the creation of a simulation of the final product, which can be used to test the interface and functionality with users. Unlike wireframes, prototypes can be interactive and are used to gather feedback on usability and design. In the script, prototyping is the next phase after wireframing, aiming to test and improve the product before finalizing the design.

💡Fidelity

Fidelity in design refers to the level of detail and realism in a representation of a product. High fidelity wireframes and prototypes are more complex and closer to the final product, while low fidelity ones are simpler and more abstract. The video mentions that low fidelity wireframes are static and minimal, whereas high fidelity ones are more detailed but still not interactive.

💡Lucidchart

Lucidchart is a tool mentioned in the video used for creating diagrams, flowcharts, and wireframes. It is a visual and cross-platform collaboration tool that helps teams brainstorm and manage projects. Sara uses Lucidchart to create user flows and wireframes at the beginning of the design process to gain clarity around the project.

💡Adobe XD

Adobe XD is a vector-based design tool used for designing and prototyping user interfaces. It is described in the video as similar to Photoshop or Illustrator but specifically created for designing websites and apps. Sara uses Adobe XD at work for designing landing pages and for its ease in collecting feedback from stakeholders.

💡Figma

Figma is an interface design tool that operates in the browser, allowing for real-time collaboration and the sharing of design files online. Sara has been using Figma for two years and appreciates its web-based nature, the ability to share updates with clients via a link, and its integration with useful plugins and the Figma Mirror app.

💡Procreate

Procreate is an application designed for sketching, illustrating, and prototyping artworks on an iPad. It is highlighted in the video as a tool that Sara uses as a digital replacement for pen and paper, especially for wireframing landing pages during the ideation phase. The use of Procreate helps in generating a variety of ideas quickly.

💡Webflow

Webflow is a website building tool that enables the design, build, and launch of responsive websites. In the video, Sara mentions using Webflow to build interactive prototypes after preparing them in Adobe XD. It is positioned as a powerful prototyping tool, and Sara also considers using it for building actual websites in her freelance work.

💡User Flows

User flows are visual representations of the steps a user takes to complete a task within a product or service. In the context of the video, Sara uses Lucidchart to create user flows at the beginning of the design process to understand and clarify the user journey and interaction within the project.

💡Auto Animate

Auto Animate is a feature in Adobe XD that allows for the creation of animations with minimal effort. It is mentioned in the video as a recently updated feature that makes Adobe XD stand out among other prototyping tools for its ease in creating interactive and animated prototypes.

💡Hybrid Designer

A hybrid designer, as discussed in the video, is a professional who combines design skills with other disciplines such as development, writing, illustration, 3D animation, or information architecture. Sara believes that the future of design will involve such multidisciplinary skills, giving an advantage to those who can adapt and learn beyond traditional design roles.

Highlights

Introduction to five wireframing and prototyping tools used by a product designer for workflow mastery.

Clarification of the difference between wireframes and prototypes, focusing on fidelity and functionality levels.

Explanation of low and high fidelity wireframes, with the former being static and the latter more complex.

The purpose of prototyping is to test user interface and functionality with real users.

Importance of tool flexibility depending on the working environment, such as at work or freelancing.

Introduction of Lucidchart as a tool for creating diagrams, flowcharts, and wireframes for brainstorming and project management.

Use of Adobe XD for designing landing pages and its recent update with the Auto animate feature.

Figma as a web-based interface design tool with real-time collaboration and numerous plugins.

Procreate as an alternative to traditional sketching with its digital sketching and prototyping capabilities.

Webflow as a website building tool that allows for the design, build, and launch of responsive websites.

Recommendation to learn web development tools like Webflow to expand a designer's skill set.

Three tips for wireframing and prototyping: focus on interactivity, use simple tools, and be flexible with solutions.

The suggestion that future designers will need to be hybrid, combining design with other skills like development.

Encouragement for designers to keep up with new technologies and not limit their skills to just design.

Invitation for viewers to share their favorite tools and to subscribe for more content.

Transcripts

in this video we're gonna look at five wireframing and prototyping tools that

I use regularly at work and you can use in your projects and can help you master

your workflow and implement your skill sets hi I'm Sara and they work is a

product designer at a tech company and on the side I run my own freelance

business from home if you new here make sure you click the subscribe button and

all the links I've mentioned in this video you can find them in the

description below if you wanna have a closer look at my life as a designer you

can find me on Instagram well every day I share new stories about projects I'm

doing books some readings and general updates

so now let's jump into this video people often confuse the terms wireframes and

prototypes or they think it's the same thing but that's not how it works

in fact we play a different role in the design process while the main difference

between the two it's the level of fidelity and functionality a wireframe

is a simple representation of a digital product or website

think of it as a skeleton where you decide what elements to include the

position on the page and how they will interact with each other there are low

fidelity wireframes which means they are very simple minimal and

most important they are static which means we don't include any interactions

or animations high fidelity wireframes are usually more complex and require

using a specific tool but we're not yet clickable or interactive once we have

completed the wireframe phase we are ready to move on to the prototyping

phase a prototype is a simulation of the final product but it doesn't need to be

high fidelity or pixel perfect the main purpose of building prototypes is to

test with users whether or not on the interface and functionality of the

product works or can be improved there are several tools and techniques

you can use to build the wireframes and prototypes but often it's the company by

decide which one to use a work I use different tools than when I freelance

and that's because I don't like to limit my capabilities to just one or

two tools as they work in different ways depending on and working with clients or

stakeholders I like to be flexible now we are gonna look at the tools and I use

pretty much every day and also recommend make sure you stick around to the end

because I'm gonna share with you three tips to wireframe and prototype products

faster no matter which software you are using the first tool is called Lucidchart

Lucidchart is a visual and cross-platform collaboration tool for

businesses and individuals that helps the creation of diagrams flowcharts and

wireframes and so on a word we use a lucid chart across across product and

engineering teams for brainstorming and managing our projects as a product

designer I use this tool to create user flows user journeys and the wireframes

at the beginning of the design process to gain clarity around the whole project

if you work with stakeholders clients or people who are not familiar with design

tools using lucidchart will help you facilitate remote collaborations and

share your process and gather feedback all in one place plus it comes with tons

of free templates you can use in your project alright my next tool is called

the Adobe XD team and it's a vector based design tool for designing and

prototyping products some people like to describe it as similar to photoshop or

illustrator and maybe we can achieve similar results but XD has been

specially created for designing website and apps

at work we use XT for designing landing pages for the marketing website as we

can easily link our sets from the component library and use them in our

projects we found that it works pretty well for collecting feedback from

stakeholders or other team members if you're familiar with Photoshop you

shouldn't have a problem using Adobe XD as we all share a similar

interface plus some adobe has recently updated xt with an incredibly useful

feature called Auto animate and results are impressive currently not

prototyping tools offer this features some consider giving XD a ago the

next tool we are gonna look at is pigma figma is an interface design tool but

run some in the browser window that means your files are all saved online

and you don't have to worry about losing them I've been using Figma for the past

two years and I'm obsessed with this tool the reason why I use this tool is

that I don't need to keep sending emails to my clients asking them to check the

latest update but I can simply share a link with them so they can see what I'm

doing in real time I know this can be a bit intimidating so when I share my work

with a with the clients I always make sure I share the preview and not the actual

file there are so many reasons I recommend you using Figma but the

main ones are that it's web-based it's free and it comes with tons of super

useful plugins and an app called figma mirror that allows you to see your

design from your phone or tablet let me know in the comments below what's your

favorite figma plugins are and how you use them in your UX projects my next

tool is not made for UX UI designers but it's for artists but you don't need to

be an artist to use this tool called Procreate. procreate is a powerful

application for sketching illustrating and prototyping artworks all

exclusively from your iPad and if you're familiar with Photoshop you're gonna

find things like brushes or layers very easy to use before procreate I used to

sketch my wireframes on paper because I found it faster and more flexible than

if I was using a design tool but I always end up with too many piles of

paper and not enough space to keep them so I decided to use my iPad and Apple

pencil as a replacement for pen and paper I start by making a new artboard

5,000 pixel width and 5,000 pixel height so that I've got enough space on

the canvas I select a brush that looks like a pen and start sketching ideas in

the middle of the canvas I use Procreate mostly for wireframing

landing pages during the ideation phase to

explore a variety of different options and select the best one the goal is to

generate as many ideas as possible and iterate the best possible solution

generally the faster you can generate ideas the sooner you will move on to the

next step when I'm happy with it I export the canvas as a JPEG and move

on to my macbook pro for me Apple pencil and iPad are the perfect compromise

between a digital tools such as lucid chart and pen and paper I like using my

iPad because I find it easier to stay focus on my work because I don't have

distractions such as notifications emails messages and social medias my

last tool is called webflow webflow is a website building tool that gives you

the power to design build and launch responsive websites in hours

it's basically an only one platform but you can use to go from wireframer to

final produce I use web flow I work to build interactive prototypes but only

after I've prepared them different solutions in Adobe XD and decided which

one works better I do so because it takes more time to build a functional

prototype in a web flow dan if I was designing a flat mock-up in figma or

Adobe XD I use web flow mainly as a prototyping tool but I want to start

using it for my freelance work to build them the actual websites unfortunately

I've never been asked by my clients to be in the web site as they usually have

a developer working for them but this can be an option for future projects if

used correctly web flow is a powerful tool but if you're using it for the

first time then go and check the web flow University where you can find

hundreds of free tutorials that will also teach you the basics of HTML CSS

and JavaScript last year I spend months watching all

the tutorials and testing my skills and before I was confident enough to start

using it on real projects but if you're a freelancer web designer and

you're seriously considering becoming a web flow expert and getting pay more for

web development go and check the flux er web flow masterclass by Ran Segall and

start learning how to build a high value website for your clients I know what

you're thinking why am I suggest you learn a website building tool well I

think that as designers we need to keep up with new technologies and we don't

have to limit our skills to just designing I also believe that the future

will be an hybrid designer so if you really want to succeed you will need to

combine your design skills with others such as developmental writing

illustration 3D animation an information architecture and so on and

if you're a developer or a designer who code so you're gonna have a huge

advantage on other designers who don't code when it comes to learn web flow and

you already know the basics of HTML CSS and JavaScript I'm planning to rebuild my

website in web flow so if you're interested in seeing my process let me

know in the comments below and then make a video all right so this was our last

tool for today and as promised here's my three tips for web framing and

prototyping tip number one a prototype is not the final product so don't expect

it to be pixel perfect instead make sure it has a high degree of interactivity so

it can be built and tested faster tip number two you don't need an expensive

machine for sketching but you can simply use pen and paper sticky notes or

whatever you have to hand most important you don't need to be good at drawing

number three don't get too obsessed with the details or too attached with a

particular solution in case it fails their usability testing if you don't get

things right the first time take the feedback from users to improve your

prototypes now let me know in the comments below what's your favorite

white framing and prototyping tools are and if you wanna see more videos like

this make sure you click the subscribe button like this video and share it with

your friends it'll helps me grow my channel alright

so thank you for watching and I'll see you in the next video ciao