1. Myweb-cuber

2. Silverlight-cuber

3. Excellentbiz

4. Simplicity

5. Elegantdesign

6. Simpletext

7. Scrolllist-cuber

8. Uniweb

9. Pixelcolors

10. Designlab

11. ebusiness

12. Qualityweb

13. Optimaldesign

14. Simplemedia

15. Highbusiness

16. Ultimateweb

17. Greeny

18. Cleanfolio

19. Sideliner

20. Ecoforest

A lot of techniques have been introduced recently where you use thinning r thickening of the fonts; now, you can even access an array of fonts that you would like for your page. The color setting of your choice is available at your disposal as well.

A “Times New Roman”, 14 sized heading is enough to give your page the impression that it’s going to be all dry. What should you do?

Have you tried the more funky approach where you use a combo of both big and small sized fonts and use the features such as fading out the bigger one and using it as the background? Well, that’s not just what you can do, there’s a lot more than that. Keep reading to find out more.

Let’s assume you have a name such as Dreamtemplate.com, and you have no clue how to bring readers to your site. What can you possibly do? Yeah, I hear you going on with the regular acronym usage and having it put up large and bolded as the background and use the website name as the overlapping text with a smaller text. Nice attempt, but that’s plainly just not what viewers what to see.

How about using a little different approach; overlapping has become quite a norm. How about if you use the acronyms big and bolded and place them on the left side and use the long words, that is, the website name right next to it in small font? Or you could have them placed vertically facing each other. Here’s another funky way, just add a little more spice to the first approach. Make the acronym in Italics, and have it followed by the website name. Keep both of them in the same size.

Techniques for Overlapping

There are four ways you can use while trying to use the overlapping approach.
1. Placement: If the small text is overlapping the bigger text then it shall be read prior to the big one. However, if the text is placed on the bottom right then the big text shall be read first.
2. Relative Weight is the amount of bold and size you add to a certain text. If the big one is not bolded then it wouldn’t be read first.
3. Voice refers to the color scheme and type of font you use; it tells the reader of your aesthetic sense.
4. Interaction is a blend of the first three. How well the text is placed and which text has been bolded and what colors have you used.

Overlapping has gained a lot of popularity in recent times, but you should know the exact color and placement in order to emphasize the right word or text with your viewers.

Think about those people who are most prone to staying at home and using the internet for the company. Probably, between 20 to 30 % of them are disabled in some form. You need to take this into account when you are creating your web pages. Actually, in Britain there is a law stating that any web design created there has to take the disabled into account and make the pages’ user friendly for those with sight or hearing impairments. A similar act is in place in the USA. That’s the “508 Act”. Now knowing about it and being able to set your web design up to meet those requirements needs a little know how.

First you need to look at what kinds of disabilities the users might be facing.

The Visually Impaired

These people might not be but totally blind or might be for instants have color blindness.
1. So don’t use Red buttons.
2. Use large fonts not tiny little ones.

Now just as you were saying oh this is impossible you need to take a deep breath and say thanks to the W3C, who are the World Wide Web Consortium. They have created a list of standard practices and guidelines for the internet together with a range of tools you can use for your accessibility design.

 An additional source for you is WAVE where you can see the actual set up of a web page with the icons in place. If your web page is already set up, you can also check it at this web site by entering the URL, and it will check it for you.
 
Color Blindness
 

Color blindness problems on your page can be picked out by the Color Blindness Simulator. This can also be done by Color Oracle. These tests are done online and show any difficulties that disabled people might encounter.

Understanding the Legal Aspect of Disability

You need to understand that although your country might not yet have a law in place dealing with this aspect it is something that is coming more to the façade all over the world and its better to deal with it early and make it known to your clients (Who will think you very knowledgeable) By point these kinds of items out to them, you will be showing that you are far sighted in their interests as well. You do not want them missing out on about 25 % of their possible clientele. The tools to do so are available to use so take the step and use them and at the same time make it a selling point to your clients.
 I have a friend who has a hearing impairment. To say the very least of it, she is deaf. As such she faced a huge handicap with many websites that deal in video. To enable her to “hear” she has installed a program on her computer, which translates speech into the text. If, however, the option was there on each web site to read the text in place of having to “Listen” certain misconceptions would be eliminated.

It’s something to think about. According to the survey done by the Disability Center in Denmark up to 25 % of the people on the internet have some kind of disability they are coping with. Do you want to miss 25 % of your audience?

Layout

Maybe it should be the layout? This is your website foundation, the building blocks of any website. Don’t get carried away with placement of things or worry about colors just yet. Rather think of it in black and white and use wireframes to sort out how it will work. The flow is all important. With the use of wireframes, you can use place holders before entering any photos or text.
Leave plenty of space around things to create the illusion of elegance. Do not fill up the page. This makes it busy. There is nothing more irritating than seeing a web design that has the writing crammed right against the side and optimized to 1024 so you have to open up the whole browser to actually read what is said.

It is crucial not to annoy the customer.

Typeface

Once you have your layout planned you can look at what kind of typeface you are going to be using. Here you will be looking at several factors. Clear cut lines are elegant.  By the use of sizing you will be displaying the importance to show the reader subconsciously what to click on. You are sending subliminal messages to the customer. Size your fonts and sometimes use caps to show the headings or subheadings.

It’s very important to make it easy to read so don’t use obscure fonts. Many of them aren’t picked by some browsers.  Color of text is also important. It needs to stand out from the background.

Color scheme

Once you have decided on these components, you have a way of putting your basics in place.  Color scheme of the web design now comes to the fore.

When deciding on what color you intend to use as the background and what color fonts you will be using, you can experiment with it a little.  You need to decide what audience you are trying to attract. Is it young, is it old? People in their teens will go for one type of color while the 40 to 50 group might be into another genre. While the 60 and above group will be more into the placid scene.

Subject matter will also play an important role in your deciding on the color. It is not what you like that matters. You need to look at it from the view of an outsider as to what will suit the audience you are trying to attract. There are several web sites available that can help you with color selection.

Design Elements

Your final important ingredient is the right kind of Design Elements. When using design elements it is important to remember your end product and what you hope to achieve. While you can have fun with textures and the rest, try keeping it to the original simple elegant flow of the design. Pay attention to the little things and spend as much time on the detail of the small as the large. They do get noticed. The entire design needs to work with all four of the important components of the design. Get one wrong and the whole lot will be skewered.

With the necessity for redesigning a site, here is a complete guide which details all aspects of redesigning a website.

Time for a change?

Take a look at the list below, and if these are making clear and perfect sense, then it is time to redesign.

While outmoded code and programming techniques are an obvious reason to redesign your website, there are others.

Frames. Frames have not been used in web design since around 2000.  They are to limited in scope and complex to update.  Though the odd iFrame is ok, if your site is designed predominantly around frames, then it could be time to think about redesign.

Page intros. Intro pages kind of went out with the ark a while ago.  Some sites still use them to a degree, but generally now a flash or audio based intro page is a little cheesy, and can be considered a complete waste of time for many websites.  If you take this one step further, they are annoyance to visitors who have to wait for the orchestra to stop playing before they can get to the part of a website everybody loves- the content.  Maybe if you have an intro, it’s time to clear out the cheese?

Content. Content is King, and in the current age of web design, it has to be updated regularly to stay relevant.  If a site’s content has not been changed for a while, they soon start to look redundant and abandoned.   The easiest way to update a site is to build it on a CMS such as WordPress.  If your site is not structured around a CMS, it will be a pain to update it, especially if you are not experienced with coding.  Time for a redesign.

Flash sites. Websites constructed entirely in Flash are well and truly a thing of the past.  Many sites that appear to be Flash sites, are in all probability constructed in XML.  Great designs and effects can be had by implementing Flash, but its usability and SEO options, make it redundant.  Redesign your site for your own well being.

Tables. Tables were intended to be used to format data and were never intended for design.  However, some designers realised they did have potential for layout and started to use them for complex web designs.  Though tables were good for their time, they have had their day largely because of CSS.  If you site has been constructed using tables, then updating a site is not only difficult by time consuming.  You’d be better off redesigning it altogether using CSS.

Trendy elements. Though many sites have caught on to the web 2.0 design bug, and started putting in glossy buttons here, there, and everywhere, sooner or later they are going to start to look dated.  It is a good idea to have a long hard look at your site, and see if any of the trends are beginning to fade.  If it is, then it is probably time to make a few changes, for your site to stay current.

If your site is around two years old then you will probably not have to do anything to drastic to keep up with trends.  Every two years, a little tweaking will do the site a power of good.  Consider these as routine overhaul:

CMS? If you are not using a CMS then you should start straight away.  Modern web design is about simplicity, and CMS’s make it easy to modify and add content to a site.  Photo’s, text, and themes can be added or changed with a few mouse clicks.  Once you have a site built on a solid CMS such as WordPress, you never go back.

Nowhere on search engines? SEO companies find it harder work to get search engine robots to crawl through an older site, than with new CMS structured ones.  If you’ve had all the jazz done to the alt and meta tags, and are still at the bottom of the list on a Google search, its time for a change.

Part of your site is underperforming? If you are not achieving the conversions you are hoping for, or you feel some of your customers are going elsewhere, it could be time to think about redesigning your website.  The best way to track whether or not you are missing out on potential customers, is to use an analytics program to do this job.  This will show you at what point people are exiting from your site.  If it is a step along the path to a sale, then you need to look at this in detail to see if you can stop this from happening.  Time for a redesign.

Competitors redesigning? If your competitors have just invested in a redesign, then it may well be time for you to have one to.  Consider, users can use your competitors site which has improved navigation, a clearer, more up to date and relevant content featuring all the services and products that your company has, but are not featured on your outmoded site, and a nicer look and feel about it.  Or they can come to yours, spend ten minutes trying to find information, or indeed do anything constructive with the website.  Wonder which one they will pick?

The key to redesigning under these circumstances, is to take a look at your competitors site, and see if you can improve on the design, and then make the change.

A great advantage here, is that if you can improve the design that your competitors have, then they are unlikely to alter things as they have already invested in a redesign of their own.  Leaving your site, the pick of the bunch.

All this begs the question, “So what do I do now?”  Well sadly, it is not as straight forward as saying to a designer, “Give me a website and I’ll be back for breakfast.”  There is quite a lot of points to consider to ensure the redesign goes well.

What parts of your current design are working? Review your visitor comments and your analytics programs to see what parts of the site are performing how they should do.  If you can try and get someone who you know as never seen the site to give you an outside perspective.  This gives you a good basis for improvements.

What parts of your current design are not working? Once you have determined what is working the same process can be used to determine what is not.  This may sound like I have rewritten the last paragraph, but what I am talking about is the parts of the site that fail!  Once you have discovered these damaging elements, then you can change them.  Simple really.

Chop, change, edit, add. Print out your site map if you have one, or if not make a list of all the pages on the site.  This will give you an idea of the structure and content of your website.  From here try and decide if there are any pages that can be deleted, combined, or if you need new pages.

Blogs and galleries were not popular until most people started to have a broadband connection, and as for video, you could forget it with dial-up.  It is common for older sites to have pages such as these ones added to them in a redesign.  This could be as a result of new products or services you now have and want featured in the new design.

This whole process is very cleansing, and from it a new fresh redesigned website idea, should emerge.  Also consider:

What parts of the site attract visitors? This is an all important discovery for you to make.  Once you have thrown in all the direct traffic and search terms visitors are using into the melting pot, you can determine where they enter the site and at what point they are leaving it.  If there are important parts of the site they are not reaching, in comparison to other more popular websites, then you should focus on why this is and target the redesign accordingly.

New photos and images? The pictures you currently have on your website could well be ten years old.  Outdated images and their respective feel is one of the reasons for a redesign in the first place, so it maybe worth investing in new imagery to reflect the new you.  Though this can be expensive especially if custom pictures were used in the first instance, a new crop of photos to go with the new website just seems like common sense.

Also, you may want to reflect the company in a different light now it is 2009.  Changing the photos is a good way to do that.

New site, new image? The new site can also be a good time to reflect how the company has changed.  Of course it may not have changed, so your companies message and services will remain pretty much unaltered.  It is obviously, an important decision to be made, but changing the image in line with the redesign makes sense.

Consider these too.

As with designing new sites, many of the considerations are similar in redesigns.  The difference being that with the redesign analytic program data can also be used to hone the site to a target audience.  Screen resolutions and connections speeds should all be taken into consideration when redesigning.  You do not want to lose half your traffic because your new site is too sophisticated for their equipment.

The great thing about going through this process, is that it ultimately tells you if your website needs to be changed, tweaked, or is fine as it is.  It could be that if you already have a CMS structured site, you may just want to change or alter the theme.  This can breathe new life into a website, and it can be done at a very low cost.

If your site was not structured around a CMS, then a whole new makeover is called for.  Ensure sure your redesign is built around a good CMS such as WordPress, to make changes that much easier.

When implementing a redesign, there are certain elements to avoid.  These can damage the site’s reputation, and or damage the site from a search engine optimization perspective.

301 redirects. Ensure your new design features a 301(permanent redirect) for visitors and search engines if you are changing the URL for your site.  It may be necessary to change the URL either for SEO purposes, or because you are switching to a CMS.

Some redesigns just feature a link from the old site to the new one.  Though this is fine for visitors, it is not for search engines, and your new site could be penalized as a result.

If your site is using an apache server, you can setup the redirects in a . htaccess file.  If you are on a Windows server it is more complicated, but well worth the effort.  This way you can retain your SEO status.

Announce the redesign before you redesign. Many of your regular visitors maybe not take to the redesign straight away.  Remember they have been doing things a certain way for sometime, and are well into the groove of doing things on the old site.  Having to relearn to do the same things in a different way can be annoying to say the least.  By announcing the site is going to change, gives them time to prepare.  You could also run a feature about the new site, pointing out advantages, showing how the site will change, and may be provide a few tantalizing screenshots of the new site, just to fuel the imagination and build expectations.

After a while, the improvements of the new site will shine through, and your site will in all probability be well received.  Though some may carry a blast of nostalgia for the old site.

Choosing the designer. This aspect of the redesign can not be overstated in terms of importance.  Not only should it be someone with the experience of redesigning websites, but it should also be someone who understands the purpose of the website.  Finding the designer who has both these qualities may be harder than you imagine.  Not only have they got to tune into your business, but they must also understand your perspective to implement the important necessary features that you require of the site from a business or organizational view point.

From a technical point of view, they have to be able to cope with factors such as existing logins, and retaining functionality of the existing parts of the site that you want to keep.  Couple this with entirely new pages and transferring the whole lot to a CMS structure, and you can see this wonder person has their work cut out.

General rule of thumb here is to go with a designer that you feel is right.  This way it will be someone you can work with and someone who understands the nature of your business.  Never be afraid to speak to your mind, and ensure the parts of the old design you like are still there, if slightly tweaked.  Remember though, an experienced designer will be a fountain of knowledge when it comes to what works and what does not, so at least consider his or her points of view.

Redesigning a website is as almost a huge step as creating one in the first place.  It many ways it can be a harder task to achieve from a technical perspective, and can be an emotional process if you are attached to the existing site.  The benefits though, are considerable, as investing in a CMS structured site, will not only allow you to change or add content whenever you want to, but will also give you the capability to change the theme of the site with a mouse click or two.

This will save you money in the long run, and help you better understand your customer base.

If you have any tips on design or redesign, wont you share them with us?

To avoid this scenario that leads to a severe loss of finances and reputation, you have to make the structure and rules that are absent from an office environment.  When you said you wanted to be your own boss, you were more on the money than you thought.

This article will give you some useful pointers to make the most of your time, and get the structure in place to work.

To that end, defining your working hours is a very good step in the right direction.  So if you decide you are going to start work at 9am, get up, eat, shower and change and be at work on time.  Though there is something sweet about working in your pyjamas, it does not set the right tone for a day at your desk.

When you are working for yourself, the temptation to skip breaks and keep working is high, the logic behind it is that the more you work the more you get paid.  Skipping lunch is simply the way it is, and you have to work, work, and then work some more.  Research has shown however, you are far more productive if you take short breaks throughout the day, and by setting aside sometime for food will keep your energy levels up and your productivity higher.  Look at it this way, it is better to do thirty minutes high quality work, than an hour of distracted nonsense.

Once you have started getting to work on time, and you have a good working relationship with breaks, it is time to start thinking about how to plan your day.  Not just your day, but long term goals too.  It is always a good idea to plan long terms goals, as these help focus the shorter ones.  The key is realism, you are not going to expand the company into a multimillion dollar enterprise by the end of the second month, but you may have completed the web design for your third client.  This will naturally lead to your short term goals, like working on this project and that project.  When working on these, try and be specific about tasks, so going to research CSS code, or look for Ajax examples should be used rather than do this and do that.  It will help sharpen your focus.

So what next, well now you’re spending time on projects why not track how much time you are spending on each one.  This is where it gets interesting as there is a number of good applications that can do this for you.  This way you can better gauge how long similar projects are going to take.  Is it a very good habit both now and in the future.

Also by timing tasks and projects you can better evaluate you performance.  Often the results will surprise you.  To help keep focus, create to do lists and see how far you get through them after a days work.

To help you stay focused, it is important that you work on one task at a time.  Though multitasking has gone from being a buzz word to almost a doctrine, in terms of achieving something, the multitask ethic simply does not work as all you do is split your focus in half, and sometimes in half again.  By focusing on one task, you not only get it done, you also do a good job.

It is important that you eliminate distractions when you are working too.  There are several ideas you can introduce to do this.  The first is to start using an RSS reader if you do not already.  This way you will not waste time zooming around the web looking at your favourite blogs, as they will be coming to you.  Also, by putting the feeds into folders you will not waste time looking at non work related feeds during your day.

Another good way to eliminate distractions is to check email and twitter twice a day, rather than having them open all day long.  When they are, they will be a constant excuse not to do any work that requires any thought.  By checking them twice a day, it leaves your time free so you can get on with what is, let’s face it, real work.

The same principle also applies to email.  Most people have several different email accounts and you can bring them altogether by using Gmail.  You can also keep them in folders so you do not get confused.  It is by far a more efficient method than checking several different accounts to see what is what.

This is also a good idea for social media.  Twitter, Facebook, Flickr, all demand attention from you and keeping on top of them can be a real headache.  By using social media aggregators, you can update them more easily, and stay on top of what is going on in your industry very easily.  You can still use them to network for clients, and clients can still use them to keep in touch with you.

Setting up your work environment to suit you makes all the difference to the quality of your work.  When you come to plan your space, make sure you have everything you need within arms reach, and that you do not have to get out of the chair.  That being said, make sure the chair is comfortable, and that the mouse and keyboard is designed for this too.  RSI, or back pain will certainly hamper productivity.  Remember that searching for supplies or walking to the printer can waste a lot of your time.

As you no longer have to work in an environment where you were a slave to someone else’s rules, why not play your own music, or have the window open if it is a nice day.  The working world no longer has to be mundane or unpleasant.  Set the scene your way, and if you have your working environment as a pleasant one, then you will produce more work.

If you find yourself getting in a rut, or just not cutting it on a certain project for some reason, then remember you are not restricted to your office.  Go to a coffee shop that has a wi-fi connection, have a latte and go again.  It is as simple as that.

Freelancing can be a lonely world, so try and connect with other freelancers like you.  It is always good to have someone to fire questions at, and share ideas.  It is also good for sounding off at.

Also, it may well be worth outsourcing administrative and financial tasks.  The money spent will easily be regained by the extra hours you’ll be able to do working.

We feel this just about covers freelancing, but if you have any ideas, why not share them?

Can it be argued that web design is mirroring this trend?  Well with the development of new web technologies such as CSS and WordPress, the reverse effect seems to be true.  Both are praised at how easy they are to use, and to update.  This is an element that makes them so appealing to users.  Also, they are both well supported should any problems occur.

These though, are not websites in themselves, and CSS among other tools and applications, are making sites that are a lot more advanced in the sense of what they can do, than websites were ten years ago.  The concept of web design has changed enormously over the last ten years, mainly as a result of these technologies.

This is in part due to lots more ways of displaying content, and advances in databasing the content.  In short content management has advanced, and with this advance more features are now available.

This looks great on paper, as the more options the better the website, right?  Well think about it this way, what if there were so many features on the site, that it was too busy, like websites of ten years ago, would it not be like having too many fonts, or colors?

Many machines now have so many features, that they designers have run out of button space, and have had to make one button do several tasks.  On the surface this seems like no big deal, but when you need a thick manual to operate your car stereo, is this really a positive step?  Apart from switching between CD and radio, adjusting the volume and station, what else do you really need?  On/off maybe?

Websites, are encountering similar problems when it comes to displaying content.  The way in which a user uses the mouse can dictate how the content will appear.  In some cases, just by hovering the pointer over an object.  Is this a clever way to present information to the user, or just a sign that we are running out of space on our websites?

It is important to remember though, that websites are less like machines, and more like shops and books.  They either sell you something, or tell you about something.  Many do both.

Maybe this is the key difference between a website and a car stereo, is that where as the stereo has more features with each new design, a website has more content.  If you look at the new developments in web design, everything is or has become related to content, and where as the stereo designer has to work out how to make one button do four tasks, the web designer has to work out the best way to display four bits of related information to one product or feature of the website.

Sometimes, product design does not seem to feature the needs of the user, and as a result the product is awkward to use, and for many the frustrations caused by trying to use it, out weigh the pleasure of using it.

Perhaps it can be fair to say that the better web designers, like with fonts and colors, exercise restraint, common sense, and design websites with the user as priority, and this keeps the website tasteful.

Keep organized.  Rather than dropping in classes and id’s at random, try and keep things structured.  Declare generic items first, followed by the not so generic items, and keep to that pattern.  That way other developers are going to be able to follow the code, which is one of the great advantages of using CSS.

Title, sign, date.  Ensure that people know it was you that did the design.  This is helpful if another designer needs to clarify something with your design.  This is especially helpful with a template.

Template libraries are brilliant.  Once you have a good layout, strip out everything that is not generic to the template and file it.  It is pure madness to write every style sheet from scratch, so this will save you a lot of time for your designs.

Remember you can save variances on a theme by saving them in a certain way, two column layout, blog layout and so on and so fourth.  There are some good editing tools which will help you to do this.

Naming conventions are useful.  Good naming conventions can make a lot of difference when you come to modify the design.  The key here is to use generic names rather than what the element is.  So instead of .largefont, .title is far more a useful name.

This has far reaching scope when it comes to modifying designs, so think carefully about what you are calling them, and this will save you a lot of work in the future.

Avoid using underscores.  As backward compatibility is an issue with CSS that use underscores, try and form the habit of using hyphens instead.  If you do, you will save yourself a lot of modification work later on, trying to figure out why your code is not compatible with older versions of IE or Firefox.

Repeating yourself is to be avoided.  Always look to group elements where possible.  This saves time coding and compiling, and try to utilise the opportunities for short cuts too.

Optimize.  On the same theme try and cut down code wherever possible.  So group and employ shortcuts as above.  The fewer lines of code, the faster the page loads, it is as simple as that.  Loose what is unneeded, and remember that zero can just be stated without a unit.

Write for Gecko.  If you write your CSS design for Gecko browsers, tweaking for Webkit and IE will be easier than the other way round.  So make sure Gecko browsers work first before you do anything.

Use a validator.  If your CSS design is stuck, use a validator to find errors.  W3C has a free validator, and this will be a big help in getting your design back on track.

Keeping it clean.  By keeping browser specific CSS style sheets individual, and just use java script, server side code, or conditional comments when needed, will help you keep things clean and tidy.

These CSS tips for keeping your code well organised will not only help you write better code, but better templates too.  Your colleagues will also benefit from a tidier coding from you, and you will be better thought of as a designer.

You will find that projects are easier to work on with a little organisation, and you will be able to find the information you need faster for subsequent modifications.

Do not have a horizontal bar. We all know that mouse wheels do not run from left to right, so the rule has developed that content is shown on a page and never steps outside of this, at least left or right anyway. The logic is clear as the web rules are easy to follow and designed for users. Take a look at these websites however, as they have stepped outside the box on this one, and shown us a new way.

http://graphictherapy.com/index2.html

http://shoeguru.ca/products/shoes/mens/sports

Use a minimal number of font faces. This rule came about to keep web designs clean. Too many kinds of fonts made web design a little unfocused, and research showed that users preferred just having a few fonts rather than thirty or so. As all rules they are meant to be broken, so take a look at this.

http://www.linksla.com/

http://www.geoelementsdesign.com/

http://www.satsu.co.uk/

Do not use too many colors. Professionals push the boundaries of design, and many do it by breaking this rule. When it works, the design is a delight. When it doesn’t it is a bit of a mess, but we wont talk about that for now.

http://ma.tt/

http://travisisaacs.com/

Make the goal of your site obvious. This is a rule that is enforced among the web design community. Good reason again, but if you’re a small outfit, maybe you can use the element of intrigue to hook the user? Take a look

http://www.cerotreees.com/

http://www.thelastmixtape.com/

Navigation should be obvious. Another hard and fast rule and one that is there to be broken. The following designs show what can happen if you break this rule, and instead of using easy navigation you use intriguing design.

http://www.alvin-tang.com/

http://www.marciokogan.com/

Use different colors for background and text. Doesn’t always have to be this way, as a little imagination goes along way. Don’t be afraid at experimenting in breaking this rule

http://www.linksysbycisco.com/

http://www.bradcolbow.com/

Animation should never get in the way of content. Well it can be if the design fits it. Don’t put flash boxes or pop ups all over the place though. A little spider is enough

http://aba.bg/

Stick to web safe fonts. Though the idea is still in its infancy a few sites are now using fonts that were not considered web safe. It should be noted that until the site downloads completely, fonts may be shown differently to how the designer intended.

http://www.disenorama.com/

http://www.cactuslab.com/

Don’t have a splash/landing page. The reason you don’t have one is that Google doesn’t like it. They don’t really pull through on search engines, so indexing the site is that bit harder. They can look amazing though, so if the site your designing is not going to benefit from Google searches, then it could be an option.

http://www.gloss-postproduction.com/

http://www.issalondon.com/

The key to breaking the rules or if you prefer when it is ok to break the rules, is largely when the design calls for it. The designs featured here are bespoke, and obviously the creator was not afraid to take a risk.

How far you would get with a client and some of these designs remains to be seen. How you pitched the design I feel, would make all the difference.

Just a quick word in favour of the rules, they do by and large serve you well in web design, but like in all things design, do not be afraid to think outside the box.

The concept of doing all this though is a daunting one, and many believe that real thorough testing is an expensive process.  It can be, but as we saw in our previous article there are many tools around that can keep the cost of usability testing to a minimum.  As we know about five more tools that are cheap and easy to use, here is a rundown of them.

Google Website Optimiser.  This is a free to use tool and is a more advanced method of the A/B testing, where two web different web pages with the same purpose are ran simultaneously to different users to see how they convert.  The results are recorded for analysis.

The service Google offers is known as multivariate testing, and takes the A/B testing idea further by testing a multitude of variables in the same way as A/B testing.  This gives more accurate and precise data on a web page than just A/B testing.

To use it you submit different elements you want to Google, and they randomise them and present them to users.  They record the results so you know which element works best with users.

Click Heat is a free to use service which shows a heat map of clicks made on a website.  It works in the same way as heat maps used in eye tracking studies, but instead charts where a site was clicked.

It does have certain system requirements to use though, like PHP support and must be installed on a server.

Chalkmark, is a currently in beta format and is free to use.  It works by asking users to perform tasks that are set by you.  So you might ask for a user to register with the site.  The clicks a user performs are tracked and from this it is possible to gauge how easy it is for a user to complete them, and subsequently how good the navigation is on your site.

The only downside is that you have to find users to complete the tasks.  This should not be too difficult though, as all the tests are completed online.

Simple mouse tracking is another free tool and does exactly what it says on the tin and tracks mouse clicks on your site.  Like Click Heat it needs to run on a server and requires PHP support.

Silverback is an application for Mac users, and is a very good piece of usability testing software.  It requires no video equipment just an iSight camera, and the user is asked to say their thoughts out loud while performing certain tasks.  Everything that happens on the screen is recorded, and there is a feature which allows chapters to be inserted via a remote.  There is also space for note taking, which can also prove useful for when presenting results.

The whole thing costs $49.99 which is a fraction of the cost of creating a usability testing environment.

The tools and tips here have shown us that usability is not a scary concept, or an expensive one.  It has also shown, that unlike many web design concepts, you do not get what you pay for, and many good usability tools are free to use.

The trick is to choose the right tool for what you are hoping to discover, this way your site will be as good as it can be from a navigational perspective.