Resources
Presented here are overviews, examples and links to tutorials covering many of the technologies involved in web development and design.
RESOURCES - INTERFACE DESIGN:
Data Architecture:
The first objective in the design of a commercial site is the identification and profiling of the target audience and the determination of what information needs to be conveyed and in what manner it will be presented.
Look and Feel:
Having determined the information architecture, the next step is the design of the site's look and feel. The visual impression should reflect the client's existing marketing and collateral materials as well as adhering to established branding policies. This ensures that visitors to the site will find the contact experience to be familiar and comfortable.
The Home Page:
Once the basic visual guidelines have been identified, it is time to focus on the "front" or "home" page. To a large degree, the layout of the initial page will be determined by the amount of drill-down that is expected and the ratio of static versus dynamic content to be presented. Static items reflect categories of data that are unlikely to change over time, while dynamic content changes often. For this reason online news sites push a lot of dynamic content to the front page in the form of headlines. In contrast, product-oriented sites, as exemplified by automobile and appliance manufacturers, tend to rely on offering a limited number of categories or product lines, knowing that interested visitors will drill down through the site to find the content they want.
Navigation:
It is the home page that establishes the navigation scheme on which users will rely as they make their way through the site. The primary categories of static content become buttons on the navigation panel that appears on every page. These buttons point to broadly defined bodies of content that encapsulate families of related data. A key element of good UI design is that a visitor should be able to jump to any of the major categories from any point on the site, and drill down to desired content from there.
The buttons that link the categories should appear in the same position on the page (relative to the top and left edges) everywhere throughout the site. When a visitor clicks on a button and the new page loads, the mouse-cursor should be directly over the same button, exactly where it was on the previous page.
The button on the top page of a category should be inactive (not linked) and should be in the "on" or "selected" state, if a mouse-over is part of the navigation scheme. On subsequent pages within that category, the button should still be in the "on" state, but should be linked to provide easy access back to the top level.
On each page there should be a minimum of three category indicators and two sub-level indicators. The category indicators should include the navigation button, the information bar in the top of the browser window and some form of indicator on the page itself. The secondary location hints should also use the browser window information bar and the page content.
If icons are used as part of navigation scheme, they should be based on generally familiar paradigms, so that visitors don't have to struggle to interpret their meaning. (That's right. The icons on this site are NOT particularly intuitive. I did it this way, why? Because I can!)
If images are used as part of navigation scheme, they MUST have "alt" tags to assist visitors with text-only browsers and conform with ADA standards.
There should be a text-based navigation panel on every page, preferably at the very bottom. This is more of a convenience or courtesy to visitors, so it needn't be prominently displayed.
A "home" button on every page is essential. Just making the client's logo a link to the home page is not sufficient.
Important Notes:
Cross-platform and cross-browser testing are mandatory. It does not serve the client well to design a whiz-bang site that fails to load or displays improperly on certain browser/platform combinations.
Finally, if the client adamantly insists on a "splash" page (a flawed notion in and of itself) with a 350k Flash animation, PLEASE include a "skip intro" button!
My B2B and B2C UI designs are found in the "Clients" section of this site.
The first objective in the design of a commercial site is the identification and profiling of the target audience and the determination of what information needs to be conveyed and in what manner it will be presented.
Look and Feel:
Having determined the information architecture, the next step is the design of the site's look and feel. The visual impression should reflect the client's existing marketing and collateral materials as well as adhering to established branding policies. This ensures that visitors to the site will find the contact experience to be familiar and comfortable.
The Home Page:
Once the basic visual guidelines have been identified, it is time to focus on the "front" or "home" page. To a large degree, the layout of the initial page will be determined by the amount of drill-down that is expected and the ratio of static versus dynamic content to be presented. Static items reflect categories of data that are unlikely to change over time, while dynamic content changes often. For this reason online news sites push a lot of dynamic content to the front page in the form of headlines. In contrast, product-oriented sites, as exemplified by automobile and appliance manufacturers, tend to rely on offering a limited number of categories or product lines, knowing that interested visitors will drill down through the site to find the content they want.
Navigation:
It is the home page that establishes the navigation scheme on which users will rely as they make their way through the site. The primary categories of static content become buttons on the navigation panel that appears on every page. These buttons point to broadly defined bodies of content that encapsulate families of related data. A key element of good UI design is that a visitor should be able to jump to any of the major categories from any point on the site, and drill down to desired content from there.
The buttons that link the categories should appear in the same position on the page (relative to the top and left edges) everywhere throughout the site. When a visitor clicks on a button and the new page loads, the mouse-cursor should be directly over the same button, exactly where it was on the previous page.
The button on the top page of a category should be inactive (not linked) and should be in the "on" or "selected" state, if a mouse-over is part of the navigation scheme. On subsequent pages within that category, the button should still be in the "on" state, but should be linked to provide easy access back to the top level.
On each page there should be a minimum of three category indicators and two sub-level indicators. The category indicators should include the navigation button, the information bar in the top of the browser window and some form of indicator on the page itself. The secondary location hints should also use the browser window information bar and the page content.
If icons are used as part of navigation scheme, they should be based on generally familiar paradigms, so that visitors don't have to struggle to interpret their meaning. (That's right. The icons on this site are NOT particularly intuitive. I did it this way, why? Because I can!)
If images are used as part of navigation scheme, they MUST have "alt" tags to assist visitors with text-only browsers and conform with ADA standards.
There should be a text-based navigation panel on every page, preferably at the very bottom. This is more of a convenience or courtesy to visitors, so it needn't be prominently displayed.
A "home" button on every page is essential. Just making the client's logo a link to the home page is not sufficient.
Important Notes:
Cross-platform and cross-browser testing are mandatory. It does not serve the client well to design a whiz-bang site that fails to load or displays improperly on certain browser/platform combinations.
Finally, if the client adamantly insists on a "splash" page (a flawed notion in and of itself) with a 350k Flash animation, PLEASE include a "skip intro" button!
My B2B and B2C UI designs are found in the "Clients" section of this site.