Do you feel stuck with your website? Get unstuck by creating a prototype with paper and pencil. Prototypes are easy for you to create and will help you:
- Visually focus on your Who, What and Why
- Structure your content in ways that benefit your visitors
- Save you time and effort in picking a theme
No prototype, no structure
If you think prototyping might be a waste of time, here’s a few reasons you can’t afford to skip prototyping:
- Instead of benefiting from a focused plan for content, you’ll waste time guessing how content should appear.
- Your content will look and feel messy and cluttered, leaving your visitors confused and frustrated.
- You’ll feel overwhelmed and waste a lot of time trying to find a perfect template that covers up the mistakes of unfocused content.
Even “coders” benefit from prototypes
I’ve designed and developing websites for years, and I’ve discovered and rediscovered the value of prototyping using paper.
Paper prototyping gives me a way to physically draw out a plan for a website, without getting buried yet in code.
Experts agree on the benefits of prototypes
I’m not alone on promoting prototyping.
- Sean Putman has written several articles on the benefits of paper prototyping for e-learning.
- Paul Boag says prototyping solves problems, validates ideas, creates vision.
- Lynda.com’s Chris Nodder has a UX Design course specifically on paper prototyping.
How to easily create prototypes
So let’s get started on creating a prototype of your home page.
Materials
- Piece of paper
- Pencil
Directions
- Write down what are the top 3 things you want your audience to do on the Home page.
- Now, draw a large square to represent Primary content.
- Next, draw a rectangle to represent Secondary content that’s roughly half the size of the Primary content square. You can place the rectangle underneath or to the right – just make sure that visually, this content is smaller than the Primary content.
- Then draw another rectangle to represent Tertiary content that’s half the size of the Secondary rectangle. Again, you might want to put this to the side or underneath-just make sure that visually it’s smaller than your Primary and Secondary content.
- Sandwich your three major content blocks with a thin rectangle on the top for your Header, and another thin rectangle on the bottom for the Footer.
Congrats! You’ve taken care of the home page. Repeat for your other content pages.
Share your prototyping experience
Did you find this article helpful? Please share in the comments section below.