26 Jul in  Working with PDF, How-to tutorials

How to create a dynamic wireframe in a PDF document

 
Facebook
YouTube
LinkedIn

wireframing

Recently I was faced with a new challenge. I was asked to create a wireframe for a new section of our website. While there a bunch of great wireframe tools, I try to avoid adding more software to my workflow.

Before we get into it, there are definitely apps that specialize in creating wireframes. However, since I’m comfortable using Soda PDF, I realized most of the functionality I needed was already at my disposal.

I wanted to share my journey through creating a dynamic wireframe in a PDF document.

 

Why should I wireframe?

Fantastic question! Let’s start by looking at what a wireframe is. A wireframe is a document that outlines the structure of a website or app.

It’s a tool that clearly indicates what needs to be on every page. More importantly it establishes the relationship between everything on each page. This includes the elements on a page, but also includes the flows that bring a user to a new page.

Your wireframe serves to communicate the vision of your site/app. By looking at a wireframe, anyone should be able to clearly identify the purpose of that page.

Yes, every single page or screen should have a clear purpose.

So, to answer the question, you should wireframe to make sure that you know why every page exists. Wireframing lets you confirm every page makes sense, and more importantly, that nothing is forgotten when it’s time to move forward.

The Soda PDF team made wireframes a mandatory part of every project. Prior to having wireframes, every task came with tons of questions about every little detail. A lot of these questions are answered in a good wireframe, reducing unnecessary delays and completing projects that much faster.

 

What goes in a wireframe?

Before we get into specifics, it’s worth noting a wireframe is not a mockup or a design. The focus should be on user experience, not how pretty the page looks.

We often jump right to things like color pallets or which images should be used. While this can be very fun, it is definitely not the purpose of a wireframe.

A wireframe is very top level. The focus is on structure. You’ll define which elements need to be on that page and where they should go on that page. If there are links, you’ll describe where they point to.

Wireframes will help you remain conscious of how much space you are using on the page. This is particularly valuable when it comes to deciding your copy. Keeping track of how much space your copy will use is absolutely crucial (especially if you need to translate everything to German).

We recommend not using “lorem ipsum” sample text. A key part of a page’s communication is the text used. By using actual words, you’ll help further the goal of expressing the goal of that page (staying conscious of the space text takes up).

 

Prepping your wireframe – requirements

You now know the wireframe is meant to tell people why a page needs to exist. Before beginning that process, you need a list of requirements. Consider things like your buyer personas and what you want your users to do when they are on that page.

Here are some things you need to consider:

  1. Do you need a webform?
  2. Where should your logo go?
  3. Is there a specific message that needs to be communicated?
  4. How should the content of the page be arranged?
  5. Can you fit the content on one page? or should you split it up into many smaller ones?

 

You want to optimize the experience based on the needs of the people who will visit this page. Before you even open a program to create your wireframe, you need to know which pages you’ll map out.

A wireframe is a tool to visualize your plan. Another way to look at it is unless you start by planning properly, there may not be a project to brinbg to life. Build your wireframes. 

 

Before you get started on your wireframe

A wireframe is not an art project. While you may draw a square to show where an image will go, there should be very limited detail. The standard way to communicate something is an image is a rectangle with an X inside like this:

 

image placeholder how to wireframe pdf

 

Personally, I am not that visual. I’ve never been enthralled by colors or catchy design work. So this stripped down, placeholder approach is right up my alley.

You can start this process on paper or do it digitally, but the result should be a rough outline that displays what belongs on a page.

Basically, I’m saying don’t try too hard to make it look nice, focus on clarity. Use simple shapes to mark the outlines of different sections. Scribble in sample text that would reflect what would go on the page and boom, your wireframe is underway.

 

Creating a wireframe part 1: Setting up your page

Before adding any content, keep in mind you can start with a template and save yourself some time. In my case, I started from scratch. But… once I finished each page, I realized I had built myself a starting point for future wireframes.

I started by creating a new PDF document. Then I updated the page size.

Since I was working with a website’s wireframe, I wanted to update the unit of measurement for my page. Soda PDF lets you change the unit of measurement when updating the page size.

 

page size how to wireframe pdf

 

Once you’ve done this you can turn on the ruler feature. This will let you set up guiding lines to keep you within the assigned margins.

The beauty of playing with page sizes is that it gives you some versatility. If you wanted to describe a popup, you can set the page size to the exact resolution you need. This way, you’ll always know if you have enough space.

 

Creating a wireframe part 2: Adding content

Most of what you’ll be adding in terms of content is shapes and text. PDFs are fantastic for this as moving stuff around the page is easy as dragging and dropping.

Soda PDF lets you add shapes to your document.

  1. Open the Review Tab.
  2. Choose the Shape you want to use.
  3. Hold down your left mouse button and drag the cursor to add your shape.

 

add shape how to wireframe pdf

 

I’ll be honest, this is the only time I felt myself really wishing for a wireframe tool. It took a bit of combining shapes to get the desired effect. Adding some lines to my rectangle gave me the X.

However, once I set up my initial shape, it was just a matter of selecting the whole box and copying and pasting the shapes.

 

copy shape how to wireframe pdf

 

Adding text is as simple as double clicking into your document and typing.

 

add text how to wireframe pdf

 

I continued adding shapes and text until the structure of my page was complete. When your done each page will have a header, footer and all relevant content.

After finishing your first page, you can insert a new PDF page into your document, and start on the next piece of your wireframe.

Pro-Tip: You can copy an existing page, so you don’t have to start from scratch each time. This is a huge time savor when the page structure remains similar between pages.

 

Creating a PDF wireframe part 3: Making it dynamic

There are two main things left to make your wireframe come to life. Using the bookmark tool you can create a table of contents in your PDF.

Since you can add “children” to each bookmark entry, you can easily recreate your website’s skeleton. Each entry in your table of contents can then be linked to its corresponding page. This let’s anyone browse through your PDF jumping to what’s relevant to them.

A table of contents will connect all your pages together in a top-level way, but what about actually going through the flow? Adding links to your PDF.

You can place a link over any shape or text in your document. You can then configure this link to navigate to the target page when clicked.

 

add link how to wireframe pdf

 

After you’ve finished linking your document, your wireframe will be functional. Anyone can receive your wireframe and go through the flow, even if they open the PDF in a web browser.

Since you are now ready to share your work, let’s cover some essentials for collaboration.

 

Creating a PDF wireframe part 4: Secure your wireframe

A huge benefit to working with PDFs is document security. Using Soda PDF you can restrict your PDF so that no one can make changes to the content.

The setting I recommend is Commenting, filling-in form fields and signing existing signature fields. It’s pretty wordy but it means that no one can change your PDF. The text and shapes are locked into place.

But what it does do, is allow your colleagues to comment directly on your PDF.

 

add Comment how to wireframe pdf

 

There’s a good chance that after the first draft of your wireframe is complete, that there will be some revisions once others see it. Letting others comment but making sure you are the only one to make changes will make sure that others won’t make any accidental changes.

 

Creating a PDF wireframe part 5: Sending it out

You can simply attach your wireframe to an email and send it out. You can also connect Soda PDF to virtual storage systems like Dropbox or Google Drive. Our company has a G Suite account, so everything I do at work gets stored in a shared Google Drive folder.

While in Soda PDF I save the file into that folder and voila, everyone has access.

 

save to Google Drive how to wireframe pdf

 

The best part of a virtual drive is others can work on that PDF without changing where it’s saved. The same PDF will show up in my recent files the next time I load Soda PDF. This makes it very easy to get back to that file and respond to their feedback.

 

In Conclusion

To summarize, a wireframe is created to communicate the goal of your website or app, page by page. You do this by sectioning off the page, describing what needs to be added to the page when it gets to design. Remember the focus is structural, think of CTAs and webforms rather than colors and images.

You can customize your wireframe to document your flow. You can add links to navigate between pages and give your team an idea of how the site/app will work once it is finished.

Wireframes are the crucial first step to bringing your ideas to life. By making a wireframe that documents everything, you’ll avoid the unnecessarily long email chains that are sure to follow.

 

We can’t say Soda PDF is the best wireframing tool out there, but it most certainly can get the job done. Feel free to download it now and try it out.

Free Download                       Try Web App

Facebook
YouTube
LinkedIn

Add your comment



Your e-mail will not be displayed


Like this blog? Spread the word!