PROJECT 1

Option 2: Redesign a Website.

Redesign a home page and sub pages for a web site of your choosing.

Specific requirements:

o    Choose a web site that you believe needs a re-design (poor design) and…
o    Choose a second web site from another competing (if possible) company or organization (i.e. Netflix vs. Blockbuster; Myspace vs. Facebook, etc.) that has at least one interface feature worth emulating in your redesign (ie, and good design).
o    Redesign a home page and one other page of the poorly designed site and incorporate the interface feature of the good one in your redesign, using the interface principles from the excerpts from Don’t Make Me Think by Steve Krug and DOET.
o    Note: You don’t have to build the redesign in HTML. Consider taking screenshots and manipulating them in Photoshop
o    The presentation materials should contain annotated screenshots of:
•    Poor design
•    Good design
•    Your design

POOR DESIGN: The website for Manasquan High School

Bad1

Bad2

Why this is bad: It is full of technical and coding error. Norman values visibility over everything. With the white links being moved to the white background, no one can see what those links are. The hierarchy is off. After noticing the top image and the photo, the next thing I see is the blue bar going down the side of the web page. However, while that my be the case, there is no use for that. It’s just a space of color. Grouping is bad. You see the header for “Events,” but the events are all the way to the right of the page. The Principal’s Message header has no accompanying text, and you can’t see the header for Announcements easily at all. Considering the meaning of the word announcement, they should be higher on the visual hierarchy so people can actually see them. However, that is just another way Norman’s idea of visibility is just torn out of the window. You can’t see the white links to even see if they are clickable. This makes the viewer of this site take a longer time to navigate through the site. It isn’t the instant “billboard reading” that Krug argues should be the case in viewing a website. In that aspects and the others mentioned above, this home page is a failure.

Bad3

MHS' Subpage

This is just going to plain-out bother the viewer. Their eyes have been adjusted to one decorative style and then, a completely different font and stock photo was thrown in. This also needed adjustment.

GOOD DESIGN: The Website for Red Bank Regional High School.

Good1

Red Bank Regional's Home Page

Good2

RBR's Subpage.

Why this is good: Everything is visible, and there is a clear hierarchy. They have the articles and links that they want seen in the most prominent parts. The links appear clickable and they are grouped together in the red panel. There appear to be no technical errors. It is grouped wonderfully throught the page and is easy to read. Someone searching through could easily find the News, the Calendar, and any links they might need. This website is catered to fast navigation. The subpage is still cohesive with the theme of the home page and is easy to read. Overall, this is musch better than Manasquan’s website.

WHAT I DID:

Mine1

Mine2

What I did to this site was make it a lot easier to read. I made use of the prominent blue panel to house the links that peole could find easier, I also supplied a rollover so one would know they are clickable. I made the event links and the Announcement links look like traditional links that people recognize as clickable links. I also made the top toolbar clickable by making each section appear as a button or a tap instead of just trying to hover over the word. Everything is grouped together and easy to see. Everything belongs where it should be and the user’s eye clearly travels. The subpage is now coherent with the home page, having the same design and rollovers as the home page. Manasquan High School would benefit from using some of my improvements on their own website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: