Tip #19

Layout ideas

How do you come up with a layout idea? In my experience, the "typical webmaster" within the University has web work as one of several responsibilities, and most people do not have any graphic design training. There are various factors that you need to keep in mind, especially if you are creating a work-related, department or college website.

• What graphic software do you have access to and what is your skill level with that program?
• Once the site is created, will you be maintaining the site or will it be turned over to others (or even a series of other people)?
• What are the most important points you want to make on your initial page? In the "old days" there was a pattern of putting numerous links on the main page, which can often give the site visitor too many choices to pick from. Again, depending on your site's scope, try to keep your initial page uncluttered and with limited but clear choices. The larger your site's scope, the more difficult this can become, because you are apt to run into individuals in your unit who want "their project" highlighted on the front page of the site.

You can get ideas by looking at other sites, but you need to temper what you see with the reality of your graphic skills.

Within the College of Agriculture and Life Sciences, we had a graphic artist help put together ideas of initial page layouts that are aimed at different skill levels. We also wanted layout ideas that could be combined in different ways. These layouts may give you ideas of similar things you could do. There is more detail about these layouts at cals.arizona.edu/ecat/web/layouts/. These layouts may give you ideas of something you could create yourself.

	If you can come up with a simple collage of photos representing key aspects of your program, this is a simple layout. Text links can be easily added or deleted.
	This layout would not require a lot of graphic skills. The photo and its affiliated text on the main page would be changed periodically. Navigation is done by a row of table cells with colored background. The content of these cells could be changed easily and depending on the width of your display, some additional cells added. But there would be a limit on how many links could be put in a single row.
	As long as you are creating a site related to the College of Agriculture and Life Sciences, you could use this heading, which has the "oval logo" built in. If you are in other units and have a usable organization logo, a similar heading could be created. Because navigation is by text links, this part of the page could be easily changed. You could put a single graphic or a collage as you see here.
	Navigation is by buttons. You can create Flash buttons in Dreamweaver but you also can create buttons with programs like Fireworks or Photoshop. Because some of the navigation (the bar at the top of the page) is done via an imagemap, you would need redundant text links on the page or a link to a text-only page, in order to have the site accessible to persons using screen readers.
	Navigation is by two imagemaps. Although you could change the text in the buttons using either Fireworks or Photoshop, you could not add links to this look without recreating the navigation bars yourself. Because navigation is by imagemaps, you would need redundant text links on the page or a link to a text-only page, in order to have the site accessible to persons using screen readers.
	This layout would require the most skill since it begins with a single graphic. You could place in the blank area images and text which are periodically changed, or if you know how to create disjointed rollovers in Fireworks, you could create "popup" text which further explains a particular button/tab. Again. because navigation is by an imagemap, you would need redundant text links on the page or a link to a text-only page updated whenever the main page is updated.

These tips are created as part of a class on Dreamweaver Basics.