Basic guidelines for designing organizational website

Electronic commerce has evidently effective for large and small companies. They have created advancement for enterprises. Eventually, electronic commerce have been a great help and it became a sole medium for companies to have business connection over the internet.


Creating a business-oriented e-commerce website is not a piece of cake. You need to have patience and perseverance as both programmer and designer. There should be escalation of steps and rules to be followed in order to be successful in designing it.


Neat and Clean but Attractive and Organized (Layout Design)


As for starters, this should be the first rule that a designer should implement. Yes, a website should be neat and clean. Just like any other interrelated things. But because it is an organizational website, it should not have extra things. Like unnecessary page elements and advertisements (banners, skyscrapers, etc.) A clean layout that uses a lot of white space enhances a site's looks. Try to keep the focus on your content, use a template for this. Use fonts that will be available on all computers to prevent your site looking messed up. A simple design layout makes it easier for you to build your website. The end result will be a website which your visitors will find easy to navigate and easy get whatever information they want. If your design look complicated - redesign and simplify it. Complicated design layout will not only make it harder for you to build your web pages, it may also confuse your visitors if your site is full of complicated mess of information. Be consistent throughout in your design approach. The background, color usage and text format should be carefully chosen and the screen layout for all your pages visibly consistent. Create a simple logo to identity your website. Have a captivating tag line somewhere with the header, and write an About Us page which describes the uniqueness of your website. These will leave an impression for your visitors to remember your website. Make a copyright statement at the bottom of you web pages. Have a clear color scheme based on the theme of your website. Choose carefully a set of colors you use for your background, text, border, tables and cells etc. The color scheme expresses the characters of your website and makes it unique and attractive. For ease of reading, the length of a text lines should not exceed certain width within the computer screen. To limit the length of a line of text, use indent text or use a table with the pre-set width. Long blocks of text passages can be tedious and strenuous to read. Try to use short sentences, short paragraphs and bulleted or numbered list form to break them up. The width of you web pages should preferably not exceed that of the computer screen. People viewing your site usually don’t mind scrolling up and down the screen; but will be annoyed when they have to scroll left and right. Font size: use larger size font; Bear in mind that some of your visitors may have poor eyesight; some may have partial impaired vision and some ordinary people who just can’t stand reading tiny script on the computer screen. he text color should contrast well with the background color to be easily read. Likewise, Background image or texture chosen should contrast well with the text color, so that it is easy to read on screen. It looks great on the screen and soothing to the eyes. But it is not recommended to use white text on a dark background. When somebody wants to print out your page for reference, it won't print because the background will not be printed; while the white text is printed on white paper, you see nothing. The images you put in a web page are not there just for decoration. They should be relevant and necessary to use as visual to help to convey the message, or serve to break a long and monotonous text messages. Limit the size of an image you insert in a web page. Large image takes longer time to display, and most visitors don’t like to wait too long to view a certain image. Choose your text and background colours carefully. A general rule is to use dark text against a light background. Remember to make the text large enough to be easily read. Keep your page layout neat and tidy and avoid using animations: they can be distracting and in some cases slow down the load time of your pages. Remember, the more complicated you make your pages, the more likely people will give up and click away: keep it simple. Make sure your pages can be viewed without the need to scroll horizontally across the screen. Vertical scrolling is acceptable however.

Easy Navigation


Navigation of links on your site plays a big role in determining the stickiness of your site (how long your visitor stays and explores your site). Ask yourself this, What do visitors do as soon as they open your site? They would probably read the content of the present page and then look around to find any other page that interests them. Ensure that the visitors get around navigating your website with ease. They should be able to find what they are looking for in quickly and get there. Use a menu or image map, a site map, arrows, links and buttons to provide direction to your visitors. Make sure the pages are interlinked for easy navigation. Links should be well organized, strategically placed and easy to detect by using appropriate colors. Use anchor links to facilitate navigation on the same page. Always check for any broken links and fix them. A clean layout and neat navigation and using a lot of white space for your site enhances its looks. Try to keep the focus on your content. That is why we recommend using dreamweaver templates for your site - all pages or a group of pages have one basic design and only the content varies - this way even if your site is a little distracting due to necessary effects, your design is noted once (hopefully with a appreciative eye :-) and then the visitor focused on the content automatically. Prepare your site navigation before designing to prevent cluttering up the site with forgotten links. If you have too many links then you should use drop-down menus or flyouts for your main topics. If you have Fireworks or Dreamweaver then macromedia drop-down menus are one of their most popular in-built "Behaviors". Otherwise you can use our own copy-paste code for drop-down menus in the article SmartWebby Drop-down Menus (This article is part of our Simple DHTML Guide a collection of copy-paste DHTML snippets written especially for designers). The navigation should be flexible enough to accommodate any amount of additional links in case you probably will be adding pages periodically. For this using drop-down menus or section home pages is a must. Keep your main links together as much as possible so that visitors can absorb them at one shot and know what your site conveys about your company. Check out how all our major links appear in our top navigation bar and all related section links are listed in the right hand side menu. If you like a graphic intensive site and find there is not much space for accommodating all your links, you can have a separate home (splash) page and all other pages as content pages. Thus your home page can have visual appeal and your inner content pages can have elaborate navigation structures while focusing on the content. Use your navigation space efficiently. Use short, clear and precise words in your links so that your visitors know what the corresponding page will contain. Make sure you check your site for Internet Explorer 5+, Mozilla Firefox 1.0, Opera 7.0 and Netscape Navigator 6+ as they constitute 95% of the worlds browsers.

Optimum Load Time

It is important to have a reasonably fast loading web site so that viewers are not made to wait for a long time and to accommodate users on slow internet connections. Search engine algorithms also do take into consideration your load time. Make sure your load time is low. For this you must: Minimize Graphics, Flash and scripts: They hugely increase your file size. Optimize your HTML & script code: Make sure that your site doesn't have any unwanted tags or unused scripts. Use Server Side Include (SSI) files where ever possible. SSI files once called from the web server reside in its cache so on subsequent requests they load faster. Design using nested tables instead of using cell merges and splits. Use separate tables where ever possible. Not designing for 100% height is better as if you use just one outer table, the web page is displayed only after the table is loaded fully. If many outer tables are present [you can have different tables for the header, content, footer, etc. the page displays the content of each table as soon as its elements are loaded. Keep the size of a web page small so that it will open up fast - preferably less than 10 seconds. If the page is too long, have too many items to load and slow to display, you should consider breaking it into smaller pages and link them up. Contents such as video, audio, flash animations etc. are huge in size. They will slow down the display of the page. If it takes too long for to load a page, the viewers might give up and leave. They also use up more of your bandwidth. As much as possible optimize heavy graphics, Flash files and scripts. In editors like fireworks and flash you can see the various options in the preview panel to reduce the sizes. See how popular web sites like google and yahoo have pages that are very small in size and thus load in seconds. Most fast loading sites have very simple designs. Take the hint! Complicated designs will slow down your pages. In case you find yourself having very long pages of content, break them down into separate sections and thus bring down the sizes of the individual pages. Basically try to make use of HTML as much as possible. Use CSS Styles for text links to make them as attractive as buttons.



Reference:

http://www.great-web-design-tips.com/
http://www.wickedinnovations.com/blog/?p=25
http://webhostph.com/web-design/
http://www.immediasite.com/Successful_Website_Tips.htm