To create this e-portfolio I used the site weebly as my platform.

I chose
to use weebly over another platform because I am familiar with the site and
felt that learning another platform would simply add to the stress of the
semester. Because of this choice, many of the design choices were taken
somewhat out of my hands. Ultimately, I was left with the option of choosing
between a variety of premade themes, many of which adhered quite will with
the various design considerations (such as PARC, Dodge, et al.) that had
been discussed over the course of our class in Educational Technology.
For this e-portfolio I selected the theme called haberdasher because of
its sans-serif font and the fact that the header pictures contrasted nicely with
the white background. I opted not to keep the original header picture,
however, and tried to pick replacement pictures that better reflected the
topic of the page and maintained the contrast with the header text. I elected
to change little else within the theme, excepting the colour of Hyperlinks
(which was not conducive to readability in the original theme).
Many of the design principles that should be taken into account when
designing web pages were already present within the theme that I chose,
however, it is important to be aware of how the layout reflects these
principles. In the case of the PARC principles laid out in Williams The NonDesigners Design Book, many of the considerations were already accounted
for. In the case of Proximity there is a certain homogeneity to the site that
promotes the grouping of similar items together, however, manipulating
items to the place that is best suited to it takes a little finesse and can at

times be counterintuitive. As far as Alignment is concerned, again the

functioning of the site provides for a great deal of support in keeping items
aligned properly. The platform is actually rather rigid in this regard which
makes it very difficult to not follow this particular rule, however, there is still
a certain room for various items to be positioned so that the eye follows
them down the page. In order to create a sense of balance, I alternated
pictures and text along the left edge of the artifact pages. This creates visual
interest and breaks up the monotony of having everything lined up in a row.
In this way, I have maintained a certain aspect of Repetition. In this regard I
have also maintained a consistent font in both type and size. Hyperlinks turn
red when the mouse passes over them to indicate to the reader that they
link to more content. Buttons are of a consistent size and colour. As
mentioned previously, I kept Contrast as a constant rule in my selection of
theme and pictures. If I noticed that there was not enough difference
between text and background, I either changed the colour of the text (as in
the case of the hyperlinks) or the picture (as in the headers) in a manner that
promoted consistency across the site.
Another useful publication for the evaluation of web design is the
Fine Points checklist developed by Bernie Dodge. This checklist
provides a very concrete and step by step easy to follow way to improve the
design of any website. There are 14 points in all, however, I shall only deal
with a select few that I feel are especially well represented by my e-portfolio.
Point 1 details the importance of limiting the length of the lines of text to

between 8 and 15 words. This I have done by placing a symbolic

representation of the artifact to the side of each heading and rational (the
headings all link to the artifact or a more concrete representation of it). As I
have stated previously, I chose the weebly theme for its extensive use of a
sans-serif font which I kept consistent across the entire site. This is in
keeping with Dodges third and fourth points. Which relate to font and its
uses. Point 7 indicates that there should be a meaningful title in the title bar.
In keeping with this, each page contains a header with a picture that is
related to the topic of the page with the title of the page displayed
prominently across it (and in the case of the individual standard pages, a
description of the standard). Point 9 stresses that the text should stand out
from the background. As far as this is concerned, I have made a point to
ensure that text is readable overtop of whatever picture may be positioned
behind it. In the case of the body text, it is black on a white background.
Individual headings on each standard page is in consist of a darker
background picture with white text which stands out very nicely. Graphics
and text are placed side by side which is in accordance with point 12 but also
has the added benefit of restricting the line length to within an acceptable
word count.
Both of these web design criteria are somewhat antiquated being that
they both originate from around the end of the last century. A more recent
conceptualization of how to design a website can be found in the article The
Principles of Design by Jennifer Kyrnin. She lists the elements of good design

as Balance, Contrast, Emphasis, Rhythm, and Unity. Many of these concepts

are not new, however, they are formulated in a more current and applicable
way. Balance implies that larger darker elements carry more weight than
smaller lighter elements. As I have said earlier, I have distributed text and
images in a way so that the eye follows the text and neither side of the page
appears to outweigh the other. Contrast, not only refers to the contrast of
colours which I have covered above already, but also to the contrast of shape
and element. Emphasis refers to where on the page the eye is drawn. In this
case, I feel that I have created a natural flow of emphasis on the page as the
eye is drawn to the text. Rhythm is the sense of consistency across the
website. I have striven for an overall consistent format throughout the site as
I have used similar fonts, layouts, and colours. Unity is equal with proximity.
In many respects, I dont know that there are that many dissimilar elements
in the site to really require a great deal of separation. However, my
rationales and accompanying clip art are separated generally from the
header which is more colourful and has much more contrast.
By abiding my these various configurations of principles, I feel that I
have created a satisfactory webpage which will communicate its purpose
effectively and present myself well as an educator and profession.