Celebrate my 38th birthday with me and get 38% off select courses and workshops. Use the code: BIRTHDAYBASH

How To Plan Your Website Using Wireframes

Last week’s post, The Ultimate Guide To Planning Your Website, was about why it’s good to build a strong foundation for your website. Planning may feel overwhelming, like it’s halting you from really putting yourself out there, but it actually helps you come across as a pro from the beginning.

Trust me, people can tell when you just slap stuff together.

With a plan, your site is better organized and is less confusing because you’ve put the thought in.

Click to Tweet – “With a plan, your site is better organized & less confusing because you’ve put the thought in.”

By going a bit deeper during the brainstorming stage and taking a look at what wireframes are and how to create one, you’ll be able to build that foundation. I didn’t have a clue what wireframes were when I started in design, so it’s okay if you’re unsure.

I think reading this post through before tackling it, will help make it easier for you.

Wireframes are drawings of where things go on each page of a website. They help you organize the content.

In design school, we were taught to sketch everything. Sometimes, I approached my work by just opening the computer and skipping the sketching step (a lot like skipping the rough draft in writing). And you could always tell when I worked too quickly just to get things done. When I took my time, my work was always better.

Right now you may be asking – is a wireframe absolutely necessary to create a website?

Well, no, it’s not. A lot of people create websites by using pre-made themes, but then they change the theme a DOZEN times. And a lot of other people work together with a web designer. But I really think it’s worth it to draw up a quick sketch to know what you want.

If you draw out the basic structure according to the needs of your business, it can make selecting a pre-made theme easier and it can make communication with your designer a lot easier, too.

Below you’ll find a How-To Guide on creating wireframes.

Supplies Needed:

  • Paper (blank computer paper or graph paper work well)
  • Pencils
  • An eraser
  • Ruler
  • Your Sitemap
  • An idea of the content you’ll have on your site
  • And pens (use a pen to optionally trace over your wireframe)

Plan Your Site Using Wireframes

Step 1 – Find a great location.

A flat surface with plenty of space to draw and lots of light to see would work best. I typically clear off my desk, grab some chai and get to sketching.

Step 2 – Decide if you want your website to be full-width or not.

Full-width means that your images will extend horizontally all the way across the page, no matter what device you are on.  If you do not want the site to be full-width, you will have empty space on either side of the content. In that empty space you may want to put some sort of background, or you may prefer to keep it clean and minimal. Figuring out this part of your site will help you to make a lot of the choices that follow this step. So don’t skip it!

Step 3 – Determine if you’re going to have a static home page or a home page that shows your blog content.

A static home page is a page that, for the most part, stays the same, while a home page that shows your blog content will always show your most recent blog post at the top.

Figuring out this step will help you know how to draw out the home page, so it’s important to start here. (For the sake of this post, I am using the example of a static home page.)

Step 4 – Draw your header area.

You have to make a few choices before you draw the header area.

  • Do you want your logo to be to the left of the page or centered in the middle?
  • Are you going to have one navigation bar or two? If you decide to have two, one is usually placed at the very top of the page and the second is either next to or under the logo.
  • Would you like to have an opt-in bar at the very top of your page? You want the opt-in for your email list to be above the fold, so having an opt-in bar placed at the very top of the page is one way to accomplish this.

Now, after you’ve made these decisions, draw out each part of the header area. Use rectangles and squares to represent each section. Your logo can be symbolized by a square, while the navigation bar can be symbolized as a long, narrow rectangle.

Using Wireframes

Step 5 – If you want a static home page, draw a hero image or slider section.

Here you will need to decide what you want located under the header area. Do you want one hero image or a slider that goes through a few different images. If you just want a single image, draw a large rectangle that goes either full-width across the page, or that lines up according to the length of your navigation bar. (If you decided in the second step to make the site full-width, be sure to keep it full-width here, too).

Draw a big “X” through the rectangle if you’re only wanting to put a single image there and make some notes about what type of image you’d like to put here. Or draw out the image if you like to sketch. If you want it to be a slider, draw a small arrow on each side of the slider to symbolize that it’s a slider. Add notes about what type of images you’d like to rotate through the slider.

Think about the height of your image or slider and whether or not you want people to have to scroll down to see the whole image. You want all the important information to be “above the fold” or before people have to start scrolling.

Step 6 – Create an opt-in box area for your free offering.

You can draw a large rectangle to symbolize the opt-in offer underneath the image/slider from the last step. I like to draw inside of the opt-in rectangle. You can draw how you’d like the opt-in to look, which fields you’d like to see in the box (first name, last name, email, etc.), and what you want the submit button to look like.

If you’d rather have a pop-up than an opt-in box area, write a note to yourself in the columns or on the back of the paper that you’re going to have a pop-up opt-in.

Opt-in-Wireframes-Area

Step 7 – Draw a short about you section, along with some buttons or other content that you want to see on your home page.

This is where you’ll need to start making some decisions on what you’d like to have on your home page. You can have a short about you section, then a portfolio section where you show your most recent work, and follow up with a few buttons leading to how your reader can work with or contact you. The sky is the limit here, but I do want to share with you how you can draw this section out.

You can have one column, two columns, three columns, etc. to share this content. There should always be space (or margins) around the various sections, but how many columns you have is up to you. If you are looking for a pre-made theme the amount of columns may be affected slightly, but I wouldn’t worry about this as a major deciding factor in the grand scheme of things. If you are working with a designer/developer, they should be able to work with you to make this section look how you want it to look.

Here are some examples:

Luvin Stampin Example

Example of a three column layout- from Luvin Stampin.

Book Scents Candles

Example of a three column layout- from Book Scents Candles.

Step 8 – Draw the footer section.

The footer area typically looks the same across all pages on your website. It usually contains things like your logo, social media links, a contact button, and copyright information. You may want to include some links to important pages like a Privacy Policy page and a Terms of Service page.

Draw this section as a large rectangle. Inside the rectangle draw each section you want based on a three or four column layout.

Step 9 – Go back and add notes or draw things in more completely.

You can add notes to the page about color and font choices you’d like to make. Maybe you could add some ideas for headlines/copy.

Making Wireframes

In drawing out your home page, hopefully, you’ve come up with some ideas for other pages. Write those decisions down now before you forget!

Now look over your wireframe drawing. Think about it. Sleep on it.

It’s always much easier to crumple up a piece of paper and start over than it is to keep changing your theme or to not really be sure what to communicate with your designer. Now you should be a lot more prepared for the next steps of building your site.

Click to Tweet – “It’s much easier to crumple up a piece of paper & start over than it is to keep changing your theme.”

Next steps:

After you’ve taken a moment to catch your breath, go and make wireframes for other pages of your site. Other pages might include your about page, your services or shop page, or your contact page.

Feel free to share your drawings on Instagram and use the hashtag #accplanyoursite.

If you are DIYing your site, I have a monthly membership site which includes courses that cover the basics of WordPress. When you learn how to set up your own WordPress website, you take back control. No more slamming your keyboard on the floor over and over because you just want to add a few products photos to your website but every time you try, you get an annoying error message. No more premature gray hairs from the stress of using your blog to *gasp* publish blog posts. Join Creative Biz U and figure out your WordPress website and more!

*AFFILIATE LINKS DISCLAIMER - If you click on a link that I’ve provided on www.amandacreekcreative.com, it may be an affiliate link. That means that I will be paid a percentage of money for the program, product, software, or service of the link you click on (if you click my link). Affiliate links will always be indicated by either a * or with the word affiliate next to the link). I want to be upfront about these links and to let you know that I only promote things that I truly believe in.

Comments

  1. Gisele Grenier says

    What an informative post! Love how you broke things down into really simple steps in a natural flow.

    My writing is absolutely atrocious…you know when the right part of the brain goes faster than what your hands can draw and write…so from the phone consult, I’ll draft up the wireframes on paper and the formal wireframes using Adobe Muse for the client so they can really see the visuals and add in the branded colours.

    I wish I could draw a wireframe as neatly as you do!

Leave a Reply

Your email address will not be published. Required fields are marked *

↓ BINGE MORE POSTS BELOW ↓
How to Save Time When Marketing On Instagram
Should You Host Your Online Course On A Marketplace Like Skillshare
5 Mindset Shifts When Creating Digital Products