Wireframe Shapes in Visio 2010

Visio has long been regarded by interaction designers and information architects as an essential tool in their work. Many software wireframes (aka software mockups) are built using Visio, and they can range from mobile software, interactive web sites, to enterprise application software.

In the past, Visio included a set of Windows XP stencils for such work. For Visio 2010, we decided to refresh those stencils by providing a brand new set of Wireframe shapes that are generic and not specific to the operating system. The intent is to offer the UX community with medium-fidelity UI shapes and icons that can be used to create wireframes for general software design for a wide variety of platforms (e.g. mobile, internet, windows). As an example, see the following mockup of Microsoft Internet Explorer and the homepage of Microsoft.com using the new Wireframe shapes (mockup is on the left, and the actual software is on the right):


This new set of shapes not only allows easier creation of wireframes, but offer many customization options to meet specific design needs. Let’s further examine what Wireframe shapes are included in Visio 2010 and what functionalities are added to make building wireframes easier.

UI Dialogs, Controls, Toolbars and Icons

First, to create a Wireframe Diagram, go to New > Software and Database > Wireframe Diagram:


Similar to previous Windows XP UI shapes, Visio 2010 offer UI shapes for building dialogs, controls, and toolbars. What’s new however is the addition of common UI icons for Windows, web, and multimedia applications. Here is the full set of Wireframe shapes that is included:


Resizable and Configurable

Customizing wireframe UI components are easier than ever. Most Wireframe shapes are resizable and offer options to customize the visuals. For example, a button is a common control and has configurable state options through the right-mouse action menu:


Working with Themes and Formatting

Unlike previous Windows XP UI shapes, the new Wireframe shapes also allow users to customize the look of the UI elements through Themes or formatting. With Themes, users can easily customize color and effects schemes that can be applied to all UI components easily. Moreover, individual controls can be formatted to indicate highlight or indicate different UI states. As an example, the diagram below shows what the wireframes looks as default (no Themes applied), and with Themes applied:


Controls as Containers and Lists

With the introduction of Containers (see earlier blog post for more details), Wireframe shapes such as Dialog form, Application form, and Panel are built as Containers to “contain” any control that is placed inside it. By being a Container, when you move a Dialog form, all controls contained inside it will also move with it.

Also, Wireframe controls such as Tree Control, Drop-down Menus, List Box are shapes to utilize the new list feature, similar to Cross-functional Flowcharts and Data Graphic Legends. Lists allow users to easily add new element to be contained in a List shape through a blue arrow, as demonstrated below in a Drop-down Menu control:


As a result, users no longer need to add shapes through multiple drag-drop or copy-paste operations. Instead, the blue arrow allows for a super quick way to add a lot of UI components while properly aligning and arranging the items at the same time.

Feedback Welcome

We are excited to bring users a brand new set of Wireframe shapes that offer greater versatility and broader application. Please use the Send a Smile feedback tool or comment on this post if you have feedback on the Wireframe shapes.

Comments (43)

  1. April Martin says:

    Are there plans to include "duplicate this page" functionality or paste-in-place in Visio 2010?  That would make life much happier for this UX designer!

  2. erik says:

    This looks great – can’t wait to get it myself.

    <April> There are macros available online that allow you to do these two things you list, and much more.

  3. April Martin says:

    Thanks, erik.  I’ve tried the macros, but they introduce some other odd behavior I’d rather avoid.  It would be much more preferable to have this functionality built into Visio itself.  (Pretty please, Visio team!)

  4. Jim Gasperini says:

    I second April’s motion. The Paste in Place feature of InDesign is simple and extremely useful. The lack of something similar in Visio is a major drawback.

    Also on my wish list:

    –completely redo layers, again more like InDesign

    –completely redo the way pages are selected, inserted, copied, etc.

  5. Francisco says:

    Web Modular Design’s…  Do you know? I work with Visio for many years ago and recently, I’ve read this book. I would like to apply the same methodology of work with Visio but I can’t because of the features of their stencils. I’d like to edit a stencil as a unique file, all components at the same time, not one to one, or save one component as one file.

    I believe that this features would be a great advance for Visio and a great feature for the designers.

    From Madrid, cordial greetings

  6. Rob says:

    I rarely find a feature essential enough to comment, rather than find a work around, but I third the notion that duplicate page is essential.

    I want to show an iteration of an existing design, buy copying the first page exactly, without having to worry about locked layers / positioning… hence duplicate.

    Other than that am a big fan of Visio. Been using is since pre MS days, and we’re almost back to v2 features, which is nice (okay, slight dig, but I do generally like the product a lot).

  7. Visio Team says:

    This blog post talks about the improvements to Visio 2010 around Copy and Paste:


    Included in Visio 2010 is the "paste to same spot" capability that is essential for creating storyboards. I’m curious how far that goes to addressing requests for duplicate page.

    Mark Nelson

    Visio Team

  8. Rob says:

    Cheers for that reply Mark. That will do the job, although I may still try to do a macro that simply adds a page with the same page settings as the current page then performs the copy / paste.

    The other changes on that page a nice though – minor seeming UI changes that will speed work up more than they have any right to 🙂

  9. Scott Kallen says:

    While the "paste in place" concept is indeed an welcome addition, it doesn’t really address the issue.

    It seems a critical burp to what should be a "standard" workflow, especially to those of us doing interaction design.  Powerpoint has "Duplicate Slide" under the insert, Publisher has the same.  Excel has "Move/Copy". Even Access has "Save As…" with tables.

    As a coder, I understand that often what seems to the average user to be a simple change is anything but.  That being said, the proposed workaround seems like a kludge.  The kind of thing that gives Apple the windows of opportunity they are so adept at exploiting.

    For the average user, duplicating a page seems like something everyone needs to do at some point.  Initially, I wasted time looking for this feature because it didn’t occur to me that it wouldn’t be a simple operation.  So, while the workaround is not much extra effort, the concept IS.

    I think Visio is still king of the hill for anyone who does interaction design (although there are other products on the rise.)  For me, it won’t be surpassed for a long time if only because I wear multiple hats–doing storyboard, interaction design and database design.  I switched to the Mac when they made the jump to Intel, but use the Parallels product almost exclusively for Visio.

    Anyway.  I digress.  Please, please, please add a "Duplicate Page" option to Visio.

  10. This feature is actually super-irritating.  Is the viso team aware that the single most common type of application in the entire world is "fill in a grid from a database"?  And yet, there isn't a "grid" item!

    How can I wireframe my app when the single most important item is missing?

  11. Margaret Shore says:

    Ditto "Duplicate this Page".  I am working in Visio today and just searched the application and help for this feature.  I couldn't believe that with all the other improvements to Visio 2010 this one is still not there!

    Also, a grid control for wireframes would be very useful.

    Many of the improvements are swell.  I really like the italicized font for background pages.  One change I don't like is moving the "Show Shape Sheet" command to the Developer tab.  I didn't even know there WAS a Developer tab until I had to search for the shape sheet.

  12. Courtney says:


    How do I access the previous Windows XP shapes in Visio 2010?  They  enabled an interface to be quickly constructed without needing to actually worry about theming something and gave something that looked to most users like a real application and not some random wireframe.  Almost felt like uninstalling Visio 2010 and going back to 2007.

  13. Cheyne says:

    Duplicating pages is one of the most tedious things I do as a UX designer. I also tried the Macro. I had a tough time getting it to work properly. Copy/Paste, Drag/Copy or however you want to do it – duplicating pages is a MUST HAVE feature.

    I have Visio 2007 and will not upgrade again until page duplication is introduced.

  14. Jeff says:

    I would love to have that "browser window" shape!

  15. HH says:

    I agree with others – not having the standard "grid" for those of us that design for Microsoft ERP applications is really frustrating.  I wish I could go back to 2007 as well or at least be allowed to access the old template instead of being forced into the wireframe which does not allow me to develop UI as accurately as I could with XP UI template.

  16. Mukta says:

    Hi there, great to know abt the new wireframe shapes in Visio.I frequently use it for wireframing and its pleasure to work with visio.The only issue i face is the various screen resolutions -i want to know how to get the templates for various screen resolutions like 1024 * 768 or others? If anyone has it please share on this..?

  17. Mukta says:

    Hi there, great to know abt the new wireframe shapes in Visio.I frequently use it for wireframing and its pleasure to work with visio.The only issue i face is the various screen resolutions -i want to know how to get the templates for various screen resolutions like 1024 * 768 or others? If anyone has it please share on this..?

  18. truster says:

    How can I create interactive, clickable Mockups with Visio 2010?

    I haven't found a hint in the german Visio help.

  19. Askar says:

    How did you get the browser chrome? I couldn't see that in the controls collection so does a few other nicer controls!

  20. Andreas says:

    If someone is interested in wireframe shapes for PowerPoint, please take a look at PowerMockup: http://www.powermockup.com/

  21. E. Gates says:

    I appreciate the upgrade to the Wireframe generic UI, however would still like the option to make Windows XP UI's as well.  Maybe it is just because that is what I was used to – but the change makes it hard for me to compare/contrast/present my designs made in version 2007 vs 2010.  Thanks.

  22. John says:

    Have those looking for datagrid controls tried Insert>Object>Excel ?

  23. Peter Kepel says:

    Hi all, hope you can help.

    I'll have to do some information architecture for a bank for their future portal.

    As UI design tool i have visio (standard by the bank), but I think I'm the first one to use it for UI design.

    I have tried for half a day to use visio 2010 but am hopelessly lost. As I'm not techie beginner, can you sent me some links or docs that can be helpfull using the wireframe functions (e.g. I dont even know how to activate my dropdown…).

    Thanks a lot.

    Kind regards,


  24. tnk479 says:

    Where is the browser chrome shape? I'm the third person on this thread looking for that. I don't see it in 2010 Premium. I am using the wireframe template…

  25. Nicolas says:

    In your article, you mention "Customizing wireframe UI components are easier than ever" which I find surprising: I haven't found any way to add additional states to stencils; this does not seem possible anymore. Furthemore, ShapeStudio is not available in the 2010 version anymore.

    Any idea how to get around this?

  26. Available in Standard or Professional Only says:

    Nothing in the post above suggests that these Software and Database > Wireframe Diagrams are only available in Visio 2010 Standard. However, according to this page blogs.msdn.com/…/visio-2010-editions.aspx, it seems that the UI templates are only available to Visio Professional. Can anyone confirm? Is there somewhere ou can go to download these Wireframe Diagram templates/stencils

  27. aandea says:

    I confirm that Standard Vision 2010 does not have the wireframe stencils. You need professional or above.

  28. Terry says:

    why can't you remove the expansion button on the node? not all tree nodes need it.

  29. Ondra says:

    I'm missing basic things, like grid, combo box…

  30. My version is missing the Wireframe stencils says:

    Dear MS Visio,

    I recently installed Visio 2010, and do not see the Software and Datatebases icon that is supposed to contain the wireframe widgets. I followed the online instructions, but do not even see a category for Software and Databbases…what should I do to get them?

  31. Terrence says:

    Why would something as basic as a groupBox item be removed? Extremely frustrating for people who need to support and build upon legacy projects. It seems that if your vision of the future of software does not match Microsoft's exactly, you're out of luck.

  32. Please post a link to Win8 UI icon style stencils please, for UI wireframes…

  33. Karin says:

    I have the same issue as the user who posted on 23 Aug 2012. I have Visio 2010 (not Professional) and cannot find the Software & Databases tab. How do I get this?

  34. Drawing toolbar says:

    I wish to create toolbar wireframes, I don't find one but menubar. How can create toolbar

  35. David says:

    Compared to the old UI shapes the new ones are a frustrating bug ridden mess. Why haven't they fixed these.How hard can you make a dr4op down list.

  36. Amanda says:

    How do I get the visio stencil for wireframes in the first place?  I don't have New > Software and Database > Wireframe Diagram

  37. sonny says:

    this is what I've been looking for. thanks

  38. PV says:

    I am unable to find New>Software and Diagrams in my Visio 2010 Standard. How do I access it?

  39. Cliff says:

    I have Visio 2013 Standard, and none of this is working as described.

  40. Adrian says:

    How do i get my hands on these shapes?  I have searched all over and can't seem to find it anywhere!!!

  41. Patrick Twomey says:

    Are these shapes available in Visio Standard or just Visio Professional?

  42. jz says:

    Wireframe diagram is not shown when I go to software and Database. Where is it?

  43. Mike McIntyre MVP says:

    The additions have been very useful to me.