Turn an Old Picture Frame into Responsive Wireframe

Responsive WireframesI originally saw this idea posted by @chrytonbaine with the imgur to the right. I thought, “that’s pretty cool and looks pretty easy to do.” So, with a bit of free time on a weekend, and a host of old picture frames to choose from, I went to work on creating my own easy to use responsive wireframe.

Step One – Choose Your Frame

This seems obvious, but choose a picture frame that you will like. You are going to end up staring at it for large lengths of time, so if you don’t like the frame you have, go get a new one. My parents were throwing a bunch away and I grabbed the cream of the crop. Not too big, not too small, but just right. Easy to hold and the thick edge allows it to stand on its own.

Pick a FrameThree things to note about this particular frame.

  1. It has a carboard backing that was taped on – this allows for easy access while covering up the staples.
  2. The staples hold another piece of cardboard and a material similar to plexi-glass.
  3. The glass element allows for quick and easy dry erase marker removal (Note: you should test it before moving forward).

Step Two – Select an appropriate responsive wireframe

Now that you have a frame frame, it’s time to get a wireframe to put in your frame. I chose the “Mobile Sketch Sheets” from SneakPeekIt, but you can choose whatever fits you best.

WireframeThe lines in the sketch sheet are fairly light, so I took it into Photoshop and darkened it a bit. Afterward I printed it out and laid it down on the cardboard to line it up properly.

After that I just had to slap everything back together and test it out.

Step Three – Find dry erase marker…and make marks

If this seems like a logical step in the progression, that’s because it is. You’ve finished the hard stuff, now you just have to use it.

So that’s it. A simple, easy way to create a mobile responsive wireframe that you can doodle on easily

Some Afterthoughts

Responsive Wireframes in ActionI didn’t do this but, you could actually print out several different types of wireframes and put them all behind the plexi-glass, making for quick switches between wireframes.

I would also suggest using the thin dry erase markers. The markers used in the picture were the standard fat Expo markers. Just a thought. Give it a try and let me know what improvements you made to make this a great tool.

No coding, no back-end, just simple doodling. Enjoy!

Notify of
Inline Feedbacks
View all comments

John Hartley is a Director of Product Engineering at Beam Dental in Columbus, OH. With 5+ years of leadership experience he has worked in startups, agencies, and began his career as a freelance Front End Developer. Always looking to iterate, this blog is a place for him to share his knowledge as well as hone his craft, challenge assumptions, and build a strong base of leadership and management knowledge. Connect with him on LinkedIn

Would love your thoughts, please comment.x