Mahara+Aesthetics+Look+and+Feel

When designing your e-Portfolio on Mahara, you must consider the design and presentation of your site. Aesthetics are very important to a webpage. Everything from spacing and format to font and color needs to be considered. It is very important to a portfolio design because it is your first impression on your audience.
 * Aesthetics: Look and Feel **

The key thing to remember with a webpage design is that your audience has a short attention span. In, //Design Basics Index,// in the collection called //Design Essentials Index// by Jim Krause, he explains that ineffective design and organization can lead to visual chaos and cause the viewer to leave. The sub-section will discuss the importance of form, line, font, and color in your e-Portfolio.

Form deals with the basic structure of your layout. This includes spacing, grouping, and the most importantly, hierarchy.
 * Form: **

Spacing can be vital to any layout. By using effective spacing you can create a visual impact and enhance different parts of your portfolio. Spacing can be varying the measurements between sections, images, or lines. Spacing can be measured equally for a symmetric look or have unequal measurements. This can cause focus on certain elements or create flow for the viewer’s eye.

The spacing can also be used for grouping. By grouping, you can take a cluttered webpage and make distinctive sections. Grouping can help the viewer make connections from one element to another. In webpage design, Krause describes “content-heavy web pages having groups, by use of dividing elements of white space, creates a visually agreeable and user- friendly web page” (Krauser 46).

The most important aspect of form is hierarchy. Hierarchy in layout is the deciding order of what will be displayed first. It is the understanding of what part will dominate the other. It is the element that catches the viewer’s eye that is at the top. It could be created by using the size increments, color usage, or key placement of that element. This established hierarchy helps create a pathway through the pages.

The concept of line deals with the structure and spacing. Both are key in making your e-Portfolio user friendly.
 * Line: **

When dealing with line length, it falls under two categories. One deals with the measurement of one line, and the second deals with the sentence line. The length of a line is measured in pica. The length of your line on your page help dictates the readability of your text. The sentence line depends on the number o f characters (words and spaces). Most sentences should not be over fourteen words long but also should not be over thirty characters long. After that point most readers will lose focus on what the sentence is about.

Line and letter spacing both affects the structure and readability of your e-portfolio. Line spacing is the space between two separate lines. The more open space, the easier it is to read. Letter spacing affects the number of characters in your line. Letter spacing can be describe as normal, loose (open), tight, very tight, and touching. The easiest to read and standard for most programs is normal.

One thing the affects the structure of your line is if the text is unjustified or justified. Unjustified has uniformed spacing between the words and is either flushed left or right. Justified is your text box and lines are uniformed. However, this causes unequal spacing between the words. The inconsistency in letter and line spacing can be distracting to the reader.

For More about Line / Typography see //Designing with Type: The Essential Guild to Typography// by James Craig.

**Font**: Font is a set of typographic characters. Font is also known as typefaces. There are different types of font categories or families but all, excluding dingbats and characters, fall in either Serif or Sans Serif.

Different fonts can bring emphasis on different elements but fonts can also distract a reader. If too many fonts are used, the page can feel chaotic. Type size or points have some effect on your font. Points range from 4 to 72. You can use fonts to help continue a theme or create a flow from page to page.

Serif has a horizontal and vertical detail on every major stroke of a character. It is normally featured at the beginning and end of the stroke. Sans Serif does not have the stroke feature. “Sans means ‘without’ in French” (Craig 234). Other font families are Script, Monospace, Novelty, and Dingbat. Each have their own uses in design. You must consider who your audience is and the readability of your fonts when you are selecting.

Further Reading: See typography book suggested above or //Type Idea Index// by Jim Krause for creative usages.

**Color:** Color can either help or hinder your e-Portfolio. Such as font, you have to think about your audience. Color can help your theme, change the mood, enhance a design, or emphasize a point. You have to be aware of the colors you are picking though. Factors to be considered are background, images, text, and surrounding colors.

The background or backdrop could be a solid color, pattern, or even an image. Be careful about choosing a background too busy. It will affect other color choices, such as your text color. Typically with a lighter background you should have a darker color text and with a darker backdrop a lighter text.

The basics of color are deciding what works together and what does not. The way to choose is by looking at the color wheel (see image below). The primary colors are Red, Blue, and Yellow. When you mix the primary, you get the secondary colors Orange, Violet, and Green. Finally the tertiary colors are the primary and secondary colors mixture.

Basic Color Wheel When combining colors you might want to base it off these palettes below. Monochromatic is a single base color with lighter or darker shades with it. Triads are taking 3 colors equally separated around the wheel. Analogous are a combination of 2 or 3 adjacent segments on the wheel Complementary is any 2 colors opposites from each other on the wheel.

Spilt Complementary is similar to complementary. It is where you take one color and have a combination with two colors on either side of its complement. The link below is a color guild and codes for color choices for web pages. []

When designing your e-Portfolio it is always key to keep your audience in mind. It will affect multiple selections of your design. In addition, remember to keep your design constant on each of your pages. The attention of your audience is important. Do not alter their opinion on your e-Portfolio because of poor design choices.
 * Summary **

Works Cited Craig, James. //Designing with Type: The Essential Guild to Typography.// 5th ed. New York: Waston-Guptil Publications, 2006. Print.

Krause, Jim. //Design Basics Index//. Cincinnati: How Design Books, 2004. Print.

By: Amanda Hefferan Double major in Science, Technology, and Society and History