The 5 Key Elements to a Good Website Mockup

Good Morning Folks!

As the title says above, I wanted to pose a question to whoever is reading: What do YOU think are key elements to a good mockup? I’m going to write about mine of course, but I would like

to see your input in the comments below. First, I want to clarify one thing:

Where in the Process Does the Mockup Fit?

Again, to clarify only: the time to do a mockup is generally after wire-framing. the mockup is a tool you use to present a customer with a full visual representation of their future site. It’s a really good way for them to see the site as you do. This serves two purposes: to ensure your vision and their vision line up, and to provide them with a chance to make changes before you start creating resources and writing code.

I’m going to go over these in order of importance (at least, in my opinion; I’m sure there’s a billion different takes on this out there) from least to most. Without further ado:

#5: Show all Page Types

What I mean by this one is that within a given site, you’ll have pages intended for different purposes: a Blog Page, Success Stories Page, , Contact, About Us, etc. Among those different pages, you might have varying layouts. You want to show your customer an example of each of those layouts. Remember, you’re showcasing the entire site; you want to effectively communicate everything the new site will have, and do, for your client.

#4: Highlight Key Elements

Let’s define what a key element is real quick: it’s pretty much an element that will be on every page of the site, like a logo, the menu, social media links, copyright notices, cookie use disclaimers, etc. More often than not, these elements will be in the header and / or footer of the site.

There’s two approaches to this: you can either only highlight those key elements on the homepage, and let the customer know they’ll be in the same spot on every page, or go ahead and highlight them on every page you do a mockup for. If you’re using Photoshop and you plan your layers correctly, the latter option is actually pretty easy. Either approach works, as long as your customer understands what’s going on.

#3: Show All Menu States

This one sounds really important (and it is!), but this section is going to be brief as we will touch on it again in our #2 item. Basically, when you create your mockups for mobile, your menu will likely be of the hamburger variety (3 lines when closed, fully expanded when open). So you will want to show an example of it closed, and an example of it open, so the customer can see how the menu works with the rest of the page. You don’t need to show it for every page, but again you’ll definitely wan’t to communicate this to your customer.

#2: Include Mobile and Desktop Layouts!

This is one of those things that probably goes without saying, but it’s REALLY important! Your client needs to know what their site will look like on all applicable devices. Luckily, you really only need to do mobile and desktop, since most mobile layouts work well on tablets (when in portrait view) and desktop layouts als work on tablets (when in landscape view). Also for mobile layouts, one page should suffice, since all elements should be full width.

#1: Not Final

In my opinion, it cannot be overstated that you communicate to your client that your mockups are not final! They are the customer after all; they are free to make changes as they see fit. It should also be part of any service agreement you sign as a provider, the customer gets x amount of revisions, or anything deemed as ‘reasonable’ change it allowed. I opt for the latter, but this is something that should be determined on a case by case basis.

And that’s it for my 5 Key Elements to Good Website Markup! Let me know you take and preferences on this subject in the comments below!

Until Next Time!

Leave a Reply

Your email address will not be published. Required fields are marked *