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.
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:
- Manually edit each artboard. Tedious and boring activity. And not easy to switch from an iPhone case to an Android case. No go;
- Write a Sketch plugin that parses each artboard, add a new layer, apply the case and then skew all other layers to fit into the screen area. Overkill;
- Write a simple script that just combines 2 images. Computers are good at this tasks. Yes go;
I opted for a simple script.
The script had to combine the artboard and a phone case:
I wrote a quick script which magically handled the work:
| #!/bin/bash | |
| # The folders where the artboards and the result is stored | |
| folder_artboards="./artboards" | |
| folder_composite="./composite" | |
| # Phone case | |
| bg_name="phone_case.png" | |
| bg_size=`identify -format '%wx%h' "$bg_name"` | |
| # Artboards size and position | |
| overlay_size=`identify -format '%wx%h' "$folder_artboards/start.png"` | |
| overlay_position="43+175" | |
| # If you want to start from scratch you can delete all | |
| # find $folder_composite -name "*.png" -type f -delete | |
| # Loop over the artboards folder and do some magic on the images | |
| for i in $(find $folder_artboards -name "*.png" -type f); | |
| do | |
| # Extrat the image name | |
| base_name=$(basename "$i") | |
| date_source=`stat -f "%Sm" -t "%Y%m%d%H%M.%S" "$folder_artboards/$base_name"` | |
| # This is a little bit of a magic, if the artboard and the already | |
| # existing combined image have the same modification date | |
| # then it skip this image. | |
| # There is not need to create a new composite if it already exist | |
| if [ -f "$folder_composite/$base_name" ]; | |
| then | |
| date_composite=`stat -f "%Sm" -t "%Y%m%d%H%M.%S" "$folder_composite/$base_name"` | |
| if [ "$date_source" == "$date_composite" ]; | |
| then | |
| echo "Skip :: $base_name" | |
| continue | |
| fi | |
| fi | |
| # Convert is an Imagemagick tool that does a lot of stuff | |
| # One of it is compose images: http://www.imagemagick.org/script/convert.php | |
| convert \ | |
| -size $bg_size \ | |
| -composite "$bg_name" "$i" \ | |
| -geometry $overlay_size+$overlay_position \ | |
| -depth 8 \ | |
| "$folder_composite/$base_name" | |
| # Set the modification timestamp to the artboard | |
| # This make the previews magic match work | |
| touch -t "$date_source" "$folder_composite/$base_name" | |
| echo "Create :: $base_name" | |
| done |
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.
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:
| # Imagemagick has some nice filters for gray scale | |
| convert \ | |
| "$folder_artboards/$base_name" \ | |
| -grayscale rec601luma \ | |
| "$folder_grayscale/$base_name" |
Here the final result:
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.”