Continuity is a term that is defined as consistency and adherence to structure. Continuity within the Web portfolio relies on keeping pages in the designed site structure. Technical snafus sometimes cause us to let continuity fail. For example, if we forgot navigation item after we were well into the design what should we do? Should we throw in anywhere? Or, should we redesign the navigation to integrate the missing piece? Sometimes we can add last-minute items and navigation to the Web page. In most cases doing this will disrupt continuity. Therefore, it is important that we establish continuity and consis- tency before we spend the bulk of our time physically creating completed Web pages. As a rule, you should not move navigation items to accommodate content.
Establish minimum and maximum content sizes so that you can adequately fit the navigation and content proportionally on the page. Content should dominate 80 percent of the page and navigation should be replicated exactly throughout the site. Different page levels should share the same navigation features.
Meaning, the pop-up windows you create may have a slimmed down or different menu system than you home page and main site. That’s all right; just keep each level consistent with navigation and content placement. Continuity means keeping site the same throughout. We can’t let consistency slip at any stage of the design if we want to achieve maximum quality and visual value.
Type is crucial for communication but can also be an engaging visual element. With that in mind, let’s define the two conditions of Web type.
- 1.Web pages can have plain editable HTML text, or 2.Text can be created in a digital design application such as Adobe Photoshop, Adobe Illustrator, Macromedia Freehand, or Macromedia Fireworks and then saved as a graphic for inclusion into a page. This is called graphical text. The most effective Web pages generally combine both graphical and HTML text. Here are some general rules to follow in your dealings with text:
- For lots of text, text that must be edited frequently, and for faster loading of text intensive pages, use HTML text.
- For page headers, buttons, and strong visual emphasis, use graphical text consistently and mostly on items that change infrequently. A header would not change frequently, but a paragraph head might.
- The type style, font, size, and condition of type you use in your Web portfolio really depend on several factors. Here are some general rules to choosing text attributes.
- When using HTML text, try to stick to one typeface only. It will help with readability and consistency. You can vary style of the typeface. This means you can add bold, italic, and caps to certain text blocks to add emphasis. However, you should use these type styles consistently and keep them to a minimum.
- Fight the urge to use blinking text, lime green text, and other painful HTML text attributes that might detract from your credibility or the user experience. Black or white should be your dominant HTML text color. Highlight important information by using one other color only. You should create a color scheme. We talk about this more later on in this web design lesson.
- With regards to Web type, you have only these choices: Helvetica, Arial, Times, Times, New Roman, or Verdana. Type on computer browsers is limited to a set number of fonts. If you use fonts outside these, you risk the good possibility that the user will not have the typeface on his or her computer, thus serving up unknown fonts on the Web page. That would have negative impact on the visual design of the page, the user’s percep- tions, and ultimately we would lose the persuasive pitch that we had intended.
- When using graphical type, keep it simple and consistent. Don’t overdue it with drop shadows, glow, and outlines, and gradients — all applied on the same piece of type! Many people new to art and design tend to over use the bells and whistles that exist in applications like Adobe Photoshop. Try not to feed into the temptation. “Overdone” type, as I call it, is a distraction from the most important part of your Web portfolio, the project descriptions and credentials. Fancy effects that draw attention from the meat and potatoes of the Web portfolio are actually obstacles to clear communication.
- It is important to use HTML type on the home page in some fashion other than navigation. Perhaps add brief introduction paragraph about the site. This is a good Web communication strategy. It will also provide your site with text-based retrieval words to be picked up by the search engines. We will cover this more when we talk about Meta tags later in the web design tutorial.
Images and Graphics
The use of images also known as graphics in the Web portfolio provide a high level of communication that cannot be achieved with text alone. Presenting graphics in the Web portfolio is not only attractive but is necessary to provide the best multimedia narrative possible. The images you use should back up your theme and your work.
The images should not be sprinkled frivolously through- out the site. Build a library of good images to use on your Web portfolio will be part of the learning process that comes along with the design of any type of electronic portfolio. Collecting images from different sources becomes an area in which you must recognize copyright laws and visual style.
I highly recommend that you try to use a minimal amount of clip art and stock images and a maximum amount of your own work samples. Clip art and stock images can be effective when used properly. Navigation items, page headers, and images that follow a theme are all good uses of stock images and clip art. When it comes to telling a story of your effectiveness, your personal narrative needs to be backed up by samples of the work. Images such as photographs from your gallery exhibition or your classroom are appropriate.
Images that you create as art, design, or some other project deliverable are great. Photographs from your last vacation may not be appropriate. However, if the vacation was coupled with an interesting learning experience or valuable historical explora- tion, the photographs may be effective in telling your professional or academic story. Other images that you may not think of are charts and graphs that you have created. PowerPoint projects can be used as standalone graphics by taking individual slides and saving the content out as a JPEG image. So keep your presentations in mind when thinking about images. Another area of text documents that may become graphic images later on are letters of recommendation, evaluations, and web design lesson plans. These items may be scanned as graphics and exhibited as tangible assets. They will be exhibited on the Web portfolio as graphic images rather than downloadable documents.
An easy way to add graphics to your site is to use ready-made clipart or stock photography. These items are good for establishing themes and visual skins for the Web portfolio site. However, they do not constitute your work. Stock photography and clipart should not be the only images within your Web portfolio.
These images should be used only if they are considered royalty-free. If an image is not royalty-free, care should be taken when deciding on usage. Copyright infringement is serious and has detrimental effects on the value and appearance of your Web portfolio. We will try to give you some insight here as to the usage guidelines you might want to follow when using images and graphics that are not your own. Borrowing graphics from authors is a touchy subject.
Author Miles Kimball (2003, p. 89) sites that rules are loosely defined the copyright law are translated by the Consortium for Educational Technology in University Systems as being based on fair use within four criteria:
- 1.the purpose and character of the use including whether its commercial or nonprofit,
- 2.the nature of the copyrighted work,
- 3.the amount and substantiality of the portion used in relation to the copyrighted work as a whole, and
- 4.the effect of the use upon the potential market for or value of the copyrighted work. Kimball also states that it is difficult to find fair use of images and graphics. However, one good rule to follow that is cited by Kimball is that in most cases if the images used for educational purposes, which means that it is engaged in learning rather than selling, it is deemed fairly used.