redesign bluepeace

Midterm Notes

My midterm project, a redesign of the Greenpeace site, is different from the original in several ways.

1.  Look/Feel: the redesign is (hopefully) more sophisticated and user friendly.  The large image backgrounds scale to the size of the user’s monitor.

2.  AI:  the redesign is more interactive.  Instead of reading about the issues and then having to click on the “Actions” tab, each “Issue” has their relevant “Actions” on the same page.

The only problem I was not able to address on the new site is a technical one, I couldn’t figure out how to achieve an “Active” state on the tab navigation in the time allowed.

Midterm Site Map

drat

I can see what I’ve missed  - the pages are not titled.  I will add the title in large, thin green text to the space between the header and the content on every page except the home page.

Greenpeace redesign

After viewing environmental activist and global charity websites, I’ve learned that the primary focus should be on gathering both members and donations and getting information out.  Greenpeace has a functional website.  The information is cleanly organized, if a bit repetative.  The current design is basic, bordering on childish and altogether too happy for the current state of the world.  Here’s the site:

For my redesign I chose to use a large photo background because it’s sophisticated, clean and dramatic.  I organized the site using top main navigation along with tab navigation along the content area for the sub-navigation.  This allows for an easy understanding of where one is on the site, as well as what other information may exist on the site.  This mockup is not entirely filled out, the content area will be longer.  I also intend to have the background image scale according to the monitor size.  I read about it and have been dying to see if I can do it!  Here are my two pages:

And here’s the “Issues” page.  The navigation text has disappeared, but that will be fixed!

Original MoMA homepage

I’m not sure if this should have been included in my post, so here it is!

Navigation Exercise

This one was pretty tough.  I thought it was going to be easy because I chose such a great navigation design for my home page.  It wasn’t easy.  I had a couple of false starts before finally getting this done.  It gave me even more respect for the current site design — very clean!

2 column page layout

I checked out css-tricks.com and saw they had a nice 2 column layout tutorial  (http://css-tricks.com/super-simple-two-column-layout/ ).  The tutorial teaches how to create two columns of equal height and fluid width — I love CSS-Tricks!

I copied Fluc Media’s site (http://www.flucmedia.com/), thinking it looked easy — and then spent two hours getting a background that would tile.  I hate that!!!!!   Anyhow, have created a pretty-ish version below which can be seen live either on the class’ ftp site or here:  http://dovetailwebdesign.com/school/graziano_project_2/index.html:

Wireframes

Wireframe_about_us

MoMA Redesign, version 2

On this redesign I added a “join now” button, and removed a “search exhibits” button.