This week we have completed the remainder of our webpages including the publications page, events page, artists page and the video page as well as showing these in their active states. We have refined and made sure all the pages are consistent.
Through this process we have also finalized the how the navigation system works and updated our information architecture. We have redesigned the navigation system on the website allowing it to be more accessible. A breadcrumb navigation system was most ideal as this website contains a lot of content. The original website also used a breadcrumb navigation system, however, due to the confusing visual element of the website this system was not implemented to its full potential. By creating a more concise navigation system, the user is able to determine their exact location on the website. This has been created by having the major areas in the header where the viewer sees them first when on the website. Drop down menus with subheadings under each category has been provided to view different sections under each heading while hovering over it.
This week we began to design the 2nd and 3rd level pages. By using our header and footer from the home page we created a consistency across the website. We have continued to use pictures of the university in the background but have added a white gradient in order to make the text on the pages stand out.
The redesign of the staff page allows each staff members page to be accessed on the left scan column in which they are listed. The background for each heading is different and is a gradient of the university, in order to create a visual element in an otherwise all text page.
The mission page is also similar to the staff page as they are under the same category. By keeping the background image the same each section has a specific imaged assigned.
This week we began our collaborative redesign. The creation of an identity provides a basis for the redesign of the header. This redesign has a similar look to the first with some changes in the colour palette and font. Open Sans font is used as it is a basic sans serif font that is easily read as well as using charcoal, white and the yellow used in the logo as the primary colours throughout the website. We removed the animation next to the portal to create a more clean and professional look.
The footer provides links to various sources and has a black and white version of the logo in the centre of these links. This again reiterates the website logo, without creating too much attention as it is in the footer. The colour yellow has been used for the dividing lines to create consistency with the header.
We decided to use images of the Massachusetts Institute of Technology in order to create a visually dynamic website. These images, in the websites active state, periodically change to create a point of interest. This home page is simplified so the viewer is not overwhelmed and the navigation points and images are the main focus of this home page
As we complete our analysis of the website we have began to consider redesign solutions in order to create a more user friendly website. There are some key elements we want to implement into our website from the onset as they are key areas that are missing from the current site. These include navigation and the home page.
This is my first redesign proposal which addresses these issues. I have changed the layout by creating a header. this header includes the name of the site in the top left hand corner as well as a search bar which is a crucial element the original site did not have. I have also spread the major headings across the top of the page so they are seen when the site is first accessed. I have sectioned off areas that were on the original home page to create order on the home page
I have also redesigned the staff page. I have put a scan column on the left with the other subheadings. The content column contains the body text and to the right is the portrait of the person.
This week we began to analyse our website and put together our report on the website. We began to analyse the key areas of the website including navigation and design functionality and these were our findings in relation to navigation.
The web design of the site is exercising breadcrumb navigation, which is a widely used secondary navigation scheme as it is an effective visual aid in specifying the exact location to a user. This secondary navigation scheme was used, as it is the most effective for holding large amounts of content, and also to organize this in a hierarchical manner. However, by doing so the usability of the website is reduced by the number of actions a visitor needs to take in order to get to a second level page. The center for Advanced Visual studies follows a semantic logical path however is simultaneously confusing to navigate due to its linking nature between 2nd and 3rd levels and so on.
The website has chosen an in-page navigation system for content based headings such as the ‘about’ in the ‘staff page’, to simplify the initial orientation process, known as ‘scanning’. In-page navigation is an effective and beneficial tool for webpages that extend beyond two scrolls, and typically relate to mutli-page documents (Motive 2006). However, the usefulness of this form of navigation is limited on shorter pages, as the addition of this will push content further down the screen. However, in assessing the Center for Advanced Visual Studies, the site overlaps the content over the heading, which is not aesthetically pleasing. This example is illustrated in the snapshot below.
This week we began the analysis of our website. We started this by concentrating on the information architecture in order to gain an overall understanding of how the site worked and the content of the site.
This architecture proved difficult to put together as the website turned out to be a lot bigger than originally thought. We also decided to use a website that created flowcharts in order to create the information architecture as we thought this would be the easiest way to piece together the information needed. However, this proved to be a bit of a problem as we had trouble opening the file again. We did recover the file and save the finished architecture.
As the website was so large we focused on three of the major headings when creating our flowchart. We chose to focus on the About section, Contact and Publications. A lot of sections had interlinking pages to other headings as well as multiple levels. This was slightly confusing when constructing the flowchart as we were unsure how spread out these levels would be.
Having completed our information architecture we are able to go on to analysing the way in which the website works and its features.
This week we have started to look into websites our group can research and redesign. We found the website Center for Advanced Visual Studies through an article on a website that showed bad website designs. This website appeared to be a good one to research as it it does not have any hierarchy and is very unclear. This began our critical analysis of the website in order to determine how it worked and its flaws enabling us to create a design solution in order to create a more functional and visually appealing website.
Firstly, we researched into what the site was about and its purpose. The target audience for this website is students and teachers at the Massachusetts Institute of Technology to provide information about its Center for Advanced Visual Studies as well as being a resource and access point to information about the Institute.
This website is mainly text based with very few pictures. The design functionality of the website is unclear as its home page is overwhelmed with images and the links to further aspects of the website are not immediately seen.
We have decided to use this website for our analysis and redesign as it can be vastly improved.