Sample Pages

Here are some mock web pages I have created. These are simply images done up with image editing software, but they reflect what the actual site could look like. I also have descriptions of each mock page.

Note: Each image links to the full-size version of the image.

---

Groceryland

Original site: [link]

Description

This is a re-working of the website of my current employer. The current site is fine as far as content goes, but it suffers from the graphical qualities that could make it into a good site.

A major issue is consistancy. The look and layout of the page body content varies from page to page. Having a consistant feel across the entire site would help it greatly.

The main graphical issue with the original site is the plain text header. This header neither reflects the store logo nor the general font used in the store graphics/ads. This issue takes away from the site, and makes the user wonder if they are at the right web site or not.

Aside from those issues, the web site has good qualities as well. It stays updated with access to the current newspaper ad and store news, and offers needed information about the various locations.

---

It's Not News, It's FARK.com

Original site: [link]

Description

This is a re-working of the website FARK.com. If you have never been there, FARK is a news aggregator which lists news articles submitted by the users. The links show an image or text describing the source of the article, are tagged based on the general theme of the article, and show a caption which is also submitted by the user.

The main issue with the current site is the layout. The site is generally fairly cluttered. There are various blank areas on the header and between sidebar items, mostly caused by advertisements. Some items are simply hard to find. The "Submit A Link" button, for example, simply appears as a normal menubar item, next to the sections of the site which are not viewed as often.

The sidebar items are also easily overlooked, being that some are far from the main content and they are interlaced with advertisements. The Classifieds section is surrounded on all sides by both the Site Friends and advertisements, causing it to be the easiest section to ignore.

Yet another odd layout choice is the "Logged In" section. This could be used to fill empty space on the header, even with a "Sign Up/Sign In" option if the user is not logged in. Instead, it is invisible when the user is not logged in, and appears as a contrasting dark bar placed in between the top of the page body and the list on links when they are. This causes it to appear very out-of-place.

One good feature from the original page is the bar with buttons for the link categories. Each one is assigned a specific color, which makes the buttons easy to distinguish and lets the user easily find the one they are looking for. I have integrated this bar into my mock page, the only difference being that it is centered and the button colors don't fade into the links body.

New Graphics

Due to the smaller size of their current logo and my inability to locate a higher-resolution version, I had to fabricate a new Logo from scratch. I created a high-resolution version which can then be resized to fit any needs of the site.

My version varies slightly from the original, but still presents the same overall theme. [image link]