Murray Raine Puppets Website Redesign
Published on Thursday, September 24, 2009 – 1:11 pm | 31 brilliant comments »
Thought I would share with you a recent project of mine: the rebranding of The Murray Raine Puppets logo and website.
Murray Raine grew up in Newcastle, New South Wales. His initial interest and love of puppetry was triggered at the early age of six. Following a performance by the iconic “Marionette Theatre Of Australia” at Waratah Infants school, he new a career in puppetry was his destiny! Now four decades later Murray is regarded as Australia’s leading “cabaret” marionettist.
Please feel free to have a look through the old and new websites and let me know what you think. It was a real pleasure designing for Murray and his star studded cast.
Website Before - Click to view old website (opens in new window).
Website After - Click to view new website (opens in new window).
The 960 Grid
When designing for the web, it’s often a good idea to follow a grid based approach. I personally use the 960 grid system and highly recommend it. Below you can see how I have used the 16 column grid system to build a structured and stylistically coherent web site.
You can click on the images below to see them at full resolution.
960 Grid System - 16 column grid with guides.
960 Grid System - 16 column grid with guides & coloured columns.
Front page without guides.
Front page with guides.
Front page with guides and coloured bars.
Further Web Design Resources:
- 9 SEO Tips You’ve Probably Forgot About
- How To Make Your Next Website Design POP
- Top 7 Most Cliche Stock Images Used In Web Design
- 9 Of The Best Ways To Present A Website To A Client
- 10 SEO Rules for Designers
- Designing an Accessible Site Without Losing Your Mind
Comments and questions are welcome, as always.
31 comments thus far »
9 SEO Tips You’ve Probably Forgot About
Published on Tuesday, June 30, 2009 – 12:00 am | 34 brilliant comments »
This is a guest article by David Walsh*.
SEO (Search Engine Optimisation) has, as most of you probably know by now, become one of the most important elements when setting up a website. Still we notice that many website owners, for some reason, tend to neglect implementing it in their creative process. Jacob published an all important SEO rules for designers but there is always lots to learn. I thought that it was about time to write another nine tips on the topic.
1. Proper use of <h1> and <h2> tags
Headers and sub-headers are not only useful for making up a good layout. Search engines do also love it when we use headers. But that is when we use them wisely. This means that you should use them in a way that makes sense - do not spam your site with various headers as it is a sure way of keeping both the search engines and the visitors away. Most important sections of a page should be H1 and H2 and then smaller sections should be H3. H4-H6 are rarely used tags.
2. Remove useless code
The purpose of optimizing your site is to make it as available as possible for all involved - you, the visitors and the search engines. This is just as important when we are talking about the code of the website. Take advantage of an XHTML validator to make sure that all of your code is readable.
If you own a blog and tend to write drafts in MS Office, copying and pasting back into WordPress is a code nightmare. Check the “HTML” tab when in the writing new post page of WordPress; Office adds a lot of garbage code. Remove it. A good alternative is to copy & paste your article into a text editor and then copy and paste the article into your next blog post.
3. Internal linking
Internal linking is a great way of keeping your site user-friendly. Search engines also like to see well placed internal links if they are relevant and serve a purpose. Use good anchor text to your pages and link within strong pages. Also, more than a couple links to the same page have no meaning. Some sites put “hawaiian vacations” three times in a text and link back to the home page. It is not only annoying to the visitor but also worthless.
And most importantly, don’t create orphan pages; pages that are not internally linked anywhere.
4. Footer links are to be kept at a minimum
One type of link that gets close to no attention by the search engines are the footer links. Sure, they are good from an internal navigation purpose but that is about it. You should thus try to keep the bottom based links at a minimum.
5. Do not use images as links
As the search engines try to crawl everything on your website, your task is to make it as easy as possible for them. This is the reason why you should not use images (excluding banners) as links. Proper text is much easier for the spiders to read. Another quite common mistake that designers tend to make is embedding much of the important content in Flash, which search spiders obviously will not be able to read. While Google has begun to read websites based in Flash, it is not a good idea to have a site that cannot be searched.
6. Keep the URLs friendly
Not only your domain name and onsite content should be optimised for keywords. Make sure that you implement the same strategy for ALL of your URL strings as it is a great way of increasing your ranking on search engines.
7. Use the noarchive and noindex tags
Some people seem to think that all of their content has to crawled and indexed by the search engines. Pages such as the “About” page and the “Privacy Policy” page are all good to have but there is really no reason for them to be indexed. Make sure that you use the noarchive and noindex tags. And do not go overboard, putting a noindex in the index file of your website means that NOTHING will be found by the search engines. Sounds to dumb to say that? There are a few designer sites encountered that are not indexed by Google because they left an universal no follow tag.
8. Social bookmarking
Social bookmarking is beneficial for search engines as well as for the visitors. Since the bookmarks are saved to the web, instead of to your browser, they are easily shared with friends - good for all parties involved. Be careful though, many plugins for social bookmarking have 100 links that pop up and they can break the external link count of a page. Too many external links devalues all the links on a page, so make those social bookmarking icons “nofollows.”
9. Do not overuse Ajax
For some reason many developers and designers seem to feel as if they have to impress their visitors and implement Ajax features all over the place. Big mistake. Ajax will not get indexed by search engines and your visitors will not be able to send the page to their friends, as the URL does not reload.
Recommended SEO Resources
- 10 SEO Rules For Designers
- SEO For Blogs
- SEO Best Practices - 13 Top Tips
- My 26 Best Link Building Tricks
- Website Grader
- 7 SEO Blogs & Useful Articles
*About the author: David Walsh is a writer over at Web Hosting Search. WHS is a guide to web hosting and tutorials. If you need to get a hosting plan, anything from cheap web hosting to server hosting (the big guns), WHS is the place for you.
34 comments thus far »
How To Make Your Next Website Design Pop
Published on Tuesday, May 19, 2009 – 4:00 pm | 54 brilliant comments »
Web design is one of those areas that when done right, you know it. It looks polished, refined and generally, just well done - it pops! There are a number of ways that you can achieve this and that is by ‘polishing’ off your design. Here we look at some of the ways to do just that.
1. Layout The Fundamentals
Before you go about making your website pop, you first must have your basic fundamentals in place. By this stage you would have done the research, laid out your website appropriately and done most of the basic design work… but you have not yet done ‘the polish’. In this tutorial we are looking at some techniques put in place for a chocolate delivery website; however, these techniques can be applied anywhere.
On another note, you may also like to read about the logo design process for the UKE logo you see below.
2. Check Alignment & Spacing
Alignment and spacing in web site design creates order, organises the page and groups parts of the website for easy navigation. In the screenshot below you can see the guidelines in place ensuring everything is aligned (the grid is from www.960.gs). Notice how the logo and all of the text is left aligned? Also, take note of the even spacing around the boxes and text. Use the guidelines in Photoshop to ensure all of your elements are aligned which can be done by dragging ‘rulers’ from your rulers tab. Press Ctrl+R to turn rulers on.
3. Apply Anti-Aliasing To Text
Something that is often over looked when designing for the web is the use of Anti-Aliasing in your text. For those who don’t know, anti-aliasing is the technique of minimising distortion artefacts. There are a few ways to minimise this distortion in your text but the best way is to make use of your ‘Character’ panel. You can choose between None, Sharp, Crisp, Strong and Smooth. The best way to see what works best is to experiment as different fonts and sizes will yield different results; however, the Sharp setting usually prevails.
4. Add a 1 Pixel Stroke
Something that really makes a difference in making a website pop is the use of 1 pixel stroked borders and lines. These stroked borders really add that extra crispness to the design as it gives extra contrast to the surrounding elements and gives the design more depth. Notice the zoomed-in screenshot below; see the inner purple lines that run alongside the inside of the boxes? You can add these 1 pixel borders by using your stroke option found in the ‘Blending Options’ panel. This technique also works great for large text.
5. Add Subtle Gradient Effects
Gradients are popping up everywhere in web design and for a reason - they add depth and real aesthetic to the design. Unlike print design where gradients seem flat, on the screen they make a design come alive. Notice the slight dark to light purple gradient in the screenshot below? Also take note of the slight transparency. These effects give the design a new dimension, making the image come off the screen so to speak. Use the ‘Blending Options’ in Photoshop to create these nice subtle (emphasis on subtle) effects.
6. Add Subtle Drop Shadows
Used in conjunction with the gradients and stroked borders is the use of subtle drop shadows. Once again, these shadows add a new depth and dimension to your design as it makes the different elements on the page play against each other so that they pop out at you. Notice in the screenshot below; the logo, text and boxes all have subtle drop shadows applied to them which break them away from the other elements. You can use the Photoshop ‘Blending Options’ to achieve these effects - but make sure you use them in moderation.
7. Have a Hierarchy & Call to Action
When someone first visits your website what is the first thing they are going to do? Is there a clear hierarchy of what to read or do first? What is the purpose of the site? These are all questions that you should have considered at the start of the project however now is a good time to go back and reflect on these decisions. Can you adjust the colours, size or position to achieve better results? Notice in the screenshot below that the call to action on the UKE website is the ‘Pick a Basket’ button which is placed conveniently after the main opening slogan.
8. Colour Correction & Sharpening
In web design, photos, icons and images are usually quite prominent so you should ensure that they are of the utmost highest quality. Check the color balance, sharpness and contrast of each image and make certain that it balances with the rest of the page and other images. A good way to do this is to make use of Photoshop’s ‘Levels’, ‘Unsharp Masking ‘ and ‘Curves’ functions.
9. Less Is More.
In web design, the old saying goes, “less is more” (in most cases). After completing your web site design, have a break and come back to it.
- Is there anything that you can remove, fix, replace, move, change or edit?
- Does one element take up to much space or draw too much attention?
- Are there too many colours?
- Does the site balance?
- Is there consistency?
- Can I make use of more white space?
10. Summary
Next time you set out to design your next website you can ask yourself these questions…
- Have I got the basic fundamentals in place?
- Can I improve my alignment or spacing?
- Have I used the appropriate anti-aliasing?
- Can I sharpen my images or text with strokes or borders?
- Can I give more depth to the page by using gradients or drop shadows?
- Is there a clear hierarchy with a call to action?
- Are all of the images colours corrected, balanced and sharpened?
- And last of all, ask yourself this… does the website pop?
11. Recommended Web Design Reading
- How To Elevate Your Website Design Process & Results
- From PSD To HTML: Building a Set Of Website Designs Step By Step
- 10 Principles of Effective Web Design
- 5 More Principles of Effective Web Design
- 10 Web Design Usability Issues You Should Be Aware Of
- Applying Devine Proportion To Your Web Design
- 8 Useful Tips To Help Your Website Convert
- 10 SEO Rules for Designers
and for lots more recommended web design reading, just search “web design” on Smashing Magazine or view the Interface section on PSD Tuts.
Pictures of Layers Magazine
This tutorial was originally written for Layer’s Magazine May / June edition. Below you can see a few quick snaps of the above article in Layers Magazine.
Have you got any other tips on how to make your next website design pop?
54 comments thus far »
How to get clients to say yes to your designs
Published on Thursday, December 18, 2008 – 12:00 am | 29 brilliant comments »
Paul Boag, a famous web designer and host of one of the coolest web design podcasts out there, Boagworld, did a great presentation on how to get clients to say yes to your designs at the 2008 Future of Web Design Conference.
Paul talks about how to make clients understand what we do, while giving us some tips on how can we make them approve our work. I highly recommend you to watch the video below, but for those who do not have 35 minutes spare, the video is summarised below.
NB: In the video you can not see the slides on the projector but you can see the slides here. I suggest you have a look at the slides before watching the video.
So, how do we get clients to say yes?
Paul kept stressing that the designer’s relationship with clients is fundamentally flawed.
We have to face the fact that a big part of our job is to nurture our client relationship. In many ways, we treat the clients like Monarchy and see ourselves as their servants. Often times we follow their leads, in a submissive way, and are afraid to express our opinion.
It’s time for us to change, moving from a master/servant mentality to a peer to peer mentality. We have to take the role of an expert and make them perceive us that way. But how?
Change The Relationship: Be the expert
Have a methodology. A methodology puts you in control. It enables you to set expectations with the client and lets them know what is coming.
Clients want to have a sense of what is coming next. Explain the process, the stages the project will go through. Have a design process. This way you’re setting yourself up to be the person who’s in charge of the relationship. Put yourself in your clients shoes: They are nervous & unsure if they did the right decision to go with you. Make them feel confident in the situation. Make them feel confident that picking you, your studio was the right choice.
When kicking off a project, make sure that there’s a thorough research phase (depending on your process this can entail: success criteria, business objectives, competitive analysis, priorities, user personas, user expectations, site personas) All of this research will help you explain WHY you are doing what you’re doing later on. You need to prove that you are the expert by justifying your decisions. You will have to constantly refer back to the information you gathered in the research phase.
Justify it also by referring to third party experts. People love facts and figures. By referring to other experts, you become an expert by association. Write down everything a client has agreed to, that way you can refer back to it.
Be positive
We need to stop blocking the ideas our clients have. Paul says yes to anything what his clients say but then goes ahead and explains the consequences. “Yes, that’s a good idea, but then, keep in mind that this would…! But hey, here’s an alternative, why don’t we do this instead.” It’s all about being positive. It’s about offering smart alternatives. Be enthusiastic and caring.
Clients are not stupid, they are intelligent clever people. Just because they don’t understand the web, it doesn’t mean they’re not clever. They will pick up on your condescending attitude very quickly. We need to give them credit for what they’re good at. They know their target audience. They know their business. They might have a hard time trying to communicate it in a way that we understand, but we have to help them do so. Always keep in mind that the client will most probably have to live with the design that we’ve built for them for a long time. If it was your portfolio site, wouldn’t you probably hesitate a few times? Haven’t we all been there?
We have to stop excluding the client from the process. Designers have this fear of showing work that we haven’t finished. We need to be better than that, we need to get over this fear and include our client often. By getting the client involved in the early stages of the design process, they feel part of it and therefore feel valued. They are much more likely to sign off a design that they’ve been an actual part of. This may not be appropriate for all designs but in web design it is appropriate.
Shape the client’s role
We need to look at shaping the client’s role. When starting a new project, have a kick-off meeting to explain the overall process but also explain what’s required of the client. They might have never worked on a site, have never worked with you and simply don’t know the process. We have to educate the client, and explain what their role is, which will help them understand each step and also constrain them. By educating the client you can set boundaries.
When educating your client:
Focus on problems
Too often we talk about solutions and not problems. “I don’t like that blue, I want it to be pink”. That won’t do anything for you. You need to find out what the underlying issue is. Always focus the client on a problem, not a solution. The client should instead say “I am not sure the blue is going to appeal to the target audience”.
Focus the client on the business
Concentrate on business objectives. Don’t let the client get caught up in the small details. Focus them on the business objectives of the site. We need to keep the client away from the knitty gritty.
Focus the client on users
Shifting the client’s view on users, moves them away from personal opinion. They usually say “I don’t like“… Get them to say “I don’t think our users will like…”
When you send a client an email with a link to designs, say: “How do you think your user will react to this?” instead of “Let me know what you think!”
Managing Feedback
We need to accept the fact that when dealing with clients, politics will get involved. Even if you work on small business websites, where you talk to the company owner, he’ll show his wife, or his 10 year old nephew. With bigger clients, they have whole committees. Politics are a big part of our day to day work and we have to learn to deal with it. What Paul suggests is to find out who these people are and, if possible, talk to them directly. If you can make them feel listened to, and talk to them directly, then they come on board. They feel listened to and valued. They will end up defending you and your designs.
Design By Committee
In the real world, there is going to be design by committees. The sheep mentality is the danger. Try avoid them getting all in one room. Have separate conversations with them.
- Benefit 1 : You’ll avoid the alpha male dominating the discussion.
- Benefit 2: You’ll avoid the sheep effect and the ‘design on the fly’ problem.
- Benefit 3: You’ll be the only one that knows the overall picture. You can draw the information together and you can refer back to decisions they have made and justify.
But most of all, try to control the type of feedback you get. Again, focus on the user. When dealing with large committees Paul issues a questionnaire to ask specific questions to focus the client on the right way of thinking. We have to make sure they focus on the issues they should be really focusing on.
Types of clients and how to deal with them
Paul explains that there are four types of clients and you must deal with them each in their own way.
The Difficult Existing Client
Become the positive person. Be pro-active, Be excited. Quote experts and become an expert by association.
The No Clue Client
You need to take control of the relationship and tell them what to do. “This is the right decision and I really believe that…”. You need to be reassuring.
The Micro Manager Client
Refocus them on their role. The really powerful thing with micro mangers is the question of asking why? Focus them on problems and not solutions. “What are you trying to achieve by increasing the logo size by 20pixels?” And with this you might come up with an even better solution. You will have to constantly refer the Micro Manager Client to stuff they previously agreed on.
The Marketeer Clients:
With marketeer clients you will have to explain the difference between print and web based design. They speak a special language all on their own which you will need to adopt. Don’t talk grid, colours, white space, etc. You will have to talk selling points, call to actions, etc.
More Paul
Paul Boag is also behind a nice web service called GetSignOff that is exactly about that, getting your design approved. You may present your site designs, manage feedback and also organise multiple versions of your designs in a clear way.
You can follow Paul on Twitter & listen to his podcasts on Boag World.
Sources: Future Of Web Design Conference, Swiss Miss (Original Author), Abduzeedo, SlideShare
29 comments thus far »
Do you need to rebrand?
Published on Tuesday, December 16, 2008 – 12:00 am | 20 brilliant comments »Is your logo or website in need of an update?
Many of my recent identity design projects have been redesigns of existing logos or websites which is one of the reasons I am writing this post… I want to show you just how valuable a good redesign is.
Below I will give you a brief summary on each of my recent client projects, showcasing the before and after shots of each identity.
UKE Luxury Chocolate Gift Baskets
UKE Website Re Design (Old left, New right)
UKE sells unique arrangements of chocolate as an alternative to gift baskets. UKE targets a more upscale market due to the time to make and cost of the product. Eugene contacted me to recreate her whole identity… she wanted the new identity to be bold, have prestige, look luxurious, and be targeted to the upper market.
I redesigned the logo & website for UKE Chocolate Gift Baskets of which you can see the before and after shots above.
You can see larger before & after shots of the website here: Before | After
Pip’s For Hair
Pip wanted her new business logo to be “strong, bold, modern, unique, classy, eye catching, not boring & something different”. The colour had to be purple, black or silver to compliment her new salon’s interior decor. The logo was also going to be used for her shop front signage and it was going to be illuminated so this also had to be taken into consideration.
Pip’s main target market is teenagers however she also markets towards the family and the elderly. The salon is based in a country town here in Australia.
I have a post coming soon on the full design process for this logo. I am just awaiting photos of the store signage.
Fitucci Custom Windows & Doors
Erik contacted me as he wanted a redesign of his old logo and he wanted the new logo to be simple yet sophisticated and he also wanted it to reflect professionalism, quality, uniqueness, luxury, innovation and elegance.
I wonder if you can spot the optical illusion? Do the white trapeziums look like windows or doors to you?
I wrote about the design process in full here.
D-Zyne Solutions
D-Zyne Solutions is business based in Melbourne Australia and they offer coding, blog consulting, e-book sites & membership sites. Helen wanted a “structured, innovative, outside the box, stylish” logo that represented D-Zyne Solutions as a whole.
The new redesign features the initials D, Z and S in a grid like pattern that is literally out of the box. The typeface Consolas was chosen for its code like nature.
Freelance Folder
Freelance Folder (www.freelancefolder.com) is a blog dedicated to offering advice, opinions and tips for freelancers.
Salony Creations
Butterfield Photography
Branding redesign for a design studio based in Dubai. Salony means beautiful in Hindi.
Branding redesign for a photography duo based in Southern Arizona, USA.
DKC Global
Logo design for DKC Global - a management consultancy firm based in Germany and USA.
Ultimate Potential
Ultimate Potential Website Redesign (Old left / New right)
Ultimate Potential is a life balance business that offers a variety of services that improves ones lifestyle, body & mind. Ultimate Potential offers workshops, camps, programs, personal training, life training and more.
Michelle wanted a total make over of her old business identity including a new logo design & website design… her new identity needed to demonstrate: “energy, wellness, vitality, life balance, upwards mobility, spirit”. She also requested to see if the initials U & P could be incorporated into the logo.
The green colours give the business a sense of fresh energy and wellness while the abstract logo of the man jumping in the air shows upwards mobility, symbolising vitality and overall happiness which is the goal of Ultimate Potential itself. And hey, it even managed to subtly sneak in the initials U & P (making up the man).
You can see larger before & after shots of the website here:
Before | AfterA walk through of my design process for the Ultimate Potential logo will be published on VectorTuts mid January.
MAC - Malaysian Aesthetic Clinic
MAC (Malaysian Aesthetic Clinic) is a clinic dedicated to advanced non-invasive aesthetic medicine and Karen wanted this to be displayed in her logo. A clinical, professional, geometric logo was preferred and it also had to be suitable for shop signage.
The colour scheme was chosen for its natural, clinical look & feel, while the mark itself is made from the initial M titled sideways while also forming a cross.
Influential Blogger
The purpose of Janette’s website Influential Blogger is to get people all over the world to vote for the most influential blogs that are emerging each year and to narrow it down to the top 10 most influential emerging blogs for the current year.
The concept behind the final logo was to portray a crown shaped out of 5 rays of light. The crown is a symbol of power, legitimacy, strength, righteousness, victory, triumph, honour and glory… all traits that an influential blogger has.
The rays of light are symbols of ‘being in the spotlight’ and also of being searched, (ie. a torch) which relates back to the actual purpose of Influential Blogger… to search out the most influential blogs.
You can read more about the design process of this logo here.
Well there we have it, 7 of my latest identity redesigns. The question now is… do you need to rebrand?
20 comments thus far »
Top 7 Most Cliché Stock Images Used in Web Design
Published on Tuesday, September 30, 2008 – 9:00 am | 130 brilliant comments »
Sometimes clients ask us to implement ‘not-so-unique’ elements into our designs and sometimes it seems almost impossible to convince them otherwise, however, hopefully this post can suggest some reasons why not to use the old web design stock imagery clichés.
I will do this simply by showcasing the most generic and cliché stock images (still) used in web design today. Please also take note that there is nothing wrong with using any of these images if used appropriately.
The Four Part Series
- Top 7 Most Overused Techniques & Elements Used in Graphic Design
- Top 7 Most Overused Icons / Shapes Used in Graphic Design
- Top 7 Fonts Used by Professionals In Graphic Design
- Top 7 Most Overused Stock Images Used in Web Design
Below is the fourth article.
The Business Handshake
The Call Center Woman / Man
Group Of Business People
The Rising Finance Graph
Skyscrapers
Tech Paraphernalia
The World / Globe
How To Avoid Using Cliché Stock Imagery
Avoiding clichés in web design may be difficult especially when the client wants a particular image however the best way to get around it is to ask “why”. Why do you want that that particular image used? Is there another way to portray that without the use of cliché stock images? Always ask yourself what you are trying to communicate and then work from that.
If you enjoyed this post, you should subscribe so you don’t miss out on the next article in this series. You may also like the much more humorous take on cliché stock photography.
Is there any other cliché imagery you think should be added to this list?
9 Of The Best Ways To Present A Website To A Client
Published on Monday, August 25, 2008 – 2:53 pm | 73 brilliant comments »
The design phase of creating a website is fairly standard for most web designers however when it comes to presenting the mock up to a client before slicing / coding the design, some problems do arise so I went out and asked the community about how they present a web site design to a client.
After filtering through all the responses and summarising them I am now ready to present to you, 9 of the best ways to present a website design to a client, along with the advantages and disadvantages of each method.
The Problems
As web-savvy individuals, it’s quite easy to grasp and understand the concept that mock-ups are simply static images that depict what a site would look like. However, what many web designers have found is that this concept is incredibly difficult for clients to wrap their head around.
We, as designers and communicators, try to make it clear to clients that what they are looking at is a static and flat image of their potential site design. Still, many questions and comments come from the clients after you present the design, such as the ones Verne Ho of Creating Briefing and many others, have experienced below:
- Why don’t any of the links work?
- How do I edit the text on this?
- How come I can’t highlight text?
- The website is too small (occurs because the browser has shrunken the image by default)!
- I don’t like the white space that surrounds the site.
- Can we center the site?
To some extent, I can understand the confusion… they are looking at something that looks like a website that is inside a browser or picture viewer, however, oddly, it doesn’t act like a website… obviously this fact would raise questions.
To find out what various web designers do to get around these problems I went and asked my friends on Twitter (Follow Me) and Facebook (Add Me) to see what they do when presenting a web design mock up to a client.
Methods of Presenting Web Design Mockups
After getting replies from my Twitter / Facebook friends (big thank you) I came to these 9 methods of how to present a web design mock up to a client. In no particular order:
Place the image on a web page and send them a link.
People can probably better identify an image when it appears as they normally see it, such as in a web browser however it does create many more questions as I previously outlined above.
If you choose this method try to personalise it by uploading it to your own server… use the directory/clients/clientname/index.htm. Another tip here was to use the free .tk domain provider so that you can send them a link such as http://clientsdomain.tk which also looks quite professional. Thank you for the .tk tip Herbert.
Send A JPEG or PNG via Email
Sending a mockup by email is probably the simplest way however it is not always the best… Some users have small screen resolutions which means the picture may shrink which means more questions along with the other ones that I outlined above.
Use some kind of web-based application
Using a web-based application to showcase mock-ups reinforces the idea that it’s something on ‘display’ and it is not a live example which may lead to less questions.
Use the website CodedPreview
CodedPreview allows you to create simple HTML preview pages, showing what a template should look like when coded. (Thanks liamuk7 for this one.) Again, try to personalise it as much as you can, tailored to your client.
Create A ‘Client Studio‘
Rather than using an online based application, you can set up your own ’studio’ on your own server where the client can log in and view mock ups (jpg’s on a html page) which they approve… You can put revisions on the same page (new jpg’s) and once approved you can add a link to view the functional site in progress.
Here is an example from IDesignStudios. “I email clients with the URL for the client studio, as well as their Client ID, Username and Password. You have to have a username/password to even get into the first screen (w/ disclaimer and dropdown of client ID’s). A client can only continue on to their own client area (as in, all clients can see the first page w/ dropdown, but you can only login to 1 client area after that).” You can view a screenshot of the log in screen and inside the client studio.
Export mock-ups in PDF
Rather than saving in jpeg or png format which is just an image that can be opened in the clients default image viewing software, having it in PDF format means, in most cases, that they must open the website in Adobe Reader. The advantage of this is that there’s less expectations for it to function like a website. The use of layer comps is also useful in PDFs to show variations of a design.
Skip photoshop and design in HTML
There are a few debates on this one and it usually comes down to whatever process best enables your creativity however this one is for you to decide.
Get The Client To Come Into Your Office
Although this is not always possible, it usually is the best way to present a web mock up to a client as it allows you to talk over the whole project together with the client. If you have this opportunity, always take it.
Send Them a JPEG or PNG & Ask Them To Print It
This was just an idea I came up with… if you send them a full scale JPEG mockup of the design and ask them to print it off, then they will not think that the website will function like it normally does which in turn will mean less questions. A disadvantage of this however is that the site will not be to scale.
Original Responses
Below are some of the original responses from my friends on Twitter and Facebook… once again thank you. Follow Me On Twitter and Add Me On Facebook and while your at it, Join The Just Creative Design Facebook Group.
marioOlckers @justcreative Stealth live install on server to illustrate proof-of-concept and then back to drawing board after input and consultation.
netbramha @justcreative PNG, How about you?
brianyerkes @justcreative Save it as a jpeg, upload it to a directory on your server called /clients/clientname. Make an index.html page. Add jpg image.
brownaddesign @justcreative I just post the design on my web server, in a directory I create for the client, and email them a link to view.
marnieb @justcreative In JPG format. 
metalgod @justcreative I put together a PDF with annotations and send it over to the client. Then I follow up with a call to walk them through it.
trisnadi @justcreative Has the client seen the draft before? I normally do a full walk through before letting them touch it or ask questions.
ClarkleSparkle @justcreative Email.
bradsherrill @justcreative Have the client come into your office and let them view in 1:1 scale preferably jpeg format. If you can’t do that email them.
jessjoyce @justcreative - We send/upload .pngs of the Photoshop/Illustrator docs
spinfly321 @justcreative - Design in photoshop and present as a jpg
biwerw @justcreative - Create a web page with the .jpgs of the concepts on it and send them the link. Hope this helps.
liamuk7 @justcreative - Just as a image or using http://www.codedpreview.com
idesignstudios @justcreative - I give clients access to their own “client studio” - they can login and view mockups (jpg’s on a html pg) as they approve…I put revisions on the same page (new jpg’s). Once approved I add a link to view the functional site in progress.
marcoslhc @justcreative - I generally deliver some physical sketches (paper and colour pencils) to the second meeting, and digital ones to the 3rd
stevemoseley @justcreative - Depends on 2 things: project size, and pickiness of the client. If either - photoshop mockup. If neither, first cut of html.
adellecharles @justcreative I usually save for web and insert into and html doc / upload to server just so the client can see
craftisan @justcreative What I do depends on the client… sometimes live web previews or pdf/jpg mockups… mostly jpgs.
randaclay @justcreative JPG file, or sometimes PDF
EliteByDesign @justcreative Usually just a JPG via email or uploaded to my site. Nothing fancy, after all, it’s only a first draft!
pointlessramble @justcreative Stick it in a HTML file with any backgrounds needed/etc.
RyanDownie @justcreative To present mock-ups I put the image in a directory on server /name and then add a backgound image to tile full browser
Herbert via FaceBook: I usually upload the website with a free domain www.yourdomain.tk, it’s easy you redirect the path from your hosting to the free domain.
Steve via Facebook: We have a web.yourcompany.com setup and give the client the URL web.yourcompany.com/client.
Patrick McColley via Facebook: I usually post it on my server or if they let me, theirs.
Further Discussions
Below are some further articles on this topic of mock ups and presentation.
- Photoshop Mockups vs Client Expectations
- Improve Your Creative Process, Better Design, Quicker Approvals
- Why Give Clients More Than Just One Mock Up?
- Live By The Mockup, Die By The Mock Up
- Client Web Site Mockups & Comps: Do you Bother?
- Design Mock Ups Don’t Work
Those already linked to in this article:
So I ask you, how do you present your web design mockups and after seeing the methods suggested, what do you believe is the best way?
And if deserved, a digg would be appreciated. Thank you.
Subscribe
