Once again Attitude Design have worked with Hallam Internet to redesign the Hallam website, www.hallaminternet.com. Hallam are a fantastic team of search engine optimisation experts offering an unparalleled SEO service under the leadership of the renowned internet marketing speaker Susan Hallam. Through the websites various stages, the Attitude team have consistently developed the design and structure to keep it fresh and professional, making it easier to navigate and more powerful to the user. This marks a new development of the Hallam brand identity by presenting the quality services of Hallam Internet in a powerful and modern website.

Old Design

Compare with the old design below, the new design flows smoothly and notice how the subtle use of shadows and forms set the framework, bringing a clean cut finish without losing structure or looking too rigid. The Hallam purple is set off by the use of the pale grey that breaks up the page. The navigation is simplified and careful typography maximises the contrast and clarity of the key messages. Adopting more modern elements make the pages easier on the eye and result in a lighter, more spacious and well structured website.

Call To Action

Throughout the pages are Call To Action sections, which are fully customizable, allowing the attention of site visitors to be guided towards new or important content whilst also aiding the continuity of the design.

Home Page Ticker

The home page now features a fully customisable ticker, which displays key messages to help direct visitors to useful pages. Using large crisp images and snappy messages, attention is kept and important shortcuts transfer visitors to the pages they need most.

Authors

Each Hallam Internet author has a profile page complete with a customisable contact form that can be modified to fit each team member. The website is also integrated with Google+, allowing articles to be matched to their authors on a Google search. The website is also fully linked to social media and it is easy to follow individual team members, keep up to date and share pages. This allows clients to view the latest activity of Hallam on the social sites they visit daily.

Optimised for iphone/ipad using the 1140 grid system

The website is built using the 1140px grid system, making it work fluidly accross different screens, adapting itself for ipad and iphone so that all content can be viewed wherever you are, quickly and clearly! We feel it is important to make the website fully accessible as the number of ipad/iphone visitors rise.

Videos

An informative video interview with Director Susan Hallam adds personality to the message, whilst testimonials from clients also bring a personal touch to the website, in addition to confirming that the company is trustworthy. Videos are engaging and are great for efficiently communicating more information in less time it takes to read. Everyone loves videos! View them here »

WordPress

Finally, the Hallam website content is managed using WordPress. WordPress is easy to use and the entire website is customisable, allowing Hallam to update the site regularly and efficiently to focus on relevant news and services, so that the website works like a flexible tool, growing and changing to match the company and its communication needs.

Work with Attitude

If you need your website redesigning and want some Attitude – why not contact us. As we hope  you’ll agree, the project above shows we offer the perfect union between form and function so be sure to drop us a line if you need a website design (rhyme not intended but it does have a nice ring to it!)…

Related posts:

1. Attitude design the new Hallam Website
2. Hallam Communications
3. Work Completed / 500 Website

Recommended Free Fonts

Once again here at Attitude we would like to share with you 1o of our favourite fonts that we have used recently, and they are all free to download and use! Follow the links to give the brilliant creators exposure they deserve! Get creative and download them all!

Museo

Download Here

Created by: exljbris

Weston

Download Here

Created by: Pavel Pavlov

ChunkFive Roman

Download Here

Created by: The League of Moveable Type

Quicksand

Download Here 

Created by: Andrew Paglinawan

BorisBlackBloxx

Download Here 

Created by: Manfred Klein

Code

Download Here 

Created by: Font Fabric

Sansation

Download Here 

Created by: Bernd Montag

Miama

Download Here 

Created by: Fuex

London Between

Download Here 

Created by: Francois Bruel

Lane

Download Here

Created by: GemFonts Graham Meade

So there you have it! 10 amazing fonts for you to enjoy, thanks to the hard work of the credited typographers! Have fun!

Related posts:

1. 10 Free Fonts We Use & Love
2. 12 Free Victorian Vectors
3. Free Vector Manicules

Related posts:

1. 50 More Inspirational Logo Designs
2. 50 Inspirational Logo Designs
3. 50 Inspirational iPhone App Icons

Wow – another giveaway from the Attitude Design studio. This time it’s a pair of left and right pointing hands called manicules drawn by our team.

The manicule was a popular punctuation mark in the middle ages. It was used to draw attention to important text but fell into disuse – probably because it was so complex to replicate.

To jazz up a design which harks back to the past why not download our free vector manicules. Enjoy!

Download free vector Manicules

Download zip file (1.4mb)

(right click and save to desktop)

Now get creative! Leave us a comment about how you get on!

Terms of use of our Vector Manicules

You may: use this vector artowrk in the creation of any commercial or non-commercial work – mentioning Attitude Design if you do so would be a nice gesture of gratitude.

You may not: distribute this vector artwork in anyway or resell this vector artwork

Related posts:

1. 12 Free Victorian Vectors
2. Free Powerpoint / Keynote Backgrounds – High Def
3. 10 Free Fonts We Use and Love 2

We love this new video for Google’s new “Chrome Book”:

The product itself is an amazing idea which taps into all the current trends. Basically you don’t need a desktop with the Chrome Book – everything is online and therefore there is no need to have software, drivers or hassle. Everything is done, in effect, through a browser.

The marketing video which goes with this new product is fantastic. Humorous, simple and yet very educational – it is extremely well scripted. From a design point of view it’s slick geometric shapes and bright colours creates a beautiful sequence with a clear message. It proves that you don’t need to be overly complex when creating animation.

We hope it will inspire you as much as it inspired us!

Disclaimer: We are not attempting to take any credit for the above work – we have had nothing to do with any of the designs shown. If you have any questions regarding this please contact us.

Related posts:

1. Video & Animations
2. Txt Island – Inspirational Creative Video
3. 12 Free Victorian Vectors

Free Free Free Fonts!

We love fonts here at Attitude Design! We especially love fonts which are free to use and download. As it’s the bank holiday we thought we’d share some of our favourite fonts which the Attitude team have used recently – and give some well earned exposure to the creators of these amazing pieces of work. Here are our current top 10 free fonts! Be inspired and be sure to download them and use them for yourself!

Bebas Neue

Download here

Created by: Dharma Type

Ferrum

Download here

Created by: dotcolon

Nilland

Download here

Created by: Manfred Klein

Delicious

Download here

Created by: exljbris font foundry

Mido

Download here

Created by: Eva Grinder

Null

Download here

Created by: Font Fabric

Grey Scale Basic

Download here

Created by: greyscale.net

Honey Script

Download here

Created by: Dieter Steffmann

Miso

Download here

Created by: Mårten Nettelbladt

Walkway Expand

Download here

Created by: Gem Fonts

Please note: We are not trying to take credit for any of these fonts. We have not been invoiced in the production of any of them. We have given credit to the makers of each one and we’ve done our best to do this accurately. If a mistake has been made please let us know.

Related posts:

1. 10 Free Fonts We Use and Love 2
2. 12 Free Victorian Vectors
3. Free Vector Manicules

Attitude Design’s Creative Director, Matt Davies, has made a star appearance as an expert in an online training video for Arts Audiences – an initiative from The Arts Council and the Temple Bar Cultural Trust in Ireland. The video is one of a seven module course called “Digital Arts Marketing Training” (DAMT) and has been developed by SEO expert Susan Hallam from Hallam Communications. The course has been tailored specifically to Arts organisations (such as theatres) in Ireland and covers SEO, Social media, Google analytics, Advertising, Web design and email marketing.

The team here at Attitude Design also worked with Hallam Communications on designing and producing the DAMT website and brand style, as well as advertising collateral. Examples of this can be seen below.

Brand Identity

Module sub brand identities

Web design

Banner Advertising

Email Advertising

Related posts:

1. Matt Davies (Creative Director) interview
2. Hallam Communications
3. Txt Island – Inspirational Creative Video

The amazing Apple iPhone continues to grow in popularity and with it the “Apps” (Applications) which can be downloaded and installed onto it. It truly is “App”-Mazing! The App ‘icon’ is a key feature to developing a popular app – many potential purchasers will seek to find out more about an app simply because of the great looking icon it has in the iTunes store.

This has opened a whole new genre of brand identity. Once which has to keep the identity in a boxed shape. One which is purely for the screen and so that multiple colours and pixel perfect precision can be used to great effect.

We are currently in the process of developing two new iPhone apps for our clients and we know how tough it is to get a great looking App icon. So – we thought we’d help y’all out by compiling a few of our favourite app icons and hope they inspire you! Enjoy!

If you have an app you wish to develop for your business give us a shout and lets chat about what Attitude can do for you…

Disclaimer: We are not attempting to take any credit for the above work – we have had nothing to do with any of the designs shown. If you have any questions regarding this please contact us.

Related posts:

1. Attitude Design Official Apple iPhone App Developers
2. Another 50 Inspirational Logo Designs
3. 50 More Inspirational Logo Designs

Free victorian vector shapes for download!

Ladies and gentlemen. At Attitude Design we love the Victorians. Their amazing knack of being able to create functional but beautiful things is extraordinary. Their long lasting influence is something we draw on all the time in our work as we too true try to balance form and function.

We have created a set of stunning victorian vector borders and Victorian shapes to celebrate the wonder of the Victorian style. The shapes created are really useful for creating elegant boarders or adding a special flourish to a design.  We hope you enjoy them and if you do end up using any please be sure to add a comment below and a link to where you have done so. We hope you enjoy them!

Download free victorian vectors

Download zip file (700kb)
(right click and save to desktop)

Now get creative! Leave us a comment about how you get on!

Terms of use of our Victorian vectors

You may: use this vector artowrk in the creation of any commercial or non-commercial work – mentioning Attitude Design if you do so would be a nice gesture of gratitude.

You may not: distribute this vector artwork in anyway or resell this vector artwork

Related posts:

1. Free Vector Manicules
2. Time Machine / Victorian Graphic Design
3. Free Powerpoint / Keynote Backgrounds – High Def

The New Hallam Design:

The old website design (see below) had focused on the managing director of Hallam Communications – Susan Hallam who is very much the face of the brand. However, as time has progressed so Hallam has developed as a business, with new team members being added – who are experts in their own right. The new design has deliberately moved away from the focus being on Susan to being more about what the team offers as a whole.

Old Site Design:

When the old and new designs are compared, you can see that more modern elements have been introduced (like rounded corners) and a less garish and more business like purple has replaced the orange. The over-all message is about what Hallam communications offers and has a wider appeal.

A number of strategies and elements have been introduced to maximise the design’s impact. Here we have a look at the new design in a little more detail and have highlighted x6 key areas which all work together to build confidence in the Hallam brand:

1. Video

Video testimonials are included in the homepage of the website and throughout. This builds trust in the brand – by showing ‘real’ people who have worked with Hallam and the positive affect Hallam has had on their business. There is also a video of the managing director Susan (shown on the left) which again builds trust – showing her genuine passion and business knowledge. Video has always been the communication style of choice but it’s only in the last few years that this has become possible over the web. As time goes on video is going to play a more important role in convincing users and converting sales. This is why we have developed a whole “Video” section on Hallam’s new site which should grow into a brilliant set of video resources – adding yet further to the trust customers will place in Hallam.

2. Facts & Figures

The inclusion of case studies is another great way of practically displaying what it is that Hallam do for their clients. We developed the site so that ‘key’ case studies can be pulled through to the homepage or side bar of the site. These highlight tangible results that Hallam’s expertise has had on specific companies. Again, this boosts trust and confidence in the brand – as one that actually produces results.

3. Messaging

Key messaging is strategically placed on the homepage. When a visitor arrives on a site you have about 1 or 2 seconds to get your message across and this is done with the clear message area. A main central message placed in the header and 3 further areas underneath. On coming to the website people can easily find their way around, understand what it is that Hallam do and importantly – get in touch.

4. Calls to Action

There are clear calls to action placed all over the design. The company telephone number is prominent in the header as well as calls to action being dotted around the text and side columns. At the bottom of every page there is a clear call to action to get in touch with Hallam – this maximises the chances of users using the contact page. This is a tried and tested stratey which we have employed for our clients for a few years now. Mike Hunter of Better Languages told us proudly the other day how that because of the calls to action we designed on his site, his contact page is the second most popular page on his site!

5. Trust points

Does your company belong to any quality assured organisations or trade groups? Has your company qualified for a industry certificate? These can really help build confidence with your target audience and so placing them on your website can help convince a user of your authenticity. We placed these in the footer of all Hallam’s pages to help add further trust to the brand.

6. Social Media

Social media helps people to connect with your brand on web platforms they visit regularly – it’s the modern way to communicate. By having your brand on social media it allows your brand to influence people who have come in contact with you in ways more convenient to them. It also helps you to listen and engage with your audience. We integrated the Hallam website with social media so that when posts are made on the blog then all the social media accounts automatically make a post to the new content. We placed the social media links in the footer and throughout the site to help encourage “mini” conversions whereby users might keep in touch with the Hallam brand after leaving the site.

+More

There are many other strategic features we added to the site but the x6 above will have to do for now! If you like our approach and have a project we might be able to work with you on feel free to pop in and see us or contact us today so that we can have a chat about your requirements and discuss what strategies we could employ to help you reach your business goals. As we have seen with Hallam’s site, improvements can always be made to a website so even if you have an existing site it’s worth seeing what Attitude can do to increase your profits…

From Hallam’s Blog

Read what Hallam had to say about their new site on their blog post entitled: “New Hallam Website: so many people to thank” where Susan Hallam writes the following kind words about our service: “The web design team at Attitude Design did a superb job in honing the creative concept, and in the technical development of the new site. I have worked with Matt Davies for more years than I care to mention, and for the third time he has guided me towards a web design that is representative of the business.  His colleague Dan Clarke delivered technical flair in further extending the functionality of our WordPress website.”

We were also excited to see a post entitled “4 things I love about our new website” written again by Susan Hallam who highlights some key areas which she particulay likes. It’s always nice to have positive feedback like that!

Related posts:

1. Attitude Redesign the Hallam Internet website
2. Attitude Design produce Actons Solicitors website
3. Hallam Communications

Everyone hates getting lost. It’s nice to know where you are and what is around you. Unexpected dead-ends and one way streets drive us crazy! Therefore we use maps… (well at least we did a few years ago, now we use a Sat nav… but the sat-nav is based upon a map… !) Anyway – for the same reasons that we use a map to travel around town, web designers often ask for, or help their clients to, develop a ‘site map’ for a website they are being asked to produce. These ‘site maps’ help everyone know where each page on a website will reside in the websites navigation. A site map is therefore essential at the start of any website project.

Although site maps are actually quite simple, for people who are not working with websites every day the concept can initially be quite hard to grasp. We thought we would outline some basic principles of the site map to help anyone out there who is scratching their head over how to draw up a site map for their website…

The ‘Family Tree’ Site Map

A site map can be understood like a family tree. All the pages on your website are like one big family – each page is related to another page in some way and the site map shows how this works.

Pages in a website can be termed ‘parent’ pages or ‘children’ pages or even ‘grandchildren’ pages. As soon as the family tree concept is understood, site maps become simple.

At this point it might be worth noting that site maps deal with the pages on the website – not blog posts – which are completely different. Your blog posts will all sit inside your ‘blog’ or ‘news’ section and do not need to be mentioned on your site map. Pages are used for information which is timeless about your company e.g. the ‘About Us’ page, or ‘Our Services’ page etc. Blog posts are used for latest news updates about your company / products etc.

Working Example Of A Site Map

To illustrate how a site map works we will look at the Attitude Design website.

Here is the homepage – this is separate to the parent pages but on the same ‘level’. Think of it as the place where all the parents hang out.

The parent pages are all the main pages on the homepage navigation – in this example, this would be: Portfolio, About, Services, Journal and Contact.

Let’s have a look at how the site map would look so far:

“Children” pages are any pages immediately inside the “parent” pages. Here we look at the “children” pages for this website example:

Journal does not have any “children” – as there are only blog posts inside this area and the contact page is a ‘stand alone’ page – with no inner pages.

Now let’s have a look at how the site map has developed:

If any of the inner pages (or children pages) such as “Branding” had inner pages of their own then these would become “grandchildren” pages. In this example there are no “grandchildren”.

The number of “family generations” in a website affects the number of clicks a user has to make to reach a certain page. In this example, a user will only ever have to click twice to reach the deepest level of the website e.g. once on “About” and then again to reach “Testimonials”. It is recommended that a user should not have to click more than 3 times to reach any area in a website. In other words, having “great grandchildren” pages would not be ideal.

We hope this helps when you come to draw up a site map for your website.

Drafted your site map and now need a great design? Why not contact us for a competitive website quote…

Site Map Resources

Check out these great links which might also be useful to you:

• The Lazy IA’s Guide to Making Sitemaps
• 3 Reasons To Start With A Visual Site Map
• How to create a visual sitemap
• Make a Site Map of your Website with WriteMaps
• A visual sitemap

Related posts:

1. 10 Tips for Creating Inbound Links for your Web Design Site
2. 5 Ways to Convert Your Site Visitors
3. Attitude Design Joins Facebook

A well designed presentation can really help the content of the address stand out. Keeping things visually interesting is a way of maintaining an audiences attention and can also really help with installing your brand image into the minds of the viewers.

We realised that one of the massive problems is that there are not many great resources for powerpoint / keynote presentation backgrounds. A well crafted background makes all the difference and helps people focus on the actual presentation rather than being distracted with poor graphics. So – we are offering x6 free backgrounds for you to use for a presentation. We don’t see you using all six in one presentation but hope that one of these designs might be suitable for you to use throughout.

These are free for commercial use but we would request that a credit is made to Attitude Design please. Do not re-sell these without obtaining permission from us. Enjoy!

Instructions

Simply choose a background and a dimension from the lists below and ‘right click’ on it. Then select “save to desktop”. This will download the image to your desktop. When you edit your mast slides in Powerpoint or Keynote you can then place these images and use them as backgrounds.

Free Powerpoint / Keynote backgrounds

Released under a Creative Commons Licence

Powerpoint Backgrounds by Attitude Design Ltd is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
Based on a work at www.attitudedesign.co.uk.
Permissions beyond the scope of this license may be available at http://www.attitudedesign.co.uk/.

Related posts:

1. Free Vector Manicules
2. 12 Free Victorian Vectors
3. 10 Free Fonts We Use & Love

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

This short tutorial is a handy tip for all those InDesign users out there.

What is “Bleed”?

“Bleed” is basically an area of print which is cropped off when a document it trimmed. It provides a safety area to the sides of a document that allows for small variations in guillotining or positioning. It stops white gaps appearing around the edge on your final print.

Setting up your document

Create a new document in Adobe InDesign (“Command N”). Add your ‘Page Size’, ‘Columns’, ‘Margins’. Don’t hit ‘Ok’ yet! (Note: If you do you can always go back to these options by going to ‘File > Document Setup’)

To the right hand side of this panel hit the “More Options” button:

In this panel you can set the bleed. In most cases you need 3mm. Once this is placed in you will get a handy red border around your document which really helps with positioning and sizing your design elements on your document.

Be sure to place any element which flows right up to the edge of the page into this area so that it will be trimmed.

Exporting for Professional Printing

When you export your document as a high resolution PDF for professional printing, be sure to have included bleed.

To do this go to “File > Export”. Ensure the Format is set to PDF and select the location on your computer you’d like it to be saved to. Select the standard preset of “High Quality Print”. Go to “Marks and Bleeds” and ensure you tick any marks you may need (most printers require crop marks). Also in “Bleed and Slug” area ensure the “Use Document Bleed Settings” is set.

This will then export a PDF with bleed which can be printed by professional printers! We hope you’ve found this Tutorial useful!

Related posts:

1. 7 Things You Didn’t Know About Adobe Photoshop
2. For beginners: How to crop an image in Adobe Photoshop
3. 7 Things You Didn’t Know Adobe Illustrator Could Do