App WireframingApp Wireframing

App Wireframe Template

Arrange elements to create the best version of your prototype

About the Wireframe template

What is a wireframe?

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.

Wireframing is a quick, cheap, and simple way to iterate on web pages. 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.

When to use wireframing

Teams use wireframing to lay out content and functionality on a mock-up of a page. They can then map out user needs, journeys, and navigation on the page itself. Many teams use wireframes early in the development process to confirm the fundamental structure of a page is sound before they begin designing or adding content. The goal of wireframing is to convey a general understanding of what a page will look like. 

Create your own wireframe

Making your own wireframe is easy. Miro’s whiteboard tool is the perfect canvas to create and share them. Get started by selecting the Wireframe template, then take the following steps to make a one of your own.

Step 1: Be clear about your goals. Before you start wireframing, ask your team questions like, “What do we hope to accomplish by creating this web page? What do we want to get out of this wireframing session?”

Step 2: Think about the user experience. When your user interacts with your product, they’re taking a journey from one part of the site to the next. As a UX designer, your goal is to make that journey as effortless and enjoyable as possible. Think about user interactions, not individual screens. Design for flow. Ask yourself questions like, “What is important on this screen? How should the user interact with it?”

Step 3: Try to include content early in the process. Using real content makes it easier to decide whether the intended copy will fit the design. In general, real content generates better feedback.

Step 4: Annotate. Don’t assume that your wireframes speak for themselves. Annotate as you wireframe to make it easier to receive feedback.

App Wireframe Template

Get started with this template right now. It’s free

Related Templates
Empathy Map ThumbnailEmpathy Map Thumbnail
PreviewMore info

Empathy Map

Attracting new users, compelling them to try your product, and turning them into loyal customers—it all starts with understanding them. An empathy map is a tool that leads to that understanding, by giving you space to articulate everything you know about your customers, including their needs, expectations, and decision-making drivers. That way you’ll be able to challenge your assumptions and identify the gaps in your knowledge. Our template lets you easily create an empathy map divided into four key squares—what your customers Say, Think, Do, and Feel.

Empathy Map
design-sprint-kit-thumb-webdesign-sprint-kit-thumb-web
PreviewMore info

Design Sprint Kit

With the right focused and strategic approach, five days is all it takes to address your biggest product challenges. That’s the thinking behind Design Sprint methodology. Created by Tanya Junell of Blue Label Labs, this Design Sprint Kit provides a set of lightweight templates that support the Design Sprint’s collaborative activities and voting—and maintains the energy, team spirit, and momentum that was sparked in the session. Virtual sprint supplies and prepared whiteboards make this kit especially useful for remote Design Sprint Facilitators.

Design Sprint Kit
idea-funnel-backlog-thumb-webidea-funnel-backlog-thumb-web
PreviewMore info

Idea Funnel Backlog

An Idea Funnel Backlog enables you to visualize your backlog and restrict the number of backlogged items at the top. In doing sos, you can prioritize items on your list without having to engage in unnecessary meetings or create too much operational overhead. To use the Idea Funnel Backlog, break up the funnel into different phases or treat it like a roadmap. Use the Idea Funnel Backlog as a hybrid model that combines your roadmap and backlog into one easily digestible format.

Idea Funnel Backlog
Gap Analysis ThumbnailGap Analysis Thumbnail
PreviewMore info

Gap Analysis

Consider your team’s or organization’s ideal state. Now compare it to your current real-world situation. Want to identify the gaps or obstacles that stand between your present and future? Then you’re ready to run a gap analysis. This easy-to-customize template will let your team align on what obstacles are preventing you from hitting your goals sooner, collaborate on a plan to achieve those goals, and push your organization toward growth and development. You can focus on specific gap analyses — including for skills, candidates, software, processes, vendors, data, and more.

Gap Analysis
timeline-thumb-webtimeline-thumb-web
PreviewMore info

Timeline

A timeline displays a chronological order of important dates, and scheduled events. Timelines help product managers, project managers, and team members tell visual stories about progress and obstacles. Timelines enable teams to see at a glance what happened before, what progress is happening now, and what needs tackling in the future. Projects or products with specific purpose or deliverables should be based on a timeline to be successful. Use the timeline as a shared reference for start dates, end dates, and milestones.

Timeline
Company Organizational Chart ThumbnailCompany Organizational Chart Thumbnail
PreviewMore info

Company Organizational Chart

An org chart is a visual guide that sums up a company’s structure at a glance—who reports to whom and who manages what teams. But it does more than just display the chain of command. It also showcases the structure of different departments and informs employees who to reach out to with issues and concerns. That makes it an especially valuable tool for new hires who are getting familiar with the company. Our templates make it easy for you to add your entire team and customize the chart with colors and shapes.

Company Organizational Chart