: How to present web design mockups to a client? I'm working on a website redesign project. I will need to present a few different mockups to the client for review. I want to make sure the

@Frith110

You can create an interactive demo with your screenshots / images. Take a look at these tools : www.appdemostore.com/ and giveabrief.com/.

Both of them are very easy to use; choose a device frame, upload your images and add what interaction you need. You can include buttons, icons for pinch, extend etc. Hope it will help you. :)

Vote Up Vote Down

@Smith574

A few months ago I came across an app called InVision. It provides the ability to upload mockups and their revisions, create interactive prototypes, and the ability to leave a comment on a specific area of the mockup. This app has improved the way I give/receive feedback and communicate with my designers and clients.

Vote Up Vote Down

@Radia289

Earlier, in 2000s sending layouts via mail was effective. Now, presentation of the design to the customer has
special services. Is it designed specifically for this.

Let's see how (m)maquetter.com service can help you. It is specially developed for this purpose that you cound:


Quickly add the layouts of the site that you draw;
Distribute layouts by website sections (repeating its menu, for example).


It also allows you:


to mark layouts approved by client
update the same layout and store it history.


This service provides you with a short link. You send it (via mail, text message or Skype).
The customer can conveniently view your layouts in any browser. You can how it works like your client can see it.

Service is free. But you can use paid tariff plan to be able to present more layouts.

Try it yourself

For more info you can read the blog

Vote Up Vote Down

@Eichhorn212

There aren't any standard procedures to my knowledge. As with most things, once you get more on the business side of the process, different companies and different individuals have different practices.

I've done work with a company, which was a little more on the continuous work/marketing side for clients, have a clever system, where they give their clients a login to their website, which takes them to a page with all of their resources on it available for download. This was more geared to copies of their logo and other misc works in different color formats, resolutions, and file formats, so companies without a design junky could grab different variations of it, or a vector file if they needed it for any reason. You could do something similar to this, have a log in which displays images, and notes on the work in progress.

That's a pretty heavy procedure though. If it's a smaller, one off gig, you may just want to consider compiling your images into a pdf file with notes explaining what's what, where you or they are in the process, what's needed from who, and what comes next. Slap your logo at the top and format it nicely, and it will look more professional than simply attaching images to an email.

Vote Up Vote Down

@Samaraweera207

My experience with sending images via e-mail to client is bad - client usually has a problem with the image ratio and size in their mail-client. This could cause a webdesign preview can look and feel a bit different.

We use on-line service to publish our work. We upload our images to a third party hosting service and send the URLs for the client.

Vote Up Vote Down

@Eichhorn212

On the last project I had to present we had a meeting with the client and showed the story board png's in the browser. Nothing fancy but it did present the designs in their 'native' environment.

Vote Up Vote Down

@Pierce403

As developers and communicators, try to let your clients know that what they are looking at is a static and flat picture of their prospective site design. Here are some of the methods to exhibit a web design to a client:

Methods of Presenting Web Design Mock-Ups


Place the image on a web page and send them a link
Send A JPEG or PNG via email
Use some kind of web-based application
Use the website CodedPreview
Create A Client Studio
Export mock-ups in PDF
Send them a JPEG or PNG & ask them to print it

Vote Up Vote Down

@Cugini998

Well, you are creating mockups to communicate. So go for live workshops whenever you can.

In such workshops, discuss the mockups while at the same time tweaking and annotating your mockups right then and there. You are creating something together - this makes it their baby too.

Note that above works if you go in several steps (as opposed to have one big presentation when you already fully completed a detailed prototype). Btw you want to mockup your main screens/pages first. Only then go into details, and do it one scenario at a time.

Vote Up Vote Down

@RJPawlick971

I think you are asking about the physical act of presentation rather than the particulars of the technology.

You are correct in that context is a huge part of a succesful presentation. Sending mock-ups out for them to look at without you being there isn't ideal. What typically will happen is that you'll get unfocused feedback...often where comments will be focusing on the inconsequential and often subjective aesthetic details rather than the key strategic big-picture issues.

What I'd recommend is some form of a formal walk-through with them. Ideally in person, but if not in person, you can easily handle it via a phone call (send the files 5 minutes prior to the call) or via some sort of screen sharing technology such as Skype.

This way you can not only show your visuals, but you can EXPLAIN your visuals. You can talk about the aesthetic and business strategy decisions you made to come to the conclusions you came to. You can help focus attention on the key aspects and deflect away from the less key details to keep the project on target.

As for what to show, I'd agree with many of the other comments that showing static visual mock-ups for web sites isn't ideal and there are likely better ways to go about it, but that's really an entirely different question.

Vote Up Vote Down

@Candy945

I reached out to a friend of mine who recommended the following:


If you're just working with images, there's apps like mocku.ps
If you're looking for a more full-on product, there's Pixelapse, which is focused more towards collaboration. It includes version control, backups, commenting, etc.

Vote Up Vote Down

@Smith574

Well there are several ways to send a mockup to a client. If you are worried about software you could export each design as a .pdf and build a mutli-page .pdf in Acrobat, and add comments to aid in the presentation if you are not wanting to just send images.

Another option is get them printed professional on poster-board and do a demonstration in a meeting.

create slideshows and display them in an interview.

Code out the website in wire-frame which is why I posted this.

If you want to go cheap buy some sketch paper like this, get a ruler about 36" wireframe your site and use colored pencils to illustrate the wire-frame.

Your question is very vague and there are several ideas and solutions. When I read this question I do not know what phase you are in the re-design. When you refer to mockup I assumed you were in the wire-frame stage.

EDIT:
but in actuality if you are so worried about the client getting the correct feel for the site you might as well code it up and make sure your CSS file is editable enough so you dont dig yourself a hole with changes. Is this site supposed to be a CMS site, simple HTML site, eCommerce site, etc. etc. Why not just create the whole site in a CSS wire-frame?

Vote Up Vote Down

@Radia289

If I understood correctly, you are wondering if there is a 'standard' way of sharing mockups (like there is when sending, for example, logo designs - where you usually follow presentation guidelines).

As far as I'm concerned: No, there isn't.

It will mostly depend on what means of communication you've been using with your clients. While emails are perfectly valid in most cases, you might need to share the results of your work with a larger team, for example. In that case, you might want to use some application that allows people to interact in a more dynamic way.

Some project management tools I've used for team feedback are BaseCamp and Trello. But there are a lot of similar ones that you might find very useful (even Google Docs - There is a comprehensive list here too). Their advantage is that they let different members leave input on the development, and as you mention in the comment it allows follow-ups on everything.

Balsamiq is another great tool for easily adding comments and making modifications to mockups online (it doesn't really require any expertise by the client, it's very intuitive), but you'd probably need to get an extended license to be able to invite people over.

Vote Up Vote Down