: What are some good ways of presenting web designs to a client? I'd like to ask you how you manage with presenting webdesign. Usually, I send a jpg file/files to client directly to the mail,

@Radia289

Try to use the service (m) maquetter.com.
It solves those problems that you specified. See an example (mqttr.com/example).

This service is meant for convenient presentation of layouts to a client. And the client is not required to have any technical skills for reviewing the project. You can easily load all of your layouts to demonstrate them to the client afterwards. The ability to set several layouts for each page lets the client choose the most suitable option. All layouts are indexed (for example mqttr.com/example#0103), therefore the client can always tell you the exact number of any given layout, or point out desired changes

I hope our response will help you

Vote Up Vote Down

@Shelley591

The problem you are encountering--which is common--is that you aren't presenting the web site.

You're presenting static images of what the web site will look like in a certain setting.

Ideally, you just don't do that. You instead present the web site as a web site...something that can be clicked, tapped, resized, etc. Instead of showing PhotoShop files, you're showing HTML, CSS and JS.

Granted, that's just not always doable depending on the process and teams in use.

So if you have to show static images, I strongly recommend that you never send them out blind via email or a link. Instead, present them 'in person' even if that means via a conference call or screen share. That way you can verbally add the all important context that would otherwise be missing. This achieves three important things:


It let's you show off. You're the expert. Talk like one. :)
It saves countless hours wasted where the client goes off on their own and dwells on low priority details and fails to address the larger questions you may have that you could have handled verbally right then and there.
You get a 'feel' for what their feedback is. The problem with written feedback is that it's sometimes hard to get the full context and intent. It's best to get feedback directly so you can quickly seek any clarification needed right then and there.

Vote Up Vote Down

@Pierce403

If you expect your client to open the default image viewing program, place your screen shots inside of a browser template.

This way if they're looking at the design at 50% its size, they're recognize the browser image wrapped around it and understand they're looking at the image scaled down.

Of course, if I'm presenting screen shots in person, I'll use clean screenshots with no browser wrapped around them, and of course open them in an actual browser for presentation. The browser template may look sloppy to you, but it's fairly dummy proof if you're not sure how the client will open the image.

Vote Up Vote Down

@Karen819

I've had the same issue and had come up with a more elegant solution based on the html+css example. Instead of using the html tag, I just create a div with the background image set to the image I want to present to my client.

Here's the code for this:

body {
margin:0;
} #website {
background:url('website-homepage.jpg') top center no-repeat; // change to your jpg
width:100%;
height:1040px; // change to your height
}


And even better, I've also created a WordPress page template that will automatically set the featured image as the page background and it will automatically take the image height.

Vote Up Vote Down

@Ravi4787994

Adding to Shannon's answer, if you need to share images, I'd try to avoid email. You can upload your images to an online service and share the link instead.

However, if you want to completely avoid shrinkage or fonts rendering differently I'd recommend that you start doing your designs directly in HTML + CSS. What the client sees is what he/she will get. Showing a real website makes it much easier to understand navigability and to improve usability. I first do some wireframing (then get the client's feedback), then start trying things in the browser.

I'm not sure what you mean by your width having to be 1980px, that sounds quite large. Having some code instead would solve this, the resolution will depend on the user, but it should look good in any resolution. For designing responsive, I'd again recommend you plan and show the client some wireframing.

Vote Up Vote Down

@Pierce403

I have dealt with this in a few different ways.
If I am trying to show "the flow" of the site, then I will use a program such as Adobe Muse, b/c I can bang out a quick wireframe that the client can click through.

If I am trying to show the overall "design" of the site, I will build the pages in Photoshop and then make a multi-page PDF file that puts the pages in order, forcing the client to scroll through in the order I want the pages to be shown in. Plus in this scenario my type is crisp and doesn't get pixelated as a save for web jpg will be known to do.

Vote Up Vote Down