Extreme Homepage Makeover

MVHS 

    Over the past week I have been redesigning the home page of Mountain View High School (shown to the left). I decided to emulate the style of Design Republik's home page as I liked their clean and organized design as well as the color blocking. Mountain View had a nice banner, but the organization of the page was difficult to work with. The home page was essentially gobs of information with no structure. The site also lacked depth, and the gradient, embossed, drop shadow letters were begging to be redesigned. The site was not incredibly horrendous, but it did need to be updated into a more modern, appealing homepage.

Design Republik

  
 Flat design doesn't always work for everything, but I really liked the design of Design Republik. The site has attractive  minimalistic qualities and a user friendly layout (despite that it's in spanish). The color blocking is what caught my eye first and I thought that it would transfer well with  MVHS's red and blue scheme. My only concern with the colors was that the site might end up looking like The Fourth of July.

Logo Redesign

I worked on redesigning the logo first. I was a little unsure how to do a school logo utilizing a flat design esthetic, as most school logos are bold and have a lot of dimension and detail. The new school logo mimics Design Republik's logo quite well. I used the school's original "M" with the torro head in the middle, but added a plain white torro with a drop shadow in a plain black square. I kept the red and blue, but made the colors richer, to add some depth. The thin "Mountain View" offsets the bold "high school" as shown in Design Republik's logo. I decided to place the logo in the footer and in the slideshow photos.

Last Slide of Slideshow

Next I started on the site. I knew that I wanted to keep a slideshow on the front page. I thought this was a nice aspect of the original site. Design Republik also has slide show so I decided to add some graphics to the photos like they had. Finding photos for the slide show was a nightmare. I hoped that Mountain View would simply have a photo album on the site, but they don't. They do however have a separate pages for each school activity within pages of several other pages, and after you weave through that web you might be able to find a low resolution picture after you scroll all the way down (yeah, organization was a real issue). Weaving in and out of the MVHS's website was getting me no where so I took to google. I eventually found enough high quality pictures to use for the slideshow through random news articles they were in. I decided to add in the school's honor code in the slide show as well, which I think looks nice. The slideshow was created using java script.

Redesigned Home Page

The original school site lacked a lot of depth and since I was using a flat design approach to the redesign, I wasn't sure how to add depth. I decided on adding a drop shadow to the entire website container, which helps the page stand out a bit more. I condensed the 3 "blobs" of information they had on the front page into a bar above the footer, mimicking Design Republik's. This condensed the content and made it easer to navigate. I thoroughly enjoyed this project. It made me take a more structured approach to creating a website and mimicking other sites is good practice. 

Path: Taylor, Mallory > MVHS > index