GalleyCat AppNewser SocialTimes AllFacebook AllTwitter TVNewser TVSpy LostRemote AgencySpy PRNewser FishbowlNY FishbowlDC MediaJobsDaily UnBeige

Tools of the day: Markup.io and Connect a Sketch

As someone who has worked in product management, I’m always on the prowl for any tools that can make the process of planning a web project easier.  These two tools for quick feedback and quick prototyping do just that.

Markup.io

Need to make a quick comment about the design of something on your website to pass along to the rest of the team? Whether you’re a QA tester, designer, developer, or web producer Markup.io makes collaborative commenting on websites simple as ever.

Unlinke other desktop screen captruing apps, which require you to download and be running software, Markup.io is a browser bookmark that you simply click to activate. In the top right-hand side of your browser, you’ll get a markup menu with options for pen sizes, colors, and text. Then you can start scribbling away over the top of any website.

The most useful part of this tool — that sets it apart from services like Jing and Skitch — is that you users can collaboratively mark over each other’s work for contextual commenting. It also saves a cached HTML version of the site you marked up so that when the page changes later, your markup will still be relevant (see this mock example I created). The downside from the desktop-based services, however, is that you can only use Markup.io on the web and that it doesn’t record audio or screencapture video. But who knows — it’s still in beta.

Connect a Sketch

Putting into practice Matt Waite’s now-infamous “Demos not memos” mantra, comes a tool called Connect a Sketch. If you have a set of hand-drawn sketches or quick wireframes that you want to prototype, Connect a Sketch is the tool for you. Instead of having to convey the functionality of your proposed web-app or site, you can simply plug the pieces into Connect and Sketch. Their site says it best:

Connect-a-Sketch takes your sketches and wireframes and turns them into functional prototypes. Upload your sketches/wireframes, drag and drop them into your prototype, create interactive states and connections between your pages, then test and share.

Created by the team at Viget, the in-browser app is clean with an intuitive drag n’ drop interface. You start by uploading all your sketches, then linking parts of your sketches to each other to mimic interactivity. It’s a quick way to test ideas before having to code a full prototype.

Mediabistro Course

Get $25 OFF Freelancing 101 Online 

Freelancing 101Freelancing 101 starts in less than a week! Don't miss your last chance to save $25 on full registration for this online boot camp with code FLANCE25! Starting April 28, this online event will show you the best way to start your freelancing career, from the first steps of self-advertising and marketing, to building your schedule and managing clients. Register now!