Wednesday, October 14, 2009

Project 1 - miauk.com gets a facelift

Original, poor design of MIA's page:



My design:

I wanted to keep the site's "loud" personality and African motif, because I feel like that was definitely done on purpose. However, while I didn't want to lose the "zany" personality of the site, I wanted to try and drop the obnoxious personality of the site. I also didn't like the side-bar navigation that opened up new pages in the same window, with only one link at the bottom that read "MIA Home" to take you back to the home. In order to allow for better navigation of the site, I decided to make the pages display in a frame, with a navigation bar at the top. To cut the size of the navigation bar down, I put photos, videos, and art under the drop-down menu, "Media", signified by the arrow pointing down.

On the original MIA site, there was a section called "News/Tour", however, it was just a generic Wordpress blog that hadn't been updated since April, and that did not have a list of tour dates like most band's pages would. So I added a "Tour" tab, and put the "News and Updates" on the home page.

One of the worst aspects of MIA's page is the "Photos" section. When you click "Photos" on MIA's original page, it brings you to a set of albums, then when you select the album, it brings you to a page of thumbnails on a very busy background. Then, once you find the photos in spite of the mess going on in the background, when you click on them, they open up in the same window, and a huge size that takes forever to load. To solve this, I incorporated a lightbox in which smaller images may load on the page, and allows easy navigation. Her "Videos" page is similar, and would work the same way as the Photos, except the lightbox would show a video, not a photo.

Instead of having "Art" as it's own section, I decided to put it under "Media", and just cleaned it up a little.

The "Store" section on the original page was not at all consistent with the rest of her page, it opened up the same image I have above, but on a plain black background. I solved this issue by having the store open up in the frame.

0 comments:

Post a Comment