Free Webpage Design Template

Web Design Template and Tips

A design template for handy layout of pages.

When you’re designing elements on a web page, using the computer to do the initial design is rather lame – you have to open the programs, build the components, and often ‘tweak’ it many times, to get it just right.

Designing on-screen can be inefficient.

It’s also inefficient – because by the time you finish designing all the elements, you find that the layout, or colors, or spacing has changed. Then you have to go an do it again. Total time is often much longer than you think.

Designing with paper is a great exercise and fast to do.

  • Don’t have to boot up computer. No need to wait until the computer boots up if an idea hits you off-hours. Just grab a piece of paper and start laying out whatever you need!
  • Don’t have to launch programs. Even if you’re on your computer, it takes time to launch things and ‘dial them in’ with color palettes and toolbars. Save the time and draw.
  • Don’t have to limit your screen size. If you draw on paper, you can make as many revisions as you want. Then, you can take all the designs and lay them out on a table, and choose the best one.
  • You can focus exclusively on ideation. You can walk away from your computer and get your dreaming on. Completely focused on layout, with no distractions, you often design better.
  • Work anywhere. Don’t limit yourself to the office or computer room. Design anywhere – the park, your back deck, restaurant, etc.

Perhaps the most important reason:

You’re handing off design to someone else. If you’re not the primary graphics designer on your site, you don’t want to get involved with design, but you DO know what you want it to look like. A picture is worth a 1o00 words, right?


A blank piece of paper is fine…

A blank piece of paper is fine, but a webpage design template can be customized to your needs. You probably have a rhythm to how you work, so build that in and you cut your ‘blank paper setup time’.

Download the design template.

Here’s a handy Webpage Design Template ready to go. I put the things on it that I want to see when I’m designing. But think of it in terms of what YOU want to see.

Webpage Design Template showing the functional areas of the piece of paper.

Webpage Design Template showing the functional sections of the printout.



1. IDENTIFY the page with page title, purpose of page, etc.

That way you know what the page is for, and if you have less communication errors.

2. CATEGORIZE the type of page.

  • Type of page: Is it a Home page, a post? Use whatever you like, don’t limit yourself to our checkoff lists.
  • Functionalism: A page’s design varies based on it’s function. Check off the type of function it serves. You don’t have to do this, but it’s just one more thing that speeds up the process of handing the design off to someone else.
  • Visitor Segment: You might have learned how to design pages from the user’s perspective already; if that is the case, define the segment that the page is designed for.

3. DRAW!

Draw what you want the web page design template has dotted lines that divide the header, footer, body, right and left navigation bars. Draw over the dotted line to easily delineate the ‘zones’ of the page.

Here we are designing a right nav bar for a client of ours.

Here we are designing a right nav bar for a client of ours. Note that I can hand-off this page to someone and they can design from it directly.

Want to see the finished page?

Now, make the design template yours.

Here we include the Webpage Design Template in Microsoft Word. Open it, redesign it for your needs, and enjoy!

Greg Cox

Analytics Geek. Gregory likes Motorcycles, Cooking, and Sciencey stuff.