5 Useful Tools for Interaction Designers

| 6 min read

Today we’d like to take a quick look at 5 useful tools for interaction designers.

Page Layers

Author/Copyright holder: Page Layers. Copyright terms and licence: All rights reserved Img source

If you’re working on a Mac then Page Layers is a very handy tool. It lets you open your site in your web browser and then instantly convert a page into a Photoshop file – the file includes separate layers for each element of the site making it much easier to work with than a standard screen grab. The layers are based on a logical structure based on the website’s structure. You can also save as PNG image if you don’t need the layers. The licence fee for Page Layers is a very reasonable $34.99 and feedback from users is consistently strong.


Marvel makes it easy to switch PSD files into usable prototypes. The product links to DropBox and picks up PSD layouts and then you use their easy-to-use editor to build prototypes in a matter of minutes. There’s a handy feature that lets you send out links to the prototype to others. There’s support for iOS, Android, and other operating systems too – so that you can ensure that the recipient can use the prototype. Best of all – it’s free to use!

Emmet Live Style

Author/Copyright holder: Emmet Livestyle. Copyright terms and licence: All rights reserved Img source

Live Style is currently in Beta and it’s a nifty product that lets you see instant updates to the appearance of a site as you make changes to the CSS. The product is free to use at the moment but there is likely to be a fee when it finally launches. Support is, however, limited to Chrome, Safari and Sublime Text at the moment – which may or may not suit your needs. There’s a good video that shows of all the features on the home page and installation is relatively simple (there’s a good guide for that too).


Author/Copyright holder: Pixate. Copyright terms and licence: All rights reserved Img source

Pixate’s a tool for mobile interaction design prototyping. It’s free to set up your first project, which gives you a chance to decide if you like the way it works and then there’s a subscription fee (monthly) for further use. For most agencies the price will top out at about $17 a month (including a discount for paying annually rather than monthly) but for major corporates pricing can be higher still.

X-Ray Goggles (from Mozilla)

Author/Copyright holder: Mozzila Webmaker. Copyright terms and licence: All rights reserved Img source

X-Ray Goggles is a browser plug in that lets you click and check out the code elements on any given web page. It also lets you change the mark up and preview what happens when you do. You can even share the output with others – that lets you test ideas quickly without making changes to the underlying website. It also lets you play with competitor offerings and see how you could incorporate some of their ideas in your work.

Header Image: Author/Copyright holder: Smashing Magazine. Copyright terms and licence: All rights reserved. Img


Open Access - Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!