I couldn’t draw you a 6-inch straight line if you gave me a ruler, a pencil, and a 5-inch head start.
Seriously, design is not my forte. Just ask anyone who has ever tried to copy off my papers in high school. My doodles are terrible and cast doubt on my ability to perform basic motor functions.
But working in the realm of content marketing means I sometimes need to sketch, share, and explain design ideas to my colleagues in a format more coherent than scribbles on a napkin.
So the challenge becomes finding a way to bridge the gap between an idea and a visual without running my colleagues patience (too) thin.
In that spirit, I’d like to share the crutches I use to hobble through the world of design and overcome my inability to draw a circle even if a stencil was provided.
1. Scribble on Screenshots Before You Send Them
A tool to help you pull this off: Markup.io lets you draw on any web page with a variety of tools before sending a link to a colleague.
How this is helpful: Want to send a screenshot of a website but only want to highlight one thing? Love how Example.com does their social media account box? Want to draw graffiti passive-aggressively on your competitor’s website for cheap laughs? Markup.io is your tool.
Instead of sending people a link and asking them to “check out this website” for a certain design element, you can use markup.io to take a screenshot of the site that includes your notations. That way, people don’t throw the baby out with the bathwater when you share a site you like with them:
Instead of loading the page, taking a quick look and deciding they hate the entire thing, you can clearly display that you just like a certain element of the site, and that’s what you’d like them to focus on.
2. Put the Back-of-the-Napkin Sketch to Shame
A tool to help you pull this off: Framebox.org lets you sketch a design using built-in UI (user interface) units.
How this is helpful: As much as your colleagues may appreciate your back-of-the-napkin sketches, they probably secretly wish you could flesh out a concept that doesn’t have stains from your lunch on it. Think of Framebox as a web-based whiteboard without the marker fumes. In addition, the tool keeps you honest in terms of the actual physics of what a website can contain.
There are other products that offer this functionality, but Framebox is free (for now, anyway). If you’re willing to put a few bucks toward a tool, you can’t go wrong with Gomockingbird.com, which offers a bigger toolbox of pre-created icons and more functionality (for the advanced user).
3. Turn Any Website into a Wireframe
A tool to help you pull this off: Wirify.com has a bookmarklet that lets you turn any page you’re viewing into a wireframe version of itself. In other words, it removes all colors, fonts, images, and content and gives you a version of the site only a mother (or Information Architect) could love.
How this is helpful: Biases are a hard thing to turn off when you’re looking at a site’s structure. It’s almost impossible not to be swayed by the content of a page when you should be evaluating the underlying architecture.
Try sending ESPN.com to someone who doesn’t like sports or Bluefly.com to a non-fashionista. You run the risk of your colleague dismissing your suggestion because it’s “not for the right audience.” Using Wirify.com will allow you to strip all the content from a site and present them a version that is literally in black and white (and a little grayscale).
Also, if you’re drawing user interface inspiration from say, you know, a, uh, site where people don’t wear clothing, it’s the best way to share with your colleagues while not getting strange looks and dinging your reputation as an upstanding citizen.
Not all of us are artistically inclined, but that doesn’t mean we can’t bring something to the table when we’re discussing web design.
What are your favorite web design tools for non-web designers?
