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. https://msdnshared.blob.core.windows.net/media/2017/11/wireframes_logo.png
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!
https://msdnshared.blob.core.windows.net/media/2017/11/web-mobile.png
- 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.
https://msdnshared.blob.core.windows.net/media/2017/11/smart-shapes.png
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 https://blogs.technet.microsoft.com/odsupport/2017/05/10/how-to-switch-channels-for-office-2016-proplus/ 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
https://msdnshared.blob.core.windows.net/media/2017/11/where-to-find.jpg
Scenarios to Try
1. Use Mobile App wireframe starter diagrams: Add, delete, update shapes
https://msdnshared.blob.core.windows.net/media/2017/11/scenario1.png
2. Use Website wireframe starter diagrams: Add, delete, update shapes
https://msdnshared.blob.core.windows.net/media/2017/11/scenario2.png
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.
https://msdnshared.blob.core.windows.net/media/2017/11/scenario3_1.png https://msdnshared.blob.core.windows.net/media/2017/11/scenario3_2.png
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:
- Text in some shapes might overlap or overflow. Quick workaround: Change font size of text or increase size of shapes.
- Layout for some starter diagrams might not look aligned. Quick workaround: Change font size of text, increase size of shapes or rearrange shapes.
- 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 https://visio.uservoice.com/forums/229400-visio-on-desktop site. For questions about Visio wireframe templates and other features, please email us at mailto:tellvisio@microsoft.com. You can follow us on https://twitter.com/msvisio, https://www.linkedin.com/groups/63136, and https://www.youtube.com/user/msftvisio for the latest on Visio.
— Shakun Grover, on behalf of The Visio Team
