5 Must-Have Web Design Tools for Interactive Designers

Editor’s Note: Want to stay on top of the latest and greatest in web design tools? Here, HOW interactive design expert James Pannafino rounds up five of the coolest tools to make your web design life even more complete…

Do you love using Chrome’s developers tools to view code and break down how other web sites are constructed?

interactive design tools, xray goggles

Activate X-Ray Goggles Free

Well, you’ll love Mozilla’s Activate X-Ray Goggles which is a must have tool for previewing code elements on a web page. Simply drag the Activate X-ray goggles button to your bookmark bar and click it on any site to see what’s under the hood.

The advanced setting allows you to adjust the mark up code and then save the changes to preview.


Emmet LiveStyle beta, Free during public beta test

Tired of refreshing the browser after changing your CSS? See changes in the browser instantly with Emmet LiveStyle (in beta now), it will give you a true cross-platform/multi-device live update. After a simple set-up, open your Sublime text editor and watch the design change in the browser right as you adjust the CSS. Sorry, this only works with Google Chrome, Safari and Sublime Text editor. LiveStyle will be a paid product, but it’s free during a public beta test.


Marvel App Free

Interactive design tools, Marvel

Want a simple way to create prototypes of your PSD’s without complex coding? The new Marvel app (not the comic book company) might be the thing that will do the trick. This web based program connects PSD layouts from your Dropbox account to Marvel super-simple editor to create realistic prototypes in seconds. You can even send a link of the live prototype to others to preview.


Icon Strike Free

interactive design tools, icon strike

You can’t design an app without an icon. Like every good interactive design you need to test components in the proper context. Icon Strike by Flinto allows you to quickly test the icon without any complex downloads or plug-ins. Simply drag an icon to the web page, open the link, and preview it on your iPhone.


Page Layers

interactive design tools, page layers

Wish there was a better way to re-design or improve existing web page designs? Page Layers is a nice program that not only captures the web page, but also saves each web page element in a Photoshop document in separate layers. Sorry, this Mac OS X program isn’t free.


Have an interactive tool or app that you like to share? Please email suggestions to jpannafino[at]gmail.com.

James is the author of www.interdisciplinaryinteractiondesign.com. Follow James on twitter @JPannafino

HOW Design University

Want to build your web design skills? Check out HOW Design University for courses spanning all experience levels and many topic areas. From responsive design and typography to Adobe products, you’ll continue your education for greater relevancy in the field.