Tools for Sketching Research and products that empower ideation and discovery. Wed, 11 May 2011 03:25:19 +0000 en-US hourly 1 Mutable Maps for Many Apps Wed, 11 May 2011 02:33:49 +0000 cc
Rivers of Southeast Asia

Rivers of Southeast Asia

Maps present us limitless layers of different data–physical, cultural or ecological. In addition to aiding us with the everyday tasks such as getting ourselves from one place to another, maps help us understand our relationship to the physical earth as well as other humans, and our connection to a dizzying array of physical, cultural, political systems and networks. So it comes as no surprise that at some point in every designer’s career, one project or another relies heavily on maps.

Maps are so ubiquitous that we sometimes ignore the craft involved in clearly presenting this enormous quantity of information. To succeed, maps must clearly describe the data they are presenting, fit it into a surrounding design language, and be readable at a variety of different scales, sizes and presentation modes.

How is a designer to tackle these challenges? What follows is a rundown of a few tools that can make the task of designing, deploying or just visualizing a map a little bit easier.

World Happiness Index (source:Gallup World Poll)

World Happiness Index (source:Gallup World Poll)


Targetmaps allows you to create and share any kind of datasets in a global- or country-specific map. All you need is an excel spreadsheet with some kind of geo-coded data and the tool does the rest for you. While Targetmaps provides limited control over your map’s overall appearance (the underlying map data is google maps), the pleasure of this site comes from the easy-to-use tools for customizing your data ranges and presentation in order to communicate your data most effectively. In fact, using this tool, we were struck by how easy it is to ‘massage’ the appearance of data to tell a specific story, highlight or diminish a disparity or conceal poor data. We were pleasantly surprised to see that Targetmaps uses our favorite presentation tool prezi for its tutorials. Check out my map of Fixed Line Broadband Subscibers by country!

While the ability to easily put geo-coded data into a map format, it can also be useful to have the ability to customize the look and feel of a map. For this kind of task, two tools stand out.

Cloudmade Map Styles

Cloudmade Map Styles

CloudMade Map Editor

Cloudmade is a commercial product built on top of the open source openstreetmap project. They offer hosting, APIs and data sources for a fee to developers of locative apps who want to develop, deploy and run maps on devices and websites. If you’re building a commercial mapping app, definitely check them out. However, what drew me to cloudmade was their style editor, an easy-to-use tool that lets you customize the appearance of openstreetmap data hosted on Cloudmade. With it, you can create a low-contrast grayscale graphic map, a street-centric map for navigation, or a nighttime-style map. The editor is fun and easy to use, but unfortunately, unless you are a paying customer, there is no way to share, export, embed, or otherwise make use of the map styles you create with it. It is included here because it’s an interesting example of a commercial mapping tool built on an open source project, and it’s easy and fun to use.

If you find yourself needing more control over your map data, or if visual appearance and flexibility is an important factor, consider an alternative.

TileMill Editor

TileMill Editor


Tilemill is an open source tool developed for use with MapBox, which describes itself as a system that “radically lowers the barrier to entry for making custom base maps and overlays.” They go on to echo our sentiments when they claim that “data analysts can become mapmakers without GIS expertise, and GIS experts can become cartographers without first mastering design.” Our kind of people indeed. Mapbox offers similar hosting services to cloudmade, but in contrast to the Cloudmade editor, I found Tilemill to be a much more useful tool for the map generalist or designer.

Tilemill takes some configuration to set up and run, and it helps to have some knowledge of GIS systems and data formatting to get the most out of it. However, after some initial configuration, you find yourself at the helm of a powerful map-creating and design tool. Not only can you import GIS datasets and overlay them on top of the variety of physical, political and cultural map data that comes bundled with the system, you have complete fine-grained control of the appearance of the maps at various scales, thanks to a CSS-like markup language called Carto.

The really great part about TileMill is that in addition to being able to host maps on Mapbox, you are given complete creative control over your work. You can export any map you make as a vector pdf, raster image or in the MBTiles format (for true GIS folks.) This kind of flexibility and openness could make TileMill a valuable addition to any designer’s toolbox. For a terrific example of the fusion of design and content that’s possible with MapBox, check out this extraordinary site that maps out US drone strikes in Pakistan.

]]> 0
Three Ways Anyone Can Make a Smart Phone App Tue, 19 Apr 2011 21:48:06 +0000 cc

A referee signal quiz app made with AppInventor

Designers are tinkerers. We like to be able to nudge, tuck, trim and finally throw away our creations and start from scratch. But what about designing for the explosively-growing field of mobile apps?

Increasingly, free tools are becoming available that allow designers to prototype and test rich applications for mobile devices without developing fully-realized apps. In this post I give an overview of an example for each of the three major platforms.


TouchStudio LogoWindows Mobile – Microsoft TouchStudio
TouchStudio allows you to develop simple apps directly on your phone. While it might seem a silly idea at first, the concept of a mini-app developed with TouchStudio as an ‘intant mashup’ or ‘multimedia smart playlist’ is an intriguing one. The would-be-developer still has to write some ‘code,’ although the app does help you along. Unfortunately Microsoft Research dropped the ball with support – little documentation exists and it’s difficult to share code, so it’s doubtful that a thriving community will rise up around this project. TouchStudio is free on the Windows Phone Marketplace.

App Inventor LogoAndroid – App Inventor
Rather than develop a mashup directly on your phone, App Inventor takes a different tack. It begins with an intuitive web-based interface and allows you to build a simple app using a layout editor and patch-style programming interface for programming behaviors. App Inventor seems much more powerful than TouchStudio, and a bit less programming-centric. App Inventor runs in your browser after you run the free setup program

Fireworks LogoiPhone – Touch Application Prototypes (TAP)
Apple is notorious for guarding its ecosystem of apps and phone features, so it’s no surprise that no equivalent development tool exists for iPhone. However, a Dutch design firm called Unitid has come up with TAP, an interesting alternative. It allows designers to develop and test interactions within a semi-functional click-through prototype from within Safari. With a full suite of transitions and effects, as well as the ability to use most browser functionality (compose email, initiate phone call etc,) TAP could be a valuable tool for a visual designer or information architect who wants to experiment with the look and feel of a mobile app before developing full functionality. TAP requires you to use Fireworks and is available for download at Unitid’s website

Got a budget? These three solutions are free of charge. If you find yourself with a working with a large team or needing a solution for ongoing work, consider a paid prototyping tool such as JustinMind, Axure or ProtoShare.

UPDATE: 04/28/11

Blueprint Screenshot

Blueprint Screenshot

Since posting this a few other tools have come to my attention. The most exciting is Blueprint, an iPad app that provides a surprisingly-complete set of tools for creating rich interactive mockups of iPad and iPhone apps, using Apples UIKit GUI elements. Groosoft, the developer of Blueprint demonstrates its capabilities by re-creating Apple’s alarm clock app [video]. If you are interested in learning more, this review gives a good rundown. Blueprint is available for $14.99 in the App Store and is only available for the iPad. A lite version is available for free.

]]> 0
Printer printing printer parts Thu, 11 Nov 2010 02:41:03 +0000 cc
3D Printers are becoming cheaper every day.

3D Printers are becoming cheaper every day.

Nate Anderson at Ars Technica reports an interesting claim in this article about the legal and IP issues surrounding 3D printing technology. The makers of RepRap, an open-source 3D printing platform, claim that there are now more open-source 3D printers in operation now than there are commercial 3D printers. While the claim isn’t independently verified, it raises an interesting question: Will greater availability of inexpensive hardware create the critical mass of users that allow 3D printing to become a part of regular peoples lives? A lesson may be drawn from a similar revolution just ten years ago.

In the late 90′s, faster processors and broadband penetration predated the digital music revolution by several years. It was only after distribution channels (Napster) and presentation tools (WinAmp et al, followed by iTunes) matured that the way people produce, distribute and consume media truly evolved.

Just as college students swapping mp3s over university networks in the mid 90′s were half a decade ahead of the music industry, perhaps the popularity and strong community that have formed behind hobbyist 3D printer platforms are an indicator of things to come in the realm of tangible objects.

I have worked with 3D printers and the various tools that are available for duplicating, creating and editing the relatively specialized 3D geometry needed to create objects from them. From that experience I can say that while the challenges of hardware is primarily one of atoms (ie design a faster machine, develop better resolution, invent a wider variety of substrates etc) and solvable by traditional means. On the other hand, the challenge of the bits (how to develop flexible, usable and powerful tools that don’t require years of training and experience to use) is a lot more exciting and open-ended to me. Will we see exchanges like Google’s 3D Warehouse, or will companies spring up that specialize in creating, improving upon, and distributing 3D models of useful objects? Shapeways seems to fit this model, though I suspect at this point their service is a bit of a novelty and they are positioning themselves as a ‘creator of elegant curiosities’ rather than a ‘creator of unsexy-but-potentially-incredibly-useful objects.’

Read the full article at
Ars Technica – 3D fabbers: don’t let the DMCA stifle an innovative future

]]> 0
No-glue paper creations Wed, 23 Jun 2010 01:59:51 +0000 cc MakeDo structureFollowing up on my post about no-code iPhone UI prototypes, I thought I should share something for making tangible stuff. This blog isn’t just about software or electronics, it is about discussing and sharing tools that lower the barrier to creative communication, and bring it within the reach of anyone with imagination. With that in mind I present MakeDo, a system for um.. building things.


makedo-systemMakeDo is a deceptively simple system for quickly and easily assembling pieces of cardboard, paper, fabric or plastic into … anything! The system includes basic connectors, as well as two different types of hinges. Also included is a special tool for cutting and poking the necessary holes in your materials. With only the tools and parts you find in the box, you can assemble structures, creatures, costumes or anything else you can dream up.

MakeDo is clearly marketed toward children, but having spent my share of time in both product design and exhibit design firms building mockups and prototypes, I can say these little snaps and hinges would be a welcome addition to the gaffers tape, hot glue, foamcore and exacto-knives of a professional model or prototype shop. Check out this quick video for a sense of what’s possible.

]]> 1
Code-free iPhone interaction prototype Fri, 18 Jun 2010 02:32:07 +0000 cc TouchOSC screenshotHave you ever found yourself wanting to prototype a simple, realtime interaction between an iPhone and another piece of hardware, but don’t have time to learn iPhone programming? TouchOSC provides a simple solution to this challenge. An iPhone app that communicates over wifi using Open Sound Control, TouchOSC allows you to control any kind of application that accepts OSC messages.

TouchOSC also includes a companion layout editor. This free desktop application allows you to define custom screen layouts of UI elements and then upload them to your iPhone. Unfortunately there are only a limited number of UI widgets, and because the software was designed to control realtime sound apps, they naturally tend toward realtime control- knobs, faders and toggles as opposed to forms, dropdowns and checkboxes of more rich interfaces. Still, if all you need is a few buttons and a slider to control an interactive system and you aren’t able to develop a native iPhone app, TouchOSC offers some enticing potential. See below the jump for some examples of unexpected uses.

This guy uses TouchOSC to control a robot!

You can even access the iPhone’s accelerometer and send that data over OSC (warning:video has loud sound).

osc, processing and an iphone accelerometer from codingnature on Vimeo.

If you’re using Flash, I recommend flosc for parsing and sending/receiving messages. There are many resources out the for using OSC with Python, Processing and a variety of software packages. So build you UI, teach your software prototype to speak OSC and you’re set!

TouchOSC homepage
TouchOSC @ iTunes Store

]]> 0
Rolling through the dial with Radioball Tue, 01 Jun 2010 23:47:53 +0000 cc Teague's RadioballI usually prefer to write about tools, processes and methods here, but when I see a project that so completely exemplifies the values and priorities within a design process, I just can’t help but want to share it. Teague’s RadioBall is one of those projects. Go ahead and watch the video after the jump:

First, the fact that the complete interaction can be described so clearly in 40 seconds shows how novel and intuitive this little thing is. I don’t even need to describe what it does. It clearly combines form, interaction and customizability in one elegant package. It is in short – a great idea. However, while I won’t be surprised when I see something like this on a store shelf sometime soon, what struck me was the use of physical and digital prototyping tools to so completely and effectively express the idea.

The body is built with a 3D printer and the electronics are all off-the-shelf development tools such as Arduino and XBee, with the addition of an FM radio, accelerometer and speaker. None of these tools are custom and none of the technologies are opaque. In fact, all of the schematics, models and code are available on the Radioball Blog Entry. This entire project was realized by two people in a “short time” in order to serve as a “starting point for conversation about the need for richer, more spatial interactions.”

What I tend to write about are essentially tools to aid in, facilitate or speed up a traditional design process. What I find so exciting about Radioball is that an entire functional prototype was developed to describe the idea. I can write about tools that make 3D modeling easier, software to help you build walk-throughs, or electronics that you can use to aid in detailed user studies, but those are still essentially tools that aid an old-fashioned process. This thing is completely new, both in concept and execution. I can’t wait to see more projects like this and won’t hesitate to share what I find.

Now if you’ll excuse me, I need to start building my parts list for building (and maybe improving upon) my own Radioball.

]]> 0
Pictionaire – A Visual Worksurface Tue, 23 Feb 2010 17:28:31 +0000 cc A collaboration between researchers at UC Berkeley and Microsoft Research, Pictionaire is a tabletop interactive collaboration system that “enables multiple designers to fluidly move imagery from the physical to the digital realm; work with found, drawn and captured imagery; organize items into functional collections; and record meeting histories.” It accomplishes this through us of a rear-projected display surface, gestural touch interactions with the novel addition of a digital camera mounted above the tabletop surface. With it, users can easily move images from printed media or even physical objects back and forth from the tabletop to a stored database of images.

(video, links and observations after the jump.)

Research that aims to explore methods of facilitating group collaborative processes form an entire subset of HCI research, but after watching Pictionaire’s project video, a few features jumped out at me right away. The basic image capture is much like an electronic whiteboard, where users can save and retrieve the contents of a reading surface. However, it’s interesting to see what opportunities open up when the collaboration surface is laid flat and is able to be combined with scanned images or objects.

In my experience in brainstorming or design sessions, oftentimes there is a tactile disconnect between work posted on a wall or corkboard, work on a table and notes or writing on a whiteboard. Pictionaire addresses this disconnect in an interesting way and I would be curious to learn about more specific feedback that the design professionals who were involved in user testing had to say about using the system.

Collaborating on a projected surface and presumably in a darkened environment might pose interesting challenges, I was inspired by the ‘spotlight’ feature shown in the video, and thought it would be interesting to have the capability to create, move around, pinch-zoom and rotate generic white rectangles. These could be used to provide light on printed media or an object, and could also facilitate highlighting specific objects or materials during a session.

The Pictionarie Project Site
has some interesting videos exploring some of formal HCI issues such as the use of contextual interactions.

See Also : BumpTop, Reactable, Microsoft Surface

]]> 0
Scribbles Ignores the Conventional Wisdom Fri, 29 Jan 2010 19:24:18 +0000 cc Check BoxI just recently downloaded Tweetie, a desktop twitter client, and noticed that the company who makes it also makes a product called Scribbles. Noticing that its homepage proclaims Scribbles is ‘Incredibly easy to use’ and has a ‘Revolutionary User Interface’ I decided to give it a spin.

Scribbles is an ideal addition to any visual designer’s toolkit – it is simple without being simplistic, has features designed to enable creative flow and speed, and generally does a good job at what it claims to do. While I found its control over color a bit frustrating, the layer control and ‘trace’ tool were both features that I can actually see myself using. For a small piece of software like this that relies on demo versions to spur purchases, a handful of features that stick in a user’s mind can mean the difference between an application that is used once out of curiosity and one that is purchased and becomes a valued tool.

Scribbles Sketch by unidendified artist from Scribbles GalleryWith that said, after using Scribbles for an hour or so, the biggest insight I came away with was that it really is designed to be used on a tablet computer, or at least with a tablet input device. First, Scribbles’ tools respond to pressure, which obviously makes use of a tablet ideal. Second and more importantly, without the array of mechanical tools like bezier curves, lassos, masks and all of the other little robot helpers designers use, Scribbles relies on the fine motor abilities of the user’s hand. In fact I feel that the design is revolutionary precisely because it it designed from the ground up with the hand in mind.


MacLife had this to say:

Its bare-bones aesthetic doesn’t come from dumbing down the program’s capabilities, but rather from cleverly removing unnecessary complexity.

Personal Anecdote: A classmate of mine in design school hurt his right hand badly in an accident during the school year. A talented and experienced illustrator, he was distraught that the multiple surgeries and six months of physical therapy would derail his entire semester. One of his professors took it in stride and simply said to him – “well, just use your left hand.” He did, and being the talented individual he was, could soon draw and paint deftly with his left hand, with a looser, more expressive (and IMO more interesting) style.

I suppose this story goes to the heart of the point I am trying to make here, that sometimes removing ‘crutches’ that we use and starting from the ground up allows us to see things and communicate in ways we didn’t even know we could. I look forward to more software that challenges us in this way.

]]> 0
Sketchpad – A Look Back. Wed, 20 Jan 2010 21:26:03 +0000 cc In 1963 Ivan Sutherland developed Sketchpad. In developing what was to be part of his phd thesis, Sutherland pioneered what would come to be known as the graphical user interface, parametric constraints and the very concept of object-oriented programming, which he developed in order to better manage memory on the limited capabilities of the machines he was working on.

Much has been written about Sketchpad, Sutherland and all of the developments in HCI, computer science and engineering that continue to flow from his work. In the context of this site however, it’s important to note that Sutherland’s innovative engineering solutions were all driven by the desire provide people the ability to express themselves more intuitively with technology. The application precedes the solution.

“A display connected to a digital computer gives us a chance to gain familiarity with concepts not realizable in the physical world. It is a looking glass into a mathematical wonderland.” –Ivan Sutherland.

]]> 0
Twist your presentation like a Prezi! Wed, 13 Jan 2010 06:07:30 +0000 cc Prezi is a Hungarian startup that has developed a tool to empower people to make stunning visual presentations using text and media. Using their intuitive (yet not fully cross-platform) editing tool, creating gorgeous, dynamic motion-based presentations is surprisingly easy.

As an exhibit designer, I personally found Prezi’s strong emphasis on scaling inspiring. Since exhibition designers use scale as one of their primary mechanisms of information organization, I can even see Prezi as a potential tool for prototyping exhibit content, where the ratio in size between header graphics, sub-headers, body text and captions can be as high as 100:1.

Like most sketching tools written about on this site, Prezi’s success relies as much on its limitations as it does in its features. While the possibilities for creating zooming presentations seems endless, Prezi keeps its users on track by providing only a few design templates, not allowing users to edit transition times between ’slides’ and otherwise keeping the system as simple as possible. A professional motion graphics designer might find this constraining, but a casual user (like me) can create very professional looking results in less than a half hour. See below for an example I created (oh yeah, the final product is easy to share, download and embed in a website.)

Click Read More for more analysis.

The main editor menu in Prezi offers some innovative interactions. Organized in a visual hierarchy where the current tool selection is displayed as a top-level menu with available sub-commands below it, the process of building a Prezi slideshow relies heavily on mastering this unconventional interface. New users may be confused that the tools for creating and those for editing the size/placement of elements such as text exist on separate levels of the menu hierarchy, but with a variety of different media types to wrangle, and a variety of different parameters to edit within each slideshow, I found the separation of creation and layout interesting. Also, quickselect keyboard commands offer the potential of making the process of creation even faster.

The Prezi ‘dartboard’ (my name not theirs) is another innovative UI element that users will quickly become acquainted with (my labels added to the screenshot at left). When an element is selected for editing, the dartboard is overlaid on top of it. The various sections of this widget allow users to place, scale and rotate an element or group of elements. Again, the separation of creation and layout, while seemingly limiting, actually makes laying out presentations easier. It also must be noted that Prezi projects are created entirely within a browser and the Prezi team must be applauded for implementing such intuitive editing tools within the somewhat-limiting constraints of a web browser.

After wrestling a bit with OS- and browser incompatibilities and getting acquainted with the unconventional UI, I found Prezi extremely fun to use, and even after a half hour of noodling found myself wanting to play more.

]]> 0