Wireframer
Makes a copy of the current PSD and transforms it into a black and white wireframe.
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