10 Tools web designers can’t live without

10 Tools web designers can’t live without

Tools that web designers mostly use to bookmarking apps are listed from JavaScript libraries. Web design pros reveal their favorite tools. To help the lives of web developers easier, we asked the experts for the tools they simply can’t live without. So if you’re looking to make your workload easier (and who isn’t?) scroll through this list of tools and top plugins and apps.

No matter how many times you will update or improve your system, there’s always a better way of doing things, whether that’s writing snippets for search engines or editing whiteboard photos.


D3.JS is a useful JavaScript library that lets you manipulate documents based on the data they contain. Using HTML, SVG and CSS, data is brought to life with an emphasis on modern web standards.

“D3 works its way into any web application project that needs to keep track of data,” explains data visualiser Rachel Binx. “The ability to bind data to DOM elements and dynamically update them allows me to build rich, responsive applications with significantly less code.


CodeKit is a tool that lets you build websites faster and better, and it’s so successful it’s already been used by Google and Barack Obama’s campaign team.

“I use Sass on most projects, but running the Ruby command from the command line makes my Mac too slow,” says Jen Simmons, host of The Web Ahead. “Plus, if I do it all manually, it’s a lot of steps. CodeKit handles everything. It makes preprocessing idiot-proof.”


Want to try fonts before you buy them to see how they look and feel? By downloading SkyFonts you can do just that. Browse and access fonts for a limited time, and if you’re not happy with them when the time’s up they will automatically remove from your system.

“SkyFonts means I can explore the web fonts I want, in my static comps,” reveals designer and author Katie Kovalcin. “You’re essentially ‘renting’ the fonts for a brief period, which is enough to generate a deliverable for client approval. It also works with a variety of web font services.”


Improve your HTML and CSS workflow with Emmit, a plugin for popular text editors. In no time you can write code, wrap it with new tags, select important code parts and much, much more!

“Emmet is an incredible plugin for text editors, which enables you to quickly write CSS or HTML via a shorthand syntax and tabbing,” says Una Kravets, a frontend developer at IBM. “It has completely changed the way I write code, and improved my speed and productivity.”

Line-Length Bookmarklet

Crafting perfect online copy is hard enough, even without considering optimal line-lengths. But with this useful line-length bookmarklet you can tailor your text to fit into flexy widths containers.

“This handy bookmarklet saves time when testing for optimal reading line-length on different screen sizes,” explains Petra Gregorová. “Hover and click on any text element, and the ideal character range is instantly highlighted in red. It’s helpful for deciding where to introduce a new breakpoint or adjust font size.”

Web Designing Tools

Visual Studio Code

This redefined code editor is optimized for cloud and web applications, letting you build and debug with free code available across Linux, Mac, OSX and Windows,

“I moved from Sublime Text to this on both my PC and Mac,” Microsoft tech evangelist Stacey Mulcahy says. “It’s a really good-looking IDE, but the debugging tools that I leverage for Node.js are what makes it invaluable for me on a daily basis, along with the support for my everyday languages like Python and JS.”

Office Lens

Just like having a scanner in your pocket, Office Lens lets you digitally record notes scrawled on whiteboards and blackboards. What’s more, it can convert images to PDF, Word and PowerPoint files.

“An app with a boring name, made by Microsoft. I know – whaaaa? But hold up, because this thing is so good for taking pics of whiteboards, you’ll never go back,” says product designer Hannah Donovan. “If you do a lot of collaborative product strategy/sketching,
 this is for you.”


With a clean, minimalist layout, Feedly lets users stay up to date with their favourite online publications, including blog posts, publications and YouTube videos. Feedly puts content into action by recommending further reading and alerting you to news and updates from the companies you follow.

“Since Google killed off Google Reader, I organise my blogs using feedly,” explains product tester Kim Knup. “I have them categorized for easy topic-related reading. I can read about the latest trends in technology and software testing on the way to work, and then end the day reading about my hobbies such as sewing and photography.”

Git Tower

The latest version of Git Tower focusses on simplifying Git’s complexity while keeping its powerful festure set accessible. New features include a conflict wizard, support for the popular git-flow branching model and a service account manager.

“We utilize Git heavily in our workflow,” reveals Salesforce lead developer Stephanie Rewis. “While everything can be done at the command line, I’m a visual person and I find managing multiple repos in Tower quick, simple and efficient. Tower keeps me productive.”


Keep track of your favorite content with Pocket, a sort of online bookmark. It keeps your articles and videos ready to access whenever you want them.

“I love using Pocket,” says creative director Jon Setzen. “I’ve tried a handful of other bookmarking apps and, for me, Pocket is just the best. I’m a sucker for anything one-click (when it’s truly one-click) and the Pocket Chrome Extension makes it easy to save articles quickly.”

“It’s always nice to get on a plane and have a bunch of new things to read.”

Credit: StumbleUpon

About the Author

Leave a Reply