Hello fellow internet traveler. In years gone by, in the real world,  travellers used to use maps, compasses and even the stars in order to navigate from one place to the other. Today, in cyberspace, we use menu-bars.

If you are about to set up a new website, or if you currently own one, you’ll want people to easily be able to browse around the valuable content you have spent hours creating. Below the Attitude Design team, have put their heads together to give you our top seven tips for creating an easy to use navigation menu to help your users get from A to B. Enjoy!

1. Keep it consistent

One of the most important things is not to move your navigation menu bar around. Imagine you are a ships captain being guided to your location using the northern star. Then upon reaching that destination that star moves position in the sky making it impossible for you to easily find your way back. Take that offline example into the online world and you’ll see our point!

Keep a simple “universal” navigation consistently available to the user at all times. Usually the best navigations have very simple grand parent pages in them. These form the top level universal navigation. When a user goes into, or rolls over, these grand parent items then parent pages and child pages will be shown – but the top navigation will always be the same and appear in the same place.

2. Use text links not images

Icons are a very good accompaniment to any navigation system as they help to further explain to the user what each area of the site does. Note we said accompaniment – NOT icons on their own. Why do we say this? Because icons are representative symbols and what might represent one thing to one person might not mean the same thing to another person. Often icons do not work well on their own – they need accompanying text. So if you must use images make them sit alongside your menu links and ensure they are not the menu links themselves.

3. Keep your page menu titles short

Nobody wants to read a long navigational name. Ensure each navigation item only uses one or two words to describe what is within it otherwise users will not bother glancing through them all.

4. Ensure titles are easy to understand

There is nothing worse than standing at a cross roads not knowing quite what road you need to go down and looking at a sign post which does not label what is at the end of each road. You wouldn’t go down each road to find out what’s down there. Likewise with website navigation why would you expect a user to go to a poorly labelled link?

People don’t have time to find out what your amazingly branded “techscope”, “bytes” or “snazz” links do. So – keep it simple – the most common top tier navigational items are: Home, Products, Services, About and Contact. Each item is very descriptive and is one word. Easy Peasy.

5. Only have up to 8 items

When you present too many options to a user they find it hard to make a decision. This is called “Hicks law” (see this wikipedia article for more information). Therefore when it comes to site navigation it’s important to give the user few (but clear) options to get them to make a decision as to what information they want. This helps them filter down to what they want rather than pushing everything at them. This normally allows sites to run the navigation bar horizontally under the header which is far better – as this follows the natural way people read.

6. List items by order of importance

You might not get this one right first time around because without testing it, it is sometimes difficult to know which pages of the site will be most important to users before they do what we want them to do. For example, if we want them to purchase a service, they might want to see examples of that service before they will buy. Therefore they will need to see “case studies” as a priority. But what if our users need to understand what each service is and does before they can understand the case studies? If they do, then a “services” section might be more of a priority to hook people in before we show them the case studies.

By asking yourself the following questions you can help to sort through your navigational items and order them in a user friendly way. If you mark each item out of 10 (10 being “ABSOLUTELY” and 1 being “NOPE”) then the highest scoring items should be placed at the front.

• Does the user need to see this item in order to fulfil our site’s objectives?
• Will this page help the user to make a decision?
• Does this section of the site give our website credibility?
• Does this page educate the user to specifically understand what is on offer?

7. Always place ‘Home’ at the front and ‘Contact’ at the end

For most websites it is very important to have a prominent “contact” item in the menu. For most businesses getting interested users to contact them is the number 1 objective of their website. Only when a brand is well known and a site is getting too many contacts to manage would the “contact us” page be dropped  in favour of filtering users through to a “support / customer services” area of the website. It is usual practice to put the contact us page at the end of a navigational list and so if a user expects it to be sat there at the end – why remove it?

A link to the home page should also be prominent  because this marks the beginning of a normal user journey and helps the user to feel “safe” – that they can always get back to the home page of the site. Home page links are usually placed at the start of menu lists or alternatively the site’s logo will normally link to the home page.

Because both of these things are done by the majority of sites, users have become used to navigating in this way. If people are used to something then it is easy for them and on the internet making things easy for a user is always beneficial!

Conclusion

So – we hope the above tips might help you to make your website a place where sightseers find it easy to get from A to B. Feel free to leave a comment below!

If you need a hand with your next website design why not drop us a line.

Related posts:

1. A Bite Of The Apple / Apples New Website
2. 10 Tips for Creating Inbound Links for your Web Design Site
3. The New Shop Window / Home Pages That Sell

Wood is a beautiful thing. Organic, warm and natural. Using it in a design to reflect these qualities can be done to great effect if done well. However in the interests of climate change we do not recommend cutting down real trees. Ohhh no. In this tutorial we give you the basics so that you can create your very own ‘real wood effect’ virtualy, using Adobe Photoshop – completely harmless to real trees! So – grab a coffee, pull up a chair and lets get cracking…

Step 1 / Prep for work

Ok first of all we are going to open a New Document. Open Photoshop and hit ‘Cmd N’ and add in your dimensions – for the sake of this tutorial we are going to use 2560px x 1140px in the RGB colour mode. Hit Ok!

Now we have a nice canvas to work from! The next stage is to prepare the canvas for our planks of wood. To do this we are going to set some guides down which will be really handy later on. To do this we are going to first use the ‘Markquee’ tool to create a template. Select the Markquee tool from the tool pallet (hot key ‘M’). In the top bar select ‘fixed size’ and a width and height of 190px (this is one sixth of the height of our document which means we will end up with 6 planks).

NOTE: be sure you add “px” at the end of the digits instead of the default “mm” else your measurements will be off!

Now we should have a sleeted area of 190px by 190px. All we do now is turn on the rulers (hot key ‘cmd R’), ensure our selected area is placed at the top of the document and then click and drag a ruler our from the top ruler bar. Now move your selected area down so the top sits on the ruler and drag a new ruler down to the bottom of the selection.

Do this until you have reached the bottom of the document. We should now have a document with evenly spaced rules which looks like this:

STEP 2 / Add some background

We are now going to get a base colour for the wooden planks. First double click on the primary colour on the tools palette. You should then see a screen allowing you to select a colour. We have chosen a pale warm brown (hex ref: #bb8d47).

Hit ok. Ensure that “background” is selected as a layer and then hit shift and backspace. This will allow you to see a window which you can now fill the whole of your canvas in with this colour. Incidentally this is a great hotkey to tuck away in your brain as it works with any selection you wish to fill and can save you loads of time.

Your canvas should now be a nice warm brown colour. Now we want to add some highlights to give the canvas a natural look. Create a new layer called “highlights” (you can do this by selecting the “new layer” icon  in the bottom right hand corner for the layers window). Select a new colour (we’ve chosen #eac690). Hit hot key “B” for brushes and add a few highlights to the canvas. If necessary change the brush size and hardness by right clicking (if you are on a mac like us then hold down control and click for the same thing!) Also change the colour to white and add a few random white areas. Your canvus should now look like this:

We now go to the top menu and select ‘Filter > Blur > Motion Blur’ and blue this layour in the direction we want the grain to go in. We’ve set our setting to angle: 0 Distance 800px.

You should now have a background which looks something like this:

This is basically now the background for our wood effect.

STEP 3 /  Add the grain

Now comes the fun part. We are going to add some grain. To do this create another new layer (call it ‘grain’). Now we are going to user our trusty Marquee tool again. Select it and draw a thin box across the whole canvus like this:

Now select a new colour – this is going to be a darker brown, we’ve selected #79430d. Now press the hot keys shift and backspace to flood fill that area with the dark brown. Then go and draw another think line of a different size and fill that brown. Keep doing this randomly so that you get a variety of horizontal lines.

After you’ve done about 8 you can then use the selection tool (hot key V) to select these and if you click and hold alt the lines will be duplicated in a new layer. You can then quickly pad out the canvus Be sure to merge all the “grain” layers into one. Also if your lines are too thick you can use the Marquee tool to set and area and then hit the hotkeys ‘cmd + T’. This will enable you to “transform” your selections and easily compress the lines.

At the end of this process you should end up with a canvus which looks like this:

STEP 4 / Add some swirl

We are now going to add an organic feel to the grain lines by “liquifying” the grain layer. Ensure that your grain layer is selected and then go to the top menu bar and select ‘Filter > Liquify’ (or hot key SHIFT +CMD + X). This will bring up the ‘liquify’ window.

Use the liquify tools to add some interesting shapes into your grain. Use a large brush to create slight adjustments and then add detail with a smaller brush. Don;t go mad at this stage but try to image the grain of wood and keep things as natural as possible. This is how our liquify looked:

It gave us the following:

STEP 5 / Plank up

Now we are going to add a plank effect suing the guides we set up in step 1. Using the MArquee tool (Hot key M) select the top area between the rulers. Then by holding down shift select a new area leaving the gap between the following ruler space. Do this again until you have 3 areas selected like this:

We are now going to use the Transform function again. Hit hot keys Cmd and T. If you hover over the corners of the selection you’ll see that your curser changes into a rotate icon. Click and rotate these areas like this:

And you should end up with planks like this:

Now we are going to add some ‘noise’ to this layer to give it an authentic feel. Simply go to the top menu and ‘Filter > Noise’. We added 5% of Gaussian. Hit ok.

Now go to your layers palette and make the grain layer have the “darken” effect and change the opacity to 50%. This allows the grain to more naturally blend into the background we created earlier.

This should give you the following:

STEP 6 / Final bits

To finish things off we have added two further layers. One which had a dark brown around the edges of the canvus which gives a lighting effect. For this we used a normal brush with the colour #5d330a. This gave us the following:

We then added another layer called ‘warmth’ which we draw a few areas of colour in the center of the canvas using a bright yellow colour: #eac040. We set this layer to have the “colour burn” effect. This adds some warmth to the piece and gave us the following effect:

So – that should give you the basis of how to create a real wood effect using Photoshop! We hope you have enjoyed this tutorial – be sure to leave a comment and let us know how you get on. If you have any examples of where you have used this tutorial feel free to post a link! Happy crafting!

Related posts:

1. The 3 C’s Tutorial – Control, Create & Cutout with the Bezier Curve
2. How To Create The Glass Effect
3. 7 Things You Didn’t Know About Adobe Photoshop

HTTP 404 Not Found

That means the page you are trying to see is not there. Maybe the page has been deleted or moved. The standard page looks something like this:

“Yuk yuk” we hear you cry. That’s not very useful or appealing to a user. They will not stick around to find the correct page. If that user has come via a link form another website then it’s highly likely they will just leave. Whats the answer? How can we maximise the chances of keeping visitors who come across a 404 on our site? How could we convert them into a sale even?! The solution is to design a bespoke 404 page which fits in with the style and branding of your website. A page which contains useful information, maybe a search box and a few useful links.

You might also wish to add something a little comical to the title of the page to keep your visitor interested. On our 404 page we use the classic line “The page you were looking for has grown legs and run away”!

Some examples of well designed 404 pages

Here are some examples of what other websites are doing and hope you might find some inspiration for your own. Enjoy – and don’t forget to leave a comment…

BBC

The Beeb have a very simple but mildly useful 404 page. It explains whats happened and directs the user to the site index.

Value My Stuff

We love the copy on Value My Stuff’s 404 page. “Oh dear this is awkward” is witty and keeps the user interested in the site. the user is directed to three key areas of the site. Engaging and helpful.

Vimeo

This one is simple and offers up 8 key areas of the site to the user. There is also advertising which is not advisable as you normally want to retain visitors to your site not send them elsewhere. However if you are a site which earns it’s revenue on advertising space like Vimeo it makes sense to sell it on your 404 page as this will be a popular page as time goes on.

Twitter

Straight to the point! “Sorry this page doesn’t exist!” The user is then given a search box – this is a very helpful thing to offer as it encourages the user to try again to seek the page of their desire.

02

Simple and professional. This 404 page lets the user know what’s happened and even gives themes one of the reasons as to why they might be seeing a 404 page. They then give the user some useful links.

Last FM

Slightly witty with “woops, sorry this pages does not exist”. Again they give the user some useful links to keep them on their website.

Mail Chimp

Well what do you expect from the friendly and fun brand image that the guys at Mail Chimp have got going on? A huge monkey asking if you are lost! Just what you need if you hit a 404 page! It really adds to their brand identity and other links are then offered to help the user become found.

We also noticed if you refresh the 404 page a different message comes up – keeps the user continually interested even if they hit a couple of broken links on the trot. He’s a clever monkey that mailchimp.

istockphoto

A comical illustration with the words “Hang in there” is used by istockphoto as their 404 page.They offer a useful link to go back to the last page the user was looking at as well as a link to their home page.

404 Page resources

Ok so now you’ve seen how it’s done do it for yourself! Here are some resources which will help you to create your own custom 404 pages:

• A List Apart: the Perfect 404
• How to create a custom 404 page
• Web Weaver: How To Create a Custom 404 Page

Conclusion

So, by collating all the info from the sites above these are the options you might want to consider adding to your site:

• A witty comment and illustration
• A search bar
• Useful Links
• A link to the previous page the user was looking at
• A link to your homepage

We hope this post has been interesting and inspirational to you. Please feel free to leave a comment – perhaps you have got a brilliant 404 page which you would like to share?! Maybe send us your own 404 page after you have redesigned it after reading this blog post. Comment away!

Related posts:

1. The New Shop Window / Home Pages That Sell
2. SEO Tool – Who links to me?
3. Simplifying The Site Map

Ladies and Gents – a geeky post for all those who like to dabble in a bit of code now and again! In this post we give 5 cutting edge CSS3/HTML5  tips that really help to speed up your websites but still enable them to look great!

When you create a site one of the major things which help to make it look modern and give a good user experience is Javascript or jQuery. These languages allow design elements to do things like glow, fade and move. While these languages do make your site look amazing, it does mean that there is one hefty file for each viewer to download. Google now looks at site loading speeds so we should try to find alternative ways in which to make our sites load quicker – but still look as slick.

Below are 5 CSS tricks that cut down loading time, as there is no need for images or javascript libraries-just CSS. These techniques use HTML5/CSS3 which is currently supported only by the most recent releases of most browsers (IE 8, Firefox 3.6, Safari 5 and Chrome 5) the latest versions of these will used by the majority of internet users within a year. Earlier browsers which don’t support these techniques will simply not display them and this code degrades gracefully not effecting the user experience. So – lets be forward thinking folks – this is a taste of the future…

Tip 1 / Text Shadow

Some of you may have noticed that the links on Attitude have a faint shadow on them, yet no javascript is needed for this, just a little bit of CSS:

a { text-shadow: 1px 1px 1px #FFF; }

What the above code does is apply some text shadow to the text, here is how it works:

Tip 2 / Box Shadows

If you attempted to add a text shadow effect to a box in the way in which we added a shadow to the text in Tip 1, you will find it does not work. But thanks to ‘box-shadow’ it is possible – meaning no more PNG image shadows, just pure and simple CSS! This is how it works:

.shadow {
	-webkit-box-shadow: 2px 2px 3px rgb(255,0,0);
	-moz-box-shadow: 2px 2px 3px rgb(255,0,0);
	box-shadow: 2px 2px 3px rgb(255,0,0);
}

What the above code would do, is add a shadow on an element with the class shadow. This shadow would be red and 2px by 2px:

Tip 3 / Transitions

It is possible using CSS to create transitions of effects, for example when you hover over a link it changes from blue to red. Wouldn’t it be awesome if it faded into red? Well with CSS, that is possible!

a { transition: all 0.15s linear; -webkit-transition: all 0.15s linear; }
a:hover { color: rgb(255,0,0); }

What the above code would do is make the text change to red over a period of 0.15 of a second:

That last bit, the linear, could confuse you. Have a look at the W3 specifications page about it. You’ll see how you can choose how the element loads in – for example one option is ease-in which means it would start of slow, then get faster until it gets to the end. I have chosen linear meaning it will not change speed throughout, just take the specified period of time.
This would also work for things rotating (see below).

Tip 4 / Rotating

You all know the scenario, you build a website and then you want the images to be slightly be rotated. You also want the images to be in a CMS and give an administrator the ability to be able to change the image. This can be easy for the hardened coder with some ImageMagick/GD skills, but what if you could do it in CSS? Well you can:

.rotated {
	transform: rotate(9deg);
	-moz-transform: rotate(9deg);
	-webkit-transform: rotate(9deg);
}

What the above code would do, is on any element with the class rotated would be rotated clockwise by 9 degrees:

It is a pretty simple syntax, but this, coupled with the transition effect and shadow could be an amazing website, for example see this Demo by the tutorial website 24 Ways. It blows us away!

Tip 5 / Word-Wrap

So you design a perfectly working website, then you find a reallylongwordinyourcontentwhichbreaksyourlayout. Wouldn’t it be brilliant if you could somehow separate the words, without some complicated PHP scripting, allowing for font-sizes and types etc. Well thanks to CSS3, it is now possible:

.smallbox { word-wrap: break-word; }

In CSS3 there is a new property, word-wrap which is normally set to normal but can be set to break-word which would make a box separate long words:

We hope this list of 5 CSS tricks will help you develop your websites more effectively. Leave a comment or share your own tips below!

Related posts:

1. A guide to writing text for your website
2. Handy Tool / Yahoo CSS Reset
3. Hosting a PHP test website locally

Why should I worry about what text is on my website?

Writing text for websites is often an area of web design that is overlooked at the start of a website project. It is though, perhaps as important, if not more important, than the website design. If, for example, you have a brilliantly designed website but it contained little textual content that was not relevant to a visitor – the chances are that that visitor will not stick around to simply admire the design. “Content is king” is the saying – and so it is. Add great, well written text, to a well designed website and you are destined for success.

If the budget is available we would always recommend going to a professional copywriter – this is not always possible and so many of our clients opt to write the content themselves. This makes alot of sense from a budgeting point of view and also has other benefits because you will always know your target audience and business better than a third party ever will.

So – what is the best way to write content for your website? How do you start and what sort of things should you be thinking about as you go through the process. Also what format should this content be supplied to your designers in? These and more questions are answered in this article…

Where to start

From a branding perspective it might be best to start from the point of view of how you wish to be perceived by your target audience. If your company was a person, how would they speak? Would they be to the point and ‘businesslike’ – or maybe more friendly and jargon free? Setting the right “tone of voice” and writing style for your website should fit in with your overall brand message and placement. Maybe have a look at other companies’ websites which are trying to attract similar markets to see how they are presenting themselves in their web text.

If you are working with a design company such as Attitude Design, you will normally have a “site map” developed for you. This should be a diagram showing all the pages on your website and how they interact with each other.

Before getting into the nitty gritty it might be best to sit down with the site map and to decide what the purpose and function of each page is. Most pages will fall into the following categories:

• Information giving
• Selling
• Signing up / Applying / Enquiring

Each of these pages have different purposes and require different types of writing to fulfill those purposes. Each of these pages may also have different messages which your text will need to support. Have a think about each of your pages in the light of their purpose and maybe mark on your site map your general ideas so that when you get started with the text for that page you have an overall idea of where you are headed.

Humans vs Robots

Most of us are used to writing for humans in emails, letters, text messages etc. Websites, however, are not only visited by humans. There are search engines which have little programs (tenderly called “spiders” or “robots”) which will vist your site and collect the data they find there. They will store this data in the search engine’s database so that when someone searches for keywords, your site’s data will be considered in their algorithms. Depending on how your site does in the algorithm you will appear higher or lower in the organic rankings.

Appearing high in search engines is a powerful marketing tool. You can reach audiences of thousands who are all looking for your product or service so it’s worth writing the content for your website in a way search engine robots can read it and use it.

Writing for Humans

Writing content on websites is very different from writing to people you know. For example if you write an email to a friend or colleague, it is likely they will read every word you put down. This is not the case with websites. People “skim read”. If they are not engaged within a few seconds they will move away from your site to find a site which is relevant to what they are searching for.

Jacob Neilsen, a usability expert has a few articles based upon some in depth research as to how users read the content of web pages. It’s worth going through them to get a better understanding of exactly how website users read text:

• http://www.useit.com/alertbox/percent-text-read.html
• http://www.useit.com/alertbox/9710a.html
• http://www.useit.com/eyetracking/

So how do we write content on our websites which is most likely to get a result? Here are a few tips:

• Use subheadings. Because users will skim read, it’s a good idea to use subheadings so that they can find relevant content quickly.
• Be concise. Use bullet points, clear and simple language which is not long winded. Do not use slang, or technical jargon unless necessary. Try to include one concept per sentence.
• Front-load content. This means that you put the conclusion for what you are trying to say first. This helps users get a jist of what is on the page and hopefully it will capture their imagination. There is nothing worse then reading a few paragraphs and realizing the page you are on is completely irrelevant.
• Make sure it’s interesting. Ensure the text is relevant and doesn’t go “around the houses” to get to the point. Write in an interesting way which will engage your audience.

Writing for Robots

Web designers with any wits will ensure that they code your site in a way which is search engine friendly. There are things which will be “invisible” to humans which will need to be in place to be successful – for example the content of the various tags in your page’s source code (title tags, keyword tags, description tags etc.) These should be in place as default and ideally you should also be able to edit the content of these tags and the content that appears on the page website yourself.

If you have a knowledge of HTML code you will be able to do this by hand. Most people do not have the time to worry about learning this complex language but there are other ways to edit this type of content without knowledge of HMTL. You will need a system to be built to allow you to do this called a “Content Management System” (CMS). It is a good idea to have such a system running your website because monitoring how your website’s pages are performing in search engines is an on going process which may mean continual updating to the site over time.

When a robot visits your website, it will look at the visible text and links on your page. From the words it finds there, the search engine will decide what your page is about and index its findings in its database. When a user searches that database the search engine will then feed your page into relevant searches. But how does it decide what your page is about?

One way is by looking at key phrases. For example if you have a particular phrase (like “hard wearing mouse mats”) repeated many times on the page then you are more likely to appear on a search engine for that phrase.

There are many other factors and each search engine differs in its algorithms but for the sake of this article we will give you a few tips on creating content which will help you to get higher in the search rankings. We would of course recommend you speak to professional SEO experts who can research what phrases or words would be best to include on each page of your website, as well as other strategies and techniques you could employ to gain higher rankings. A few general tips:

• Find a phrase. Consider what search engine users might type in as a search phrase/phrases to find the page.
• Use the phrase in your content. Ensure this phrase is used in the headings and content of the page. It might be an idea to repeat the phrase several times throughout the copy as well as in the main heading and sub-headings of the page.
• Use your meta tags. Add the phrases to your page title, description and keyword meta tags. You will need to do this through your CMS system or by coding the page with that information yourself.
• Use links. Add links in the body of your site to other pages within your website. This will encourage the search engine robot to crawl through these other pages of the site.

Conclusion

So – we hope this guide has been helpful. It’s all about balance and being aware of the different types of visitors to your site. Don’t go overboard with writing for humans and neglect the search engine robots – likewise don’t just write for robots and forget the humans! Get the balance right and you’ll have a great website!

Related posts:

1. SEO Tool – Who links to me?
2. 10 Tips for Creating Inbound Links for your Web Design Site
3. A Guide to Practical Typography

This article deals with the problem of message overload on the web and gives some reviews and advice as to the best ways to display your key message on your home page.

Multiple messages

The main complication that most businesses find themselves in is that they have multiple messages they wish to put across to their target audience. This normally leads to all of these messages being thrust into their home page website design – the outcome of which is that a website user has so many options and messages being pushed at them that they do not take in any and so press the “back” button of death and leave your website. If the researchers are right you have less than one second to convey your message to your website visitors. It is clear therefore that having lots of messages, all competing for space is not practical and can be detrimental.

The simple approach

The best thing to do is to try and formulate a list of your key messages. List them in order of priority – the priority in which you wish to present them to a website user. Once you have a list of priorities you can then apply them to your homepage design. You will notice in the website examples below that one singular message is being pushed above all others. It s given the priority, more space, and an image to communicate itself to the user. This message area will attract the most attention, but if it is not relevant to the user they will then look elsewhere on the page which is where the other messages come in. What is good about this technique is that the information is split up into bite sized chunks for the user to digest. The user is not bombarded by messages but will be able to take in the most important one. “Less is more” is a saying we could mention here!

Examples of clear messaging

Below are some examples of some successful websites who priorities their messaging and emphasize one simple message.

Apple

Boots

Next

Thorntons

Harrods

Flickr

If it works for these companies why not adopt this technique on your website.

The image

It is useful to note in most of the examples we have looked at so far, that images are also used to help assist the user in connecting with the key message being shown. For example if it’s a product which is given the priority – then a picture of the product is used. They say that “a pictures tells 1000 words” and so images therefore are very useful in engaging your audience and helping them to understand your message. Try and use relevant but engaging images which will attract attention.

The call to action

The call to action means the accompanying text which tells the user what to do about the message – it tells them what action to take. For example the message might be “save money today” and the call to action might be “click here to find out how” or “call us to find out how”. Your call to action also needs to be prominent and clear. For more advice on calls to action read our article Calls To Action – Click Here! »

Ability to update?

So, lets say you have designed your home page – added your message and launched your website. The message worked well for the first month or so but for some reason it is not attracting the interest it used to (you know this because you have website statistics like Google Analytics which tells you where users are clicking on a page). What could be the problem. Well in our experience it is normally because the message is stagnant. Users who revisit your website have already seen the message and after following the call to action, know it is not relevant for them any more. It is therefore important for this message to be updated and remain “up to date”.

Your website is your shop window – and like in retail it needs to be constantly updated to ensure visitors continue to be interested. More on this in this article: The New Shop Window / Home Pages That Sell »

If you already have a CMS (Content Management System) then you or your staff may be able to update your key message yourselves. If not then you may need to get a system in place (for a bit of a shameless plug – contact us »). Another way around it is by actually contacting your website designers and getting them to update it – this may cost you an hourly rate but it may reap great rewards. If you are busy, put a member of staff in charge of updating the site quarterly – it could keep your sales steady.

Conclusion

So – the message is – keep the message simple. Simplify and break down the information that you wish to give your audience and you will find that your homepage will be far more effective. Comments most welcome…

Related posts:

1. Calls To Action – Click Here!
2. Four Oh Four – The art of designing 404 pages
3. The New Shop Window / Home Pages That Sell

One way of seeing whether packaging design is effective or not is to create a prototype. This would normally consist of printing the design out and mocking it up – this is costly and expensive to do, and normally only one prototype would be produced. What if prototypes could be mocked up in a fraction of time, be less expensive and messy, and be more environmentally friendly? What if multiple prototypes could be produced to show a client what their products would eventually look like in mass on a shelf?

Welcome to this tutorial which will show you how to use Adobe Illustrators 3D feature to mock up prototypes. For this example we will be mocking up a label for a pill container but the techniques used can work for many things including box packaging.

Step 1 / The Label

Firstly you need to produce your label design. Here is ours below:

To prepare this artwork to be able to be wrapped around a 3D object we need to make it a Symbol. First select the label and outline all the text (hot keys command + shift + O). Then select the artwork using the selection tool (hot key V). Get the Symbols pallet up (Window > Symbols). Drag the artwork into the pallet. A dialog box will appear allowing you to save the artwork as a symbol.

The artwork is now ready to be mapped onto a 3D object.

Step 2 / Preparing your 3D object

Now we need to create the packaging object upon which the label will sit. Use the “Rounded rectangle tool” from the tools pallet (note: by default the rectangle tool will be highlighted – click and hold on this and a menu will expand which will allow you to select the rounded rectangle tool). If you click (don’t click and drag) on your art-board with this tool selected you will find a window will appear giving you the option to define the radius of the rounded corners. You can also select the dimensions you wish to use. Alternatively click and drag on the art-board to create your shapes.

Using this tool create your pill container by drawing the relevant shapes. One you have them use the tools in the “Align” pallet (hotkeys shift + F7) to center, or ‘horizontally align’ them.

We are now going to group these separate shapes and make them one single shape. You do this by using the tools in the “Pathfinder” palette (hotkeys Shift + Command + F9). Select the shapes using the selection tool (hot key V) and then in the “Pathfinder Palette” select the first icon on the left “add to shape area” then click “expand”.

Now we have our basic shape but we need to get this ready for being made “3D”. To do this we need half of this shape. To create this draw a rectangle using the rectangle tool which can be found in the main tool pallet (hot key M). Click and drag on your artboard to produce a shape and position it over half of the pill container shape we have just created. Then select both shapes using the selection tool (hot key V), go back to the “Pathfinder Palette” and select the 2nd option on the left (Subtract from shape area).

We now have a shape, ready to be made “3D”. But before we go onto that step there is one last task to do – we now need to divide our shape to allow us to colour the lid, the label and the main body of the pill box. To do this use the pen tool (hot key P) and draw horizontal lines across the pill container where the label and lid will sit. To use the pen tool click to the left of your shape, on the artboard where you wish to make your first segment – this will create your first “node” – then hold shift and click on the right hand side, this will create your second node. Now hold command and click onto the artboard to deselect the line you have just drawn and repeat the process. By holding down shift you will keep the line exactly at 90 degrees. See the example below:

Now select the lines and the shape using using the selection tool (hot key V) and hit the “divide” option on the “Pathfinder Pallet”. This will divide the shape into sections.

Use the “Direct selection tool” (hot key A) and click and drag over the inner vertical lines. Press the delete or backspace key on your keyboard. You can then go in an colour the different segments as you desire (it is also possible to make them partly transparent if you want – so as to create the illusion of glass). This tidies up the shape and makes it ready to be taken into the third dimension!

3. Bringing it all together into your 3D prototype

Select your shapes using the selection tool (hot key V) and group them (hot keys Command + G). Now go to “Effect > 3D > Revolve”. This will open a window giving you options to make your object 3d. If you press “Preview” you will be able to see what your object looks like in 3D. (If the revolve seems to be inside out ensure that that you select “Right edge”).

When you have obtained the angle of the shape you desire click on the “Map Art” button. This will bring up another window. You will need to find the relevant surface you want your label artwork to be mapped onto. Once you find it select the label symbol from the drop down and position into place (ensure you select the “Shade Artwork” option for a realistic effect). Press ok., then make any rotation amends as may be required and then press ok again.

And there you have it – your own prototype. If you can master this technique you will be able to do it in around 15 minuets – something which might have taken an hour if you were to have printed it, cropped it and stuck onto a real pill container. You can also duplicate the shape and develop examples of how multiple pieces would look together! Enjoy!

Related posts:

1. 7 Things You Didn’t Know Adobe Illustrator Could Do
2. 7 More Things You Didn’t Know Adobe Illustrator Could Do
3. A Time To Shine / Illustrator Tutorial

After the success of the article we wrote back in 2007 entitled “7 Things You Didn’t Know Adobe Illustrator Could Do” we have now written the sequel – enjoy!

1. Polar Grid

In your tool pallet, click and hold the “line segment tool” and then scroll down and select the “Polar Grid Tool”. This is a very handy tool for creating a variety of shapes and getting to grips with it can save you a lot of time in the long run – so have a play!

Click and drag on your artboard and you’ll see a circular shape appear with concentric and radial lines. If you hold down shift whilst dragging you’ll notice the circle will grow in perfect proportions. If you hold down alt , you’ll also see that the circle will grow from the centre of where you initially clicked.

To get extra options simply click once on the artboard –  a window will open allowing you to change the size, the number of concentric dividers and radial dividers. You can also skew the dividers which can achieve some very interesting shapes!

2. Flare Tool

To add that extra sparkle to any illustration the flare tool is invaluable! From the tool pallet, click and hold the “Rectangle Tool” and then scroll down and select the “Flare Tool”. Click and drag on your artboard and you’ll see the complex flare shape appear.

To add an angle to the lens flare, while the flare is selected and ensuring that you still have the flare tool on, hold down alt and click and drag the curser – you can then manually control the flare.

Additional options can be found by clicking once whilst having the Flare Tool selected.

3. Roughen

Have you ever needed to create a shape which doesn’t have smooth edges? To draw one with the pen tool takes alot of time and patience which us designers don’t have alot of!

First of all draw a rectangle (Hot key M). While it is selected go up to the top menu, select Filter > Distort > Roughen. A window will open which will allow you to select how much “roughness” you require on your shape – be sure to select “preview” so you can see the effects of your selections.

4. Shear Tool

It may be a simple tool on its own but you can use this tool to create stunning effects. Let’s start by drawing a star – select the star tool by clicking and holding the rectangle tool on the Tools menu. Draw your star holding down shift to ensure it is drawn as an equilateral shape.

Now on the Tools pallet – click and hold the over the “Scale Tool”, this will show a drop down – select the “Shear Tool”.

With the star shape selected click and drag to “shear” it. Only do it subtly as we are now going to use another technique to create a complicated set of shapes. Illustrator will remember the shear equation we have used – if you now copy the star (Hot Keys Command + C), paste it back in place (Hot Keys Command + F) and then  duplicate the shear effect (Command + D) you will get the same shear effect on the newly pasted star. If you do this a few times a very complex set of shapes appear.

To get more options from the Shear tool you can also press return whilst it is selected on the Tool Pallet.

When you have multiple shapes crossing over one another, the ability to play with transparency effects can have some rewarding results. Select the shapes you wish to change and then open the Transparency Pallet (Hot Keys Shift + Option + F10). From here you can obviously change the standard level of the opacity of an object – you can also select different blending options. Have a play to discover different effects. It’s worth noting that different colours respond differently to some of these effects.

5. The Gradient Tool

Create a circle (Hot Key O) holding down shift to make it proportional. Whilst the circle is selected open the Gradient Pallet (Hot Keys Command + F9). Drag into the gradient pallet two colours of your choice from your swatches pallet. The two colours will be blended together within the circle shape.

For flexibility you can also select the Gradient Tool from the Tool Pallet. Once selected click and drag across the circle shape – you will see that the gradient will follow the line drawn by the gradient tool – very handy for getting the gradient you need. Alternatively you can enter a gradients angle into the Gradient Pallet manually.

You can also select between a linear gradient (a straight blend from one side to another) to a radial gradient (a gradient which starts from a point and grows like a radio signal).

You can also add other colours to the gradient as well as defining the middle of the gradient with a percentage.

When using these techniques with a few shapes, stunning effects can be achieved!

6. Expanding Gradients

Another very cool thing you can do with illustrator is expand your gradients so that each colour within the gradient becomes a shape. You can use this technique to create some amazing graphics!

Draw a circle (Hot Key O) and apply a radial gradient to it. Then, simply go to the top menu “Object > Expand” – select the “fill” option (or experiment with the others as they are well worth getting to grips with) and hit ok.

Each area of the gradient will now appear as a separate shape – masked within the original circle. To take off the mask, select the shape and hold down “Command + Option + 7″ – this will expand the mask and its contents and show them as a group – ungroup them (Hot Key Command + Shift + G)  and you can then delete the mask.

We now have lots of circles getting smaller and smaller – each containing a gradient – to be able to define each “ring” as a shape select them all, then pull up the Pathfinder Pallet (Hot Keys Shift + Command + F9) and select the “Divide” option. Ungroup the shapes again. This will split the shape up allowing you to then go in and delete and change each “ring” as desired.

7. Live Trace

Ever needed an image cut out in a hurry or wanted to produce a photograph as a vector image? Then check out this nifty tool!

First of all go to the top menu “File > Place” and select an image file to place into your illustrator file. With the image selected go to “Object > Live Trace > Tracing Options”.

This will bring up a window allowing you to play with the tracing settings. To see the effect your changes are having on the image select “preview”. Note: this can take up a lot of processor speed so be sure to save any files you have opened before attempting this! Once you have the look you are after click “Trace”.

Your image will have the appearance of being traced but we are not quite through yet! Now go to the top menu “Object > Expand” – this will outline the image as vector shapes.

Un-group the shapes (Hot Keys shift + Command + G) – You can now go in and edit and change the colours of the image or delete areas accordingly…

Related posts:

1. 3D prototype mock up in Adobe Illustrator
2. 7 Things You Didn’t Know Adobe Illustrator Could Do
3. A Time To Shine / Illustrator Tutorial

• Time Machine Part 2 / WW2 Graphic Design
• What Your Logo Doesn’t Say About Your Business!
• Calls To Action – Click Here!
• The New Shop Window / Home Pages That Sell
• The No. 1 Rule / Brand Consistency
• Make the most of your business card
• Well designed e-commerce websites/
• A time to shine – illustrator tutorial
• How to create a graphic design portfolio
• Time Machine / Medieval Manuscript Design
• International Standard Paper Size Guide

Related posts:

1. International Standard Paper Size Guide
2. Time Machine / Medieval Manuscript Design
3. Worn Look Tutorial

In the Attitude Design studio we really do value the idea of using “grids” – a grid subdivides a page vertically and horizontally creating margins, columns, and blocks of space between images and paragraphs. We use them all the time – not just in printed material but also in our website designs and the principles of which all started hundreds of years before a computer was even a twinkle in the computer maker’s eye.

In studying the art of grids for aesthetic and functional usage, one can not go far wrong in taking a look at the masters of the profession, the monks and scribes which pioneered the way in their medieval manuscripts.

So this “time machine” article takes us back to those ancient times. We hope you are as inspired as we are – you never know, you may be taking the grid from one of these manuscripts and applying it to your next corporate brochure!

In those days, from a design point of view, “the pen” really was “mightier than the sword”!

Enjoy…

Related posts:

1. Time Machine / WW2 Graphic Design
2. Time Machine / Victorian Graphic Design
3. Time Machine / Website Designs from the 90s

Topshop

Princess Fashion House

Next

Nerve Music Store

My Wardrobe

Mozilla Store

Klassiker in Acryl

John Lewis

Go Incase

Expresso Rub

ETSY

Elegance

Carhartt

Apple Store

Conclusion

So there we are – well designed websites offering a unique shopping experience! If there are any we have missed off – pop them in a comment below!

Related posts:

1. Hicks Clicks – The Secret of top E-Commerce websites
2. 21 Inspirational CSS Showcase Websites
3. Time Machine / Record Cover Designs

We haven’t done any tutorials for a while – to be honest, we’ve just been soooo busy with work that we haven’t had a chance. However we do like to give a bit back to the community from time to time and so we hope this tutorial, although a long time coming, may help our fellow designers both professional and amateur. We are going to look at a popular trend of making design elements “shiny” – and in particular, the ‘Opacity Mask’ options in Adobe Illustrator.

1. Shape up / Define Your Area

First of all we need to get some shapes. We will be working with 2 for this tutorial. The first shape is going to be an oval so we will need to select the Ellipse tool from the tools menu (hot key “L”). Click and drag on your art-board until you get the oval you desire.

Tip: If you hold down shift whilst dragging you will get a perfectly proportioned circle, hold down alt and you get the circle growing from the centre of where you initial clicked.

2. Give it some depth / gradients and drop shadows

Lets give it some colour in a gradient. Hit “V” (the hotkey for the selection tool) and select the oval. We will need to make sure that the correct windows are available. Hit F6 for the colour pallet and option F9 for the gradient toolbox. Now a colour from the colour pallet and simply drag it onto the gradient window on-top of an existing colour. For the purposes of achieving a shiny effect in this tutorial you will need these colours to be subtle in their tones.

Now we are going to put our gradient at an angle. We could do this manually via the gradient tool box, but being visual people we normally like to select the gradient tool (hot key “G”), and click and drag the angle of our desired gradient. This gives us complete control over how the gradient looks.

This oval, will form the basis of the object we are going to make ‘shiney’. To give a further depth to it we are going to add a subtle drop shadow. Hit “V” (the hotkey for the selection tool) and select the oval. Now go up to the top menu – select Effect > Stylize > Drop Shadow, and give the object a subtle drop shadow as demonstrated below:

3. Shape up / create your shine shape

Ok, now for our shine shape – this shape gives a “glint”. Select the Ellipse tool again from the tools menu (hot key “L”). Click and drag on your art-board until you get the oval you desire – this one wants to be slightly different from the previous oval we have drawn, it needs to be smaller and less wide in proportions. For example see below:

We now need to duplicate the oval shape we have just drawn. Use the selection tool (Hot key “V”). If you select the oval and while your mouse click is still down hold down the “alt key” and drag – then release the click and “voilà”, you have a duplicate shape. We are now going to increase the size of the new oval slightly. Whilst it is selected, move your cursor over one of the corner nodes and stretch if you hold down shift this will happen proportionally.

We are now going to knock out the larger oval shape from the smaller one. To do this the shape which we want to be deleted needs to be on top. To make sure the shape to be selected is on top, select it using the selection tool (hot key V), and then bring it to the front (option found in top menu, Object > Arrange > Bring to front or by using the hot key, “option ]”. Select both shapes (make sure you have the selection tool selected, click one oval, hold down shift and select the next one.) Go to the pathfinder window (Hotkeys: “shift, option F9″). Select Shape modes > Subtract form shape area (second option along). Now select “Expand”.

This is going to become the “shine” on our original oval. Lets put it in position – select it (yes hot key “V” again!) and drag it into its desired position – also make it white.

4. Behind the mask / Making an opacity mask

Now we have a problem to solve. We want the shine to gradient from white to nothing. Currently, Illustrator doesn’t allow us to add a gradient from white to nothing – so we have to use another technique using whats called an ‘Opacity Mask’. Before we get on to that though we need to add a gradient to the shape. Select the rectangle tool (Hot key M) and draw a rectangle. Give it a gradient of white to black.

Place the gradient rectangle over the “shine” shape we created earlier. We now need to select the area we want to mask out the gradient. Go to outline view (Menu > View > Outline – hot key “Y”) and with the selection tool select the shine shape and the gradient rectangle as below:

After they are selected go back to Preview view (Menu > View > Preview – hot key “Y”) and open up your transparently pallet (shift option F10). At the top on the right hand side there is a little “further options” icopn. When you click it another window will open and you will be able to select “Create Opacity Mask” from a drop down list. This will create your opacity mask.

You may want to “invert” it to get a better effect as below:

5. Conclusion / a time to shine

So thats it basically! You should now have a nice shiny oval. This technique obviously has many applications and can be adapted and used to create some stunning graphics. We have an example of this below:

For more information on how to use Illustrator masks read this article from Adobe.

You should experiment and master these techniques. If you do you will find there is always a time to shine, even if you have a tight deadline! So there we are, if anybody has anything to add – or any questions – please leave a comment below. Remember – there is always time to shine… Enjoy!

Related posts:

1. 3D prototype mock up in Adobe Illustrator
2. 7 Things You Didn’t Know Adobe Illustrator Could Do
3. 7 More Things You Didn’t Know Adobe Illustrator Could Do

We often get young designers asking us what we look for in a potential employee and what we would advise them to do to help them get into the design industry. Apart from attitude (obviously!) there is another major factor – their graphic design portfolio. This is essential for both experienced and new designers. The portfolio is a showcase of what an individual can do. It is evidence of what they have to offer. What about qualifications? Well they can be useful – but unless there are examples of the skills of the individual, qualifications are about as useful as the paper they are printed on. The portfolio allows people to see what a designer is all about – and seeing, in most cases, is believing.

So – to all you people wanting to break into the design world, or even to move on up the ladder – this is for you. A few tips on what we would look for from a graphic design portfolio perspective. Firstly we believe that you need to have at least 2 versions of your graphic design portfolio – an online version and an off-line one. We’ve split the following tips into 3 sections – each with 5 tips each. First up, is general tips which apply to both print and web. Next, is tip on an online graphic design portfolio and last, is tips on how to create a print portoflio. Enjoy…

General graphic design portfolio tips

01. Display

How you display your work is almost as important as the work itself. It needs to have space and impact so don’t clutter it or cram it in. Let it breathe!

02. Be selective.

Less is more. Quality not quantity. The better quality the work is, the more likely you will catch somebody’s attention.

03. Does it flow?

The order you place the work in need to be thought about. It needs to flow from one piece to the other – especially if you are going to be presenting it. A natural flow of pieces, contrasting one another, or even complimenting one another helps to keep people interested.

04. Be diverse.

A diverse graphic design portfolio, in our view, is better than a one trick pony. Where possible show that you can work across different industries as well as using different styles to communicate messages.

05. Keep it up to date

There is no good having a portfolio which is ancient. It has a negative effect. Keep things current and upload peices of work just after you have finished them. That way you don’t get a large back-log of work.

Online Portfolio Tips

01. Get on the web

We will always look at somebody’s online portfolio before we even see their printed one. Don’t have an online portfolio? Where have you been? We are in the 21st century! If you are not a coder, then get somebody who is to give you a hand or get a piece of software to help you. For inspiration head over to: http://www.onepagefolios.com/

02. Let the work speak

All you need is something simple. Let the work do the talking. Let it breath and ensure it is large enough for a viewer to see the detail. If you can allow the user to select a piece of work to zoom into it so they can see the fine detail.

03. Clean code

If you are applying for a job related to HTML and CSS make sure the site validates and the code and is clean. Potential employers will always look at the coding of your own site as a reflection of your coding ability! So – do make sure you use the highest standard of coding and best practice techniques.

04. Offer information

We don’t have time to read loads, but a short 200 word description of how the project was produced is always handy – what was the brief? who was the client? Be careful not to let the words distract from the image though. Also maybe add a brief “about me” page – and even a CV in PDF format. You will also need some way for people to get in touch with you.

05. Keep your file sizes down

We have no issue with flash websites but would advise that they are not too heavy. Nobody has time to sit around and wait for half an hour for something that should load in seconds. If you want to show off some heavy animation – make a DVD or put it in an area of your site, rather than making it your site.

Print Graphic Design Portfolio

01. The packaging

Get yourself down to an art shop and pick up a professional looking wallet folder or case. For practice reasons we suggest it should be robust and water proof – nothing like soggy work for making a good impression!

02. Mounting

Mount your work on selected paper. Black is normally a good choice as it sets off the colours in a piece and gives it impact. As well as black paper you could get creative and use coloured paper or tracing paper. However, make sure the paper the work is mounted on doesn’t detract from the work itself. Also ensure work is fixed securely – you don’t wanting it falling out when you open it.

03. The real deal

Although most portfolios look nicer when the work is printed onto single sheets and mounted, it is also important to include actual samples – especially of larger documents that you have had professionally printed. Sometimes its good to keep a small selection inside your portfolio to take out and show people.

04. Tailor your portfolio

With print portfolio’s you normally know who you are going to see before presenting it to them. Therefore it is important to ensure that the work is tailored to that person or company. For example, if you are going to meet somebody interested in brand identity design, make sure your work is focused around this area.

05. Keep it short

Don’t have too much in your print portfolio. On the web, potential clients or employers have the choice to view as many times of your work as they want, as they normally do it at their own pace. Printed portfolios are often presented and so if there is a lot of work, there is a lot of time spent which may not be necessary. Normally 10-15 pieces of work will more than adequately show the person being presented with the work your skill level.

Conclusion

Remember, design is all about audience. When creating your portfolio think about who is going to view it. Any further tips or advise for other designers? Do you have an opinion? Please feel free to leave a comment…

Related posts:

1. Graphic Design Portfolio Update
2. Nottingham Graphic Design
3. Portfolio

Some examples of business card designs taken from our graphic design portfolio.

The irreducible minimum

It is so important because your business card holds the minimum, irreducible amount of information about your business. The card is a reflection upon what type of company it has come from. It needs to stand out next to your competitors and it needs to hold all of the relevant information to allow somebody to contact you. At the same time it must not look too busy or desperate.

So what information needs to be there?

Well, we always think the following are necessary:

• Logo
• Slogan – saying what your company does.
• Name
• Job description
• Address
• Office Telephone number
• Mobile Number
• Email Address
• Web Address

Most of these things are pretty obvious, but the first two we find are often overlooked. Your logo is your identity. If applied consistently it stands as the banner of your business and brings recognition and trust. When it comes to business cards we always feel that it needs to be one of the most prominent things. We would normally recommend a double sided business card and give one whole side solely to the logo. This brings impact and enforces confidence.

A slogan – why, you may ask, is this part of the irreducible minimum? Well, logos have become very aspirational, reflecting the values of a business rather than literally what the business produces. If your logo was literal then this might not be so relevant but if your logo doesn’t really say what you do exactly, it is worth coming up with a slogan which does. The reason for this is because if this business card sits in somebody’s drawer for a few months (as most will) when it is taken out, bright eyed and blinking at the sunlight, if the person cannot remember what you do and doesn’t have the inclination to check your web address, the chances are it will find its way into the filing cabinet of doom – namely the bin! If however you have something on there which jogs the memory or re-ignites an interest, then you might get an unexpected call.

Design

The first thing to consider in the design is the ease at which the basic information can be seen. Is it accessible and clear? Is the typography slick and easy to read? You do not want to make it complicated for somebody to get in touch. If that’s your telephone number – label it “tel no”. It’s got to be clear and simple.

The next thing to look at is the over-all ‘feel’. Does it fit in with your corporate image? Does it look consistent with your website? This is important because as we’ve already mentioned consistency builds trust. Is it cramped? Is there breathing space around your logo?

Colours are also important, as they help to bring impact. We often like to flood one side of a business card, (usually the side which holds the logo), with the company’s corporate colour. The other side we normally keep white – this gives greater impact when the card is turned over – from which ever side the viewer sees first.

Business card material

DO NOT print your own business cards from your inkjet office printer! It looks – and is, cheap. Business card printing is not as expensive as you may think (if you don’t believe us contact us and we’ll prove it to you!). If your business card is a reflection of your business and you cannot even get a professionally printed card produced, then it doesn’t look great for your business!

Get your cards printed on card! We would recommend around 250gsm. We would also suggest a laminate, gloss or matt. This gives it that superior finish that gives your card a ‘quality’ feel. Remember everything needs to reflect your brand values and so if you are offering a quality service all of these things help to reflect that.

To give your cards something extra, you could get your cards dye cut – this allows you to cut shapes out of your business cards. For example you could cut the corner off, or round the corners. This really helps to differentiate your card from competitors because it makes it completely unique. One thing we would not recommend though is for a card to be outside of the normal size – remember these have to fit into the business card wallets of your potential clients and they do need to be able to be easily stored in a conventional way. This is why we rarely recommend folded, or even 3d, business cards – although fun, these are bulky and we would suggest they don’t have a long life span and are not practical.

Taste my brand / brand chocolates

We came across a great strategy the other day. To our utter surprise, when we asked our new accountant if she could give us her business card – she took it out of her bag with 2 wrapped, high quality chocolates on top! What a positive way to introduce your business! When we commented on this, she also said that people tend to leave the chocolates for a while and then eat them when she has gone – keeping the memory of her business lingering on. We also feel that it uses another sense in the brand introduction experience – taste! This again helps to enforce recognition and all works in a positive way to get you business (although of course, you need to keep wrapped chocolates in your bag at all times?!). So, maybe arm yourself, and your sales team, with little treats!

Conclusion

Who would have thought there is so much to think about in just a simple little thing as a little business card! Well there is – and there is probably more. Do you have any thoughts dear reader? Please leave a comment below:

Related posts:

1. 10 Design & Marketing Ideas for Your Business
2. What Your Logo Doesn’t Say About Your Business!
3. Spot UV – Add class to your business cards

What is a “brand”?

Ok, before we start we had better define a “brand” more fully. In simplistic terms a brand is a proposition – a message such as “we deliver quality sports wear”. There may also be sub messages and values which associate with that message but they all revolve around the same idea. How this message is communicated is often termed “branding” and one of the most important aspects of communicating a brand visually and subconsciously, is consistency.

What is brand consistency?

Brand consistency is where a business attempts to communicate messages in a way which doesn’t detract or wander away from the core brand proposition. For example, a single logo is always used in a similar way on all marketing materials, a single typeface is used with particular guidelines on typography, consistent colour ranges are applied and similar design styles, so that everything visual is inter-linked and has a link back to that core brand proposition. Every piece of marketing material is like a member of the same family, supporting and even looking similar to all the other members in the family. The brand has it’s own unique “look” which enables a consumer to recognise it as belonging to that brand proposition and distinguish it from competing brands.

This visual “look” often evolves slowly over time but the core message of all successful brands never really changes.
Take for example, Apple computers. Since their brand’s conception, their brand proposition was to supply advanced, quality, great looking, high performing computers. This message has never changed although the way they have communicated this over the years has, as they have kept up with modern design standards. This has led to consumer recognition and then trust and loyalty from their customers.

We would like to mention that branding is not just about applying a logo in a consistent manner, and having the right Pantone colours. It is about ensuring that all the messaging of all communications materials is pulling in the same direction. That it all “looks” consistent. Even the way the copy is written should be considered in the light of the brand messaging, the way the website is coded and the quality of paper used in printed materials – all of these points should be consistent because of they are not, it will cause consumers to loose trust in the brand and it’s messaging.

For example, imagine you were thinking of purchasing an expensive, high performance car. You see a TV advertisement for a car dealer near you. You look at their website but it doesn’t seem to look the same as the TV advert. When you go there the sales man gave you a flimsy, poorly designed, black and white, photocopied brochure – again this doesn’t fit in with the web-site design, the TV advertisement and the message they had communicated to you. This would immediately make you think – hang on, if this car is worth £100,000 then why cannot they afford to produce quality marketing materials? Am I even in the right place? Maybe this product is not what it seems?! And you may even be put off from the purchase because something didn’t sit right – because the brand proposition was not communicated in the right way, or in a consistent way – and that’s why brand consistency is so important…

We would like to point out that although we, at Attitude Design, focus on the visual aspect of communicating the brand, there are other areas which all contribute. Members of your staff who are client facing, play an extremely important role in the persona of your business and if areas such as those can tie into the main brand proposition then true consistency can exist.

Why bother with brand consistency?

Brand consistency has one massive advantage – recognition. With recognition comes familiarity. With familiarity comes trust and confidence. Also, if done correctly, consistency brings clarity and purpose which consumers buy into. They can become loyal. As people we don’t really like “new’ – and it has been widely reported that before a consumer purchases a product, on average, they need to be exposed to a brand 17 times. 17 times is an awful lot and so it’s essential that when a potential customer comes across a “brand message” they know straight away which brand is communicating to them. This can only be done by consistency. If consistency is not applied, and the message and design not defined then it is possible for a consumer to mistake one brand with a competing brand which could then mean they associate the impression with another company. This means a business potentially looses customers, and may even help it’s competitors if a consistent “look” and tone is not achieved.

The issue is that brand consistency often takes many years to master before it really starts working for you. This means you need to think long term – and start as you mean to go on. Leading brands are normally leading because they have had many years of consistency behind them and they have had a long term goal for their branding which has been consistent. The trick is to have in place a clear idea of your brand and then the right people in place to guard it.

Brand guardians

At Attitude Design we like to think of ourselves as brand guardians. If you are looking for a long term partner to ensure that your branding is kept consistent across all marketing materials then look no further! We offer a strategic multi-disciplined approach across both print, web and new media to ensure that your brands values are consistently applied and fit in with the long term strategy of your business. If you wish to upgrade your brand’s “look” we can not only assist with the actual design (please see our portfolio), but also it’s strategic implementation. Whether you are setting up a new brand or have an existing one we would love to see if we could help so please contact us, or if you have any comments which you wish to make, please feel free by using the form below:

Related posts:

1. The importance of brand image in start up companies
2. BBC Radio / Brand Portfolio Brought Into Line
3. The Name of the Game – Unique Selling Points (USPs)