Module 9: WayBackMachine Redesign Written by Sydney Landon, Bernie Belcher, and Deron Ferrell Reflection When recreating MSU Writing Department's home page we wanted to make specific elements stand out. The first thing we changed from the 2011 site was the navigation bar. It had a white background, with white text, and only became visible when you hovered over it because the background turned red. We needed to fix the usability. To do this we gave it a light green background and changed the text to black. The links would then go from a light green to a darker green when hovered over and the text would change to white. Not only does this make our version of the site more accessible but it also complies with the official MSU brand which is green and white. We then wanted to make the content of the page more eye catching. The site in 2011 had a lot of stories with blocks of text next to them making it difficult for the reader to find what they were looking for. To make better use of the home page we decided to simply have images of the stories for the audience to click on if they wanted to see the whole article. Lastly, we decided to make the main piece of content on the homepage be a video about the WRAC department. This would take the place of the about page the site had previously in 2011. To show its importance and make sure it was the first thing users saw when they opened the page we made the thumbnail of the video dark. This contrasts with the white background and make it easier for the user to see. We also gave the video a subtle border to give the page more depth. The MSU s writing page from 2011 was messy and had too much information. There was little to no consistency and didn t represent the MSU Brand. For our redesign we wanted to create a sense of uniformity and consistency. To achieve this we used a few different methods. One, is that we kept the same font throughout the entire page. We chose to use Gotham because, not only is it a strong font, it is the same font that MSU uses for their official branding. By using Gotham, we created consistency throughout our page and connected it to the other MSU affiliated websites as well. Two, we put a thin black border around all of the featured stories and made them all the same size. We wanted to make sure that the user could make the connection between the pieces and give them a more positive user experience. Lastly, we made all of the upcoming events look the same, similar to the 2011 page. This helps to give the page a more unified and clean look. It also helps to create a presence on the page for the specific section.
In order to create a more accessible homepage for the WRAC department, we believed that paying attention to both proximity and alignment was important as well. Following convention, we decided to keep all of the social media icons aligned next to each other as opposed to having them placed randomly throughout the page. This makes finding and accessing the different social media platforms easier. Furthermore, by grouping them together and placing them next to the search bar like on other sites, we make finding information that much easier. They can either click a social media icon and be redirected to that platform or use the search bar to search keywords directly on the site. The search bar is placed within the header just after the title of the webpage. By making this decision, we are allowing the search bar to be easily found by the user. We also chose to include the spotlight pieces underneath the embedded video so that accessing content would be simple. By keeping things in specific areas and making sure related materials are grouped together, we are able to take advantage of the brief period of time that someone might spend on the webpage browsing the content.
Original Website
Hi-Fidelity Landing Page
Hi-Fidelity Sitemap