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
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).
Pixate
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
