Chapter 9 - Layout and Interface
Layout and Interface
Now that we have gotten through all that boring, but important, stuff, lets actually(yes, actually) start to design your page. The first step in designing your page is to design an interface, and then we will add all of the content later.
What is an interface?
An interface is the navigational system of your page. If is how your audience gets around. Therefore, it is critical that you have a well designed interface, or your viewer will get lost, and ultimitly, leave sooner then they would have if you could find their around. Before you start making graphics, adding tables to your page, you have to decide what type of interface you will use. Remember, web design is a process, and if you skip a step, your final product WILL be worse then it would have been if you went through the whole process. Also, this will, in the long run, save you time.
What are the main types of interfaces?
There are many different types of interfaces, and if you are looking for them, you could be surprised by the variety that you can see. I have classified them into 4 catagories - gun, folder, sidebar, frames, and misc. navigation objects. Many times in design, parts of all of these are used in design, so it is important to know what your options are. For example, amazon uses folder, frames, and misc navigation objects.
Gun: This is the most common type of interface. It is used on my personal page, plus many other great sites. This interface incorperates a menu going down the left side of the page, and something going across the top - like a banner. It looks like this:
This layout is nice because it looks great, plus the menu will always be in the same place. The only problem is that because of the sidebar, you have less space for content.
Folder: This covers any type of top navigation. There are tabs, or buttons for the main topics. Sometimes, there are subtopics for each highlighted topic below the tabs. This is used widely by companies that have a lot of information, such as: Amazon, Motly Fool, and many more to name a few. Here is what it looks like.
This is an awesome layout for any site, and is very professional looking. The only con is you don’t have much space for anything besides the menu - you can’t add affiliates down the column like in the gun.
Side-bars: This is any type of navigational system that incorperates the menu at the side of the page. This is a very common type of interface, although a lot of the time it is more like a gun. This is what it looks like.
You also can use DHTML to make menus scroll out - like in the Windows menu. A pro is that you can include more then just links in the bar. Because it probably goes to the bottom of the page, you can add other things - like a search box. The only con is that there is less page width to work with.
Misc. Navigation Objects
These are misc. navigation objects that people use on their pages. Sometimes, these are used alone, but a lot of the time, they are used with the main types of interface I mentioned earlier. For example, my page has a folder, sidebar, pathname, and bottom text links, all used together. That said, lets look at some of misc. navigation objects.
Pathname: (Ex: Home :: Tutorials :: Paint Shop Pro (PSP) :: Mac OS Text) This is a very important type of navigation. I would recommend using it on every page. It works perfect for the tree style of content structure. Here are some common dividers you can use: ::, >>, :, >, -, and there are many more. Highly recommended.
Pop-Down Menu: This is very nice because it doesn’t take up much space. It can also fit a lot of information. Here is how to make one.
|
The select tells it is a pull down menu. After each option tag, you will add what you want each row to say. The part you add to “value” will be the link. You can change all of the parts in red, but make sure if you change the select tag name, you have to change all the others parts of the script with the same name, or it won’t work.
|
Bottom Menu: This is probably the most simple, but it is a nice addition to a page. It is just a group of text links at the bottom of your page, so people don’t have to scroll to the top to go somewhere. Here is what it might look like.
Finally! We are done talking, and ready to start building. Really! The first step in building a web page is creating a page templete.
< Previous Page | Index | Next Page > |