wireframe drawing

Before any great website, a great plan is made. Wireframing a website is a great way to start planning your website visually and quickly.

There are different ways you can go about making a wireframing like using software specifically designed for wireframing or just by good old hand-drawing it either on paper or a whiteboard. Though less sharable, I like drawing out my wireframes as it’s much faster than creating something with software.

Lets jump in how I draw out my website wireframes step by step so you can easily do it yourself.

1. List all the pages and their content sections

First, you’ll want to start by listing out your website pages. It’s common for a website to have 5-10 pages, but some can grow up to hundreds. In either case, id recommend listing out the primary pages if not all the pages on your website.

For each page, list the different sections you want to feature on each page. So for my homepage, I listed a hero section, some services, an about blurb, testimonials, and then a Call-To-Action. If you know you want to have certain content that should go on any of the pages you should list those too to give you a better picture of what kind of content is going to be on your pages for drawing a more effective wireframe.

Be sure to include all content and potential elements big or small to make your wireframe more refined and laid out!

2. Draw out all your elements

After you know what’s going on your pages, quickly draw the elements of your wireframe. Below are some common elements found in wireframes like images, sliders, buttons, and text content.

The goal is to create a set of elements you can use to wireframe all your pages. This way actually drawing out and wireframing your pages is super quick and effortless.

website wireframe elements

It also helps that standardizing your elements makes it easier to read and reference your wireframe for when it moves onto the next stage of development. Feel free to label your elements if you’re sharing your wireframe with other people.

3. Draw out and order your content

ordering content in wireframe

The next step is to take your pages content you listed and lay them into rows/sections. I personally like to think of websites in terms of sections piled on top of each other vertically, as it makes it easier to keep the content in an organized way.

You’ll want to spend the majority of the time setting up your sections as this is the most important step of drawing your wireframe.

When drawing your sections, keep this in mind:

  • Your content will be in a wrapper – So design your content inside one
  • Don’t underestimate the amount of paragraph content you have – The text could appear a lot longer on the page than expected.
  • Keep mobile responsivity in mind

Once you get your sections done, order them in an order which makes sense. Especially on the homepage, it’s best to start broad and then funnel your way down into a Call-To-Action. On sub-pages (not the homepage) start with a title section so users know what page they’re on.

4. Put it all together

Once you’ve ordered all your sections for every page you can put them all together. Here’s my final result after putting all my sections together for my home and about page.

website wireframe tutorial

Drawing wireframes can be a really easy way to get started on your website design. The more you wireframe, the better the plan!