In essence, the gist behind a robots.txt file is simple: Also known as the Robots Exclusion Protocol, or robots.txt protocol, the file is a standard, nothing-special text file which has a certain format to it and is used to prevent (willing) web spiders and other web robots from accessing all or part of a website which would otherwise be open to the general public.

A simple example

Say you’re running a competition site and you don’t want Google (or any other search engine, for that matter) to access the list of competitions you currently run which sits on a sub-directory called /comp-list/ [and bear with us on this one, it's just an example!]. All you’d have to do is not allow any bots/spiders to crawl that page, or more importantly, anything in that folder by disallowing access to it. The way you do that could not be simpler; all you do is create a robots.txt file, which will sit in your main root directory, with the following information:

User-agent: Name-of-bot-or spider, i.e. Googlebot
Disallow: /path

In the above example, ‘User-agent’, simply dictates who it is you are targeting with this rule, whilst ‘Disallow’ is a special keyword which becomes an action of that target. So putting that all together, your robots.txt file should look something like this:

User-agent: Googlebot
Disallow: /comp-list

Or, to make it so that no robots/spiders can crawl the folder, simply replace Googlebot, below with an asterisk, or “*” which is in programming terms a visual representation of “all”.

User-agent: *
Disallow: /comp-list

That’s pretty much it! Well, if all you wanted to do was hide that page/folder that would pretty much be it. However, herein is the rub — What most people tend to forget is that, just because you stop Google or other engines from accessing your site, (and most common search engines inc. MSN Live, Google and Yahoo! will listen to what your robots.txt file says) – it does not stop people from opening your robots.txt file and finding our what you’re trying to hide from the world.

That’s pretty important to realise, especially when you are putting away invoices, or anything else to good use in a folder called ‘/secret-stash’. Google and other bots might not post it for the world to see, but it doesn’t mean anyone who sees your file can’t find it! So be weary of that when you are working on your robots file. The question that begs to be answered is why you’d put your invoices in a folder called ‘/secret-stash’, online in the first place, obviously : ).

Another important thing to remember is that robots.txt does not guarantee privacy! It works on the simple basis of search engine cooperation; having said that however, the big players in the search game at this stage do support it!

An intriguing scenario

One thing that never ceased to amaze me was how ‘thorough’ the Whitehouse’s official robots.txt file was- and we stress ‘was’. After eight years in power, President Bush and his web boffins had racked up nearly 2400 lines worth of search engine exclusions in the robots.txt file, which include:

User-agent: *
Disallow: /cgi-bin
Disallow: /search
Disallow: /query.html
Disallow: /omb/search
Disallow: /omb/query.html
Disallow: /expectmore/search
Disallow: /expectmore/query.html
Disallow: /results/search
Disallow: /results/query.html
Disallow: /earmarks/search
Disallow: /earmarks/query.html
Disallow: /help
Disallow: /360pics/text
Disallow: /911/911day/text
Disallow: /911/heroes/text
...

And even more… Now some would say there’s a big conspiracy going on with political staff trying to hide information to the public about 9/11 or results, or most importantly, “expectmore” – which is sort of ironic, considering you are getting less information? No? Anyhow, We’ve recently taken a look at the new Obamafied version of the same document and it now looks a lot leaner; in fact, very much leaner… This much leaner:

User-agent: *
Disallow: /includes/
Disallow: /search/
Disallow: /omb/search/

However, on a side note, the last two entries were recently added in addendum to ‘/includes/’. Interesting to say the least right? I mean it may seem like a stupid/childish topic to even get into, but there is a method to the madness of this discussion.

We wondered if this showed a changing nature of how the world- or at least ‘The Whitehouse’ is viewing the whole process of information gathering, retrieval and dissemination –  or more importantly, perhaps trying to be more open? And then I found this article on BBC which went something along the lines of:

“Searching for data about the Obama administration should get easier as the Whitehouse.gov website gets overhauled.
Barack Obama’s new media team is letting search engines index almost everything on the site.
By contrast, after eight years of government the Bush administration was stopping huge swathes of data from being searchable.
The move is part of President Obama’s larger push to make the US government more open and transparent.“

And then it hit home! Maybe there really is a change coming? Point is, at least the team at Obama headquarters knows how these things work and believe me that’s a good start!  Puts a whole new spin to ‘The Freedom of Information Act’.

Either way, maybe it’s an important strategy, or perhaps it’s just Obama’s team weeding out any last remains of the old administrations’ shortcomings? What it does show is that government, whether locally or overseas is realising the importance the web plays in our daily lives, especially in accessing information, and is taking every step they possibly can to rectify any mistakes which may have caused a roadblock of sorts in the past. And in anyone’s books, that can’t be a bad thing.

Read more about search engine optimization and robots.txt procedures or check out The Web Robots page for more information on robots.txt.

To kick off the new year in Web Design, I thought it would be best to go through a couple of my tell-tale signs that can help you gauge if and when your website’s design sucks. Obviously, “Website design” in this concept does not only include the graphical elements of the page, but of course the Information architecture, usability, accessibility, etc. So without further ado– Let’s get going with round one of “Your website design sucks because…” with Your website design sucks because users can’t find crap!

1. What the heck are you thinking?!

Whether or not you are running a corporate information site or a 15,000 page e-Commerce store- your content should be easy to find! The biggest problem is people think that you ALWAYS need a search box. Search on a website comes in many flavours, and sure; a search box would be awesome- as long as the results are easy to understand and filter to the right place. Having said that, not all great websites have search boxes or website search for that matter – but most if not all of them [great websites, that is] make the user experience worthwhile by making their content easy to find. Here are a few tips:

• If you are running a blog, make sure there is at least a way for the user to find an archive of all your content. After all, one of the main calling-cards, if you like – of a blog, is the fact that it is a chronological listing of posts or entries. Other important elements that help users searching for content is Tags and Categories. Try to make sure your posts only belong to one parent category. I.e. Not “Sydney Web Design” AND “Web Design” — after all, 99% of the time, one of the two (or more) categories makes the most sense. Tags help users by allowing to search for other posts which they might find interesting based on a common interest; i.e. Usability.
• If you are running a website; other than a web log , make sure that there is a common, geographical structure to your pages. I.e. there should always be the same header and footer on all pages – including any side-navigation or side elements. Doing this makes sure that users learn where things are and helps elevate any problems in looking for things all over your website.

2. Some conventional wisdom

Most webmasters and/or designers usually get search from a UI point of view under control. I mean come on! It’s basically three elements– A label “search for:”, a text box, usually pre-filled with “type query here” or something of the sort, and finally a “go/search/find” submit button… Easy, right? Wrong! Whilst the front-end features of site search are seen as simple, most websites/intranets (even the big players) crash and burn on the search results page.

3. A case study in Search Usability: Australia Post

Ahh, good old Australia Post! I love the fact that they deliver to anywhere in the world and the prices are not too bad — and I haven’t had anything major get lost whilst sending out *so far*. However, one thing that drives me insane about Australia Post is their website; http://www.austpost.com.au — not only is this website in need of a “major” overhaul. Let’s start with the essentials of this particular topic; Search.

The search on AustPost is located at: http://search.auspost.com.au. Nothing wrong with that so far- In fact, it’s smart to have search on either a sub-domain or a sub-folder at search.domain.com or domain.com/search. Moving right along. Oh wait! That domain does not work (Under Construction!!) unless you append the following to it: “/cse/auspost/” making the FULL-URI http://search.auspost.com.au/cse/auspost/ – Tsk, tsk AP!

If you type “test” in the search box and click the search button of the main page you get diverted to a search results page; which is okay so far– However, the diverted results page is a TOTALLY DIFFERENT website (in terms of overall look and feel). Check it out for yourself.

Australia Post Search Box - Main Page

All good so far… Let’s see what happens when we get diverted to the ‘actual’ search page.

Australia Post Search Results Page - Search.austpost.com.au

Oops! Something went completely wrong. Did I, as the user kill the site? Or is it meant to be a completely different site followed by a completely different user experience? [Both valid questions you don't need a visitor to your website, especially your search page asking!].

As Homer Simpson would say in a time of crisis; Doh! Different Logo, Different colour scheme, Different tab system, Different IA… Well, at least the logo is generally in the same place as before. Granted, I don’t know the reasoning behind this– Maybe they are in the process of moving sites across to a newer(?) design – but nonetheless, I think being a government corporation, this is pretty bad usability!
Anyway, let’s move right along… As if that first problem wasn’t bad enough, let’s see the search results form. Below is a screenshot of the “general” search form. By general search form I’m referring to the non-advanced variety!

Search Results Box

Wow, okay — where to start, where to start. Let’s rattle off some of the issues with this search box/form.

1. Why have a “Show search options >>” as well as “‘Advanced Search”. That is not only confusing, but a waste of visual space/real estate. Why not make general search easy to use with no extra-ordinary features, and leave advanced search for those people that need to dig deeper into the data mine. Ahhh, I slowly started to realise why, and you will see why soon!
2. See the “Select All” and “Clear All” check boxes? They only select/deselect one option — and that is the “Australia Post Website” check box. WHAT WERE YOU THINKING AUSTPOST DESIGNERS/DEVELOPERS!!! Give me three good reasons why this is necessary on this page (in its current format) and I will stop using Facebook for a month… Okay, a week! Not only is this stupid from a usability/IA point of view, but it’s NOT needed here. Why?, you ask?
   1. When you actually decide to click on “Search” you really DON’T end up having a choice in the matter, because the “Australia Post Website” check box is auto-ticked when the page has reloaded with the search results! Oh Oh!
   2. It’s a waste of a control to begin with! The same thing could be easily achieved with one button which toggles through the selections. I.e. starts off as “Select all options” then changes to “De-select all options” upon click… However…
   3. There is NO need for the control at all since there is NO other option/area to search from. I.e. If there was “Australia Post Website” and “Australia Post PO Box Search”, etc., then it would make sense — however, there is no other option!
3. The “Exact Phrase” check box control is USELESS in all formats of the word! In theory, the “Exact phrase” should let you search for the term “test” instead of the term test. What this ultimately means is that in reality, “Exact Phrase” should only find the search query if it exists EXACTLY in that format, and not part of other words, or as part of a phrase, etc. The only problem with this is that selecting “Exact Phrase” does NOT change the result set; in essence, returning the SAME number of results as well as in the same order! Yay for happy searching — Not!
4. Clicking “Show search options >>” reveals two fields/controls which are apparently meant to help the user whilst searching but not be enough to warrant the name “Advanced Search”. When you click this link, two new fields pop down; a) Format, and b) Modified. Fair enough, you say. They are letting the user choose what type of file format to search; i.e. PDF, Word, etc. as well as the ‘age’ of the document(s) in question or when they were last updated. So what’s the problem here? Let’s take a peek!


Search Results - Modified drop-down

Wow! That’s probably the best word to describe this drop-down. Sure, Australia Post must feel great giving thier users so many options to choose from, but on what planet would you be from if you need THAT many options in sorting last modified periods? Surely, a) “Anytime”, b) Past 24 hours, c) Past week, d) Past month, and e) Past year – would suffice? No? Granularity of options is something worth your time as an Information architect or Website designer/developer investing in! The more options you give the user that they don’t necessarily need or will never use, the more they have to think. The experience should not make them think! Just give them results, and quick!

5. Don’t even get me started on the “Advanced Search” link! Let’s just say that it’s a little more advanced than what an “advanced search” needs to be. So much so that a PhD in Comp. Science would definitely help! I mean for Pete’s sake, there is a field called “Custom query” which lets you, quote “Create a query using search operators (and, or, not, near, quotes and parenthesis) and system fields.” unquote! WHAT THA?!?! Sure, I may get it, hell you might even get it as a developer or designer, but your average Joe who might need just that little bit more input into his or her search would most likely freak out! Take it off PLEASE! I’m not searching the CIA Central Repository here, people!

3. In conclusion…

Okay, so I must admit at this point in time that I’m getting a little bit more critical and more importantly a touch “harsher” in my blogging and reviews — but I think it’s important to look at problems like these that normal web browsers would AND DO encounter on a day-to-day basis surfing the Interweb! So hopefully you have picked up a few pointers from this blog post that will help you with your upcoming search page design/re-design. Remember, these are above all just some ideas of what not to do, but the field is huge! Make sure you get people with limited Internet experience to trial all software you create (if possible!) but more importantly, keep in mind some of these ideas for next time and I’m sure your users will thank you!

Thanks for comin’ back guys. Please leave your comments or critisisms below – and be sure to Subscribe to the RSS feed so you can keep up-to-date on all the latest goss and posts from Elastique Web Design Blog. Till next time, Cheb.

We are  going to start this week by tackling the issue web designers (and developers) for that matter always face at some stage in their careers; a loss of creative juices. Sometimes losing your creative juices can’t come at a worst time; i.e. you have an appointment to go through a concept with your boss in 1 hour and you haven’t started! Oh Oh!

So let’s get going and look at a couple of ways which have helped me get my creative juices flowing in the past.

Web design inspiration: Getting your groove back…

1. Look around you for inspiration

Where we live, work, eat, sleep and more has a lot to offer in terms of inspiration. Whether it be the retro ‘Astro Boy’ poster on your wall or pattern-infused bed sheets – look around you and you will find something that will get your visual and creative juices flowing. Next time you are on a trip in the car or on a bus/train, look around you. Signage, foliage, Zebra-stripes and more can help.

2. Check out web design galleries

Web design galleries have been shown to offer tons of inspiration. Galleries like: CSS Remix, CSS Mania, CSS Drive, CSS Elite, CSS Beauty, CSS Vault, CSS Import, Screenfluent, Screenalicio.us, We Love WP, Design Snack, Web Creme, Best Web Gallery and more showcase some exceptional design work which will definitely give you a bit of an edge when designing your own websites.

3. Visit your local record store

You may think this is a bit left-field, but there have been numerous times when I have rummaged through a record store for inspiration. Record stores hold a lot of design inspiration in the form of CD/DVD album art. I have found that many alternative/rock bands have cool album art – generally not a physical representation of the band, but a graphical or uber-cool concept art. Here are some examples of cool album art that can offer plenty of design inspiration.

We shot the moon album art

Joint effort album art

James Blunt - All the lost souls album art

Dashboard Confessional - The shade of poison trees album art

4. Visit an art gallery or museum

Art galleries are a great place to find inspiration. Whether it be a painting, or a statue of a 15th-century water creature – but above all, the buildings themselves! – as they say, don’t knock it till you’ve tried it!

Denver Art Museum

5. Buy some books

Books are always great for inspiration – even non design-based books! Anything from the spine of the book to the front or back cover can provide inspiration – however, actual books based on designs are great too.

Some of the best books I’ve read/found to help with inspiration include:

6. Check out other designer’s work

This is an important one… There is nothing like looking at your peers’ designs for inspiration. Start with sites like Deviant Art and  Threadless – both design communities which are constantly updated with heaps, and I mean heaps of design and other forms of inspiration.

7. Take some photographs of interesting objects and textures

Next time you’re out on a walk or driving around with mates, keep a camera handy. It doesn’t have to be a $900 SLR or anything like that – just anything which is capable of taking, ahh, photos! This is an important step in getting your groove back because you just never know what you come across that offers some sort/form of inspiration. It could be as simple as graffiti which gets those juices flowing, or maybe the sun setting above green pastures. Seriously – what do you have to lose? Try it!

8. Walk around a thrifty or antique store

You know those beaten-down stores that you might have to travel 20km or miles to get to? Yup, those stores that only seem to invite in old(er), men or women – or in certain cases, maybe your mum (or dad, for that matter) seeking that something special. Perhaps a dog-eared special edition of a novel which you cannot find anywhere else, or maybe that Tibetan-inspired lamp. Rummage through these stores for ideas – you will never know how much visual ‘gold’ they store until you walk into one.

As they say, one person’s  trash, is another man’s treasure. If you don’t want to buy something, at least take a notepad and a pencil, or perhaps a camera and take happy snaps… As long as the shop owner doesn’t mind, that is!

9. Plan out your designs by creating wireframes and prototypes

I feel that when I have a mental blank and can’t come up with any design goodness, i mockup a few ideas around grid-based designs. Axure or Microsoft Visio are great tools to do this on.

Just remember, designs don’t always start out in Photoshop (or whatever you use!). Great designs have a back-story; a skelaton, per say. Start by laying down the basic foundations – i.e. logotype on the top left, search/login on the top right, navigation, sub-navigation, content area and footer – and you will find you are half way there. Simple ideas such as effects on hovers, etc. will guide your design juices into the right direction. Combine that with some imagery and a bit of flair, and you’re suddenly the main actor in ‘How Stella Got Her Groove Back II’.

10. Check out other types of media for inspiration

Turn on the TV, check out the local newspaper – heck, even listen to the radio. You will most likely see or hear something that will get you off the beaten track. I find magazines and newspapers have plenty of inspiration. Something as simple as a telephone advert in a newspaper can give you ideas about your next gig. It’s that simple. I know it sounds like something every designer shoud know – but apparently some designers believe that the only medium they can seek an oracle on is the ‘net. Reality check, anyone?

So there you go guys – another one bites the dust. I will hopefully have a bit more time on my hands to draft up some more inspiration but for now sign up to the RSS Feed for more news and articles. Till next time, C.

I’m back and it’s time to blog again. Today we are going to kick things off by talking about Project Management; What is it, methodologies involved and breaking down the life cycle. In this, part 1, we will be dissecting the first two phases: Project Initiation and Project Planning. Hang around for part 2, which will finalise the phases with Project execution and control, and Project closure.

So without further ado, let’s kick things off.

What is Project Management?

Put simply, project management is the discipline of planning, leading, monitoring and organizing a team and resources in order to effectively bring about the successful completion of a project based on predefined budget, time, quality, scope and resources allocated.

What is the project management life cycle?

That’s a question I get asked quite a lot when consulting with firms on project management and procedural process management alike. In theory, the project management life cycle is dependant on the industry, the methodology used by the manager and other factors – however, there are generally four stages of the project management life cycle. These include Project Initiation, Project Planning, Project execution and control, and Project closure. Let’s take a look at the first two:

1. Project Initiation

In kicking off a project,  the scope of the project is considered very important. Depending on the scenario and the work environment, a project manager is usually chosen with a number of pre-selected team members whose skills the company believes will meet the objectives required to be completed for the project to be successful. However, there are times when the project manager also has the oppurtunity to select his/her team, or just has to settle with who ever is free to be resourced at that time; (generally what happens in the Sydney Web Design and general web design industry).

It is at this stage of the game that the tools required or methodologies which are to be followed (for example PRINCE 2) are selected.

Some documents you should expect as a project manager to complete or work on include:

• Project Charter/Definition
  • This will be a document containing a statement of the scope (the total work needed to complete a project), the projects’ objectives and a listing of team members involved in the project.
• Business Plan
  • A plan of the business goals and how they are going to be achieved – whether short term or long term. I.e. drop legacy systems, etc.

2. Project Planning

The second phase of project management, the planning phase is one of the most important phases. Planning a project correctly can truly mean the difference between failure and success!

Project management planning IDE’s and applications such as Microsoft Project will help you to lay out your project in WBS format. WBS stands for Work Breakdown Structure; an important, principal project management tool which help you to structure a project in a way to define groups of work to be done.

For example, generally speaking a project working off the general SDLC (Software development life cycle) would probably be laid out in the following tree-line structure:

1. Planning
2. Analysis & Information Architecture
3. Design
4. Implementation/development
5. Support/Quality Assurance/Launch

What WBS allows you to control is everything from the subordinate costs for each task as well as materials needed and resources to allocate the work to. In essence, what you see above will obviously then be broken down into smaller, objective-based tasks; hence the ‘breakdown’.

if you are interesed in getting more acquainted the Work Breakdown Structure, head over to another article discussing the Critical Path Method of Project Management.

So there you go guys! Keep clicking around for part 2 which will talk more about project planning and the last two phases of the project management life cycle – as well as more exciting blogging coming up soon!

Don’t forget to Subscribe to our RSS feed for more content as soon as it gets posted!

Thanks for reading, C2.0

Thank you all for the lovely comments and feedback I have been receiving! I thought I’d take a bit of a change from the normal tutorials and/or reference articles for one post and go through just some online (as well as offline) advertising I really like.
I hope that these ads will inspire you to create great designs or inspire you to think a little bit outside the box; because that is what makes them impressive to me. Not only that – but great web designers achieve design inspiration from the world around them, and more importantly, other great design; whether it’s a web page or billboard.

Online advertising as well as other forms are great for igniting that creative spark you may need to get you through those rough times!

Feel free to drop me a comment and let me know what you think of them or head over to Ads of the World for more.

Bandaid – Sweat Proof

Cheb’s thoughts: Awesome concept and art direction.

What is the ad trying to portray? That Bandaid’s are so sweat-proof that they are being used for a undercover bust!

Rating: 5/5

Bic Shaver

Cheb’s thoughts: This ad might not make sense to everyone, but regardless, still a memorable one! Great marketing ploy to connect two product segments.

What is the ad trying to portray? Bic make shavers, but they also make those notable Bic pens. Appearing as a ‘running gag’ over multiple pages, the man has suddenly looks ‘well shaven’!

Rating: 3.5/5 (Not everyone will get the ‘Bic also makes pens’ bit!)

Brisbane Council – Boy Meets Girl & Short Story

Cheb’s thoughts: The first one is a ‘Romeo and Juliet’ classic, followed by a ‘Lord of the Rings’ style ad. Great direction and Photoshop work but the idea is heavily overdone.

What is the ad trying to portray? If you worked for Brisbane Council you would actually have time to read the books/novels rather than having to hear the ‘two second’ intro, plot and conclusion in one.

Rating: 4/5

Comedy Central – The chair

Cheb’s thoughts: Another running gag, this one is a crowd-pleaser. Smart, easy on the eyes, and effective – it sells the Comedy Channel!

What is the ad trying to portray? This one is a funny one. The first page shows two pins on a chair; classic school-boy trick on a teacher! A few pages later, it get’s funnier, with the pins now spot-on where it is going to really hurt the person who is going to sit on the chair! – Hilarious to think about.

Basically, it is saying that there is funny, then there is funny! – I.e. Comedy Central funny!

Rating: 5/5

Ford Expedition – Rearview camera Kitten and Tricycle

Cheb’s thoughts: Another set from Ford. Great direction and even better retouching. I like!

What is the ad trying to portray? The rear view camera on the Ford Expedition is so good that small things like a cat or kitten, and a child on a tricycle are now huge comparatively.

Rating: 4.5/5 (Some people may think this is a little misleading!) [Note: I stress "some"]

Gardena – Quite Mower

Cheb’s thoughts: Cool, simple post-production work. Good use of white space.

What is the ad trying to portray? Gardena lawn mowers are so quiet that not only are they mowing the lawn, but they are also silencing the ‘lawn’ or the sound frequency, from higher to silent in the areas that are freshly cut!

Rating: 4/5

Nestle Kit-Kat – Have a break…

Cheb’s thoughts: Another great use of white space as well as needing to use nothing more visually than the product’s logotype/tag line and the product itself.

What is the ad trying to portray? Simple! a pair of Kit-Kat’s setup in the ‘Pause’ position, as you would normally see on a audio player, etc. It is simply saying pause your life, take a break, and have a Kit-Kat!

Rating: 5/5

Olympus Zoom – Koala (Australia)

Cheb’s thoughts: Great post-production and Photoshop work.

What is the ad trying to portray? Olympus binoculars and more importantly their zoom-factor is so good, that the object you are viewing; in this case a Koala will appear ‘right before your eyes’, or again, in this case, ON the binoculars! In this actual ad, it appears as though the Koala has been catapulted into tourist’s face!

Rating: 5/5

Pain without borders – Cambodia

Cheb’s thoughts: Great 3D rendering, animation, and post-production work

What is the ad trying to portray? Pain in Cambodia is a continuous cycle. There seems to always be grief and suffering and it is shown clearly by the revolving belt.

Rating: 5/5

Pedestrian Council of Australia – Don’t Speed

Cheb’s thoughts: Great concept, direction and implementation.

What is the ad trying to portray? Another simple one. The crossing itself has become the jail cell for the ‘purpotretor’ – who we can only imagine has ran over someone whilst speeding and as a result of his actions has been sentenced. This obviously is more of a concept rather than a real case – but is a reality of what is possible if you speed.

Great use of ambiance and everyday scenarios.

Rating: 5/5

Rolling Stone – Steve

Cheb’s thoughts: Cool idea. Simple, but unfortunately places a little too much emphasis on the object and not as much on the product itself.

What is the ad trying to portray? The masked-man in this ad, Steve, can now benefit from Rolling Stone’s guide to restaurants, cinemas, books, etc and does not have to waste time downloading at work’s expense!

Rating: 3.5/5

Surf -White Nurse

Cheb’s thoughts: Excellent direction! Love the nurse’s facial expression and the doctor’s looking so ‘deep in thought’ only adds realism.

What is the ad trying to portray? Surf leaves your whites looking so white that you can be used as a X-Ray light screen and save your hospital electricity bills! ;p

Rating: 5/5

Vegemite – Cricket car

Cheb’s thoughts: Finally, another nice ambient shot with great post-production and Photoshop effects to boot.

What is the ad trying to portray? Vegemite, an Australian icon, is known to have vitamins which support growth and strength. Obviously the ad is targeted for an Australian audience, and lovers of Cricket.

The ad is trying to say that the Australian side must have had thier Vegemite before the game, because they have so much strength that the shot flew out of the stadium; shown in the background!

Rating: 4.5/5

So there you go guys, another design inspiration post! Feel free to share this post with a friend and subscribe to our RSS feed for further posts.

Till next time, Cheb.

I’ve been playing with glow effects lately for an upcoming website redesign, and I’ve been noticing quite a bit of work being done with Photoshop’s pen tool and cool lighting effects, so I figured I’d share some introduction to the pen tool itself as well as a glow/lighting technique which can be used in many, many ways with you guys. Sit back, relax, and enjoy another Photoshop tutorial.

Just as a sneak peak, this is what we are going to be creating…

Okay, Let’s start from the top!

If you’ve never used the pen tool in Photoshop before, you are definitely missing out. The pen tool is great for working with vectors as well as creative bezier curves.

Considering the pen tool in itself is usually classed as a intermediate/advanced tool in Photoshop, we will just touch up on the basics so you can get going with this tutorial.

The Pen Tool

The Pen tool has the following five options:

1. The Pen tool is mostly likely going to be the main tool you use. The ‘Pen Tool’ allows you to create straight lines and curves that make up most your paths.
2. The Freeform Pen tool is designed to let you create paths quickly by just drawing freehand with the mouse. The main downside is that it’s hard to create accurate paths and especially curves due to the nature of drawing with a mouse.
3. The Add Anchor Point Tool allows you to insert additional anchor points into your path, basically splitting a line segment into two. This helps you when you have already started a curve but you want to convert this into a more complex shape.
4. The Delete Anchor Point Tool removes anchor points from your path. What happens as you remove an anchor point is that the anchors on either side of the removed anchor join up to form one longer line segment, as if you have just snapped them into a single line. This tool helps you when you have too many anchor points on your path.
5. The Convert Point Tool allows you to convert a smooth anchor point to a corner anchor point, and convert a corner anchor point into a smooth one.

Even though that was a gentle introduction to the pen tool; today, we will mainly work with the Pen tool itself – so create a new document, 460×460 and let’s go! Try to create the following easy curves and lines by following the simple steps.

If you can get these down-pat, it’ll make the next part easy as anything! NB: I have created a little compass to help you with the angles of the curves. :0) Good luck!

If you have made it this far, I’m assuming that you can now make a straight line, a simple curve, and take a curve a little bit further and create a wave of sorts! Well done..

Okay, let’s create a new document, 460×460 and set background colour to black, #000000. Before we get kicking, let’s make sure we have some settings where they need to be.

Firstly, when you click the pen tool or press P on your keyboard you should see the preceding options on the top of your screen. Make sure you select the second option of the three ‘squares’ – the ‘Paths’ option highlighted in green above. Then make sure that ‘Pen tool’ is selected, which should be on by default anyway. Finally, click on the down-ward arrow after the custom shape icon; the star-looking icon. This buttom (down-ward arrow) is tool settings, and as you can see there is a ‘Rubber Band’ option.

What’s the Rubber Band option for?

The Rubber Band option is used to help show you where the curve is heading and how it’s looking before you click to set it on the next segment or anchor. This is a good option for beginners because it helps to show you where the path will go next. The Rubber Band option might be hard to begin with, because even when you are done with a curve, the line just ‘follows’ you. Click escape, ESC, on your keyboard when you are done with a curve and that will get rid of the stalker!

Just a little tip – when you are done with paths and this effect, and you want to draw shapes, make sure you select the first of the three squares, or ‘Shape Layers’ and not ‘Paths’. Obviously we can keep ‘Paths’ on for now because we need this option.

So back to your 460×460 canvas with a black background.

Making sure to incorporate a new layer for each object, draw three objects on the canvas, separating them across the canvas if you can. We want to draw what we have just learnt; a straight line, a curve and a wave.

Don’t worry about the foreground colour for now because we will apply layer styles later to dress each one up. So obviously, create a new layer, call it ‘straight line’ or something, draw the straight line and then create a new layer for the curve, and another for the wave. If done right, you should see something like below.

If that’s what you see on your screen, well done! Let’s keep going.

Click the brush tool and select a soft round brush, 5 pixels in size – or if you have a later version of Photoshop, simply select the brush tool, (press B), and then right click on the canvas and change the ‘Master Diameter’ to 5px and leave hardness at 0% (obviously! it’s soft, right!). Select white, or #FFFFFF [thanks Hank!] for the foreground colour for now so we can straight away see a result, then click back into the pen tool.

This is the fun part! You might be wondering why we setup the brush? Well worry no longer, we are about to find out why!

[flashvideo filename="http://www.cheb.com.au/wp-content/uploads/2008/04/Untitled.flv" /]

Okay, let’s recap.

If you right click on the paths you should see a ‘Stroke Path’. What this will do is just what it says; Stroke the path you have made using the option you tell it to. Because we edited brush settings beforehand, we choose ‘Brush’ and make sure we keep ‘Simulate Pressure’ ticked. After that, you’ll want to right click again and ‘Delete Path’ because we now have a stroked layer in its place and don’t need the ‘guide’ anymore!

What exactly is simulate pressure?

Simulate pressure simply gives the curve a more realistic stroke. It does this by tapering-off the ends of the curve/line as if the pressure has started off light, and then eased-off on the end of the curve. Trust me, you want to keep this selected – it makes everything look much better!

Okay, if you followed the video, you should now have something like below.

Cool hah? Okay, let’s get some glowing happening.

If you apply the following Layer effects to your now-stroked paths, your glow should start forming.

When you select the above layer styles; if the paths are all on one layer (even though we talked about splitting them up before), as an example, should start looking something like this:

Cool hah?

Quick Tip 2.0

If you want to make your life easier, you can click the “New Style” button as seen in the above Layer style selection screens; immediatly under ‘Cancel’. This will let you clone all the settings that are open on the current Layer style screen to be used on another layer/path, etc. When you want to re-use the settings, go to: ‘Layer > Layer Style > Blending Options’, click on the ‘Styles’ tab, on top of ‘Drop Shadow’, and ‘Inner Shadow’, etc – and then select your new style from the list; press ‘OK’ and you’re done!

So there you go! Experiment with your curve, brush master diameter and type, and also your lighting (fill/layer effects) and you could come up with something like below…

So there you go people, hope you learnt something about the pen tool today and some effects you can create using stroke paths.

Enjoy and drop a comment if you liked the tutorial or you need something explained – or feel free to share it with your mates. Get on the RSS Feed to keep up to date about when I next post!

Thanks for reading, Cheb.

No, really – What makes a great website?

That really is the million dollar question. Many people have tried to tie this down to mitigating factors – but at the end of the day, in my opinion – a great website is one which meets the following rules:

Content

Content is easy to find

It’s simple – if a user can’t find information they are looking for, they have no reason to be on your site. You need to make sure content is easy to find; and in a variety of ways. For example, on Cheb 2.0, you can search the site for any keyword which will return a list of matching articles/posts, or you can click on ‘Archives‘ menu here on Elastique’s blog to show every article posted sorted by date. Further to that, there is a tag cloud to search by keyword or a direct link to each month with the number of posts that were published during that month.

You might be wondering why I have left that as a way to search for posts? Well, in essence it was a really easy decision. Not only does it just add another form of search – but there are times when monthly archives make sense. For example, if a website regular was to go on holidays for 2 weeks in one month and then come back to your website next month, all they want to see is what they missed out on – and this is where monthly-archiving achieves a sense of purpose.

Besides, my reporting/stats definitely show people are using it! 172 uniques can’t be wrong, right?

All in all, make sure you take every step you can possible to make sure the user experience is a good one; allowing them to find content easily will definitely help that endeavour.

Original and fresh content that brings people back

Elastique has lots of RSS subscribers. I’m a huge advocate of RSS feeds! It means people can stay in touch with your website/blog/online endeavour and not have to worry about constantly reloading for new content. On the flip-side, it’s that new content that keeps people coming back. Whether or not they actually physically click on your site to see it, or read it through their RSS; they are still a visitor and they still have to be tracked!

Google itself considers the freshness of a link a massive importance when determining PageRank and relevance. Make sure you set yourself a blogging/posting/editing schedule and follow it to the best of your ability! SEO-wise, make sure you keep your homepage fresh and beaming with new content – but importantly, do not neglect your inner pages as well.

When I say inner pages, I don’t mean to go back and worry about a blog post you did 10 months ago; we’re talking about your ‘About’ page, or your ‘Services’ page! Keeping those integral pages fresh makes sure: 1) they don’t fall into supplemental results, and 2) Google and other search engines show you some love for those pages too!

Aesthetics/Look and feel

The website is physically appealing to look at

Let’s face it – the only reason people still visit UseIt – Jakob’s usability portal is because of his tremendous advise. No one is going there to admire his website design!

Unless you are an online giant who already has a user-base that will never deplete, i.e. Google, (who when you think about it has great website design because it’s fit for purpose) – you really need to make sure you look into your website design. It doesn’t have to be glitzy and glow; just appealing to look at.

I mean you might have people looking at the screen whilst browsing your site or blog for more than 5 minutes on end (or you hope, anyway!). Do you want them to not come back because they found the site looked a little too 1998?

I’ve seen numerous websites my friends have set up with an amazing idea, or great content that have simply given way due to the in-assurances that come along with badly-designed websites.

Things are where the user expects them to be

This is an important one. If you can’t get your website to look ‘amazing’ – meet the user half way and at least promote a sense of structure and conformity. You need to make sure you set out your page elements to be where the user expects to see them. Unless you are going for an ‘outlandish’ theme or look which you are trying to get noticed for [i.e. Cheb 2.0] – make sure you take into consideration what I’m going to call the ’6 section grid model for website layout’.

As you can see to the right [click to maximise], web users are now confortable with the following grid on many websites. Unless you are trying to break the Interweb apart [laughs] – make sure your logo is on the top-most left section of the website. Same goes for your site search (if any) and top-level navigation.

You might be thinking – but why doesn’t Cheb 2.0 have navigation directly to the right of the logo? Obviously that’s not the point I’m trying to make. My navigation is easily recognisable, as well as still sticking to the top right section of the page. Please keep in mind these grids are only meant to be a guide and are not meant to be followed to the ‘tee’.

As long as content is easy to find, sections are split into bite-sized chunks of similarly-grouped information, and your content area is the most-prominent section of your layout, you should be good to go!

Consistency in colours and scheme

Make sure you try to keep everything consistent! Colours, headings, everything! Sometimes plugins, and other things like Google ads might not help you because they only allow you to change certain bits of detail. Don’t let that stop you from making sure everything that is in your power is consistent. There’s nothing worse than 43.5 different types of link styles. You don’t want one link to have an underline, one not!

Consistency above all means that users find it easier to connect to your website and also get more a feel for how everything works and what stands for what – e.g. links.

User-centered

Usability and accessibility is practiced

This one is important for many reasons. Check that you have taken adequate steps to enhance the usability and accessibility of your website. If you have forgotten the difference between accessibility and usability, check out ‘10 reasons to justify a website redesign‘. I will be blogging in more detail about accessibility more than anything else in a future post – but for now, a little teaser:

Make sure you check how your website, and more importantly, links – look to someone who suffers from varying degrees of colour blindness.

For example, the thumbnail on the left shows how Cheb 2.0 looks to someone suffering from Protanopia (Red-Green colour blindness).

You might think that checking things like that are ‘way too left-field’ – but something as simple as this can be checked in 10 seconds and can mean the difference between someone with colour-blindness not being able to distinguish between your linked content and non-linked content! You still thinking it’s not worth it?

If there was anything I could do to give everyone equal chance of viewing my content/website or what I had to offer – then of course I’m going to do everything in my power to achieve that!

Look carefully at the link colour on “Continue reading Facebook launches chat toolbar. Now they’re talking!”. Notice how it’s already changed from the real, default colour that non-colour blind people should make out?

The user always has an opportunity to right their wrongs

Make sure there is always a way out for the user. A top navigation, side navigation, search and links back home are great players in this field. No matter how good your website is, there will always be users who get lost along the way. Depending on the type of site you are running, you might want to try the Hansel and Gretel tactics of ‘breadcrumbs’. Whatever you choose, make sure the user has ways to right any wrongs they create along the way getting them off-track!

Meaningful file names

This isn’t only great for SEO; it works wonders for the user experience. The address http://www.cheb.com.au/what-makes-a-great-website/ is a lot better than http://www.cheb.com.au/index.php?pageid=283&level=2. I mean it’s not rocket science! Make your URL’s as easy to follow as possible. I should know what the link is about before I even click it! Cloaking or hiding information in strange URL’s kill the user experience and kill user-confidence in your website. Don’t do it!

Site architecture

Logical site structure

Make sure your website structure makes sense. Top-down, there should be a logical flow. The header should come first, followed by navigation (if not already part of your header section), followed by the content with any sidebars or side-navigation, and ultimately followed by the footer of the page.

Footers are just as important as headers. a good footer helps the user determine if the page has fully loaded. If the user doesn’t see what they are used to seeing at the base of your page, they should know that the page has not fully loaded yet; bet you didn’t think about that one!

Folksonomy and taxonomy

Tag your content as much as you can. Tagged content means related content. Try to relate articles wherever you can. It doesn’t have to be a ‘Related articles’ or ‘related posts’ section. It could be as easy as linking the user to relevant articles/web pages based on the current content of the page. Don’t just link-out for the fun of it – or to get more hits!

The way you classify and connect your information is just as important as the information itself! Keep that in mind when you are writing your next article or designing your upcoming website.

Purpose

At the end of the day, if there is no purpose to your website, then it won’t survive for long. Find a niche if you can and tackle it. if you are dealing with something that is ‘way beyond your marker’ or something which is totally hard to place yourself in; whether it be ‘Web design’ or ‘Get rich quick schemes’; the process is the same: find a reason to bring visitors back for me! Whether it is super-cool, fresh, relevant content, or a cool flash game that people just can’t get enough of!

Everything you create online should have an ultimate purpose to succeed!

Tracking and reporting

Finally, great websites learn from their mistakes! Use tools such as Google Analytics to help you determine popular and not-so-popular sections of your website. See if you can get down to the reason why ‘x’ is not as popular as ‘y’.

Good webmasters compare pages that work and don’t work and will simply weed-out or unpublish something which just isn’t pulling in the visitors as it did before. Great webmasters/designers will isolate the page and find out WHY it is failing.

Did you recently put some plugins such as text-ads or any other plugins which may have affected that page? Is there even a way to reach that particular page from other prominent sections of your website?

Put it this way: articles which you may have written 12 months ago, may become tomorrow’s most popular article online! History can and does repeat itself. What was last year’s news may, for whatever reason become popular again. Do not unpublish articles or remove pages simply because ‘they are getting too old’ or ‘you are running out of space’. Get more space!

There you go guys – another one bites the dust. Hopefully these articles/tutorials are hoping you achieve the best you can out of your website and online experience. Please digg/stumble this post if you enjoyed it and subscribe to the RSS feed to keep updated.

Content Is King

We’ve all heard the saying before – but how many of us actually believe it? 9/10 times, the reason visitors come back is good content. It could mean the difference between a one-time viewer and a subscriber to your blog. Make sure your content is clear, and well written. More importantly, find out which writing style you want to tackle and stick with it – whether it be informative, educative, personal, or friendly – you will find your writing style can and does bring visitors back time after time. Well written content adds credibility to your list of ‘reasons to come back to this blog/site’. The most important thing that I find most people forget is the whole notion of target audience. In most circumstances, you should try to make sure your content is accessible to search engines – i.e. internal linking, well-structured blog posts (header, section, content, etc) and sure, sometimes you may change your writing style to ‘help push’ the search engine result up; but the main thing to remember is to write your content for people first, search engines second! In essence, you need to make sure that your content is understandable to humans. A good example of this is in one blog post/article – trying to link the user to a related topic:

The two most-used blog writing techniques/methods

The SEO/search engine bot friendly approach:

Example A … More info on Search engine optimization here.

Sure, you might think the quicker you get the link across the better, right? Wrong! Firstly, that’s not only incorrect linking, but means nothing to the viewer! In Example A, What is the article going to be about? Will it be relevant to what they want to read? Is there a chance you are just trying to spam them into a click? Too many choices in the viewer’s mind = bad start! It means a) potentially missing out on a link-out to content on those all important internal pages, as well as b) It’s not helping your SEO one bit! (Well, okay, maybe one bit!) Let’s look at another alternative…

The human-friendly & SEO/search engine bot friendly approach:

Example B … It’s really not that hard to get Search engine optimization right, if you take your time. Feel free to check out a previous article on the topics of SEO and backlinks. or better yet, Example C … If you take your time with it, It’s really not that hard to get Search engine optimization right! If backlinks and their affect on SEO tickle your fancy, check out this previous article on the topic.

Now we’re talking! Let’s review Example B! With Example B, the first thing that is awesome is that we have wrapped up the previous paragraph nicely. So you are coming down to the end of your post; that’s the best way to wrap things up! You basically say something along the lines of: ‘and as you can see, it’s easy to ….” or “finally, it’s clear that a is better than b…” – by doing that, it gives you a great launching pad into another article – which ultimately means the viewer doesn’t stop reading! Moving on, we have provided ourself with not one, but two (hopefully internal) links! The first link, ‘Search engine optimization‘ could easily link to our SEO tag or category pages!? Google loves that!!! The second link ‘previous article’ can then direct the user to the actual article! Cool ayh? We can even go one better! Example C goes one step further and then some! By re-thinking what you are trying to link to, as well as the current flow of your article/blog post you can come across not only sounding more professional, but boost your SEO-power as well! Let’s collect our thoughts on the uber Example C: a) As unimportant as you might think it is, by simply re-wording the fragment, we have created a sense of ‘inspiration’ with our writing style, and that always helps to keep readers interested in what you have to say! b) The first link ‘Search engine optimization’, just like before, can lead us to the blog’s tag or category page on the topic. This is crazy for your SEO (in the good way!) as it leads on to every other post, which we’d hope would be related content! Not only that, it means (unless you have disallowed them in your robots.txt file), Googlebot and other Search engine robots, have just crawled all those other posts as well! Wicked! c) The second link, ‘backlinks and their affect on SEO’ is an important one! Let’s think about it logically – we humans type very weird things into search engines – and believe it or not, looking through my logs, I have been on the receiving end of 93 unique hits for that exact phrase typed into Google! What I’m trying to say is that it is fairly easy to make it into high SERP’s in search engines like Google and Yahoo! The best way to do that is to afford yourself some key terms which link out; both, encouraging users to click – and at the same time, fulfilling thier click-through – i.e. getting them to some place meaningful, not tricking them for your benefit! In wrapping up the second link of Example C, ‘backlinks and their affect on SEO’, we can see we have got three great, connected keywords: backlinks, affect, SEO. It’s easy to see how all that can mean inbound traffic from search engines! And you didn’t even have to try hard! c) Lastly, the final link ‘this previous article’ can either be the same link as ‘backlinks and their affect on SEO’ or, if the second link has taken the user to another section of the blog/site discussing SEO and what affects it, then the final link can, and really should be the actual link to the previous article. Gosh, I nearly confused myself there! In simple terms – both links can go to the same place, or not! it’s really up to you; the best part is you have another link to play with! However, as you can see, the paragraph says: ‘check out this previous article on the topic’ – hence, logically, it should take the user to that article. Please don’t get ‘shifty’ and do something else! You will possibly lose a potential subscriber/reader and probably do some harm to your search engine rankings.

Closing statements

So there you have it! Putting it all together might be a little crazy at first – but if you follow these simple steps to success; It might be slow at first, but you should start to notice small changes in your search engine results position (SERP). Just stick at it, take it one day at a time, and remember, you don’t have to be a billion dollar corporation to make it into Google! All it takes is some thought and determination. Subscribe to the RSS feed for more updates and/or Stumbleupon/digg this page (bookmark button, below) if you enjoyed it! Thanks for your company!