Fabrizio Giordano`s Web Space

From Product to Wireframe


Wireframe goal should be to focus on the “why” of the product. The design and UX should focus on the “how”.

Recently I was planning to clean up the UX and add some new features to an old mobile app of mine: Bike Plus NYC iOS | Android.

I started by taking some screenshots of the current app and then importing them in Sketch.

BikePlus App Screenshot

After few iterations and new artboards and I realized I needed add phone frame around those to give a little bit more perspective.

I had 3 options:

I opted for a simple script.

The script had to combine the artboard and a phone case:

Combine the phone case with an artboard

I wrote a quick script which magically handled the work:

I just had to export the artboards and run a script. All artboards were stored in ./composite folder and wrapped in a nice phone frame.

Wireframe with Colors

The colors were distracting. So I applied a filter to the artboards to remove the colors.

convert has a nice grayscale filter out of the box. I just had to add these few lines:

Here the final result: Wireframe with Colors

I can keep working in Sketch and import these new images in a presentation or on storyboard like this one:


See you next time.

I currently work at Zillow. “Opinions expressed are solely my own and do not express the views or opinions of my employer.”