How to Show Design Mockups
It’s very important to show design mockups to a client during website or apps (applications) development. Experts advice is to invite clients to your office to make presentation personally, but we are working with our clients remotely, so we don’t have such an opportunity. I will tell you about the technical part of the process without discussing client communication tips.
Why is it Inappropriate Just to Send Pictures to a Client?
I had some curious cases, when a client had received the web design mockup as a graphic file and couldn’t appreciate the quality of it in a proper way. It happened because of the software, which he had used to look through the web design mockup. For example, default browsers such as Windows and OS X show a full size picture on a screen, adjusting it proportionally. Big difference in scale is seen with half an eye. But sometimes a picture is scaled down to 90–80%, so not everybody can notice it at once and Windows 7 default browser makes it impossible to set a scale up to 100%. As a result, when a client saw pages converted to HTML, he wondered why everything is so large sized and differs from the original mockups.
That’s why it’s better not to guess the software, used by a client for watching a mockup, but to find a solution, which would help a client to open web design mockup on his PC at 100% scale.
Demonstration with Predictable Result
At that moment, there were no such tools as InVision or RedPen to demonstrate web design mockups to a client, so I decided to create my own tool.
The basic feature of RedPen is an opportunity to leave comments straight at mockup. A client can comment any place of mockup just by pointing a mouse cursor on it. This service is quite fast: mockups can be uploaded by simple drag-and-drop in a browser tab while keeping a versioning of received images.
The thing is that a web design mockup must be placed on HTML page as simple and as quickly as possible. Then I would place a page on a local FTP server (with a link for a client). I would share a link with a client at once to be sure that a client would see a mockup at a correct scale.
I started with direct approach and created a web page template, where, as planned, you should only write src address of a mockup.
<html><head>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
</style>
</head><body>
<img src="mockup.webp" alt=""/>
</body></html>
The first difficulty I faced with was the following: website design mockups are usually made larger, than minimal width required. If you place a picture just using the tag <img>>, and a window will be smaller than a picture width, an annoying horizontal scroll will appear and the body of a design mockup will hide behind a window border. Then I decided that a picture must be placed as a background. It wasn’t easy to add <body> to a background.
body {background: url('mockup.webp') top center no-repeat;}
Another problem appeared when a page with a background picture didn’t scroll upright and was visible only to the ‘fold line’. Some kind of spacer was needed to scroll the page down to the end of the mockup. To do this, I added <img> with the same picture and added CSS property visibility: hidden.
It was the working version, which was well-suited for me.
<html><head>
<title></title>
<style>
* {margin:0;padding:0;}
body {background-color: #fff, url('mockup.webp') top center no-repeat;}
</style>
</head><body>
<img src="mockup.webp" style="visibility: hidden"/>
</body></html>
After some time I wanted to optimize this web design mockup. It enlarged a little bit while using additional backgrounds. So, mockups seemed more realistic, because the background filled the screen at any width. What did I need to optimize? Best of all I didn’t like to enter the address of image twice. So I wanted to minimize this. I asked one of my friends, who was a front end developer, to help me, and using JavaScript or, to be precise, jQuery he placed url only at the beginning of a file once. I didn’t know the first thing about this then.
<html><head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var path="mockup.webp";
$('#conteiner').css('background-image', 'url('+path+')').css('background-position', 'top center').css('background-repeat', 'no-repeat');
$('#conteiner img').attr('src', path);
});
</script>
<title></title>
<style>
* {margin:0; padding:0;}
body {background-color:#fff; text-align:center;}
#conteiner {position: relative;}
</style>
</head><body>
<div id="conteiner" style="width: 100%; overflow: hidden;">
<img src="1.webp" style="visibility: hidden;"/>
</div>
</body></html>
After a while I interested in JavaScript and decided to rewrite this piece in pure JavaScript, not to use jQuery library for such a small task. And that’s what I got:
window.onload = function() {
var imgPath = "mockup.webp"; // Mockup path
document.getElementById('container').style.backgroundImage = 'url(' + imgPath + ')';
document.getElementById('image').src = imgPath;
};
With such a template, I was sure that a client would see a mockup correctly and in its place — in browser.
Additional Features
Depending on my needs, I tried to add some features. For example fixed menu. I experimented with backgrounds, because each website had its different background. Somewhere it was about 3-4 background layers. Also, I had an idea to add a link on a list of project pages. A client could open a link, to look at it (to look through it) and open immediately a list of other project pages.
Responsive Design
After a while, I got a task to create a responsive website design, also I had to think out how to show design mockups to a client and to demonstrate their responsiveness as realistic as possible. Then I made sense of how CSS media queries work and decided to apply this to my template.
Vertical scroll problem appeared again. Initially, a page height was equal to a mockup height and you had to change it if you resize a mockup. I failed to find an elegant way of solution due to a lack of time and I just changed properties height when I changed a picture.
/* Screensize -320 */
@media (max-width : 479px) {
#container {
background-image: url('img/320/mockup_320.webp') !important;
}
#container img {
height: 2760px;
}
}
It worked. You could open a page even on a mobile phone or tablet and to check out what would it be like in a real-time.
Then I had some time to optimize the mock up to demonstrate responsive design. A main requirement was to minimize file editing — to give the mockup link only once, to count height automatically, to determine ranges in media queries easily.
With the help of our front-end developer Igor Basmanov, I managed to optimize the mockup
As a result, I put a link to images and media queries ranges in array and special script does the rest of work.
var imagesData = [ //media query in CSS format, image path ['(min-width: 980px)', 'image.webp'] ];
According to Igor’s advice I put the mockup on GitHub. I think, many people can help me to improve it by giving plenty helpful advice.
Figma Prototype
Figma Prototype is a powerful design tool that not only enables the creation of stunning visual interfaces but also provides an interactive and collaborative platform for designers and stakeholders. One standout feature is Figma's ability to showcase design results to customers through its sharing functionality, allowing for seamless collaboration and feedback.
Showcasing Results to Customers
Figma's sharing capabilities allow designers to present their prototypes to customers in a clear and engaging manner. Designers can create interactive prototypes that simulate the user experience, providing a realistic preview of the final product. This feature is instrumental in bridging the gap between design concepts and tangible user interactions, allowing customers to visualize the end result early in the design process.
Collaborative Feedback
Figma goes beyond traditional design tools by fostering collaboration. With the sharing feature, designers can invite customers to view and interact with prototypes in real-time. This collaborative environment facilitates direct feedback, allowing customers to comment on specific elements of the design. The ability to leave comments directly on the prototype streamlines the communication process, eliminating the need for lengthy email threads or separate communication channels.
- Real-Time Collaboration: Customers and stakeholders can provide feedback in real-time, fostering a more dynamic and iterative design process.
- Visual Context: Comments can be attached directly to specific design elements, providing clear visual context. This ensures that feedback is targeted and actionable.
- Efficient Communication: The commenting feature eliminates the need for back-and-forth emails or external communication platforms, streamlining the feedback loop.
- Version Control: As designs evolve, comments remain tied to specific versions of the prototype. This ensures that feedback is always relevant to the current design iteration.
- Enhanced Understanding: Customers can gain a deeper understanding of the design decisions and user interactions by directly engaging with the interactive prototype.
Figma Prototype's sharing capabilities, coupled with the ability to receive comments, transform the design review process into a collaborative and efficient experience. This feature not only enhances communication but also empowers designers and customers to work together seamlessly towards creating exceptional and user-centric products.
InVision As An Alternative
My way of solution, of course, has its advantages, but there are some disadvantages too, like absence of interactive features and absence of possibility to comment above mockups. But at this stage it was enough for me to show design mockups.
I heard many positive opinions from my colleagues about InVision and I want to try how it works. It attracts me by its advantages:
- user-friendly project managing tool: easy to add, to update web design mockups at any stage of work right from PSD format;
- interactive features: pageflows, fixed headers;
- compact view: works well with mobile apps design;
- ability to leave comments on pages, to discuss with a client or a colleague;
- and many other things.
Conclusion
By this point, you've likely elevated your mockup skills, but your task isn't complete. Regardless of how impressive your mockup may be, it primarily serves as a presentation tool. Your client may still have requests for revisions, either for the design itself or its appearance in the renderings. This is why it's essential to provide a file containing the flat design alongside your mockups.
Mockups serve as a means for all project stakeholders to visualize its direction and make adjustments if needed. The objective isn't necessarily to present something that the client wholeheartedly approves without any alterations (although that's always a pleasant outcome). Instead, it's about initiating a dialogue that leads to a design version aligning with their expectations. Effective mockups facilitate productive discussions. If you would like to develop a powerful product, contact us, our dedicated team will help you with project implementation.
