Practical Web Development Tools and Resources
Any Google search for Web development tools will produce pages and pages of results. “100 MUST-HAVE Web Dev tools,” “20 Brilliant Tools For Web Design and Development,” “A Complete List of Web Development Tools.” Sure, there is some good stuff in those lists, but has the author really ever used any of them? Maybe. Is it a list for the sake of making a list? Probably. Is any of this true about this list? Of course. The list part. But this list will be short and sweet and include just a few things things we regularly use in a practical production environment. A long list is great for ideas, but too many tools can get in the way of actually producing anything. With that said, here are some of our favorites at the moment.
UxPin is a wireframing and prototyping tool. As SaaS, it allows us to work anywhere there is an internet connection, and easily share and collaborate ideas. The app includes many advanced features including interaction design and PSD import as well as responsive breakpoints. An expansive list of asset libraries makes creating elements simple. From Web forms to iOS and Android UIs, ideas can come together quickly by importing elements and tweaking settings for your needs. Want to go beyond grayscale boxes, they’ve got you covered there. Style text, add color, and import image assets to make your prototypes as detailed as you like. When you’re done, share, export, or present to colleagues or clients and use the comments feature to collect feedback.
Want to use that new CSS code you found online? Make sure it’ll work with your target audience’s browsers before you spend hours perfecting it. This site provides browser support tables for front-end we technologies so you know if that cool new idea you have will actually be seen by anyone. Not seeing the browser support you were hoping for? Fear not, in most cases you can find links provided for fallbacks and polyfils so your great idea doesn’t have to be shelved until the masses catch up.
Icon fonts can easily add a little extra to your designs. There are many solid choices, but our favorite is Font Awesome. It’s constantly updated with a variety of icons and you can easily add them to your project with as little as one line of code. Once installed you can adjust size, color, add effects, even animate icons to fit your needs.
We’ve all been there. You need an interesting image for a design and the usual stock sites aren’t cutting it. We’ll let you in on a little secret, but you have to promise not to tell anyone. We don’t want the whole world to know. Unsplash provides a large collection of high-resolution free images, updated every 10 days,with 10 new images that you can use however your heart’s desire. We find that these are typically best for large background images but the only limits are your own creativity.
So there’s our list. Is it huge? Nope. Is is practical and useful in your everyday workflow? We think so. The best toolbox is the one you fill for yourself, so find what tools work best for you and get to work.