Our Top Ten Tips for Web Site design

We are always being asked what goes into building a web site. For those who don’t do this for a living it can be a daunting task. However, it doesn’t have to be; in many cases, it can be quite simple. Especially when dealing with a client who is looking for a simple and effective way to advertise their products or services.

You don’t need to be a programmer or experienced web designer to successfully design a site. Whether you decide to build the site yourself, or hire someone more skilled to do it for you, you will need an understanding of basic web design concepts. This includes being able to answer some basic questions and possibly even have a concept design – even if it’s hand drawn on a scrap piece of paper.

That’s where this article will help. So, sit back, buckle up, and hang on for the ride.

Number One – Give Purpose

“What is the purpose of my site?” Is this for a business to showcase its goods and services? Is this a personal blog? Is this a site for family members to keep in touch with one another? This question should always be in the back of your mind as it guides and shapes the entire site.

Number Two – Know Your Audience

“Who is my target audience?” This should be a no-brainer. For a business, you should already know who your target audience is and how to market to them. This takes a lot of the pressure off of the design team – or yourself. Knowing who your target audience is allows you to choose images and concepts with a little more ease.

Number Three – Cutting the Fat

“How many pages do I need to get my message across?” Note we said, “need” not “want”. Some people confuse the two. More often than not, many pages can be combined under a single idea or concept.

In most cases, depending on the need, a company who offers many products and/or services tends to give a page per item or service. But there are times that this approach can be more confusing and muddle the site’s message. In cases like this, it’s best to have a page devoted to products with brief descriptions and a few selected images showcasing either use of product(s) or satisfaction of product(s). You can then devote separate pages to the services offered using the same images and brief descriptions. This gives the appearance of organization while not having excess clutter on the pages.

Number Four – I Need What?

“Which pages do I actually need?” Regardless of your business’ size, the following are needed: The Home page, a Products and/or Services page, an About Us page, possibly a News page (can be useful for highlighting press releases or what’s new in the company), and a Contact page.

In the previous section, we discussed how easy it is to overwhelm a site by adding pages devoted to each product or services; however, for larger scale businesses it’s almost a necessity. For instance: you can break down different types of products and/or services into pages defining each in greater detail keeping similar products/services together in a combined page(s).

Number Five – It’s So Flashy!

“Do I really need glitzy?” No. You really don’t. More often than not, excess glitz detracts from the appeal of the site; it can even affect page load times causing a poor experience of your site. With the development of constantly changing web standards, it’s best to play it safe. There are still different types of glitz that can make a site memorable without having to load players and extra plug-ins. With the newer standards of HTML5 and mobile browsing, one can use all manner of “treatments” to a web page without too much hassle or affecting load times.

Number Six – It Does What?

“What kind of functionality am I looking for on my page(s)?” As we discussed, it’s not necessary to go glitzy, but there are some “treatments” that can be done to enhance the end user experience, such as Image Sliders, News Tickers, Animated Menus, Image Rotators, etc. With some well placed treatments, styled appropriately, one could really do some wonderful things for a web site without detracting from the user experience.

We’ve provides some links at the bottom of the article to the techniques mentioned in this section.

Number Seven – “Four Score and Seven Years Ago…”

“What kind of content do I need?” Well, that’s entirely up to you. Looking back on our discussion, it greatly depends on what your purpose is. One important point you may want to consider: NEVER, under any circumstance, should you use copyrighted content without either expressed permission or proper citation from its owner/creator. On the flip side of that, use content that won’t entirely bore your audience. Trim unnecessary content. Be quick and to the point while not omitting much needed facts.

Number Eight – “Zoom! Zoom! (Courtesy of Mazda)”

“What can I do to make it load faster?” What we tend to forget is that people want interesting content and they want it now.

As we discussed previously, several factors cause web sites to load slowly. One area that is often overlooked is the use of images. Using High-Resolution images, while looks great, takes too much time to load. You can still have high quality images without the excess size. As most designers know, there are several image tools available that have the ability to resize images appropriately for web use. Meaning you can save the image to the appropriate resolution/size without sacrificing the image(s) quality.

Number Nine – Call Me, Please….

“How should I setup a contact form?” Contact forms are great to have. But, sometimes people get carried away with the “required information” to be collected. Many people/companies want to know too much information, especially if all they want is to ask a single question that may or may not lead to a potential sale.

The main things you need to know are:
1. Name. It’s always good to know who you’re contacting.
2. Company Name (optional – but good to know if this is for business or personal)
3. Number to contact
4. Return Email Address.
5. How did you hear about us? – every now and again, it’s good to know how they found you.
6. Question/Comments – you at least need to know WHY they want to speak with someone.

That’s the bare minimum you need. Anything else is an annoyance, and people will get frustrated and leave if you require too much information.

Number Ten – Looks Fabulous!

“How should I make it look?” Take a moment to think this through logically. Google some of your competitors; see how they market their products and services. You’re not looking to take their designs, but more how they have their pages laid out. Does the layout make sense? Is the site easy to use? Would you go there again and again? What is appealing about it? What does it need? What would you do differently?

Take these ideas and jot them down on a piece of paper. Then, on another sheet of paper, start to sketch out the design based on what you’ve learned. Start thinking about borders, colors, image placement, minimized but necessary content, functionality, etc – keeping in mind the helpful hints we’ve been discussing.

Understanding these concepts should help lay down the basics for your design. Once you’ve sketched out a page or two try your hand at designing the layout with colors and other images. You might even try the use of templates or style sheets.

However, if you feel that you’d be better off having the design done by the professionals (330.208.2625), you now have all the information you’d need to be an informed and integral part of your site’s design process.

Thanks for your interest in Probe Technologies and our services!

Links

Web Site Treatments

• Image Sliders, http://nivo.dev7studios.com/
• News Tickers, http://www.mioplanet.com/rsc/newsticker_javascript.htm
• Animated Menus (Kwicks Menu), http://www.kriesi.at/wp-content/extra_data/kwicks_tutorial/kwicks_final.html
• Image Rotators (Zander Labs), http://www.alohatechsupport.net/examples/image-rotator/image-rotator.html

Web Site Templates

• 960px Grid Template, http://3.7designs.co/blog/2007/11/960px-photoshop-grid-template/
• 27 Must-Have Starter Kits For Web Designers, http://www.hongkiat.com/blog/27-must-have-starter-kits-for-web-designers

Web Design Tools

• GIMP, http://www.gimp.org/
• Editing Tools, http://www.coffeecup.com/