Andrew Whittle
Independent Digital Graphic Designer

All the latest news

New projects, industry news, reviews and more.

 
 
Feb 8, 2014

The do's and don'ts on presenting website visuals

It still surprises me how many designers still present website visuals as Jpgs or PDF's attached to an email or worse, printed out. I urge you to stop.

I first came across this problem about 15 years ago when we used to design for an 800 x 600 screen resolution. I was involved in a large project for a London based recruitment website and the client had paid some swanky London based design agency top money for their branding and website design.

The design agency had presented the client with visuals of the home and key inner pages, printed at A3, spray mounted onto the stardard A2 3mm black mount card with the old school tracing paper, which overlaid the design, you know the type I mean.

When we showed the client the first draft of the website, their first comment was "but it does not fill the screen!, the visual supplied shows it full screen!".??I had to explain why this was and that the design was not suitable for every screen size and at that time we still had to cater for 640 x 480.

Sadly this is still the case today and is echoed up and down the country. Only the other week I had to rework a design to make it suitable for the web, after it had already been shown to the cliient, which on top of that was shown as a PDF file, giving the client a false representation of the final design and how it would look in a browser.

I urge designers to stop presenting visuals as print outs, PDF's or jpgs attached to an email. Clients have no idea how your design will look in a browser, they dont know what a page fold is (not that it has existed for years now), only when they see the design in the browser will they highlight the problem, by then it could be too late, both in terms of time and budget to fix the problem, all this hassle just becuase a website visual was poorly presented.

So how do we go about presenting website visuals?
Well before responsive website design bacame the norm, I used to work up my visuals in Photoshop, then save them out for web and quickly build up an HTML page and drop the image in the page, together with any background colours or images. I would even create image maps so clients could click through each page. This gave them a sense of how the site would work on their PC, not that its their PC we should worry about, its the users but trust me, get it right on their PC and you are 99% there, in terms of the client.

But how do we cater for multiple sizes and showing the client our website visuals which they still expect?
My answer is to design the site as you normally would in Photoshop or more so Illustrator now (makes it a whole lot easier when you need to export SVG's), but rather than spending hours refining the design, just do enough to get a feel for the look and feel. Then I begin taking the design into the browser. The level in which you want to code up the design is up to you but I would opt for a platform such as Zurbs Foundation. This means that you can quickly deploy a working prototype with the design applied and then following feedback adjust the design and then it can be handed off to the developers as final production code.

This saves hours in Photoshop working up multiple designs for various screen sizes, with a few CSS edits you can apply a colour change throughout the site. Now imagine if you had to change a link colour from blue to green in Photoshop and you had say 10 PSD files you needed to update. Photoshop does not even make it easy with every element on a different layer. You could argue that Illustrator could be used with styles and symbols and yes that could work but its still not as fast as editing a CSS file, even more so with SASS where you can change a hex colour in one place and that updates all the CSS.

All that said, as designers we need to constantly evolve our working process and for me, as I take on each new project I refine my process each time and the project itself can shape how we design and develop a design.

comments powered by Disqus

Blog catorgories

All posts
Freelance
Marketing Advice
Tutorials

Receive my eNewsletter

If you would like to grow your business through effective design and marketing, register to receive my monthly eNewsletter. Note: Your details will not be shared with any third party companies.

Kind words from my clients

?Andrew has recently designed and developed 3 different websites for me 1 of which has already launched and is performing extremely well in terms of conversion rates.

In terms of the process from start to finish, I had an idea of features that i wanted on my site but I had no idea of the layout. Andrew gave me his own recommendation on what he thought would work well in order to make the customer journey as simple as possible and based on our current conversion rates he's got it quite spot on.

Andrew provided me with daily updates regarding the progress of the site from the design phase to the site build. In total the length of the project was just over 2 months. The website has passed all security checks and although the site is just 1 week old has surpassed all our forecasts and projections. I would highly recommend working with Andrew, his designs are aesthetically excellent and he has mastered simplifying the customer journey and has helped me get off to a flying start with my new business. ?Ocean Capital Ltd - www.paydaypixie.co.uk

?Andrew has been great and guided me through the process of development to completion...

If I have had any questions he has been prompt and completed all tasks in good time. He has a good eye for details and I have asked him to help me further with my development of training and other materials for my business.?Embryarch Ltd - www.embryarch.co.uk

?Having recently brought our website into the 21st century, I can thoroughly recommend the work of Andrew. He is professional, friendly, and a pleasure to work with.?MG Caravans - www.mgcaravans.co.uk

?The service received from Andrew is fast and efficient. Andrew always interprets the brief accurately and delivers a first class service. I have worked with Andrew for several years and would have no hesitation in recommending him.?Aura Health & Beauty - www.aurabeauty.co.uk

?We would like to thank Andrew for our new CMS website and the help, support and guidance whilst creating it. Andrew is approachable, friendly and didn?t talk in technical jargon which we didn?t understand. Andrew is always there for help and support to answer even the silliest of questions. Once again a big thank from everyone at Nutshaw Kennels.?Nutshaw Kennels - www.nutshawkennels.co.uk

?Andrew listened to what I needed and provided me with a fresh new website, identity and leaflet. He guided me through the process of getting my website online and now I rank page one on Google. I would highly recommend Andrew.?Jacqui Rostron - www.jacquirostron.com

andrewwhittle1 RT @WhittleDesign: Great day today. A new logo, brochure and two websites booked in today, bring on tomorrow for more! #graphicdesign #bran…