The Basics to Design


Navigations
Dead ends
Functionality
Accessibility

You will need to understand that unlike a book, a web page is an individual page. Someone may just view a single page of your page and not the entire site. Unlike the book, one would have to read it from the beginning to the end. Because the website uses hypertext links, people are able to jump from page to page that are interconnected or not. You will have to make sure that people know where they are and what the page is about at all times. So you must include things such as titles, date of update (so information they are viewing is not out of date), a link to atleast the main page, a form of navigation to move around, copyright information, author, etc.

When making a website, try to use only oen design template. If you use multiple designs for each page, the user will get confused. Generally, it is best to keep a consistent design throughout your pages. If you have a menu, place the menu in the same place throughout the site so people don't have to look for the menu on each and every page. You can have a different design for the master page or home page and then a consistent design throughout the rest of the site. So the home page's design can be quite different than the rest of the site's design. If you keep the same design, it will allow your viewers to have a easier way of navigation and they will know where to look for certain things such as author, links, copyright, privacy statement, last date of update, and so on. A site with multiple designs and templates will not work out as it will get too confusing and the user will get frustrated and exit the page.

The design of your page should be simple and not complex. The coding can be complex, but the layout and look should be simple. It should allow easy navigation to the user and it should allow them to find the information that they are looking for within minutes. Do not make a page where you can't read the text. That will just annoy the user and make them leave. Try to go for simplicity and not complexity. Make sure you are able to view and navigate the site easily because if you can't, then obviously your user won't be able to too.

Top

Navigations

Your navigation should be clear and consistent within your website. Make sure that they tell the user what kind of information is linked by giving a clear and to the point name for the link. You can have a set of navigations an every page and some sub navigations that allow the user to click to pages within the same catagory or group. Keep the links in the same place and color if you could. If the user are still on your site, the same navigation system will help them identify this and haveing a logo or your site name some where near the navigations will help them too.

If you have a lot of links and want to show them all, then you can use buttons where when mouse over a list of links drop down. Here is a picture of the navigation system from adobe.

Image taken from adobe.com on March 11, 2006.

so on mouseover, the links from that catagory will drop down. It is a great way to organize your links and especially if you have a large site. It allows you to have broad catagories at first and then expand upon those catagories. They also used the alt tag (the message in the yellow/white box) just in case if anyone was not able to see the navigation and also, it does provide the user with additional information that will take up a lot of space and make the design messy if placed directly on the page. So information in a little box, is another great way to tell the user about the link before they click on it so they will know where they are going and what will happen when mouseover in this case.

Throughout the adobe site, the navigation system was kept the same. It is located in the same spot too with all the same links in it. That is their main navigation system. After clicking on a link in their main navigation system, you will come to a page and on the left side, there is another type of navigation. It is the navigation for that section of the site, if you click a link on the main navigation system and not the sub, a new sub navigation will appear and it is special to that section of the site. Here's the sub navigation or sectional navigation of the adobe site.

Image taken fom adobe.com on March 11, 2006.

Top

Dead ends

Make sure that on every page of your site, there is a link back to the main/home page. If there is no link back to the home page or any other page then the viewer may be stuck there and if they entered your site on that page, then the rest of your website will not be viewed by them.

It is important to put important links on every page of your site so the viewer or user is able to browse around and not just see that one page.

Top

Functionality

A good site need to be functional. It needs to be functional when you create the site and it needs to be functional over a long period of time. Things that you will need to do for you site over a period of time is check if the links are still working, if the information on it is still up to date, and so on. Also, make sure that you have no dead links on a site because no one likes dead links especially if it is something important that they need.

The functionality of the site will also depend on if the user is able to find the information that they are looking for. Do not hide your links and parts of your site, make sure that there are links from page to page to access all the pages in your site. There might be different levels of links, but make sure that the user is able to get to the most important information within in the first or second level of links. For example, if they click on a first level link, then a whole bunch of new links come up, they should be able to find what they are looking for there or in the next set of links. If a user is not able to find the information they need and the important things, then they will leave and get frustrated and will never come back. Remember to make your links as clear as possible and that all the pages on your site is accessible.

Next to that, you will need to consider bandwidth. How long is the user going to wait for a page to load? The main page or home page of your website should generally load quickly so the user will see if they have came to the right site. Try to use a limited amount of images. If you have large images, try using a thumbnail and if the user is interested in that picture, give a link for them to click on to see the full size image. People are not going to sit around and wait five minutes for a page to load. In fact, the internet and computer is advancing to a point where the user expects the page to load within the first few seconds. They will not wait around for the page to load, people are impatient.

Let it is mentioned before, go for simplicity and not complexity. Try to use simple designs that people will understand and be able to use, don't try to make it so complex that one doesn't even know where they are. Simple is the way to go in web design.

If you want to make your site unique and special by using graphics and such, make sure that the user is able to navigate through. If you are using buttons and graphics, make sure the user can locate it and use it. If a navigation system cannot be spotted and seen, then the user will not be able to us it and therefore it will be a waste and your site will not be viewed.

Generally, it is best for a site to be simple and load fast, but if you are building a high-definition site and your audience won't mind waiting around, then try your best to build a high-definition site. But even if your trying to put hundreds of images on one page, still keep in mind that functionality is still key. No matter what kind of site you are building, make sure if functions or works properly and that all links work and all pages a accessible. The navigation should be easy enough for people to move around the site and keep a consistent design/template throughout.

Top

Accessibility

Once you lauch your site to the world wide web, anyone with a computer and internet will be able to view it and access it. Some users will have diabilities to your site. They might not be able to see the images or certain features will not work on their browser etc. So you will need to make sure that your site works on all kinds of browsers and not just specifically created and limited to a certain one. Also, using "alternate" (alt tag) in images will display information about the image if the image does not show. Usually images might limit a user who does not see image, but with the use of alternate text, the user will still obtain enough information from the image.

This is an example of alt tag in a image that is not showing up, but this image that we are using is not actually on the site so it won't show up anyways.

The code looks like this:
<img src="animage.jpg" width="400" height="50" alt="This is an example of alt tag in a image that is not showing up, but this image that we are using is not actually on the site so it won't show up anyways." border="1">

So above is an example of what the alt tag can do. The text in the picture is the alternate text. Please note that the above will not show up properly on browsers such as firefox because the image actually does not exist. So if it an actual image though but can't be displayed, the alt tag should work properly on all browser.

Copyright Brains That Work .
Theme by Pool theme design by Borja Fernandez. ^Top^