Graphic Design Portfolio

Top 7 Most Cliché Stock Images Used in Web Design

Written by Jacob Cass on Tuesday, September 30, 2008 – 9:00 am

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 Six Part Series

This article is the fourth article of six in this series.

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?


83 Comments »
JCD Line Break

9 Of The Best Ways To Present A Website To A Client

Written by Jacob Cass on Monday, August 25, 2008 – 2:53 pm

Mock Up - Courtesy of renewleeds on Flickr

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 odd 1000+ 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

Mock Up - Courtesy of _Marcel_

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

Twitter Logo - Facebook Logo

Below are some of the original responses I got within 24 hours 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.

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.


60 Comments »
JCD Line Break

Don’t Read This If You Do Not Want More Email

Written by Jacob Cass on Sunday, August 10, 2008 – 9:00 pm

Emails

Over the past few weeks I have been trialling having contact forms on all the main pages of my site and boy has it increased the amount of emails I have received, not only from potential clients, but also from people just wanting to say thank you or a friendly hello, and let’s face it, who doesn’t like hearing compliments?

So I ask, why should we have only one contact page? There are so many more benefits from having more than one contact page;

  • Potential clients have an easier way to contact you.
  • You get more email. (Good or a bad thing, that is for you to decide.)
  • More clients mean more money.
  • Less clicks for the user to find your contact details.
  • People that may not have went the extra click will now more likely contact you.

What pages should you put contact forms on?

You should look at your site statistics to see what page/s are your most popular and you also must take into consideration what the page is for, for instance you may not want a form on your ‘Featured Articles’ Page as it is not appropriate.

Where to place each form will vary from blog to blog but personally I put them on my five main pages which are my About Page, my Hire Me Page, my Design Portfolio page, my Contact Page, and my Testimonials page.

You will also notice on my contact page I use a standard form however on my hire page I ask questions about budget, deadlines, etc that relate to my profession.

How do I get a contact form?

I personally use a Wordpress Plugin called Cforms which is great however there are many more out there! With Cforms you can customise a variety of forms very easily and then easily place them onto any page with a click of a button.

Track What Pages People Contact You From

Track Your Emails

With the Cforms plugin (and most others) each email you receive looks like the screenshot above. It will tell you exactly what page the form has been sent from along with other details such as the date and IP address of the sender. You will notice the email above has been sent from my testimonials page along with the answers to each question. This is very useful as you can see what pages people are sending the most emails from.

So… why have just one contact page?


15 Comments »
JCD Line Break

10 SEO Rules for Designers

Written by Jacob Cass on Monday, June 9, 2008 – 10:00 pm

SEO For Designers

Search Engine Optimisation (SEO) is a vital component of any website. As a web designer or blogger, it’s important you understand how SEO works. Here are ten easy rules that will immediately improve the SEO on all of your web sites.

This is a guest article written by Joshua Jeffrey’s who describes himself as a “busybody in the local and national design/web world” - you can read more about him on his blog.

Rule Zero: Do Not Cheat. Period.

If you walked into a room full of genius scientists with PHDs, do you think you could outsmart them all? No. Google has hundreds of rooms full of genius scientists with PHDs, and their job is to work 60 hours a week to make sure you can’t fool Google. You can’t outsmart them. Ever. Ignore any advice on trying to cheat the system and focus on making great web sites with great content, and your sites will show up fine in searches.

Rule One: Stick to Your Keywords

Pick a few keywords or phrases that describe your site. Use them, and words related to them, whenever it’s natural to do so. Repeating them uselessly is no good (rule Zero), use them in sentences, headlines, and links.

Rule Two: Content is King

Users don’t search for design, they search for content. If your site doesn’t have content people want, no one will look at it.

Every page on your site should follow the Inverted Pyramid. Each page should lead with a relevant H1 tag with one of your keywords, and the first paragraph of text should be a summary of the rest of the page.

Rule Three: Clean Code is Searchable Code

Build your sites in a text editor, and write clean, human-readable HTML. The HTML should follow the conceptual structure of the page, navigation first, followed by the H1 tag, then the first paragraph, etc. Try to use descriptive tags when possible. Use UL for lists, P for paragraphs, H tags for heads and subheads, and STRONG for bolded text. Don’t overuse Divs.

Your site can still be artistic and cool, that’s what CSS is for.

Rule Four: The Home Page is the Most Important Page

Your home page is the key to your site being found by search engines. It should summarize the rest of the site, and give a clear, compelling reason for a user to look at the other pages in the site.

Rule Five: Links Have Meaning

Links

Search engines pay a lot of attention to the links on your site, and the words used in those links. Never use “click here” or “see more” for a link. The link text should describe where the link will take the user, such as “more examples of CSS web design” or “learn how we can improve your SEO.”

The more relevant the links on a page, the more findable the page becomes. Don’t go overboard, and don’t link to anything irrelevant. If your page is focused on minimalist web design, a link to the Design MeltDown page on minimalism will boost your SEO. A link to a hilarious picture of a cat will not.

Rule Six: Title Tags for the Win

Every page in your site should have a title with the site name and a short description of the page. About 60 letters total. Include a keyword. Remember that the page title is what appears in search results, it should give users a clear reason to click on it.

Your navigation links should have title attributes that match the titles of your pages. This looks like <a title=”name of page” href=”link”>. It’s a small thing, but it will give you a significant SEO improvement.

Rule Seven: Alt Tags Matter

Every image on your site should have an alt tag. Especially images that are relevant to the page. If your page is focused on CSS tricks, labelling a screenshot “example of rounded CSS corners” will improve your page’s findability. Labelling it “screenshot” or “image” will do the opposite.

Rule Eight: Ignore Most Meta Tags

A long time ago meta tags were the secret to SEO. Those days are gone. The only meta tag that really matters now is the description tag. Search engines may use it to provide the text under the link to your page in their results. Make sure it describes the page in a way that explains why a user searching for your content would want to look at your page.

Rule Nine: Have a Site Map

Make sure you have a site map. This is an xml file that describes the structure of your page. Make one, and give it to Google.

Rule Ten: Design for Humans

Search engines are designed to find what humans want. That means the best way to make your site findable is to design it for humans. Your job as a designer is to solve a problem, not make art, prove a point, serve your ego or break a boundry. In this case, your problem is to provide your users with a site that is easy to use and full of what they’re looking for. If you can do that, the search engines will find you.

For further reading I recommend this SEO Guide for Designers.

Have you got any more tips for SEO tips for designers?


70 Comments »
JCD Line Break

Featured Articles

Written by Jacob Cass on Monday, January 7, 2008 – 9:31 pm

With the many articles found on this blog, it may be hard to find something you are looking for so this section helps you out by featuring my most popular articles sorted by category. You could also visit Just Creative Design’s full archives.

Logo Design

Graphic Design

Freelancing

My Design Process

Creativity

Typography

Design For Students

Poster Design

Photography

Resources & Inspiration

Wordpress & Blogging

Social Media

Web Design

Other

Also try using the search box on the top right of this website if there is something in particular you are looking for. Also don’t be afraid to contact me asking for what it is you are looking for and I’ll give it my best shot to help you out. Cheers :)


5 Comments »
JCD Line Break
« Older Entries