You may have seen this rather interesting YouTube video where Vaclav Krejci shows how he drew the iOS7 user interface using Microsoft Word 2013.

No insult intended to Word 2013, but VIsio 2013 is also pretty good at doing this. Below you can see the comparisons. 

The original Visio files and PDF are available here: http://sdrv.ms/16GviSQ 

Quick Comparison at 300x534 (iOS7 screenshot on left, Visio reconstruction on the right)

The Rules

• No bitmaps allowed
• All shapes drawn MUST be drawn by hand (the exception is the phone icon which is actually a symbol from the Segoe UI Semobold typeface)
• No use of Visio Add-Ins
• No use of Programs to Automate Visio
• No use of Visio VBA macros
• No use of tools that convert bitmaps to vector shapes
• No clip-art
• No use of Visio Stencils and Masters

NOTE: I did use an external tool to look up RGB values in the original image. I then manually typed in the RGB value into Visio.

The original iOS7 image at 834x1484 (JPEG)

The Visio 2013 reconsturction at 834x1484 (JPEG)

Interesting Differences

Calendar. None of the default Windows/Office fonts have something quite as thin as what iOS uses.

Photos. Blending modes make this a more attractive icon in iOS7 –  and easier to draw. Visio has no blending modes. Drawing this in Visio required 24 separate shapes that were manually colored to approximate the effect of blending modes.

Maps. This was surprsingly tedious to draw in Visio. I had so tired after drawing this I didn't even both trying to closely match the colors of the original

Game Center. Again blending modes would have made a big difference. Still, I was pleased at how far I was able to go with using the simple Bevels and gradient fills to achieve a 3D look.

Settings. You'd be surprised how easy this one –  a little tedious but surprisingly easy.

My Suggested Visio Feature Wishlist

Based on this experience here's a list of features I'd like to see in visio

• Convert line to shape –  this is a standard feature in vector programs and would have saved me a lot of time
• Convert text to shape
• Blending modes –  some things just can't be done with transparency
• Color Eyedropper
• Color Gradient Eyedropper –  an special eyedropper that can construct multi-stop gradients.
• Ability to enter a color was a string: rgb and hexcolor
• Real-Layers (with blending modes) –  I simulated layers through the use of Background Pages
• Selective Format Paint –  for example copy just the fill color, not the line settings. Anothe example: copy exactly the line rounding settings, but nothing else.
• The ability to mask a shape –  so that I don't have to use Shape boolean operations to fit content exactly onto the rounded rectangle of the icon
• An ultra-fine, hairline Segoe UI typeface  –  this would have been useful on the Map icon.
• A pixel-based measuring unit –  to simulate this I made the document a mm-based document where each mm corresdponded to a pixel.
• A way to control the nudge factor –  today Visio controls this. Also an ability to avoid accidental fractional nudges; instead Visio should perf shape nudges in convenient units.
• The path editing feature - via the Pencil tool - could use some UX cleanup to make it easier to understand how to manipulate the paths. It should work more like the Bezier curve editor we see in other tools.
• Double-clicking on gradient stops should bring up the color picker

Frequently Asked Questions

How long did it take?

 About 8 hours. That is total time

  

How fast could one do this?

Armed with my initial experience and following all my rules – I suspect that I could get this done in about half the time. Especially if I had a brief outline of the process in front of me –  especially it it contains things like specific positions, sizes, and colors to use.

With additional tools (a couple of VBA macros, and a color eyedropper, it might be possible to complete the task in two hours.

 

What would I do differently?

• Instead of trying to draw every shape –  I would re-use if possible characters in Wingdings or Segoe UI Symbol
• I drew eveyrthing and then made the colors correct at the end. Instead I would make the colors correct as I went along.
• I handled each icon by row moving top to bottom. I should have doen the icons by column –  it would make it easier to do a side-by-side comparison for drawing.
• I would have utilized the Quick Access Toolbar or Customize the Ribbon with a new Tab so I can avoid switch tabs so often.
• Take advanage of Guide lines
• Create a separate layer for icon shadows

 

 

Where is the Video?

 I recorded the process with Camtasia Studio. If there's enough interest I'll put a compressed version on on YouTube. The video isn't the most exciting to watch –  but once I merge all the video files together I play on posting a sped-up 5–minute version so you can see for yourself.