How to Mock up any Web Page in 30 Seconds

I’m going to show you a simple ‘mock up web page’ hack. Whether you’re an account manager, copywriter or designer, it’s great to be able to mock up copy on any web pages without messing around in Photoshop.

I get a lot of emails from those who work in marketing and agencies. Often, these emails ask for sales tips to help grow their digital business. Simply knowing about digital marketing isn’t enough unless you can translate your knowledge and ideas to your team and your clients.

That’s when the action happens.

I’m going to show you a front-end hack using Google Chrome that I often use in presentations to help get the idea across. The basis of this is this simple truth:

Mocking up web pages makes them easier to sell!

We’ve all been there.

You may have written a simple paragraph of body copy, or come up with a headline. Or perhaps you’ve written a social media draft post. But the client can’t see it. They won’t buy the headline off a word doc because it doesn’t look the part.

What does mock web page mean?

Here’s an image of Hyundai website. I’m going to mock up this webpage with different headlines.

The original image:

Now, imagine you’d been tasked to come up with a new headline, which you wanted to show in situ with all the right fonts and spacing to help sell it.

You can change it as below.

What if you wanted to present multiple options?

And how about changing the button copy, or the bodycopy?

Mockup a web page using google front end tools

You can do the same to the menu, or any other copy you find.

How to mock up a web page in Google Chrome

The first thing to say is: of course I haven’t hacked the Hyundai website!

This is purely a front-end mockup on my screen, which only I can see.

I did it by inspecting the code in Chrome browser and making a couple of tweaks.

Google Chrome then displays me the webpage complete with my tweaks, so I can see how it might look.

I can then screenshot this to use as my mockup.

A step-by-step guide in Chrome

Go to the web page that you would like to mock up.

It might be that you want to show them a mocked up headline, a button, a menu, or even an article.

On your mac, hover over the copy you would like to update and press:

Control + Click

A small menu will appear like this:

How to open the inspect menu in chrome

Scroll down the menu and click on:

Inspect

You’ll get a screen that looks something like this:

How to mock up a web page in chrome

The red arrow shows the part of the code that you want to amend.

To keep all formatting and colours the same, just tweak the words.

Inspect the code, you can change the text to mock up your own

Then click the X in the top right corner.

Just like this.

Mocking up a web page by changing the text in the inspect menu

Your mocked up screen will look something like this:

Next, take a screenshot capture of your Mac screen.

How to take a screenshot on a Mac

To take a screenshot of the entire screen, press Command + Shift + 3

With this option, you’ll probably want to do some cropping to make sure no sensitive data is included as it captures the entire screen.

To take a screenshot of part of the screen, press Command + Shift + 5

You’ll have a square lit up which you can drag to the correct sizes, and then you can click on a button that says Capture.

This section can be tailored to the size you want, simply by dragging the corners or sides.

I prefer the following:

To take a customised screenshot, press Command + Shift + 4

You can drag the section that you want to capture and it’ll automatically open as a preview file, or auto-save to the location that your screenshots are setup to go to.

Mock up a web page: A summary

And there you have it. A simple, professional mock-up hack that will allow you to present copy in situ, without booking design time or trying to figure out fonts, spacing or padding in Photoshop.

Here are the steps in full:

  • Hover over the element you want to change
  • Press Control + click
  • Go to Inspect
  • Tweak the copy in the Chrome interface
  • Screenshot the web page with Command + Shift + 4
  • Save the screenshot

Below are a couple of other examples of famous web pages mocked up quickly the same way.

Here’s Facebook.

And here’s Apple.

It’s great for mocking up proposed copy changes to your company site to present in front of the board.

Or perhaps you want to showcase your user experience in a presentation?

Maybe you just want to have some fun.

Either way, I hope this saves you some time. Let me know how these more professional, realistic looking mockups work out for you! If you enjoyed this article, take a look at this ultimate guide of how to start a blog.

Leave a Reply

Your email address will not be published.