Matt's Interface Design and Stuff

Tuesday, October 26, 2010

Pudgy Ninja Strikes Again

So we finished our web sites a little bit back and are supposed to post them here. Here is a nice link.

Monday, September 20, 2010

A Basic Tutorial on Image Maps

Image maps are clickable areas created within an image, allowing navigation to other pages. One single image is separated into sections, each acting as an individual link.

Though a program like Dreamweaver is the most convenient, Notepad or Textedit will also do the job. A simple image map, like the example in this tutorial, will only take a matter of minutes to create. The first time may take a little longer as the process is learned, but subsequent image maps will indubitably require less time.

1: Begin with a basic html page, including all the essentials like html, head, body, etc. (created automatically in Dreamweaver). I did mine however just in Notepad. It will appear as follows:

<html>

<head><title>Image Map</title></head>

<body>

</body>

</html>

2: Add your image using the basic image tag.

<html>

<head><title>Image Map</title></head>

<body>

<img src="80703071.jpg" />

</body>

</html>

3: Using the map tag, and name attribute, begin creation of your image map. Make sure to close the map tag.

<html>

<head><title>Image Map</title></head>

<body>

<map name="puppykitteh">

</map>

</body>

</html>

4: Using the area tag, and shape attribute, set the shape of each area on the image. The shape can either be a rectangle (with the top right and bottom left coordinates), a circle (using the center coordinate and radius), or a polygon (using as many coordinates as you could ever desire).

<html>

<head><title>Image Map</title></head>

<body>

<area shape="rect" />

</map>

</body>

</html>

5. Inside the area tag, set the coordinates of the shape, in this case the top right and bottom left coordinates. They are measured in pixels and any image-editing program (in this case, Pixlr) is able to give you those coordinates.

<html>

<head><title>Image Map</title></head>

<body>

</map>

</body>

</html>

In this example, 380, 157 is the top right corner of the rectangular shape we are creating, with 34, 478 as the bottom left. It will encompass the image of the puppy.

6. Also inside the area tag, using the href attribute, set the destination of the link.

<html>

<head><title>Image Map</title></head>

<body>

</map>

</body>

</html>

In this case, it points to another page located in the same folder, named puppies.html.

7. Repeat steps 4 through 6 for additional areas on the image, in this case creating a similar rectangle over the image of the kitty, pointing to a similar page about kitties.

<html>

<head><title>Image Map</title></head>

<body>

<area shape="rect" coords="737, 158, 390, 479" href="kitteh.html" />

</map>

</body>

</html>

8. Add the image map to the image on the page, inside the img tag using the usemap attribute.

<html>

<head><title>Image Map</title></head>

<body>

</map>

</body>

</html>

Now your areas on the image have been added as usable, clickable areas, leading to other pages within your site. Though not the most practical application, the example gives an idea of how this concept could be put to use in menus and other forms of navigation, as well as literal maps of areas with clickable regions.

To see this code in action, click here.

To see a more useful version of an image map, click here (created from this more advanced css image map guide).

Tuesday, August 31, 2010

Site Critique / Project Proposal

Flash Site: http://www.griplimited.com/#
HTML Site: http://us.blizzard.com/diablo3/?rhtml=y

Site in Question: http://www.griplimited.com/#

This site is successful due to its interactive content. The user can scroll vertically through individual columns, as well as horizontally through an almost endless supply of content. Each column of content is as engaging as it is quirky.

As mentioned, the navigation consists of vertical columns, which can be perused in just about any way imaginable. The content also extends horizontally off the page, allowing the user to drag the content to the center of the screen and view and endless supply of information. Links in each column provide access to sister sites. There is also a menu located at the top of the page for a less interactive navigation experience.

Information is communicated in many ways. Orange and black dominate the text, ranging in size and boldness for emphasis. The font remains consistent, changing only in width, height, boldness, italics, size, and color. Extra colors can be present in varying columns, depending on content. The same color scheme however ties all information pertaining to the company together. The vertical and horizontal motion of the information keeps the user from getting lost on the page or losing a sense of position. Despite the overwhelming amount of information, a typical hierarchy of left to right reading keeps all presented information orderly, while varying enough to keep it visually interesting.

The audience of the site ranges from potential clients, to the average stumbling surfer. Whether looking for a company to handle the design of an important product, or just a way to pass some time at the workplace, this site has entertainment value for any individual. It is also more than adequately presenting the skills and ingenuity of the company for those who may be future clients.

Links to previous work: welcometohales.blogspot.com and halesabroad.blogspot.com (only viewable by invite).

As for ideas for my first project, I've considered making a page for family member's businesses, or possibly just a basic HTML/CSS information page, where I could not only post basic information on using the media, but updates with new things that I have learned myself in the process of creating and maintaining the page.