8

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 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.

What is a typical way of presenting mockups to a client? I assume 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.

Improve this question
2
  • 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".
    – user9447
    Jun 11, 2013 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, 2014 at 4:51

12 Answers 12

Reset to default
6

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?

Improve this answer
3
  • 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, 2013 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.
    – user9447
    Jun 11, 2013 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, 2013 at 22:48
5

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.

Improve this answer
1
  • 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, 2013 at 22:03
3

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.

Improve this answer
1
  • Good post and to add I believe you are referring to a webinar. There are some small business solutions and corporate solutions out there.
    – user9447
    Jun 13, 2013 at 7:16
3

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

Improve this answer
2

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.
Improve this answer
2

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.

Improve this answer
0
1

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.

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
0

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.

Improve this answer
0

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

Improve this answer
1
  • 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, 2014 at 14:41
0

You can create an interactive demo with your screenshots / images. Take a look at these tools : http://www.appdemostore.com/ and http://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. :)

Improve this answer

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