Just Creative Design

Recently Completed Work

I’ve been pretty busy of late so I thought I should show you what I have been up to. Here a small showcase of my most recent freelance design work along with a brief description of each. Read more »

Murray Raine Puppets Website Redesign

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.

9 SEO Tips You’ve Probably Forgot About

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.

How To Make Your Next Website Design Pop

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?

How to get clients to say yes to your designs

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

Do you need to rebrand?

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 | After

A 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?

Top 7 Most Cliché Stock Images Used in Web Design

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?