Building a website in WordPress can be challenging under the best of conditions but, if you’ve ever sat in front of blank page with no idea where to start, wireframing might be for you. Wireframing is the process of creating a visual representation of how you want your webpage to look. Wireframes can range from low-fidelity (like a sketch in notebook) to high fidelity (like a full-color, digitally created mock-up). 

A wireframe acts like a blueprint for building your webpage. It shows you where there should be textbooks, where there should be images or videos, what elements should be included in the header, and more. 

Most importantly, wireframing doesn’t have to be overly complicated or daunting, anyone can do it with just a few easy steps.

Step 1: Determine the goal of the website (or page) you’re creating. 

This will help you figure out what elements need to be included. For example, when I was wireframing the homepage for my personal portfolio website, one of the goals was to make my brand feel trustworthy to visitors. To accomplish this, I knew I wanted to leverage social proof so a testimonials section was essential.

Step 2: Get a piece of paper and sketch out the basic layout. 

Technically you could do this digitally but, I find that the creative portion of my brain works better offline. It may also help to draw your elements onto individual sticky notes so you can test out different arrangements with ease. 

Something like this:

Step 3: Refine your first draft.

Do this by removing unnecessary elements and adding in any additional elements as needed. 

Step 4: Choose a wireframing tool and create a high(er) fidelity wireframe. 

There are plenty of options to choose from. WireFrame.cc is a great free option for more basic wireframes. I personally prefer Canva for creating high-fidelity wireframes, complete with brand colors and pictures. 

I used Wireframe.cc to make this wireframe:

Step 5: Now armed with a blueprint, take your wireframe to WordPress and start building!

Those wireframes eventually turned into this home page: