High schools' websites

As I am working in the education field, the first thing that came to my mind when being asked to compare two different websites was looking for the schools’ ones. I finally chose the websites of Staples high and Hotchkiss high, two good-reputation schools among the public and private educational institutes in the Connecticut State. Someone said that the website is the 24/24hr customer service agent of the school. When you are not available to answer your customers, they will try to find the information they need on your website. In my opinion, the website also influences the first important impression a person has for your organization, and contributes to the decision whether they want to move on with your service or not.

As has been mentioned in R. William’s book: “Two of the most important factors in good web design are repetition and clarity”, let’s have a look at Hotchkiss high school’s website to see if they have a consistent navigation system and graphic style.

The fisrt thing we can easily notice is the blue shades that were used for the whole website. Those are  also the brand colors of Hotchkiss. These colors apear repeatly and harmonizely on the menu bar, texts, buttons and icons. Another remarkable consistency is the Hotchkiss name and menu bar that move along when we scroll down the page, which help us know that we are still on the Hotchkiss website.

Moreover, the footer with logo and links to many important information is also one part of the web design repetition. It not only keeps all of the pages consistent, but also helps navigate the users to the information they are looking for.

Some other design elements like the videos of the school from above on the home page, high quality pictures and videos, easy to read typefaces,… are also help contribute to the success of this website.

However, the fonts in some part of the website should be in bold or made bigger, like in the “School events” part of the Home Page. Eventhough white spaces are good, too many white spaces can make the hole page look unstructured.

On the contrary, the website of Staples high is simplier in design. There is no animation, video or double menu bar. All of the information posted on the website looks more like the structure of a blog, even some of the decorated texts are only attached pictures without any hypelink.

Overall, Staple high meets most of the basic requirements for a good website. The school did use their brand colors for the whole site, from menu bar to texts and buttons, to create a consistent feeling. However, the rest of the website’s typefaces are decorated in so many colorful gradients and textures, from red, green, purple, to yellow, which makes the “repetition” principle applied in this website looses half of its effect. The footer is also repeated on all of the pages, but it would be better if the school’s brand were also placed in as many places as possible for users to remember.

In order to know if the website applies  the clarity principle, which says “a visitor should never have to figure out how to use your navigation system, where they are in the site, or whether they are still in your website  or have jumped somwhere else”, we should consider 3 most important types of user that a school website targets to: Student, Parent and Donor. When we put ourselves in the shoes of these people and start searching for the school’s clubs, newspapers, or student registration, these links end up directing us to many different websites with different template designs and logos. This is really confusing because there is no direct link that leads us back to the Staples high’s Home Page and all we can do is clicking the “back” button. If the school have more than one website for different programs, these websites should be opened in new tabs whenever we click to their links on the Staples high’s Home Page, and all of these websites should have at least the logo of the school and a link that easily directs us back to the school’s Home Page.

                                

Overall, when it come to interactive design, a school’s website should be clean and scrisp, with clear, simple typefaces, as wel as consistent school’s brand colors and logos. When thinking of designing a website, the designers should put themselves in the shoes of the main targeted customers and answer the question: “what’s in it for me” so as to successfully create a good communication tool for the organization.