Wireframe templates

Simplify your workflows and optimize your daily routines with our collection of wireframe templates.

App Wireframing ThumbnailApp Wireframing Thumbnail
Preview

App Wireframe

Ready to start building an app? Don’t just imagine how it will function and how users will interact with it—let a wireframe show you. Wireframing is a technique for creating a basic layout of each screen. When you wireframe, ideally early in the process, you’ll gain an understanding of what each screen will accomplish and get buy-in from important stakeholders—all before adding the design and content, which will save you time and money. And by thinking of things in terms of a user’s journey, you’ll deliver a more compelling, successful experience.

App Wireframe
prune-the-product-tree-thumb-webprune-the-product-tree-thumb-web
Preview

Prune the Product Tree

Prune the Product Tree (also known as the product tree game or the product tree prioritization framework) is a visual tool that helps product managers organize and prioritize product feature requests. The tree represents a product roadmap and helps your team think about how to grow and shape your product or service by gamifying feedback-gathering from customers and stakeholders. A typical product tree has four symbolic features: the trunk, which represents the existing product features your team is building; the branches, each of which represents a product or system function; roots, which are technical requirements or infrastructure; and leaves, which are new ideas for product features.

Prune the Product Tree
iPhone App ThumbnailiPhone App Thumbnail
Preview

iPhone App

Incredible percentages of smartphone users worldwide have chosen iPhones (including some of your existing and potential customers), and those users simply love their apps. But designing and creating an iPhone app from scratch can be one seriously daunting, effort-intensive task. Not here — this template makes it easy. You’ll be able to customize designs, create interactive protocols, share with your collaborators, iterate as a team, and ultimately develop an iPhone app your customers will love.

iPhone App
Website Wireframing ThumbnailWebsite Wireframing Thumbnail
Preview

Website Wireframing

Wireframing is a method for designing a website at the structural level. A wireframe is a stylized layout of a web page showcasing the interface elements on each page. Use this Wireframe Template to iterate on web pages quickly and cheaply. You can share the wireframe with clients or teammates and collaborate with stakeholders. Wireframes allow teams to get stakeholder buy-in without investing too much time or resources. They help ensure that your website’s structure and flow will meet user needs and expectations.

Website Wireframing
user-flow-thumb-webuser-flow-thumb-web
Preview

User Flow

User flows are diagrams that help UX and product teams map out the logical path a user should take when interacting with a system. As a visual tool, the user flow shows the relationship between a website or app’s functionality, potential actions a user could take, and the outcome of what the user decides to do. User flows help you understand what a user does to finish a task or complete a goal through your product or experience.

User Flow
screen-flow-thumb-webscreen-flow-thumb-web
Preview

Screen Flow

A screen flow (or wireflow) brings together a multi-screen layout that combines wireframes with flowcharts. The result is an end-to-end flow that maps out what users see on each screen and how it impacts their decision-making process through your product or service. By thinking visually about what your customers are looking at, you can communicate with internal teams, stakeholders, and clients about the decisions you’ve made. You can also use a screen flow to find new opportunities to make the user experience frictionless and free of frustration from start to end.

Screen Flow
low-fidelity-wireframes-thumb-weblow-fidelity-wireframes-thumb-web
Preview

Low-fidelity Wireframes

When you’re designing a site or building an app, the early stages should be BIG — seeing the big picture and communicating the big idea. Low fidelity wireframes empower you to see it and do it. These rough layouts (think of them as the digital version of a sketch on a napkin) help your teams and project stakeholders quickly determine if a design meeting meets your users’ needs. Our template lets you easily use wireframes during meetings or workshops, presentations, and critique sessions.

Low-fidelity Wireframes
low-fidelity-prototype-thumb-weblow-fidelity-prototype-thumb-web
Preview

Low-fidelity Prototype

Low fidelity prototypes serve as practical early visions of your product or service. These simple prototypes share only a few features with the final product. They are best for testing broad concepts and validating ideas. Low fidelity prototypes help product and UX teams study product or service functionality by focusing on rapid iteration and user testing to inform future designs. The focus on sketching and mapping out content, menus, and user flow allows both designers and non-designers to participate in the design and ideation process. Instead of producing linked interactive screens, low fidelity prototypes focus on insights about user needs, designer vision, and alignment of stakeholder goals.

Low-fidelity Prototype
Online Sketching ThumbnailOnline Sketching Thumbnail
Preview

Online Sketching

Before you go full steam ahead with a promising idea, look at it from a high level — to know how it functions and how well it meets your goals. That’s what sketches do. This template gives you a powerful remote collaboration tool for the initial stages of prototyping, whether you’re sketching out web pages and mobile apps, designing logos, or planning events. Then you can easily share your sketch with your team, and save each stage of your sketch before changing it and building on it.

Online Sketching
Try Miro and unlock the power of collaboration

Miro is a collaborative online whiteboard platform designed for remote and distributed teams.

Sign up free