Web Design: Principles and Theories

Creating a user-focused, content-rich and visually-appealing website is a challenge. One way to think about this challenge is making a huge effort to make the site seem effortless!  When successful, the end result is a site that the user can navigate intuitively, one which offers the audience both the information they seek as well as other content that piques their interest.  I wanted the final version of First Year Guide to be dynamic enough that users made it a point to visit the site regularly.  To that end, I worked with both the principles of effective web design that we have discussed this semester, as well as Gardner's MI theory, in designing this site.

 

Web Design Principles

1. A first key point I applied in my site is from the Principles of Multimedia (University of Hartford), the principle of coherence, or excluding what is unnecessary. I wanted to avoid the mistake I made with a previous website, where I added too many multimedia elements (a video clip, widget, and attachment). Here, I used one of the more streamlined templates, and made sure that the content on each page related to the page theme.  

2. Revising from my original outline for the site, I also combined some elements into the same page in order to group related page elements, as discussed in Lynch and Horton's piece "Visual Design." This is most notable on the Assignments: The Basics page.  Originally, I had intended a separate page discussing assessment, but I decided to add a discussion of this into the Assignments page as this is the most logical place to talk about evaluation of student work.

3. A third principle for good web design I incorporated here is "chunking" information, as discussed in Lynch and Horton's piece "Organizing Your Information."  Since my template is more vertical than horizontal and the reader has to scroll down farther, I made sure to break up the content into smaller blocks--for instance, having a separate section for In Class and Out of Class Assignments and adding short subsections within those sections for ease of reading.  Therefore, even though the reader has to move down the page length-wise, it is easy to find content based on the section headers.  

4.  A fourth principle I employed is a "visible language," or clear and consistent design, one of the principles that Vitaly Friedman discusses in the article "10 Principles of Effective Design."  Each page of the site has the same layout, with the menu options on the left-side, a chalkboard image I added to the left that notes the type of material on the page, and the main content in the middle of the page.  I also worked on ensuring that all font styles, colors and sizes were consistent between the text, headings and subheadings on different pages, so that the reader does not have any jarring moments where the language switches, as it were.

5.  Invoking another of Friedman's principles, I also sought to make sure this site was kept simple.  The intended user, first-year college instructors, would want to access the information they needed in an efficient manner; however, this user has little need for flash and dazzle in the form of graphics or moveable images on the site.  Therefore, the streamlined format, with the chalkboard images on each page, serves the needs of the user.

6.  Finally, I reviewed the principle of precedence that Collis Ta'eed discusses in reviewing "9 Essential Principles for Good Web Design."  My goal is to make the menu options follow the most logical pattern that takes the users from basic information (syllabus, assignments) into broader categories such as professional development and sharing their own thoughts in the forums.  I wanted to take the user through the steps he/she would follow in using this site to plan for a class, but I also made sure different pages had links to other pages on the site so users could, if they wish, jump out of the sequence and take a shortcut to the area they wanted.

 

Multiple Intelligences Theory

In addition to following the design principles discussed above, I also thought about the different types of users on the site and how to accommodate their different intelligences.  As someone who often benefits from sharing ideas with others, I wanted to allow for online collaboration and interpersonal intelligence by having a discussion forum.  This forum page has postings on several different topics, so that users can jump in on a topic of interest to them.  

Some users will be more visually-spatially oriented, and for them, I created a ThingLink syllabus guide.  Instead of scrolling or clicking to get multiple windows of information, the user can see the image of the brain, and then scroll over the picture to see pop-up information about different intelligences (on the Assignments page) or see both the image of a syllabus and interact by scrolling over the syllabus to learn more about different sections on the Syllabus page.

Other users will be linguistic and/or intrapersonal, meaning that they will appreciate pages such as Good Reads, where I offer them links to interesting articles about higher education.  The linguistic user will revel in the reading, and perhaps move over to the forum section to discuss further.  In a different way, the intrapersonal intelligence type will appreciate the chance to do some reflection about changes in higher education and the ability to think through these articles on his/her own, perhaps keeping a separate journal of reflections.  Other tools, such as the conference search database on the Professional Development page, also work well for the intrapersonal types who want to work independently.