Advanced: Look Cool with a Graphical Interface

If you've been paying attention, you may have noticed that some web sites look cooler than others. One feature which can make a web site look "cool" is a graphical interface. An interface can be used to enclose and meter the presentation of content which makes up a web site, as well as creating an interesting mix of information and navigational control.

Consider some of the things you find appealing from the world around you. Why do they appeal to you? Chances are that if you are reading this you are sitting in front of a computer, what does that computer look like? If you could choose between two computers which were identical, but one was a particular color that you liked better which one would you choose? A web site is no different. You may have excellent information to present, but when you put it all together it looks boring or worse, confusing. If you could present a little information at a time and wrap it in a container that made people curious it might increase the likelihood that your visitors would read more of what you had to say.

This is where an interface can help. Creating an interface in the most basic sense involves conceptualizing a visual container and considering how you will present your information using that container. An interface can be large and complex with many decisions to be made during the creation process. Once an interface makes it into the "real world" it must have all of the ideas surrounding it worked out and implemented. Looking closely though, interfaces consist of some basic pieces, each of which can be broken down and clearly identified. In this issue we will examine the most visual piece on an interface and go into enough depth to give you something to get you up and running.

Table of Contents

Creating a shell
Make a logical division
Separate the pieces
Create a rough <TABLE>
Populate the <TABLE>
Final adjustments and considerations

Creating a shell

The most visual piece of an interface is its shell. This is the part that you see on the screen which is used to surround the text or content of a web site. In our example we will use an image of a floppy disk to build a very basic interface. The shell image can be created with a paint program (in our case we used Paint Shop Pro which is an excellent software package, but you could use something like Paint which is included with Windows, or any other program which is included with your computer.)

You can use an existing image, or you can create your interface shell from scratch. If you have a hard copy of what you want, then you will need either to scan it or to draw it within your graphics program. The first step then is to conceptualize something to create an interface with. The second step is to scan or render it in a paint program. Here is an example of a completed rendering that we will convert to an interface.

Make a logical division

Once you have the end target of the interface drawn then you need to section it off into the individual pieces which comprise it. What does this mean? Consider that our web page in this example is not just going to be an image of a disk, but rather will have some text, hyper links, forms, and images just like any other web page might. Because all of these elements exist independently of the disk image above we need to find a way to fit everything together. How are we going to do this? There are a few ways this could be accomplished, for example we could attempt to use DHTML and CSS positioning to "put" the web page over the top of the image, but then we'd risk incompatibility with various browsers. Instead, the approach most often used is to create a wrapper out of our graphic and then "wrap" it around the content that will make up our web page. In order to do this we will need to break the image into the individual pieces which will be wrapped around that content. The third step then is to logically partition the individual pieces by drawing a grid over a copy of your original graphic, the grid will be used as a cutting guide. Here is an example of the image with lines drawn over it to partition of the individual parts.

Separate the pieces

Once you have partitioned off these pieces you are ready for the fourth step, cutting and pasting each partitioned piece as an individual graphic. Using the cut and paste feature built into your paint program cut each piece and save it using a descriptive name. For example the top, left corner could be named "topleft", and so on. Our cut outs are named "topleft.gif", "top.gif", "topright.gif", "left.gif", "middle.gif", "right.gif", "bottomleft.gif", "bottom.gif", and "bottomright.gif" all of which describe perfectly which part of the interface they represent. Here are the individual pieces from the example.

Once you've cut down your interface store each of the pieces together. From a management standpoint it's often easiest to create a folder named descriptively to reflect the subject of the interface and then to store each piece of the interface (including the full picture and the partitioned picture in case you want to modify them later.)

Create a rough <TABLE>

Once you've stored your interface you are ready for the fifth step which is to create the HTML to bring your graphics into your web page. Bringing an interface into a web page is accomplished through the use of <TABLE>'s. You can begin by creating a rough-out of a table which has enough cells to accommodate each of the pieces of the interface. In the case of our interface it will need a table with three rows each with three columns. Consider at this point where your web page content is going to appear as well. In our case this will appear in the very center of the interface, so at this point we will leave a place indicated where that content is to appear as well. Here is an example.

<TABLE>
 <TR>
  <TD></TD><TD></TD><TD></TD>
 </TR>

 <TR>
  <TD></TD><TD>
<!-- content begins here -->

<!-- content ends here -->
  </TD><TD></TD>
 </TR>

 <TR>
  <TD></TD><TD></TD><TD></TD>
 </TR>
</TABLE>

Populate the <TABLE>

Now that you have the basics of the <TABLE> displayed, you can begin plugging in the <IMG> tags necessary to fill the individual cells of the table with the components of your interface. At this point we need to be considerate of the fact that the content occupying the center of the table is going to need to stretch both "top.gif" and "bottom.gif" and also "left.gif" and "right.gif" in order to fit into the table without causing the interface peices to appear to break apart from each other. We can get stretching to occur by using each of those specific graphics in the BACKGROUND= property of the <TD> tag. We do need to make an addition in these background cells also, specifically we will use a transparent pixel to insure that the cell width or height will not collapse below a minimal acceptable distance. This means that one additional graphic needs to be added to your interface. Create a single pixel, and use the ".gif" format (or another format which supports transparency such as ".png") and save the pixel as a transparent graphic. We named our transparent graphic "pixel.gif" which we will load using an <IMG> tag and set to the width or height that we wish to be the minimum size allowable. We continue the development from the example above.

Once you have finished adding in the <IMG> tags which will bring in the individual pieces of the interface shell you should be able to view it in your browser. Here is the result of the newly populated <TABLE> code. the version on the bottom is the same code with the addition of BORDER="1" so you can see how the graphics fill the individual cells.

Hi Mom! This is my web page. I think it looks like a floppy disk.

Hi Mom! This is my web page. I think it looks like a floppy disk.

Final adjustments and considerations

Now that you have created the interface you may want to tweak the way that it looks by re-sizing pieces of it in order to balance the visual weight. For example if you compare the image above with the original drawing of the floppy disk you will no doubt notice that proportionally they do not match. As the content in the label area of the floppy disk gets larger the appearance of the interface diverges further and further from how it looked originally. You can compensate to some degree in order to try and maintain some semblance of the original look. For example you could impose a restriction on the amount of content you will allow to occupy the label area, but doing so decreases the usefulness of the interface making it work only with sparsely populated web pages for example. Another solution might be to use DHTML and JavaScript to dynamically re-size elements of the interface based on a percentage of the size of the label area.

These are issues that anyone building an interface must deal with at some point, and it's not the last area of interface by any means. Another area that remains for further study is a consistent means of linking other web pages or web resources which you may want to display in your interface. Consistency is one of the most important features of a good interface because it allows the user of an interface to learn its workings well enough that many of the activities which consume time can be sped up. For example if the user discovers that a site index occupies a panel on the left of each web page in a site then the process of navigating through the site can be made easier for that user. If you would like to learn more about interface design you might want to check out the following resources.

About.com - Interface
CNET.com - Spotlight on navigation design

Back to Build Your Site
Back to Table of Contents