The book that we are using for my Web Design and Marketing Class. Also available for free on line (but a little harder to read) at http://www.webstyleguide.com/wsg3/index.html
Book design, news paper design all here standards that are well respected. Though web Standards are emerging, they are in the adolescent stage, still akward.
Site Design in Context
The World Wide Web
Your web Site does not exist in a vacuum. You cannot ignore the design norms of other sites. On the other hand, your site will succeed if your content is good. It will fail it you ignore Content and try to make an interface that is useable.
Enterprise Web Identity
If your organization is part of a larger organization, use the template they have so you have corporate identity. Your site should project a dear relationship to the major (operate site.
Page structure and Site Design
Web sites are abstractions; they only exist in our heads. What gives them the illusion of a site is the Common elements d the site. These make the template of the site. The following are Common elements that have been established:
Page Headers
Headers provide for site navigation, Search, and site identity. If the header is Consistent it will appear to be a site even if it comes from different technologies or locations.
Home link
The company logo should be in the left part of the header and link to the home page. If you do not have a logo, at least put a home link there since that is where people expect it.
Global Navigation
The header is where people expect to see how to navigate the site. You can put list of links or use tabs to give a metaphors of folders . The tabs should a 'you are here' type of navigation.
Breadcrumb Navigation
As part of the header, breadcrumbs give a path of how someone could get there from the main page.
Search
If your site has more than a few pages then search should be provided. Generally the search box is part of the header. Another good location is the left or right side columns.
Checkout Baskets, Online Shopping Carts
The standard that Amazon.com created for all commerce Sites, is for the checkout area to be located in the upper right of the Screen. Banners tend to be in the header so if you are not ad supported be careful to not put banner ad type of Content there. People tend to ignore it-
Scan Columns
Early web designers used the left and right edges of the page as Collins to put information. Now users expect to be finding navigational items there. These include links to other parts of the site as well as search engines.
Left or Right Scan Columns for Navigation?
It does not Matter as long as you are consistent what side your column is as long as it is consistent. Tradition puts it on the left.
Mailing Address and Contact Information
Contact information for your company should be displayed in a noticeable place on each page. The scan column is a good place for this.
Advertising and the Scan Column.
Users expect advertising in the scan column, Make sure your content does not look like advertisement or they well ignore it.
The Content Area
- Page titles – make sure that the title is not buried, Use and <h1> tag to make it stand out and so that search engines will grab it as important.
- Breadcrumb navigation – often small text just below the page title.
- Jump to top links – use if page content is long. Text is fine, small graphic arrow pointing up us good also.
- Rules – Make as unobtrusive as possible, use white space and ignore them if you have to.
- Dates – Publication and update dates should be posted at the top of the page on news/magazine style sites and at the bottom of the page on all others.
Page Footers
- Page author or company responsible for content
- Copyright statement
- Contact information (e-mail important)
- Links to related site
- Redundant navigation (important on long pages)
Page Templates
Page templates should be developed from the inside out. Most time will be spent on the inside pages so they need to be looking good for the site to look good.
Internal Page Templates
Provides:
- Global and local site navigation
- Design framework
- Graphic tone
Types of Internal Pages
Your site may have different templates to accommodate the different types of pages that will be used. There will be a consistent look to them however. Blogs or wikis may need a simplified template with less navigation to it. Others may need more room for the content so other parts may be stripped away to give more room for the application, graphic, table, etc.
Secondary Page Templates
Secondary pages should have a close relationship to the main template but accommodate the need for a subset of pages and provide a clear notification that you are on the subpages.
Navigation and Submenu pages
Submenu pages are affectively the home pages for the block of content in that area.
Alternate ‘Front Door’ or ‘Landing Pages’
To match an advertising campaign or some other project, there may be a need to put alternate pages up that people will go to. They should be similar in content to your main page but be customized for the need. They should offer clear global navigation to the site as well.
Department or Program Home Pages
If needed, department or program home pages should clearly show the relationship between the main site and it while hold its own identity.
The Home Page
Home pages should have four primary elements:
- Identity
- Navigation
- Timeliness, or content focus
- Tools, (search, directories)
While all good home pages have these, they are not in perfect balance of 25% each. Decide what is important to you and build your page accordingly. This will establish your priorities to the user.
Taglines
Unless you have one of the top 100 brands in the world there is a chance that people will not know who you are. Make sure to identify yourself with a tagline that explains who you are in very few words.
Home Page Content and ‘the Fold’
Since most users will be looking at your site on 19 to 22 inch monitors, the top 6 to7 vertical inches become the most important real estate of your site. This is ‘above the fold’ referring to a term used for print newspapers where top stories went above the fold of the newspaper. The maximum amount of links you should have in such an area is one per a square inch. This is a maximum not a recommendation of how many links you should have.
Dropdown Menus
While they allow you to put more navigation into small space, thought should be given to using dropdown menus. They hide content that will not be visible till the user clicks the menu as well may not be compatible will all browsers. JavaScript only code will not spider in search engines very well.
Topical Navigation Versus Path-Splitting
You may wish to divide your audience on the home page and give them a path that is important to their category.
Web Splash Pages or ‘Splash Screens’
Most useless words on the web –‘skip intro’. Splash pages do not add to the content of a site and are just ‘eye candy’. If they require a plug in they can be distracting if the user does not have it. Do not use them.
 | Simple Web Sites: Organizing Content-rich Web Sites into Simple Structures |
Posts
No comments:
Post a Comment