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. A Guide to Practical Typography
3. A Bite Of The Apple / Apples New Website

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. The New Shop Window / Home Pages That Sell
3. Work Completed / 500 Website

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. A Time To Shine / Illustrator Tutorial
3. 7 More Things You Didn’t Know Adobe Illustrator Could Do

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 / Cereal Boxes From the 70s

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. 21 Inspirational CSS Showcase Websites
2. Time Machine / Record Cover Designs
3. The Rise Of The Design Concept

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. 7 More Things You Didn’t Know Adobe Illustrator Could Do
2. 3D prototype mock up in Adobe Illustrator
3. 7 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. UK Law Changes | Website Requirements

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. BBC Radio / Brand Portfolio Brought Into Line
2. The importance of brand image in start up companies
3. The Name of the Game – Unique Selling Points (USPs)

What is a “Home Page”?

A homepage is the first page the user comes to when typing in your url. This page would normally introduce your site in someway and it is the way in which your site is introduced which we want to focus on. One thing we want to make clear is that a “holding page” is not what we would class as a home page. A homepage offers you the navigation for the site and is “functional”. As a side point, Flash introductions and pages which say “click here to enter”, are not only terrible from a search engine perspective, but also from a usability perspective. So we are not talking about holding pages, in fact we don’t even believe in them.

What do you want your Home Page to do?

The Home Page is different from the other pages on your website. Why? Because the user has not asked for any specific information that they will see there. They have not clicked on an “about us” button or an “our services” link. The Home Page is all about what YOU WANT the user to see. It’s a portal to show the user what’s in the website and sell the information held further within the depth of the site. When the user clicks through to another page that page will display the info the user has requested – but on the home page the user hasn’t request any information yet. To keep users on your site you will need to show the user at least one of two things 1) What they came to the site to see or 2) Something that they didn’t expect but, upon seeing it, they will be interested in. For example you may go to a supermarket for milk but at the checkout you notice the chewing gum, nicely and conveniently stacked by the side of the till. The next thing you know is you have bought the chewing gum as well – something you didn’t go into the shop to buy! This principle can be used within your home page design. Normally, what you want your Home Page to do, is to give a balance between showing the user what they expect to see and attracting them to areas of your site they might not have known about but that you want them to be tempted by.

The “Shop Window”

Retail shop windows carry massive lessons for home page designers. Take a high street fashion shop for example. The shop window will typically contain the following – the logo of the shop, some attractive graphics, some plastic models displaying a wide range of garments which are sold in the shop.

Now a website is slightly different but the ideas are the same. The logo will give the overall authority and brand recognition to the website as it does above a shop window. The attractive graphics mean that the user’s eye goes to the area of the site which you want them to go to. These graphics may carry key messages which entice the user to go to that section of the site. Then there is a wide display of tasters from different areas of the site like the wide range of garments used in show windows. All of these things need to sit within an overall structure so the user can navigate simply and effectively.

Another lesson that can be learnt from shop window displays is that they are always changing. New products, new displays, new seasons. If there is a sale red “sale” words appear. They are always changing. This brings interest and attracts attention. It’s the same with your website. Update the information, change the main image / messaging graphics. Do you have a latest news section? Pull areas through to the home page. These things help to keep your site looking fresh.

Priorities

When designing a Home Page though, because there will be so many areas of your site which are important, you need to make some decisions. Firstly you need to ask; “what areas do I want the user to go to”? Then ask what areas will the user probably want to go to. For example you might find with a bit of research that people are coming to your site to read your blog – which is nice – but you want them to buy your products. Once you have established a user pattern you need to decide on the priorities of each section of the site. This will help you to create a Home Page which will have the balance. It will have enough of the things the user will want to see to make sure they don’t go away, but it will also have those things which you want the user to see. How do you find out what your users are doing? Install Google Analytics – It’s the best free website tracking software. Poynter have some very interesting research results. Basically they tracked where users eyes go over a site. Top left is most popular – bottom right is least popular. See the example below:

The above is of course, just a guide because if strong graphics were used on the bottom right the eye might levitate to that area. However it’s important to understand how people will naturally look at your website and make things easy for them.One thing which is essential is that you give the user an easy way to navigate and that they can clearly see they have come to a website owned by your company. Normally this is done with a consistent header bar which includes a logo and the main sections of navigation for the site.

Keep the message simple

The problem that some people have is that they want to say so much to a user that they cram everything in their home page. Remember sometimes less is more. Consider the apple site below:

The user clearly sees what Apple want them to see, although areas which the user might want to look at are displayed in four boxes below or they will be able to access them via the navigation at the top. In this example Apple have basically got 4 levels of priory. 1) the main message area, 2) The 4 boxes 3) The navigation and 4) the footer. Obviously things may be different for your company and your priorities may be different from an established brand like Apple.Heres another example from Skype. The text can be picked up by search engines but there really is only one thing they want you to do – download their software.

Last example – Ebay below – they have a few things they want users to do.

If you are not signed up, they want you to do so, so thats there as a priority. However what they also want people to do is get shopping so they have a few ways of doing that. One is a list of areas of products, another is by pulling our collections which may interest the user. All have the main aim of getting people face to face with the products – but all communicate what Ebay does best.We could of course feature many more sites but we’re confident by now you will be able to take the form of thinking we are promoting and apply it to your website. Get those priorities right and then your home page will start working far more effectively than if you haven’t thought things through…

Stay up-to-date

Just as a retail store may keep giving it’s shop window frames a fresh lick of paint and changes it’s window from season to season, so your site will need to be updated on a regular basis. Is your site a couple of years old? Chances are that web-design has moved on, even in 2 years. There will be new technologies, better techniques and new design styles.Also consider that peoples browsers change – IE6 might be the most popular browser for your audience today but maybe IE7 will be in a years time. What if your website falls apart in IE7 because it was not tested for the latest version. It’s important to review your site on an ongoing basis to ensure you maximize what the web can do for you.

SEO

Search engines have a massive influence on how many people will visit your website. This is where Search Engine Optimization comes in. Your home page is the main page of the site that will feature in the rankings. It’s worth getting an expert to analyze it and suggest improvements so that you can rank higher than your competition for key search terms.

Other interesting articles on this subject

Want to find out more – well folks if you liked that you’ll love these:

• Alert Box | Top Ten Guidelines for Homepage Usability
• A List Apart | Home Page Goals
• UX Matters | Home Page Design
• Web Style Guide | Home Page
• Alert Box | The Ten Most Violated Homepage Design Guidelines

Conclusion

So there we are, a brief outline of how you can improve your homepage, your online shop window. If you have any comments or suggestions that could help others please leave a comment…

This article can also be found on Fadtastic

Related posts:

1. A Bite Of The Apple / Apples New Website
2. Do you get the message?
3. We Design ClickBook.net’s Home Page

Stop Being So Literal – Literally!

Consider some of the worlds most famous brands. Do they depict what the company literally does. Does “Nike” have an emblem of a trainer for it’s mark? Does “Coca-Cola” have a picture of a glass of liquid for it’s logo? Does “Vodafone” have a mark depicting a mobile phone, “Apple” or “IBM” a computer? No. Why is this you may ask? Well for a start the products and services of a company change over time which may mean that a literal logo would need to change on a regular basis. Why not an abstract representation then, you may ask. Well, the truth of it all is that the modern logo is not something that depicts EVERYTHING that a company does. The modern logo is more about how the company does it.

A logo needs to embody the culture of the company and most of the time the culture of a company has little to do with the products it sells. For example apple are a computer company but their name and emblem has nothing to do with computers. Their mark is an apple with a chunk taken out of it. This maybe suggests having a ‘bite of the apple’, getting ‘your teeth into something special’. Normally the brand is very clean and non obtrusive. This again gives the feeling that this company creates products which integrate seamlessly into their customers lives and that they offer a slick and professional service. All of these things are portrayed in the simplicity of their logo.Coca Cola on the other hand have a brilliantly swirly typographic logo. This gives the feeling of history, movement and fun. Again these are all attributes of the culture of their business but does not depict the literal products which they produce.

So when considering a new logo, or even an update from an old logo, why not try to think about the culture and qualities of your company rather than what you literally sell. What your logo doesn’t say can be more important than what it does say! Your logo will become cleaner, more attractive and will have longevity. It will also have a quality about it, a self assurance which breaths professionalism.

Placement Of The Logo

“Hang on a moment”, we hear you say, “but if my logo doesn’t say exactly what I do then how will people know exactly what I do”? Well, this all comes down to placement.

How many times do you see a logo all alone? Not many at all. Logos are often placed alongside an image and a marketing message which normally display, more literally what your company delivers. On a website for example, your logo will appear but will be accompanied alongside information which tells people what you literally do. On an advert your logo may appear next to an image of a product you are promoting. Again the literal is seen in the image and message but not in the logo.

This way of communicating is far more effective than trying to communicate everything literally in a logo. For a start you can keep your message very simple and direct it to a key audience. For example you may deal differently with a blue chip client than you would with a small or medium sized business. If you can target who is looking at your messages you can make sure you are appealing in the right way to the right people. A simple logo will be able to appeal to all audiences even though it may be placed on advertising directed to different classes of consumers.

Other Ways To Portray What You Literally Do

It’s also a good idea to remember that what you literally do or sell can be adapted an built into your over-all branding style. For example you could develop a series of icons which depict different product areas. You could also have a slogan or catch phrase which you can sit next to your logo. These things can be updated or changed at little or no cost.

Conclusion

So we have shown that what you include in the design of a logo can be just as important as what you leave out. We have seen that in a modern logo, aspirational ideas, rather than literal ideas, are portrayed and that this has many benefits.

Do you agree? Or maybe dis-agree? If you have any comments or suggestions please feel free to leave a comment below…

DISCLIAMER: The images used in this post have not been created by Attitude Design and are simply used for reference and examples.

Related posts:

1. Brand Design Complete – Red Venture Logo
2. 10 Design & Marketing Ideas for Your Business
3. Make the most of your business card

What Is A Call To Action

Basically a “Call To Action” (CTA) is a section of text which tells the user to do something. For example “contact us today”, “find out more”, “register now” or the famous “click here”. Normally a call to action is placed along-side an attention grabbing advert or graphic.

There has been much discussion on CTA’s, from userbility, accessibility, design and marketing perspectives. There is no general way of doing CTA’s because it depends on what you are trying to get the user to do and where your CTA is going to be placed. Here, we have laid out a few guidelines for making your CTA’s better…

Wording

Many web designers argue that the commonly used “click here” is inadequate as a CTA because it does not convey why the user should take such an action.

It is commonly acknowledged that an effective CTA will inform the user as to why they should follow it. For example if we came across a “register now” CTA, it informs us as to WHY we need to click it. “Click here” is an expression which fails on the informative front.

However on the other hand “click here” is a commonly used term which seems to work for the big companies. For example, see below:

Now we’re not suggesting that this makes it right but if it works for them, then it’s logical to ask – why can’t it work for the rest of us? The answer is of course, that it can work for us – only we can make our CTA even better. For example on the WSPA banner advert above, it may work saying “click here” but what if it said “click here to save a gorilla”, or “click here to find out why we need your help”. This would tell the user why they should do what it says as well as using the common term “click here” telling them how to do it. To make the CTA even stronger you could, for example, on the MYA cosmetic surgery advert have “click here for a free brochure”. This example offers incentives to the user as well as telling them why they should click.

The best word to use is “Free”. Marketeers all agree that “Free” is the most powerful word. So whatever it is, whether it is a free product or simply free information. A killer call to action then would include the command “click here” with the incentive of “free”. “Click here for a free sample” for example.

Messaging

Again the messaging which accompanies the CTA needs to be clear and simple. Most of all though it needs to give a sense of urgency. For example “Sale Now On – Hurry, ends on Friday” with the CTA “click here to see what’s on offer”. If we also added “Free” in there somewhere we would have an irresistible call to action!

The message needs to appeal to your target *audience and it needs to grab their attention. Don’t tell the user what you want them to do in the message, thats in the CTA, tell them what they will want to hear then tell them what to do.

Design & Images

Obviously CTA’s come in all shapes and sizes. The most simple CTAs are used in HTML text in anchor tags like this. Text links are useful for search engines who record the text held in anchor tags and add them as bonuses to search phrases – however they don’t look great. Use them in your copy but maybe use an image based CTA somewhere as well. If you are going to use a CTA in text – why not pop an icon next to it help the user to it from other text or links.

When styling CTA’s its important to make them obvious. The idea is to make sure the sure knows that they are supposed to click on it. Below are some examples of “button” style CTA’s:

CTA buttons are widely used alongside images with marketing messages. The message gets the interest, the CTA tells the user what to do. Again the principles of the wording of the CTA still apply but when coupled with graphics, especially appealing ones, the eye is more likely to be attracted more effectively than when using a plain text CTA.

All images that you use need to be uncomplicated and need to back up or enforce the message and call to action. Sometimes just using a product shot will do the trick, other times a clever concept could be developed into the image. The important thing is to keep it simple though.

Conclusion

So there ends a brief introduction to making your CTA’s better. Has anybody got any other tips or examples of better CTA’s? Leave a comment below…

DISCLIAMER: The images used in this post have not been created by Attitude Design Ltd and are simply used for reference and examples.

Related posts:

1. Do you get the message?
2. What Your Logo Doesn’t Say About Your Business!
3. 10 Design & Marketing Ideas for Your Business