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.