Wireframing and Prototyping are two different (related) activities. They are here together because many of the software that do one will do the other.
Adobe XD
Came on the market in 2017. This tool is designed to make wireframes and prototypes. Adobe seems to be continuously updating it. It is lacking in some of the features that let larger teams work through the entire process. Adobe is working to address these it seems and it closes some of the gaps with each update.
INFO
Cost: Free if you have CUNY Adobe access: if you’re in this class you have free access.
Platform: macOS, Windows. Desktop app only
Figma
[visit Figma’s site]This is designed first to be a a web app that goes from prototype to handoff to developers. This is one of the industry standards and widely used.
INFO
Cost: there is a free tier with 3 projects. After that it is $12/month and up
Platform: Web and macOS/Windows Desktop apps
Miro
[visit Miro’s site] Miro allows you to create a number of different types of diagrams and visualizations. Wireframes is one of them. They have a Wireframe Library with headings, images. You can Watch the short demo video. They also allow you to search for icons to add in. Miro is best for low fidelity (lo-fi) wireframes.
INFO
Cost: free (there are paid plans but you don’t need them if you use 3 or fewer boards).
Platform: Web and macOS/Windows desktop apps, and iOS, Android and Microsoft mobile apps. Visit the Miro Download page.
Sketch
[visit site] This is the oldest of the apps that are here. It started off as kind of specialized vector tool that was similar to Illustrator or Fireworks (both of which many UX/UI people were using when it came out) but gave the user many more tools to make actual interface elements that would go into a web site or mobile app.
INFO
Cost: $99
Platform: macOS only
Comparison Articles
- https://www.creativebloq.com/wireframes/top-wireframing-tools-11121302
- https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd/
- https://uxtools.co/blog/sketch-vs-adobe-xd-vs-figma/
- https://www.smashingmagazine.com/2019/04/sketch-figma-adobe-xd-ui-design-applications/
- https://medium.com/@xccelerate/figma-vs-adobe-xd-vs-sketch-which-wireframing-tool-is-the-best-2043d458f940
Other Software
Framer
[visit Framer site] This tool is designed to go from initial idea through prototype. It combines and interface like Adobe XD or Figma with ability to add smart components that give interactivity and motion. This allows for high fidelity (hi-fi) prototypes (beyond mockups) that look and function similar to the final product. There is a learning curve to get to this point.
COST: Free tier. You can use Google account to sign up or create a new account. Free tier allows up to 2 editors and 3 projects.
Axure
InVision
UX Pin
visit site Targeted at professionals. No free option. Designed to be all-in-one tool.
Pencil Project
[visit site] this is a free open-source tool that is either a Firefox add-on (all OS) or desktop app for macOS, Linux and Windows.
[downloads and extension]
Balsamiq Mockups
Powerpoint and Keynote
… with help of templates/add-ons
Mockflow
has free tier
Wireframe.cc
Mockplus Classic and Cloud
[visit site] There is a free tier. Cloud accounts Costs money but tehre are short-term free accounts for education.
1 comment