How to mock up your website pages

Last Updated: June 06, 2014

Once you have an idea of what content you want on each of the pages of your website, you can create mockups, wireframes, or prototypes of how the content will be arranged on those pages.

Tools for creating mockups

Tools for creating mockups

Mockups don't need to be pixel-perfect. You can actually just sketch out your basic details with a pencil and paper. But the more design decisions you can make in the mockup stage, the fewer design decisions you'll need to make later on. Now is the time to think things through.

If you'd like to try using something other than a pencil and paper for your mockups, check out these tools:

A look at creating a mockup

Here's a video that shows HubSpot Designer Chase Oliver mocking up a sample website page using Sketch.

Chase's tips for creating a mockup

  • Write down the goals of each screen, and how that screen fits into the overall goals of the site (Example: Help users sign up for a newsletter).
  • Prioritize content with a well organized layout. Users generally read screens from left to right and from top to bottom, so your content should be placed accordingly in terms of importance and flow.
  • In this stage, focus on the purpose of each component and not the actual content.
  • Don't get attached. The point of mockups is to use them as a vehicle for discussion around layout and functionality.

 

In the next step, you'll use the HubSpot template builder to create template layouts that match the structure of your mockups. So planning out your structure ahead of time will help you determine how many template layouts you'll need to build and what content will need to be reused across multiple templates as global content. Taking the time to go through the mockup stage thoroughly will pay dividends later by saving you time and effort in the long run.

Next Article: How to upload your site assets to file manager

LOG IN TO YOUR  WEBSITE

Table of Contents

    Get feedback from marketing peers and experts on inbound.org
    Check out Premier Services