Handy tools to get you prototyping in a breeze
There are numerous tools online touting themselves as the one stop shop for UI/UX design. While most of them are good, and offer incredible utilities for design, they come with a price tag would be crippling beginners with a humble bank account.
Who says designing like a pro has to break your bank?
Here’s a list of some great tools, most of them free or free-ish(has a free plan), that you’re going to want in your arsenal as you build your design portfolio.
- Your pen and paper (free)
That’s right. The first step to visualizing your idea and sharing it with others, as a rudimentary low fidelity (lo-fi) wireframes.
Much like the image attached, this tool does not need you to have the slightest artistic ability.
All you need to do is draw exactly what is on your mind.
2. Wireframe.cc (free-ish)
Wireframe.cc is a step up from hand drawn wireframes.
It’s a web based tool that allows you to make simple and clean wireframes. This is made possible by its minimalist color palette.
Wireframe.cc used to be free, but with the expansion of its feature offering, you can only access the basic tools: it allows you to draw your wireframes, and the ability to share live wireframes with your whole team for collaborative editing. They can’t comment on anything though, that’s a premium feature.
3. Pencil (free-ish)
Pencil is another great tool for wireframing. It is desktop-based, and is available for Microsoft, MacOS and Linux.
The beauty of Pencil is how easy it is to learn. Within 10 minutes you can go from zero to multi-page wireframes, which the software allows you to link the pages. You can export the linked pages as HTML and interact with them on any web browser.
Pencil has also got a lot of available stencils you can use to design for Android or iOS devices, alongside elements you have imported yourself.
Disclaimer: it is a little outdated, having last been updated in 2017.
The system allows you to create multi-page wireframes with links between pages. And — a bonus for your webmasters — when you export your wireframes to an HTML webpage, Pencil preserves the links, so you can share full app or website mockups with linking pages. Pencil also offers a number of templates, a library of shapes, and the ability to import external objects. You can take advantage of the system’s Android and iOS stencils to design for mobile.
5. Fluid UI (free-ish)
Fluid UI is a robust cloud-based wireframing tool.
It’s got a library of 2000+ elements with which you can create interactive prototypes and, a personal favorite, page animations of the final result.
You can interact with your prototypes using the Fluid UI Android and iOS apps.
5. Adobe XD (free)
Adobe has long established itself as the O.G of design space with its suite of design tools.
The Adobe Creative Cloud consists: Photoshop (Ps), Illustrator (Ai), After Effects, etc, majority of which go for a painful sum to license.
Strategically, (probably to compete favorably for users with Sketch and InVision), Adobe XD, is a free tool for creating high fidelity mock-ups.
It allows you to design interfaces for both web and mobile devices. It lets you pick which device you are working on, and allows you to link screen to screen.
If you are storing your projects on the cloud, you can interact with them on your XD Android or iOS app.
XD has a lot of features, I mean, a lot. I doubt I have scratched the top of it in my day to day design practice, feel free to tell me about your XD experience in the comments.
7. Icon search engines
There are lots of icon websites out there, however my favorites are, Icons8, Flaticons and Free icons.
All three provide most of their icons for free.
Icons8 and Flaticons allow you to recolor and resize your icon of choice.
Freeicons.io has a wide selection of icons, but they’re only any good to you if you want them in black.
These are just a few of the numerous platforms you can use for free during your design process.
Know of any other great open source prototyping tools out there, like Figma, which is also really great, feel free to list them in the comments.
