was successfully added to your cart.

Visio is a Powerful Wireframing Tool

By | Visio, Wireframing

10 Benefits (and 1 Limitation) of Using Visio as a Wireframing Tool

Believe it or not, Microsoft Visio is an extremely versatile tool and actually is a pretty amazing wireframing tool. There’s a reason why it’s not included in the Microsoft Office Suite and one is because it’s extremely powerful that can survive on its own. You might assume that Visio is only good for flowcharts or architectural diagrams, but there’s a whole side of Visio that most people overlook and that’s its ability to handle wireframes. Visio excels as a wireframing tool because of the following areas:

  • Vector – Since it’s a vector tool you can scale infinitely and zoom in endlessly to see the most granular level of your designs and you’ll never lose quality like other raster based tools. It handles SVGs with ease and can export your designs to dozens of different formats.
  • Stencils – Stencils allow you save design elements for quick reuse access at a later time. Stencils are perfect for reusing your commonly used components as they allow you to drag and drop snippets into your designs. The hard part is just creating a pixel perfect, extensive library, but that’s where we can help with our extensive toolkits.
  • Master Pages – Similarly to desktop publishing tools like InDesign, Visio allows your create documents with master pages, which are great for things universal design elements like navigation, headers, and footers, so you only have to make the change once and it will be cascaded across your pages.
  • Basic Prototyping – If you really want to get fancy you can even set hyperlinks that crosslink your wireframes to pages in your document so you can even have a rudimentary clickable prototype out of your wireframes.
  • More Than Just Wireframes – Not only is Visio great for your wireframing, but it’s great for other UX tasks like creating sitemaps, process flows, personas, user journeys, and simple graphics.
  • Macros – Macros are a lifesaver because can save you so much time by automatically handling tasks like generating a table of contents, or resizing numerous elements with just a click. Although creating macros require some programming but a solid set of macros can save your hours. If you or one of your developer friends know VBA, then you’re golden.
  • Ubiquitous – Since Visio is a common Microsoft product, some companies issue their computers with it preinstalled so there’s not additional software to purchase.
  • Printing – Properly setting up your Visio document pages to either 11×8.5” or 11×17” will allow your designs to not only look great digitally but also your printed hard copy wireframes will look amazing. But be careful, I have noticed that transparencies don’t always look great printed from Visio.
  • Stability – Unlike some of the new, hip design tools that are popping up every minute either as desktop applications or as an online only tool – Visio is a stable product and not buggy. It has a solid backing of users and forums.
  • Hidden Layer Management – When I first started using I was a little taken away from not have a layers list like in Photoshop, but shortly after using Visio for a few weeks I quickly got used to it and actually prefer not having it present. No more sorting and organizing layers, no more naming layers, and no lost screen real estate.
  • Limitations – There’s definitely one area that it falls short and that’s Mac compatibility. For some reason, unlike MS Office which has a Mac OS version, there is not Mac version of Visio. So you’re on a Mac you can either launch a windows instance in VMware Fusion or Bootcamp. One thing to note is OmniGraffle can natively import Visio VSD files.

With a solid set of stencils, you can reduce your wireframing time significantly and produce more consistent designs.

Still not convinced Visio is powerful enough for you? Think it’s too limited? Then turn on development mode and enable ShapeSheet to view some of the hidden configurations. Still, want to crank it up? Then create your own VBA extension or macro and customize the tool however you see fit. The sky’s the limit!

Font Awesome & Twitter Bootstrap Icon Stencil Sets

By | Wireframing

Web font icons are becoming more and more popular because of a number of benefits, but sometimes it can be a hassle using a web font while wireframing since you have to hunt for the specific symbol in a character map or cheat sheet, copy the symbol, create a new text layer and then paste it in, colorize it, and then rescale it.

It’s because of that cumbersome, multi-step process that we decided to take the leg work out of using Font Awesome’s Icon Set and Twitter Bootstrap’s Icon Set by converting their Font Awesome and Bootstrap’s entire icon sets into usable stencils for your favorite wireframing tools – Sketch, Visio, and OmniGraffle.

By using our pre-made icon set stencils you can visually see the entire icon set at once and simply drag and drop your desired icon into your designs. It’s that simple. Not familiar with Twitter Bootstrap or want to start prototyping yourself? Then check out their official getting started guide.

BOOMSHAKLAKA! UX Toolkits is Live!

By | Wireframing

After many months of hard work, the UX Toolkits website is finally up and running! UX Toolkits e-commerce store and blog were created by UCD Studios and specifically tailored towards UX Designers for the sole purpose of streamlining wireframing for websites, web apps, enterprise portals, and mobile apps. Using your favorite wireframing tools such as Sketch, Illustrator, Visio, OmniGraffle, PowerPoint and even Keynote you can have medium fidelity wireframes in minutes.

Stay tuned for future posts as there will be many product releases in the very near future that you won’t want to miss out on!