Links

Rabbit holes for procrastivity.

responsivepx

Responsivepx allows you to enter the url to your site (local or online) and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then you can use that information in your media queries to create a responsive design.

http://responsivepx.com/

IPEVO Ziggi Review

Camera attached to computer

Have you ever done the dance of holding a sketch up to your computer’s webcam or taken pictures of them with your iPhone to email to yourself or to colleagues? I’ve done that sort of thing for all of the years that I’ve worked remotely on design and development teams, because scanners get tired real fast.

Frustrated with this process, I had largely given up, until a few months ago when I was looking for tools to share work on paper between students and teachers. I stumbled upon the $89 IPEVO Ziggi USB Document Camera and have been evaluating it for a few months now as a tool for design collaboration.

I’ve been finding it easy to use for both shooting sketches for sharing in other apps, and for capturing and reviewing sketches with remote users using a screen-sharing tool like Skype. I now also believe it could be useful for other tasks including video capture for usability testing on mobile devices, and even presentations like one would do with an old school overhead projector.

The compact camera folds down and fits in a small bag. It comes with a posable arm to adjust the camera height, a rotatable camera head, an anti-glare shield, and the P2V software is used to display the video on your screen or to a projector when in fullscreen mode.

The camera includes buttons to adjust exposure, a focus button, and a switch to set autofocus on or off. These functions can also be controlled via the software interface. The software additionally provides a focussed mode for capture, a thumbnail view for review, and the fullscreen view.

Camera controls

This is a closeup of the camera with the foldable anti-glare shield which can be used when capturing back lit devices like a smartphone or tablet screen. If you were to record an iOS device screen, you would keep this attached.

Here’s a low-resolution video I took of me sketching that you may have seen in a presentation I gave. It’s pretty low quality because of the movement and video compression since I used it in a presentation.

The camera itself has a 2.0-megapixel CMOS sensor with auto-focus and is capable of 30 fps live video capture (at 640 x 480). Still shots can be taken up to 12.2” x 9.1” (310 x 230mm) and offer resolutions up to 1600px x 1200px.

You can use the camera as an input for third party software like Skype or Google Talk, although you’ll lose some capture capabilities. If you’re capturing a test session you’re most likely want to screen capture the session with another app like Silverback or Screenflow. I’m also using the new Evernote page capture feature a lot with the Moleskine, but could see this device being a better alternative at a desktop.

Overall, I’m really pleased to have this as one of the few tools in my design arsenal. There are few that stay, but this one is turning out to be as useful as I’d hope it to be with little fuss.

http://www.ipevo.com/prods/IPEVO_Ziggi_USB_Document_Camera

Whitelines Link

Everyone’s getting in on on the physical paper capturing game using the iPhone’s camera. Whitelines is one of my favorite sketch paper makers. They make great graph paper that reverses the grid using white lines over pale a gray paper. The result is that the grid it more subtle and less distracting

The Whitelines Link product is a free iPhone app that let’s you capture sketches made on their new Whitelines Link papers. Position the phone over your paper, the app recognizes and aligns with the squares in the corners, and automatically captures it. You can then save your picture to Dropbox or Evernote or share it via email. If you check a box in the bottom of the sheet, and set a preference on the app, it will send your sketch to your preferred sharing destination automatically. You can even route them to a folder in Dropbox and label in Evernote.

Whitelines sells notebooks with the new sheets, but you can also download sheets for free in A4 and A5 sizes. Find out more here.

http://whitelines.se/link/

Evernote Smart Notebook by Moleskine

I’ve tried a lot of tools for transferring sketches from analog sketchbook to digital. I was an early Pen-It user, have used page cutters with a scanner, and have lately just resorted to taking photos with my iPhone. The Evernote/Moleskine Smart Notebook looks like it might provide the right mix I’m looking for.

I've given up on the idea of converting paper sketches to vector drawings. What this seems to offer is the ability to use that dotted sheet tech to correctly line up your photos taken with Evernote app, and combines that with some neat stickers that will automatically route your sketches to tags and/or specific notebooks. I can use the pens I like, and just save my work without worrying about any serious technical communication between an input device besides my phone.

At this point all I'm interested in is capturing the sketches so I can be rid of the piles of paper sketchbooks at some point. I've gone that way with Kindle books, I want to go the full route with my sketchbooks as well. If it goes well enough, I'm ready to cough up the dollars for the yearly no-limit uploading.

Available for order here.

http://blog.evernote.com/2012/08/24/the-new-evernote-smart-notebook-by-moleskine/

Contrast-A: Find Accessible Color Combinations

Contrast-A allows you to experiment with color combinations, examine them using accessibility guidelines and, create custom color palettes. The app checks color combinations for sufficient contrast and displays the results according to WCAG 2.0 (Luminance Ratio) as well as the results according to older accessibility guidelines, WCAG 1.0 (Difference in Brightness and Color).

http://www.dasplankton.de/ContrastA/

Buxton Collection

Bill Buxton has been collecting input and interactive devices whose design struck him as interesting, useful, or important. In the process, he has assembled a great collection spanning over 30 years of the history of pen computing, pointing devices, touch technologies, as well as an illustration of the nature of how new technologies emerge.

The collection can be browsed in HTML or via the PivotViewer Silverlight interface. PivotViewer provides a richer experience with faceted filtering, search, and hypertext links for metadata. Each device includes Buxton's photos, notes, details about the device's release date, retail value, and name of the creator.

View the Buxton Collection.

http://research.microsoft.com/en-us/um/people/bibuxton/buxtoncollection/default.aspx

Adobe Shadow Mobile Device Testing

Adobe Labs' Shadow is an application for Mac and Windows that allows you to preview and inspect your mobile website on iOS and Android devices.

After installing the software on your computer and any number of mobile devices, you can connect and pair them and all devices will be kept in sync with the web site you're previewing on your computer. This should help perform remote inspection and debugging so you can see HTML/CSS/JavaScript changes instantly on your devices.

http://labs.adobe.com/technologies/shadow/

Usabilla Discover

Usabilla Discover is like a mashup of Pinterest and LittleBigDetails, or maybe it’s a social LittleSnapper. Whatever the pitch, it’s pretty useful to share screenshots of interface and visual designs you like. Now to figure out how to get my over 2,000 screenshots into it.

Note: To get in during the beta, sign up here with code "KONIGI", good for the first 200 who use the code.

http://discover.usabilla.com/

Mr. Tappy: Video rig for tablets and mobile devices

Mr Tappy is a kit for filming mobile phones, tablet computers and handheld devices from the user’s point of view. Looks like a great alternative to setting up your own DIY rig, and costs $289.

Originally designed by Nick Bowmast as a filming rig for iPad usability testing, Mr Tappy lets you capture or share user interaction with mobile devices during user experience research, product demonstrations or classroom presentations. Attach your webcam and any type of mobile device, set the camera height and angle, and record.

Via 90 Percent of Everything.

http://www.mrtappy.com/

Reframer: Qualitative data analysis system

Reframer is a collaborative web app for collecting and analyzing qualitative data. You start by capturing data into the app—things like customer feedback, free text responses in surveys, emails, interviews, and usability test data. The system then uses the aggregated information and provides a view reframed with quantitative values based on a significance rating that team members apply. These values can also be used to prioritize issues to assess feasibility. The metadata additionally allows you to identify trends and themes, and show relationships in data based on correlated tags.

Looks like a fantastic way to get all of that data out of spreadsheets and into a living tool for both quick capture and simpler analysis. They offer tiered plans from free to $249. Paid plans come with 30 days free. More info here.

http://getreframer.com/

Sauce Labs: Cloud-Based Cross-Browser Testing

Sauce Labs provides browser testing services for front end development and quality assurance. Their Scout service lets you test your public or private web app in any browser via a VM that’s run in the cloud. Enter a URL to test, select an OS and browser, and a virtual machine runs in the web page so you can test in that configuration on demand. Scout can record and save screenshots and video of every session, and they can can be shared, embedded etc. with a dev team, which is nice for bug reporting. JIRA integration means those same videos and screenshots can be attached to JIRA incidents as well. They also let you run automated Selenium tests in the cloud with Sauce OnDemand, for those of you who work with QA automation tools.

I also liked what they describe in this blog entry discussing the security measures they take. Every session gets a fresh VM that’s never been used by anyone else, and at the end of your session, the VM and all its data is completely destroyed. Good for peace of mind if you're paranoid about such things.

Plans are tiered, starting with a free personal plan that gives you 45 minutes of testing per month. You can use it here.

http://saucelabs.com

Fine Res Tool

The folks at FINE Design created a browser-based tool for seeing how your web site measures up at different screen resolutions.

To use it, simply enter a full URL of your choosing. Up pops that location superimposed with a draggable set of rulers (x and y axis) configurable in center/left/and right alignment. These rulers allow you to view that site as it would be seen at different resolutions. So you can get a sense for what other eyeballs experience. A small dashboard at the bottom even gives you current stats on what resolutions most people use (hint: 1024 x 768).

Check it out.

http://myres.finedesigngroup.com/

Steedicons

The Steedicons set by Kyle Steed contains 300+ hand drawn icons available as a font or in vector format (.ai, .eps, .csh) for Illustrator, Photoshop, or the wireframing tool of your choice. The bold, sketchy icons would would work perfectly in Balsamiq Mockups or alongside the Konigi Sketch stencils.

Here’s a small sample of the icons available in this set.

Buy them here.

http://steedicons.com/

BrowserStack: Cross-Browser Testing Tool

Browserstack allows you to stop relying on screenshot web apps or using multiple virtual machines to do your testing. The service gives you remote, web-based, VNC screen sharing using the web browser you choose, so you can test your web sites and apps in real time rather than relying on static screen comparisons.

Enter a URL to test, and select a target browser in the version of your choosing and screen resolution. A VNC connection is opened inside the web app, giving you remote control of the target browser. You test your pages in real time via the VNC screen share, and each browser is configured with developer testing tools (Firebug, Chrome Developer Tools, IE Testing Tools, etc.). The service also allows you to set up a tunnel to test your local server or html pages in their remote browser.

Pre-paid, metered plans are available at 10 or 30 hours, or buy monthly or annual plans for unlimited, unmetered testing.

I’ve never been a fan of screen-capturing testing tools, except for single-use tests like the email newsletter testing. I use multiple VMs running IE browsers mainly. BrowserStack looks worth the money if you’re tired of constantly installing and switching VMs. I know I am. I’ve been doing a trial for the web app I’m working on and the time savings looks worth it to me.

http://browserstack.com

iOS Stencils for OmniGraffle

I’ve been asked several times in the past to add iOS stencils to the wireframe stencil set I make. These are some that I know of, and have been recommended to me by @OmniGraffle and @jmk.

I prefer to link to these than to throw together something myself until I actually work on an iOS project. Why re-invent the wheel? I think the difference among these and the stencils I create is that these are all high-fidelity, rather than the mid to lower fidelity shapes I would wireframe with, even for the iPhone or iPad.

If you know others that deserve to be on this list, let me know via Twitter or using the Contact link in the footer.

http://www.informationarchitects.jp/en/ipad-stencil-for-omnigraffle/

Visit gifmuse
gifmuse.io
Say Hello

Sign my guestbook and share a random, weird or inspirational message or whatever is on your mind.


Blogroll