Ad formats

Sponsored Content

Reach and engage a professional audience in the LinkedIn feed.

Sponsored Messaging

Engage your prospects where professional conversations happen.

Engage prospects with ads automatically personalized to them.

Self-service ad formats to create campaigns in minutes.

See all Ad formats

Learn More

Discover how much it costs to advertise on LinkedIn.

Reach the people who matter most to your business.

Lead Generation

Qualified leads come from a quality audience on LinkedIn.

An easy way to reach new audiences by amplifying your best content.

Conversion Tracking

Measure the true impact of your LinkedIn ads.

Reporting & Analytics

Measure the ROI of your LinkedIn ads.

Objective Based Advertising

Choose your LinkedIn ad format based on your objective and customer journey.

Ad Tips & Best Practices

What is a Wireframe?

Tools and Tips for Planning and Streamlining the Web Design Process

Learn More About LinkedIn Advertising

Illustration of ...

Wireframes are a blueprint that helps businesses create websites, apps, and landing pages to support marketing and product development strategies.

We’ll explain what a wireframe is and the key benefits of using them in website or landing page planning and design in this guide. Additionally, we’ll discuss how to create a wireframe and share helpful tools marketers can use to construct them.

Select a topic to explore further:

What is a wireframe?

Is wireframing part of UX or UI?

Why are wireframes important for marketers?

A step-by-step process for creating wireframes

Wireframes boost website and landing page success

What is a wireframe?

Wireframes are foundational documents used in the planning and pre-design phases of a website or landing page. They're typically constructed as a simplified representation of all the necessary elements a business requires in a web page layout – from the homepage to product pages, info or content pages, and contact forms.

Illustration of an individual sitting down with their laptop next to a large computer monitor screen.

Illustration of a wireframe highlighting elements of a web page.

Is wireframing part of UX or UI?

Creating a wireframe supports the planning and design of a website or landing page’s user experience (UX) and user interface (UI). UX design is perceived as a more emotional element of design, where wireframes make sure the user journey throughout a website or landing page is easy and accessible and offers intuitive navigation. UI design supports the design and function of different page elements a user might interact with (e.g., buttons, animations, and different screens or touchscreens).

Illustration of a wireframe highlighting elements of a web page.

Why are wireframes important for marketers?

Marketers use wireframes in web page planning and creation for several reasons.

Facilitates stakeholder collaboration

B2B marketers can create a wireframe to get buy-in from internal stakeholders on all of the critical page functions and layouts required to deliver their strategic plan for the landing page or website.

Supports a better user experience

Taking the time to plan and develop wireframes properly helps UX teams make sure that the website or landing page user experience will perform at an optimal level.

Saves time in the development process

Creating wireframes early in the website planning process helps marketers avoid scope creep or requests for changes not in the original plan later in the design and development phases. It also helps to streamline the next steps in the design process because everyone involved in the project will be on the same page.

Wireframes vs. mockups

If a wireframe is a blueprint or skeleton of a website or landing page, the mockup is a more detailed, visual UI design of the final product. Mockups often include the different colors, logos, copy layouts, fonts, and possible imagery that might go on each page.

Illustration of a wireframe and mockup of a web page on the screen of a mobile device.

Wireframes vs. prototypes

A prototype differs from a wireframe or mockup in that it is a basic, working model of the website or landing page used for stakeholder buy-in and user testing. Once a prototype is approved and user testing is complete, designers or developers can move forward with the final build or launch of the pages.

Illustration of a wireframe and prototype of a web page on the screen of a mobile device.

A step-by-step process for creating wireframes

Follow the steps below to plan, research, and create wireframes that work for the intended audience and website or landing page functionality.

Step 1: Write a website or landing page project creative brief

Create a document that details the target audience, the intended use of the website or landing page, what key features and functionality the marketing or sales team needs to include in the design, and how marketers intend to promote and drive traffic to it.

Creating and sharing buyer personas or ideal customer profiles with the wireframe’s designer is also helpful during the drafting stages.

These details give designers and developers an idea of possible layouts to map user journeys throughout the site (e.g., where users will land first and what they should do next). Ask other key stakeholders to share their input while drafting the brief. Then, get them to review and approve the wireframe model before moving forward.

Illustration of an individual standing in front of a projection screen.

Step 2: Select the right wireframe tools

Research and select wireframe software to create an early draft that roughly illustrates what the web pages might look like. When looking for a wireframe tool, consider the following features:

Sharing capabilities. Look for a wireframe software that allows files to be shared amongst other users. This is important because often wireframes are useful for teamwork.
Collaboration. A solid wireframe software can allow multiple users to be in one file. And while collaboration may simply be, for some teams, about sharing and editing files, and starting another version, another way wireframe software can be used is with multiple users adding ideas, images, or notes in one session.
Visual participation. Some wireframe options include a visual experience where users can present ideas and sketch them out in real time, or, like a digital whiteboard, allow users to place their ideas in the tool with others and watch concepts unfold in real time.
Experimentation. A key component that wireframe software offers is the ability to experiment. Add, delete, or modify all kinds of file types. Have multiple versions to work off of, saved so specific pieces can be used elsewhere.

Wireframe software options may offer custom templates for beginners to avoid starting from scratch. When marketers can’t afford to subscribe to a new tool and must create more than three wireframe files, they can also use other popular services to sketch out wireframe designs while looking at online examples as a visual aid. While these options won’t be as collaborative, they are an affordable way to get started.

Illustration of a large mobile device depicting two individuals working on their laptop and highlighting areas of a website.

Step 3: Choose the best type of wireframe for each drafting stage

Next, choose from various wireframe design options to sketch out early drafts and gather more stakeholder feedback and buy-in before creating a final draft of the wireframes. Some common types of wireframe designs include the following:

Rough wireframe sketch

The first type of wireframe a B2B marketer might create is a hand-drawn sketch to determine what will go on each page and how each page might appear to visitors.

Illustration of a rough wireframe sketch to determine what to place on each web page.

Low-fidelity wireframe

The next option is to create a low-fidelity wireframe – a 2D, black and white rendering of the sketched drawings – using little detail other than boxes, lines, and 'lorem ipsum' blocks of text to indicate where specific navigation links, page titles, lines of copy or image and promotional areas of each page might be laid out.

Illustration of a low-fidelity wireframe to highlight potential layout of a website.

High-fidelity wireframe

Once marketers have received buy-in and a consensus on the low-fidelity wireframe layouts, they can move forward with more detailed wireframes that include specific colors, image mockups, and possible fonts to be included in the final design of the website. Again, marketers should get stakeholder feedback and a consensus before moving on to the project’s next phase.

Illustration of a high-fidelity wireframe to highlight more details to be included in the final design of the website.

Annotated wireframes

These can be low- or high-fidelity wireframes that include annotations or short descriptions beside or under different parts of a wireframe to explain their purpose and the reasoning behind why it's necessary to include them in the page design.

Illustration of an annotated wireframe to highlight purpose and reasoning.

User flow wireframes

These take the annotation concept to the next level by creating a static UX wireframe slideshow that shows how each page in the website user journey will flow into another.

Illustration of a static wireframe to highlight user flow.

Interactive wireframes

If stakeholders want to see how users will tap, click, or swipe from one screen to the next, some wireframe UI or prototyping software providers allow users to create interactive website functionality before the design phase begins.

Illustration of an interactive wireframe to highlight website functionality.

Step 4: Do UX and UI research to map the user flow

CAs part of the wireframing process, marketers can conduct UX and UI research to map out their customer journeys and usability or user flows to optimize wireframes before finalizing them for design teams.

To learn more about this type of research, refer to our UX research guide.

Illustration of an individual sitting down next to wireframes highlighting the user flow.

Step 5: Include all key wireframe components in each draft

When drafting wireframes, it’s important to know the terminology of the necessary components that go into building them.

Information
These elements include the required content on each page (e.g., headers, promotional copy, product descriptions, and footers). They can also include any visual elements (e.g., logos, drawn images, photos, infographics, and videos) that need to go on each page as part of the overall layout.
Interface elements
The interface includes the actual layout of a page for intuitive flow and usability. It would also include the site functionality (e.g., buttons and links for clicking, tapping, and swiping) and critical pages (e.g., homepage, product page, pricing page, about page, checkout page, and contact page) requiring a wireframe. Additionally, it should include special design considerations, like fonts, image sizing, character count limits for blocks of text, and more.
Navigation
Finally, the wireframes should indicate where the navigation will appear on each page – designed for optimal user flow throughout a site visitor’s awareness, consideration, and purchase journey. Don’t forget to include a search field to help users quickly find what they need and a breadcrumb trail to navigate to a previous page.

Illustration of an individual sitting down with their laptop at their desk next to an infographic highlighting information, interface elements, and navigation.

Step 6: Get approvals on the final draft

Once marketers have finalized their wireframes, they should get all key stakeholders and decision-makers to sign off on or approve them before designing the final product.

Illustration of an individual sitting down with their laptop next to large wireframes.

Wireframes boost website and landing page success

Creating a wireframe is an essential early step in the planning and ideation stages of website or landing page design. They can also streamline the design and development process by enabling all stakeholders to provide feedback and approve web page layouts, navigation, and functionality.

Wireframes, therefore, help marketers avoid scope creep later in a project by hashing out all of a website’s key components and details in advance. They also help to optimize the user experience by applying UX and UI research and design strategies to a website’s overall layout.

For further insights and help with planning and creation, refer to LinkedIn’s wireframing courses. To learn how to drive traffic and conversions on a newly launched website or landing page, explore LinkedIn advertising.

Illustration of a website highlighting element of the page on a computer monitor and a rocket on the side.

Grow your business with LinkedIn Ads

Talk to a specialist now

Learn more about LinkedIn Ads