Makes a copy of the current PSD and transforms it into a black and white wireframe.

“Wireframer” demo

Background

Often I like to create full colour mock-ups as soon as possible and even skip drawing wireframes, but there are also times when, once I have a layout I know works, I will want to go back to simple wireframes.

It’s way to show a developer how I’d like a build to be structured (this script is like turning a design into an X-ray), but sometimes I don’t have real content to work with and I’d prefer to show a client the wireframes first so they focus on the design and not get distracted by ‘wrong’ content. There are also occasions where I’m adding a single feature to a design, and showing the new feature in colour and rest as a wireframe is another good way to keep a client focused in a presentation.

Features

  • Works on visible layers, so colour can be retained by hiding layers.
  • Adding a blue label to a layer will turn that layer light blue in the wireframe. Good for marking interactive hotspots.
  • Adding a gray label to a layer will add a layer name to the wireframe.
  • Text lines are converted to light boxes the width of the paragraph
  • Shapes are converted to dark boxes
  • Images are converted to dark cross boxes
  • UI design, coding: Ryan Gilmore