The Quickest Way to Create Mockups from a Live Web Page

Take advantage of developer tools to make design easier

rapid mockup creation

A mockup is used to save time at the beginning of a design process. So creating a mockup should be a fast process, especially when you already have a live site to use as inspiration.

Instead of taking a screenshot and painstakingly using Photoshop to try and match fonts and other onscreen items, why not edit the live web page before taking your screenshot? This technique will save you tons of time in creating a mockup and will even make your design look better!

This article will show you how to create a mockup from an existing web page using the Web Inspector.

Getting from a Website to a Mockup

There is usually some source of inspiration when you’re creating a website. Many times the inspiration is another site. To find out if a particular design will work for your site, it makes sense to create a mockup before building the site itself. The mockup can be used to uncover possible issues with the layout and to get client approval.

In this article, we’ll start with a free template from templated.co, but this technique will work with any live site.

template used for mockup

I’ll show you how to change the headline, navigation, colors, and how to create mobile versions.

We’ll compare and contrast the steps in the mockup process using both Photoshop and the Web Inspector.

How to Edit the Headline

Let’s start by looking at how to edit a headline with both Photoshop and the web inspection tools.

Starting Out with Photoshop

The first step in creating a mockup with Photoshop (or a similar image editor) is to take a screenshot of the site, and then open the screenshot in Photoshop.

screenshot in photoshop

From this point, you can start to make edits.

Editing the Headline with Photoshop

It will take a few steps to edit the headline in Photoshop. I’ll show you an easier way in a moment.

First, it’s important to realize that in Photoshop we’re working with pixels, not live text. So to update the headline, you’ll need to

  1. Crop the image down to just the headline;
  2. Export it as an image;
  3. Invert the color (if necessary) and clear away clutter from the text;
  4. Use with a tool like whatthefont to figure out what typeface is applied;
  5. Find the actual font (or the closest approximation—in this case none of the suggested fonts were an exact match and all of the fonts required payment);
  6. Use something like the healing tool to hide the original headline;
  7. Figure out the size of the font (probably by trial and error);
  8. Match the placement of the headline;

tons of steps to edit PSD

I’m exhausted already. Wasn’t creating a mockup supposed to save time?

Starting Out the Web Inspector

Now let’s take a look at a different way to modify a headline.

Inspection tools are built into every modern web browser. Inspection tools let you run tests on and manipulate live web pages, including editing HTML and CSS (even running JavaScript code, if you’re so inclined).

For this article, I’m going to show you how to use the Google Chrome Developer Tools to edit a live site for your mockup, but you can do this in any browser.

The inspection tools can do way more than I can show in a single article. You can learn how to use inspection tools in depth in my Problem Solving for Web Professionals video course on Lynda.com.

Editing the Headline with the Inspector

Right-click on the headline and choose Inspect Element.

inspect element

This will open up the web inspector. Since you right-clicked on the headline, it should already be highlighted in inspector.

To edit the headline: double-click on the text in the inspector and type a new headline.

double-click to edit the headline

Hit ENTER when you’re done.

headline modified!

Voila! A new headline. Same font family and size.

Changing Colors

Changing Colors with Photoshop

There are different ways to edit color on an existing image in Photoshop.

One way is to use Select > Color Range to create a selection, then replace the selection. This takes some careful tweaking.

select color range in Photoshop

Alternatively, if you have a solid block of color with white text—as we do in our example—you could create a solid color adjustment layer and using blending to show the text underneath.

color layer

These are not the only ways to accomplish this color change, but the are among the fastest (though still not very fast).

Let’s compare that to changing colors with the inspection tools.

Changing Colors with the Inspector

Right-click on the colored background and choose Inspect Element.

Look to the right at the CSS rules that have been applied.

css properties

Uncheck the background-image property to remove the gradient.

remove gradient

The background is now a solid color.

Double-click on the hex value for the background-color and enter a new one.

live editing of color

The new color is automatically applied in the layout.

Tip: You can also click on the color swatch to open a color picker.

color picker

How to Modify the Navigation

Another common task in creating a mockup is to make a custom navigation menu.

Editing the Navigation with Photoshop

The steps to change the navigation are very similar to editing the headline. All the same challenges from the headline (detailed above) are present, plus matters of alignment and spacing will have to be considered with a menu.

The steps would have to be repeated to get the right font family and size. I won’t rehash those here. Needless to say, it’s more tedious and frustrating work.

A photographic background behind the menu could also prove to be tricky.

Editing the Navigation with the Inspector

Making this change with the inspection tools requires a tiny bit of HTML knowledge.

Right-click on one of the menu items and choose Inspect Element.

Locate the container element of the menu. In this case, it’s a nav element.

nav menu container

Right-click on that element and choose Edit As HTML.

edit as HTML option

You can now make edits to the HTML, such as adding additional menu items.

live HTML edits

When you’re done, hit CMD+RETURN (or CRTL+ENTER on Windows) to apply the change.

updated menu

How to Add New Images

Editing the Page Images with Photoshop

This is the one thing that is actually easy with Photoshop. To change an image, simply place a new image into the document.

new image in PSD

photo credit: http://jaymantri.com/post/117784350643/download

Scale and crop as needed.

Editing the Page Images with the Inspector

To edit an image in a live page, right-click and choose Inspect Element.

If the image is online somewhere, you can simply double-click to modify the src attribute so that it points to the new image.

edit the img src

If the image is on your local disk, you could use a base64 encoder to include it on the page, but this is a bit of an advanced technique.

You may also need to modify the size of the image.

editing img size

How to Create Responsive Mockups

What if you’d also like to create mockups for tablet and smartphone versions of your site?

Let’s look at the two processes for creating responsive mockups. We’ll assume the site that you’re starting from is responsive already.

Adding a Responsive Mockup with Photoshop

Here’s the short explanation: You basically have repeat all the steps you used for the desktop version, more or less from scratch, starting with a new screenshot of each layout.

And you’ll probably have to do this twice: once for the tablet version, and once for the smartphone version.

Having the font faces figured out will probably save a little time, but they will likely be different sizes for each layout.

Conclusion: Photoshop is not very helpful in creating responsive layout.

Adding a Responsive Mockup with the Inspector

If you haven’t closed your browser window (or hit Reload), all of your changes will still be applied on the live site.

So all you have to do is scale down your browser window. That’s all I did in the screenshot(s) below.

In this case, I scaled down to a smartphone size (400 pixels wide).

Note that the headline, the menu navigation, the background color, and the new image are all intact.

mobile version

It doesn’t get easier than that!

Where to Go Now

You don’t have to ditch Photoshop, but hopefully this article shows you how valuable the inspection tools (aka Developer Tools) are for a designer. The inspection tools can be used in collaboration with Photoshop to save you tons of time.

Continue to Solve Web Problems Faster

You don’t have to be a developer to take advantage of developer’s tools (nor do you have to do any coding).

I don’t want your web and problem-solving education to end with this article, so I’ve put together a free three-week course called Eureka! More Web Problems Solved. The email course will walk you through additional step-by-step solutions like the one in this article.

Tags
Posted on: October 14, 2015

Justin Putney

Justin Putney is a designer, animator, developer, speaker, author, Adobe Community Professional, entrepreneur, and minimalist runner. Justin focuses bridging the divide between designers and developers using software and training. His company, Ajar Productions, builds tools to automate repetitive tasks (such as lip synching for animation) and create new opportunities for creative professionals (like publishing their designs in new formats).

Leave a comment

Your email address will not be published.


*