New Visio Wireframes: Bring your products to life!

Published 08-26-2018 04:17 AM 10.9K Views
Frequent Visitor

First published on MSDN on Nov, 15 2017
We are excited to announce the General Availability of brand new Website and Mobile App Wireframe Templates in Visio desktop! Now you can bring any project or product idea to life using the modern Visio wireframes, which can help you quickly visualize your website’s or app’s functionality and content.

What can you do?

  • Sleek low fidelity mockups: Create quick mockups for your product or feature with ease using the new Website and Mobile App wireframe templates. There are pre-packaged containers, UI controls, media, navigation shapes, and more for you to use!

  • Smart Shapes: Smart controls, like range slider and progress bar, let you customize values. Right-click Menu Actions give you options to change states, visual styles, and more.

 

Availability

If you are an Office 365 subscriber with Visio Plan 2, you’ll start seeing the new wireframe templates from build 8625.2000 or later. To check your build in Visio, click on File > Account. If you are on the Semi-annual Channel, you can move to the Monthly Channel to get updates faster. To switch your channel, refer to this article. These new templates are available in all languages supported in Visio.

 

Get started

You can find wireframe templates by navigating as follows:

  • File > New > Templates > Software and Database (category) > Wireframe - Mobile App
  • File > New > Templates > Software and Database (category) > Wireframe - Website

 

 

Scenarios to Try

1. Use Mobile App wireframe starter diagrams: Add, delete, update shapes

 

 

2. Use Website wireframe starter diagrams: Add, delete, update shapes

 

 

3. Start with a blank drawing in the mobile app or website wireframe template. Navigate to the stencil for containers and drag a mobile frame/internet browser container to the canvas. Further add controls and other shapes from stencils to the wireframe. Use control points and right-click Menu actions to modify state or visual style of the shapes.

 

 

Known Issues

Below are some of the known localization issues in some languages other than English and we are in the process of fixing them:

  1. Text in some shapes might overlap or overflow. Quick workaround: Change font size of text or increase size of shapes.
  2. Layout for some starter diagrams might not look aligned. Quick workaround: Change font size of text, increase size of shapes or rearrange shapes.
  3. Some strings might not show localized in some languages.

 

Feedback

We’re constantly looking for ways to improve Visio and invite you to send us your ideas through our UserVoice site. For questions about Visio wireframe templates and other features, please email us at tellvisio@microsoft.com. You can follow us on Twitter, LinkedIn, and YouTube for the latest on Visio.

 

— Shakun Grover, on behalf of The Visio Team

2 Comments
Occasional Visitor

Thanks!

New Contributor

I have a licence of Visio Professional 2016. I can’t find the templates mentioned in this post. Can you point me in the right direction to find them?

Thank you so much, Enrico

%3CLINGO-SUB%20id%3D%22lingo-sub-304830%22%20slang%3D%22en-US%22%3ERe%3A%20New%20Visio%20Wireframes%3A%20Bring%20your%20products%20to%20life!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-304830%22%20slang%3D%22en-US%22%3E%3CP%3EThanks!%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-2057657%22%20slang%3D%22en-US%22%3ERe%3A%20New%20Visio%20Wireframes%3A%20Bring%20your%20products%20to%20life!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-2057657%22%20slang%3D%22en-US%22%3E%3CP%3EI%20have%20a%20licence%20of%20Visio%20Professional%202016.%20I%20can%E2%80%99t%20find%20the%20templates%20mentioned%20in%20this%20post.%20Can%20you%20point%20me%20in%20the%20right%20direction%20to%20find%20them%3F%3C%2FP%3E%3CP%3EThank%20you%20so%20much%2C%20Enrico%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-237753%22%20slang%3D%22en-US%22%3ENew%20Visio%20Wireframes%3A%20Bring%20your%20products%20to%20life!%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-237753%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3E%20First%20published%20on%20MSDN%20on%20Nov%2C%2015%202017%20%3C%2FSTRONG%3E%20%3CBR%20%2F%3EWe%20are%20excited%20to%20announce%20the%20General%20Availability%20of%20brand%20new%20Website%20and%20Mobile%20App%20Wireframe%20Templates%20in%20Visio%20desktop!%20Now%20you%20can%20bring%20any%20project%20or%20product%20idea%20to%20life%20using%20the%20modern%20Visio%20wireframes%2C%20which%20can%20help%20you%20quickly%20visualize%20your%20website%E2%80%99s%20or%20app%E2%80%99s%20functionality%20and%20content.%20%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fwireframes_logo.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20998px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44188i8CB955A049DCDB0D%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1534999771%22%20id%3D%22toc-hId-1451053630%22%3EWhat%20can%20you%20do%3F%3C%2FH3%3E%0A%3CUL%3E%0A%3CLI%3E%3CSTRONG%3E%20Sleek%20low%20fidelity%26nbsp%3Bmockups%3A%20%3C%2FSTRONG%3E%20Create%20quick%20mockups%20for%20your%20product%20or%20feature%20with%20ease%20using%20the%20new%20Website%20and%20Mobile%20App%20wireframe%20templates.%20There%20are%20pre-packaged%20containers%2C%20UI%20controls%2C%20media%2C%20navigation%20shapes%2C%20and%20more%20for%20you%20to%20use!%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fweb-mobile.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20998px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44189i087CD7F7BDB91E09%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3E%3CSTRONG%3E%20Smart%20Shapes%3A%20%3C%2FSTRONG%3E%20Smart%20controls%2C%20like%20range%20slider%20and%20progress%20bar%2C%20let%20you%20customize%20values.%20Right-click%20Menu%20Actions%20give%20you%20options%20to%20change%20states%2C%20visual%20styles%2C%20and%20more.%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fsmart-shapes.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44190iA8DBB36EE067BF01%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1017157190%22%20id%3D%22toc-hId--1101103331%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId-725653145%22%20id%3D%22toc-hId-641707004%22%3E%3CSTRONG%3EAvailability%20%3C%2FSTRONG%3E%3C%2FH3%3E%0A%3CP%3EIf%20you%20are%20an%20Office%20365%20subscriber%20with%20Visio%20Plan%202%2C%20you%E2%80%99ll%20start%20seeing%20the%20new%20wireframe%20templates%20from%20build%208625.2000%20or%20later.%26nbsp%3BTo%20check%20your%20build%20in%20Visio%2C%20click%20on%20File%20%26gt%3B%20Account.%20If%20you%20are%20on%20the%20Semi-annual%20Channel%2C%20you%20can%20move%20to%20the%20Monthly%20Channel%20to%20get%20updates%20faster.%20To%20switch%20your%20channel%2C%20refer%20to%20%3CA%20href%3D%22https%3A%2F%2Fblogs.technet.microsoft.com%2Fodsupport%2F2017%2F05%2F10%2Fhow-to-switch-channels-for-office-2016-proplus%2F%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ethis%3C%2FA%3E%20article.%20These%20new%20templates%20are%20available%20in%20all%26nbsp%3Blanguages%26nbsp%3Bsupported%20in%20Visio.%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId--1826503816%22%20id%3D%22toc-hId--1910449957%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId--83693481%22%20id%3D%22toc-hId--167639622%22%3EGet%20started%3C%2FH3%3E%0A%3CP%3EYou%20can%20find%20wireframe%20templates%20by%20navigating%20as%20follows%3A%3C%2FP%3E%0A%3CUL%3E%0A%3CLI%3EFile%20%26gt%3B%20New%20%26gt%3B%20Templates%20%26gt%3B%20Software%20and%20Database%20(category)%20%26gt%3B%20Wireframe%20-%20Mobile%20App%3C%2FLI%3E%0A%3CLI%3EFile%20%26gt%3B%20New%20%26gt%3B%20Templates%20%26gt%3B%20Software%20and%20Database%20(category)%20%26gt%3B%20Wireframe%20-%20Website%3C%2FLI%3E%0A%3C%2FUL%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fwhere-to-find.jpg%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44191i320D264987EB4374%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-1659116854%22%20id%3D%22toc-hId-1575170713%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId--893040107%22%20id%3D%22toc-hId--976986248%22%3EScenarios%20to%20Try%3C%2FH3%3E%0A%3CP%3E1.%20Use%20Mobile%20App%20wireframe%20starter%20diagrams%3A%20Add%2C%20delete%2C%20update%20shapes%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fscenario1.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44192iDF3577D95EAEFAF6%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E2.%20Use%20Website%20wireframe%20starter%20diagrams%3A%20Add%2C%20delete%2C%20update%20shapes%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fscenario2.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44193i9825F307BEC55E61%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E3.%20Start%20with%20a%20blank%20drawing%20in%20the%20mobile%20app%20or%20website%20wireframe%20template.%20Navigate%20to%20the%20stencil%20for%20containers%20and%20drag%20a%20mobile%20frame%2Finternet%20browser%20container%20to%20the%20canvas.%20Further%20add%20controls%20and%20other%20shapes%20from%20stencils%20to%20the%20wireframe.%20Use%20control%20points%20and%20right-click%20%3CSTRONG%3EMenu%20actions%3C%2FSTRONG%3E%20to%20modify%20state%20or%20visual%20style%20of%20the%20shapes.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fscenario3_1.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44194iDB57A3811F22CC69%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%20%3CA%20href%3D%22https%3A%2F%2Fmsdnshared.blob.core.windows.net%2Fmedia%2F2017%2F11%2Fscenario3_2.png%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3E%20%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F44195i2A5D3C964D90084B%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20role%3D%22button%22%20%2F%3E%3C%2FSPAN%3E%20%3C%2FA%3E%3C%2FP%3E%0A%3CH3%20id%3D%22toc-hId-849770228%22%20id%3D%22toc-hId-765824087%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId--1702386733%22%20id%3D%22toc-hId--1786332874%22%3EKnown%20Issues%3C%2FH3%3E%0A%3CP%3EBelow%20are%20some%20of%20the%20known%20localization%20issues%20in%20some%20languages%20other%20than%20English%20and%20we%20are%20in%20the%20process%20of%20fixing%20them%3A%3C%2FP%3E%0A%3COL%3E%0A%3CLI%3EText%20in%20some%20shapes%20might%20overlap%20or%20overflow.%20Quick%20workaround%3A%26nbsp%3BChange%20font%20size%20of%20text%20or%20increase%20size%20of%20shapes.%3C%2FLI%3E%0A%3CLI%3ELayout%20for%20some%20starter%20diagrams%20might%20not%20look%20aligned.%20Quick%20workaround%3A%20Change%20font%20size%20of%20text%2C%20increase%20size%20of%20shapes%20or%20rearrange%20shapes.%3C%2FLI%3E%0A%3CLI%3ESome%20strings%20might%20not%20show%20localized%20in%20some%20languages.%3C%2FLI%3E%0A%3C%2FOL%3E%0A%3CH3%20id%3D%22toc-hId-40423602%22%20id%3D%22toc-hId--43522539%22%3E%26nbsp%3B%3C%2FH3%3E%0A%3CH3%20id%3D%22toc-hId-1068072648%22%20id%3D%22toc-hId-984126507%22%3EFeedback%3C%2FH3%3E%0A%3CP%3EWe%E2%80%99re%20constantly%20looking%20for%20ways%20to%20improve%20Visio%20and%20invite%20you%20to%20send%20us%20your%20ideas%20through%20our%20%3CA%20href%3D%22https%3A%2F%2Fvisio.uservoice.com%2Fforums%2F229400-visio-on-desktop%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3EUserVoice%3C%2FA%3E%20site.%20For%20questions%20about%20Visio%20wireframe%20templates%20and%20other%20features%2C%20please%20email%20us%20at%20%3CA%20href%3D%22mailto%3Atellvisio%40microsoft.com%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3Etellvisio%40microsoft.com%3C%2FA%3E.%20You%20can%20follow%20us%20on%20%3CA%20href%3D%22https%3A%2F%2Ftwitter.com%2Fmsvisio%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ETwitter%3C%2FA%3E%2C%20%3CA%20href%3D%22https%3A%2F%2Fwww.linkedin.com%2Fgroups%2F63136%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3ELinkedIn%3C%2FA%3E%2C%20and%20%3CA%20href%3D%22https%3A%2F%2Fwww.youtube.com%2Fuser%2Fmsftvisio%22%20target%3D%22_blank%22%20rel%3D%22noopener%20nofollow%20noreferrer%22%3EYouTube%3C%2FA%3E%20for%20the%20latest%20on%20Visio.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%E2%80%94%20Shakun%20Grover%2C%20on%20behalf%20of%20The%20Visio%20Team%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-237753%22%20slang%3D%22en-US%22%3E%3CP%3EWe%20are%20excited%20to%20announce%20the%20General%20Availability%20of%20brand%20new%20Website%20and%20Mobile%20App%20Wireframe%20Templates%20in%20Visio%20desktop!%20Now%20you%20can%20bring%20any%20project%20or%20product%20idea%20to%20life%20using%20the%20modern%20Visio%20wireframes%2C%20which%20can%20help%20you%20quickly%20visualize%20your%20website%E2%80%99s%20or%20app%E2%80%99s%20functionality%20and%20content.%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-237753%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3Emockup%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EVisio%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EWireframe%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Version history
Last update:
‎Jan 15 2021 03:37 PM
Updated by: