Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I'm working on a website redesign project. I will need to present a few different mockups to the client for review. Besides sending images in an email, what is a typical way of presenting mockups to a client?

share|improve this question
4  
I don't quite understand why you are asking this. Is there something wrong with sending them by email? You could try a carrier pigeon ;) –  Joonas Jun 11 '13 at 21:31
1  
I want to make sure the client can see everything in context. I don't want to assume that the client has the right software. Maybe even add some comments, questions, or background on the design direction. –  Andrew Jun 11 '13 at 21:34
    
@Joonas Also, I assumed that presenting website mockups in email was not the best way. If email is a successful means for presenting mockups, please explain that in an answer. –  Andrew Jun 11 '13 at 22:32
    
well a successful means of a mockup is coding it out. There will ALWAYS be a variation from design to code. That little variation will cause the client to ask or say "that wasnt like that in the design". –  Matt Jun 11 '13 at 22:49
    
You could always create your own server and give them links to the mock up you've designed? I think that'll be the best way. You might want to create a low level account and give them log in details. –  BBking Jan 2 at 4:51

11 Answers 11

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?

share|improve this answer
    
Those are some good ideas. By mockup I mean a high-quality example of what the site would look like (no html/css yet). I planned on creating a few different mockups in photoshop since it's faster/easier to change the design in photoshop rather than code. Creating a web based presentation would help the client get a feel of how the site would look in a browser. I could also add some Google Analytics to know exactly what browser the client is using so I can make sure it looks good in their browser. –  Andrew Jun 11 '13 at 22:30
    
well what browser the client uses doesn't really matter if their demographic is towards something different. you need to learn what their demographic is to see if IE is needed or not. –  Matt Jun 11 '13 at 22:43
    
Good advice, but I already know the target browsers. The important part of knowing the client browser is that you don't make some glaring mistake that the client will see immediately. Also, if the client is using an admin tool to edit their site, making sure their browser is supported is important. –  Andrew Jun 11 '13 at 22:48

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.

share|improve this answer
    
That comprehensive list is pretty good. I wasn't necessarily thinking of a third-party service (I'm a developer too, I can build my own). Just wondering how designers usually present web design mockups in a digital way to get client feedback. –  Andrew Jun 11 '13 at 22:03

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.
share|improve this answer

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.

share|improve this answer
    
Good post and to add I believe you are referring to a webinar. There are some small business solutions and corporate solutions out there. –  Matt Jun 13 '13 at 7:16

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

share|improve this answer

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.

share|improve this answer
    
Good advice, thanks! –  Andrew Jul 22 '13 at 16:42

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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

share|improve this answer
    
Hi there, and welcome to GD.SE! Are you the creator of the program? It's ok to publicize your own product if it answers the question (and yours does), although we recommend you mention your affiliation in the answer (and if it's a paid or free program). –  Yisela Oct 10 at 14:31
    
Greetings. Yes, I created the idea of the service and the project manager. In my spare time I want to help designers in their work. To convey to them the idea of this and similar services (I know about 13ti). Yes maquetter represented in the paid version. But on October 1, we introduced the package of services "for free - forever." –  Igor Abyzov Oct 10 at 14:41

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.