Tuesday, October 29, 2013 at 3:47AM

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