Web Design – “Think Outside the Box”
By Troy Fraser

 

So what does that exactly mean anyway when someone tells you to - “Think outside the Box?”

I’m sure most of you have heard this before and if you thought about the phrase closely it would most likely involve doing some thinking. Not just ordinary thinking, but thinking in the sense that isn’t so obvious. Essentially putting yourself into someone else’s shoes as they travel to you’re website to see how they will react, navigate and form a first time lasting impression.

 

As a web designer we are constantly faced with this everyday. With a market that is over saturated with skilled technical designers we have to constantly find ways to do things differently with; more imagination, more creativity, more efficiency and the use of new technological breakthroughs. I’m not saying that you or anyone who is building a website has to re invent the wheel. I’m just trying to say that when a web designer takes the time to go that extra mile to achieve originality then this is what separates the good designers from the ones who are not trying to evolve one’s skills.

 

There are some major rules a web designer should follow when designing a website, especially when it involves a company’s identity. It doesn’t matter what level you’re at as a designer, these are some basic rules and tips that you should follow as you progress. From that point onward you will start to develop your own set of guidelines and rules that you yourself follows and maybe if you’re the boss; the team that works for you.

 

Even if you’re not a web designer and you’re looking to have a web page built for your company, it is in your best interest to know, to educate yourself to the point where you can identify the simplest of web design mistakes.

 

1. Navigation – What is more frustrating than going to a website and all of a sudden you’re traveling through a black hole and the only way to get out of it is to close the web site? I cannot stand going to a website and not knowing within the first 3 seconds how I’m going to navigate to the information which I am seeking. Rule of thumb – it should only take you two clicks to get you where you’re going no more than three. You should always include a site map so in the event of a user feeling lost they can always see how the site is laid out by viewing a site map. Usually located in the footer or sometimes can be seen at the top of the page. This little tool will also make Search Engines happy when crawling your site.

 

2. Consistency – Keep everything consistent. Your layout, colors, headers, text, link float overs, should remain consistent throughout the site. If you make changes then make them subtle and not so drastic. For example, don’t use a font choice of Comic sans (In fact, you should never ever use that font and it should be put in the recycle bin.) in one area for a header then use Times New Roman in another. By keeping your pages consistent with each other it will ensure that the user will not feel like they went to another site and it also offers a large degree of professionalism to your website.

 

3. Clean Code – So your using a WYSIWIG (What you see is what you get.) editor and it’s looking after all the funky html and other code it throws in for you. Editors can be time savers and they can help you get the job done faster, but, you have to also take into consideration that other people may at one point work on the same pages you are creating. What happens if it takes a fellow employee longer to sort and sift through the code you created with a sloppy editor than it would if they created it from scratch? Doesn’t sound too efficient does it? Indent your code, insert comments and make sure that your source code looks are pretty as the page itself. Taking the time to make your code “legible” will save time in the long run and when and if you ever work in a team environment, it is almost essential to be implementing the same standards.

 

4. Validation – What is that? To design a website properly we have to make sure that we are following proper standards that will essentially make the website bullet proof. By validating your source code your are ensuring that you are following proper coding conventions and your website is up to snuff. It would be the same as building a home where you have so many building codes to follow and if you don’t you will find yourself doing renovations and/or repairs before you know it. W3C is also known as the World Wide Web Consoritorium where they have developed web standards for web designers alike to validate their code and get up to date news on industry standards and practices. When W3C can validate your website and it passes, then you know that the designer who built your website took the time to do it right the first time.

 

5. Animated Gifs – Please, please! I beg, DO NOT use animated gifs. Unless you’re breeding dogs then go ahead. When I go to a website that some people would label as “cute” it makes my eyes bleed. The poor dog running that never seems to get anywhere is cute the first time around but just so damn annoying every other time I see him. Animated gifs are the types of animations a first time web developer will put on their website. Anyone who claims to be a professional and their portfolio reeks of animated gifs, and you hire them to do your website, then I don’t feel one bit of pity. I’ll re design your website for you when you realize that you paid too much for something so lame. Oh, that running dog by the way, he is running away with your wallet

 

6. Research New Ideas – Don’t be afraid to look at someone else’s source code. Find out how they did it; see if they are following the “rules”. Learn from other people’s mistakes and absorb the ideas that draw you in. Some code banks offer some great ideas, some great tools to allow you to do things easier and offer a degree of interactivity to the user. Pick yourself up a book. For the first time web designer, I strongly recommend a basic HTML book along with a CSS book, Cascading Style Sheets.

 

As a web designer we are always trying to force ourselves into the user’s shoes. How will the website appear to them? What screen resolution are they using? What browser are they using? What connection speed will be best suited for viewing this website? Is the navigation confusing and more than 2-3 clicks away from any end point? What demographic will be viewing this website? There are so many questions that we have to ask ourselves in the run of any one project.

 

Being creative is not meant to be something negative. You might think that an off the wall idea is best kept to yourself in the event of getting laughed at, or embarrassed. If you are in that kind of atmosphere, then the atmosphere needs to change because web design is not supposed to ban new ideas, rather inspire creativity and originality. As a designer having regular brain storming sessions with yourself and/or with others in a small group can be very productive. This is just one exercise among many that can help inspire new ideas and help you sharpen your creative thinking skills. As kids we are full of imagination and dreams. As we get older we tend to keep to ourselves and lose that inspiration. Web designers are kids trapped in grown up bodies waiting to get out.

 

In conclusion, if we as designers acknowledge the basic rules of web design, strive for new heights with originality and creativity and put ourselves into the chair of the user who will interact with your creation – then you will not only be successful as a web designer – but you will gain a sense of accomplishment and pride in your work as others give back that “Wow Factor” after seeing their website for the first time.