Wednesday, March 10, 2021

Use wireframe templates to design websites and mobile apps

Bring an application idea to life by using a Visio wireframe. A wireframe is a detailed visual model of an application's user interface that is like a blueprint of functionality and content. These Website and Mobile Wireframe Templates are ideal for creating a low-fidelity, design sketch to present ideas, arrive at a team consensus, and form the basis of a high-fidelity wireframe.

Your browser does not support video. Install Microsoft Silverlight, Adobe Flash Player, or Internet Explorer 9.

Note: These wireframe templates are available in the desktop app with Visio Plan 2. They are not available in the browser-based version of Visio. 

Get started

Overview of Website and Mobile Templates

To locate the Website and Mobile Wireframe Templates:

  • Website    Select File > New > Templates > Software and Database > Wireframe - Website

  • Mobile    Select File > New > Templates > Software and Database > Wireframe - Mobile App

Note    The Website and Mobile Wireframe Templates are different from the legacy Wireframe Diagram Template which is primarily designed for desktop applications.

Summary of Wireframe Templates

For each template, you can either choose a starter diagram to get a quick start or a blank drawing. Each template has five stencils (containers, controls, media, text, and navigation) with many shapes in each. Containers provide you with pre-created groups of shapes representing different dialogs and cards to help quicken your wireframe diagram creation. Wireframe stencils also have smart shapes, such as a range slider or progress bar, that you can customize with control points and right-click menu actions to modify state, numeric values, or visual styles. These templates are generic and may be used for different browsers and mobile devices.

Templates and Starter diagrams

Description

Blank Wireframe Diagram

Wireframe - Website

A blank template that allows creation of a website's basic content layout, including interfaces and navigation, and how they work together.

Media Wireframe Diagram

Media Wireframe Diagram

A starter diagram for a website that is rich in text and media.

Company Wireframe Diagram

Company Wireframe Diagram

A starter diagram for a website for a product's landing page.

E-commerce Wireframe Diagram

E-commerce Wireframe Diagram

A starter diagram for an e-commerce website.

Blank Wireframe Diagram

Wireframe - Mobile App

A blank template that allows creation of a mobile app's basic content layout, including interfaces and navigation and how they work together.

List Wireframe Diagram

List Wireframe Diagram

A starter diagram for a mobile app representing list items.

Media Wireframe Diagram

Media Wireframe Diagram

A starter diagram for a mobile app that is rich in text and media.

User Profile Wireframe Diagram

User Profile Wireframe Diagram

A starter diagram for a mobile app representing a user profile screen.

No comments:

Post a Comment