A comprehensive toolbox is something valuable. Have you ever had a leaking pipe or broken lamp at home and didn't have the right tools to fix it? Adding new tools to your toolbox helps being prepared for new situations. It helps to understand other tools and helps you to build up emergent knowledge.
When building a prototype, having the right tools and libraries is important. Tight budgets and small iterations demand tools that are made to boost productivity. After all, a prototype is made to create insights.
Prototyping libraries and tools for frontend devs
In this post I want to share my favorite tools for creating frontend tech prototypes. Tools that make building a frontend a bliss and play into your hands. Tools that make your prototype look amazing without much effort. Using those tools can save you valuable time and allow you to focus on what's actually important: Learning about the product.
Nuxt.js
Nuxt is an amazing framework to quickly build single page apps and static sites with Vue. It offers a lot of plugins that take away the boiler-plating and leave room for the actual project.
Its nature to get you started right away with as little config as necessary guarantees to kick-start your prototype.
Alpine.js
Alpine.js describes itself as "Tailwind, but for JavaScript". Its Vue-like syntax (x-if, x-for, x-model etc.) allow your app logic to live entirely on the DOM - perfect for adding some logic to a static HTML prototype.
The CDN version allows you to copy/paste a single line into your HTML page and to get started working right away.
Tailwind
Tailwind is a utility-first CSS framework. It offers class based styling and sensible defaults. It plays really well together with Nuxt and is even offered as a plugin when initializing a Nuxt project.
Adjusting some margins or paddings is as complex as changing a single class on a DOM element, lots and lots of examples in the docs allow you to use Tailwind right away.
Sketchwind
Sketch is a popular design tool that is widely used to design web and native app UIs. When you or the UX experts you work with also use Sketchwind, you can export ready-to-use Tailwind config from your design files.
This Sketch template helps building bridges between UX and Devs and reduces the friction dramatically.
Animate.css
Adding animations to a frontend project is fun, but time consuming. Often last on the priority list of a prototype, animations can nevertheless help to bring points across or lead users to certain behaviors.
Animate.css helps in reducing the overhead of adding animations to your prototype. It's a large collection of ready-made (or, as they state it, "just-add-water") animations that can be used by installing it and using the provided CSS classes.
Fontawesome
Fontawesome might just be the most extensive icon library there is. There's an icon for virtually every use case, it's installed quickly and can be styled pretty straight forward.
Using icons in your prototype helps the users to navigate your soon-to-be product. They're a universal communication mechanism and can improve the UX of your product a lot.
Flightplan
A little older and looking for maintainers, but awesome nevertheless. Flightplan is a tool you can use to automate deployments. Setting it up is straight-forward (install, create a flightplan, run it) and it can do everything your shell can do.
If your client only has a shared host server, you can use Flightplan to automate building and uploading of your prototype via SSH/SCP and rsync. Flightplan helps to build up continuous deployment, a key practice to keeping iterations small.
Takeaway thoughts
Chances are you already know most of these tools, if not all. If you didn't, go look them up! I hope this list makes you think about certain tools you already know in a different way or makes you try a library you've heard about but never came around trying.
Which of these tools will you be using in the future and why? Which ones did you know already but hate using and why?
I hope you enjoyed reading this article as much as I enjoyed writing it! If so, leave a ❤️ or a 🦄! I write tech articles in my free time and like to drink coffee every once in a while.
If you want to support my efforts, please consider buying me a coffee ☕ and follow me on Twitter 🐦!
Top comments (5)
so good!
Interesting
Thanks for these resources!
Interesting post! Thanks for sharing 😄
BTW, which is the drawing tool you used? 😯
Thank you, glad you liked it!
I usually use Draw.io for my illustrations. In my opinion it's a great tool since it's very intuitive and often feels like a whiteboard.