Pooja's Interface Design - Save The Earth

RATIONALE

NAME Pooja
PROJECT Interface Design Project
DATE August 14, 2009


Not For Profit Site Audience
The website I chose is savetheearth.com. This website essentially aims at raising environmental consciousness and funding environmental research at colleges and universities. The idea behind the website is to enable more research in order to arrest the deterioration of the planet. The audience for the website are colleges, universities, environmentalists and philanthropists.

Web site visual Identity
I want the website to communicate the concept of "Save the Earth", its importance and need. Hence I have used the colors blue and green and images that relate to earth - landscape, water body and animal, birds, Insects etc. I also wanted to highlight the donation aspect as that is the main reason for this website.

Design Strategy
The message I want the design to communicate is the need for a change to save the earth and provoke the user to donate. I did this by highlighting the donate box and by keeping the webpage vibrant with images that are perfect and symbolizes beautiful earth. On roll-over of the links, the color changes with a white glow in the bottom. The secondary links are placed below and underlined and the underline disappears on roll-over/click. I have placed bread crumbs for easy navigation as there are many links and a lot of information to be placed. If there are a lot of information (e.g. research page), the headlines are links which opens out to the whole story. On clicking the next link, the previous one closes and the new link opens out to reveal the story. I placed search navigation on the header as it helps for the researchers look for specific articles and find more about funds.

Style Sheet
Navigation Links : Helvetica 14
Headlines : Arial
Sub Heads Hevetica Bold, 12/14
Body Copy Helvetica, 11

Document Grid
I used the navigation bar as the basis for the girds. The navigation bar needs absolute importance in this website and hence I placed it right next to the logo on the header.

Sources
Save the Earth - savetheearth.com
Images - http://images.google.com/imghp?hl=en&tab=wi

Sean's Wrap Up

This class was awesome. I learned so much-- before I got here, I knew nothing about graphics, Adobe, etc. and was awful at this kind of stuff. Now, I still suck but at least there is some improvement. So that is good.

To my teachers--- Jeff and Kate, you two are mad fly. Ill. Dope. Serious. To my classmates-- it was fun and interesting. I loved being able to choose what I wanted to do on all my topics because I have a very limited range of interests. I like things like crazy, man-devouring animals. So thanks to this class, I got to do two projects with cheetahs and sharks.

Obviously, I wasn't a big fan of the lectures. I thought we could have used more time in the labs because that is where I learned most of what I know now. I really didn't retain any info from the lectures at all. I usually watched youtube videos of OJ Mayo or stalked people on facebook. Sometimes, I sat there drinking a 20 ounce water to help destroy my memory from the night before.

Coming into this class, I didn't expect at all to think about doing more with graphics. My focus was always into writing, but this was definitely my favorite class out of the two of them. All of the projects were different and made me try different procedures.

Overall, all of the projects were helpful and I thoroughly enjoyed coming to class, and trying to make cool things and learn the programs while listening to Jodeci. Hope everyone has a good break.

Sean's Web Site

Sean Sweeney
Project: Interface Design Project
8/14/09

Not-For-Profit Site Audience
The audience for this web site are animal lovers, specifically people who love the ocean and sharks. My organization is made of people who feel the need to protect the Great White Shark. They are doing research and putting together programs to better identify and research what this shark is all about. Anyone who is interested in stories, info or great pictures of sharks would visit this site.

Web Site Visual Identity
I wanted to have an open space web site to better represent the ocean. Obviously, the shark is such a huge attention-getter. I needed to have that be the focus of my header. Even though I do have boxes, the background seems like you are fading down into the ocean, which portrays my original idea.

Design Strategy
The first time someone visits the site, they will immediately recognize the face and shape of the Great White. No matter how you feel about sharks, it grabs your attention. I wanted to use specific colors and give the site a streamlined feel, similar to that of the real animal. The boxes of information show a lot of pictures and interesting stories about the animal. The header is once again hinting at the colors used throughout the web site and the colors of the Great White Shark.

Style Sheet
Navigation links: ocean sans std, extra bold, 16 point
Headlines: univers LT std, 65 bold, 24/18 point
Subheads: arial 12 point (most regular, some bold and italic)
Body copy: arial 12/11 point

Document Grid
I put my navigation, header and icon all on the same side because I wanted the shark to have the full left side to it self. I figured it would be more powerful and attention-getting this way. Also, I didn’t want any straight edges on my boxes because I wanted them to look streamlined just like the shark and ocean.

Sources
All my images came from google images, whitesharktrust.org and abc4explore.com

Extras
The colors I used are either some variation of blue (for the ocean) or gray/white (for the shark). I felt these heavily contributed to the overall feel.

Olivia's Website

Olivia Franken

Interface Design Project

14 August 2009

Not-for-profit site audience

The not-for-profit is called For The Good, Inc. and serves the community of Utica, NY. In particular, the lower income areas of the community and areas of town where refugees live benefit from the services provided by For The Good, Inc.

Website visual identity

I want my website to convey a sense of community and good feelings. The site needs to represent progress and involvement so that people feel they are donating to a positive and successful cause. People don’t want to donate to someone that is not getting anything done or looks as if they are failing. This will hopefully help spread what good is being done by the organization and encourage people to help it continue.

Design Strategy

In my creative design process, I worked to think of a symbol that represents community. Out of my list came the flower I designed in Adobe Illustrator and it now sits on the upper right corner of all my pages. This is a single flower, made of bright colors and conveys the strength, growth and community development of the not-for-profit organization. The idea of using purple is a complimentary color and is used on the organization’s current website. My newfound love for Helvetica is represented by the numerous ways I used it throughout the various web pages. The type used is clear and legible, which is very important in web design. The navigation is prominent but not overpowering and I am certain my typography portrays the proper hierarchy.

Style Sheet

Header - Helvetica Neue Bold Italic and Italic (32 and 18)

Navigation Bar - Helvetica Neue Condensed Bold (14)

Home page title - Helvetica Neue Bold (30)

Home page subtitle - Helvetica Neue Bold (18 and 16)

Subpages’ titles - Helvetica Neue Bold (22)

Sidebar category - Helvetica Neue Bold (16)

Sidebar subcategories - Helvetica Neue Bold (14)

Sidebar subcategory details - Helvetica Neue Regular (14)

Body type – Arial Regular (12)

Document Grid

For the most part my grid is 50 pixels with 10 pixel gutters. While I used a grid, it was more of a guideline and not a strict system for organization. I chose my grid because it was easier to determine and just seemed to look right.

Sources

Most of the pictures came from the website for the not-for-profit.

Extras

All of the colors in my page came from the flower created for my header and the purple from the header as well.

davis_interfacedesign

Sadie May Davis
Interface design project
August 14, 2009

Audience: The most likely audience for this site is a combination of other, related non-profits and women’s rights interested individuals ranging in age from 20 to 50. The non-profit serves women, children, and adolescents around the world in the form of aid and education. I think activists are the most likely people to use this site, and they would use it to gain information about Family Care International.

Web site visual identity: My web site conveys a feeling of comfort and optimism. I use cool, comfortable colors to help make the images and content sold. The images are mostly hopeful, but they do highlight the issues FCI addresses. The site is simple and composed of rectangles. I did not want to detract from the content.

Design strategy: The homepage creates an interest in FCI. I used several layers to create links that work into the rest of the site. The main feature is eye-catching, and it makes the viewer want to learn more. The top navigation gives the broad areas of the site and the side navigation allows the viewer to explore more detailed areas of the main nav bar. I use the blue color to show which areas are links, and the blue color is also used to show people where they are in the site.

Style sheet:
Cronos Pro: Regular, Light Italic, Bold Caption – Header, motto, top and side navigation, sidebar headings, feature headings
Arial: Regular, Bold – body copy, body of sidebars

Document grid: I used a 12 section grid for this project. The twelve sections consisted of 63 pixels each. The eleven gutters between the sections were 4 pixels each. 12*63=756, 11*4=44, 756+44=800! (It took me a while to figure that out.)

Sources:
http://rickspate.com/images/africa_woman_child_web2.jpg
http://crs-blog.org/nutrition-for-mothers-and-children/
http://www.etravelphotos.com/photo.php?pid=974
http://www.cafod.org.uk/about-us/where-we-work/colombia/images/colombian-schoolgirls
http://runathena.com/images/BlankAfricaMap.jpg
http://www.alaf.co.uk/images/map.png
http://www.flickr.com/groups/1105005@N23/

Extras: I used blue and green from my header photo to create a color palette for this project.

Todd Cross' Interface Design

Rationale

Name – Todd Cross
Project – Interface Design Project
Date - 8/14/09

Not-For-Profit Site Audience – Save the Children is an organization that attracts the socially conscious. The audience is sensitive to the difficulties and hardships of society and they desire to act, contribute or at least, educate themselves on issues beyond the U.S. Parents and child health care providers gravitate towards this website. I think viewers would use this site to inform themselves on how they can help, donate, and/or volunteer. The not-for-profit site serves children in need on a world scale.

Website visual identity - I am looking to convey the personal nature of this organization that works intimately with children, families and communities. The visual plays to the “middle-of-the road” emotion experience – not too heavy and sad but at the same time, not comical or disconnected from the organization’s purpose. The design approach is almost neutral; however, it is intended to be accessible – it is really important to connect with viewers and get them to care about people and issues presented.

Design strategy – Through hierarchy, the design shows that this organization in on-the-go. There is a sense of calm and professionalism – important for those who want to give and might be afraid of untrustworthy not-for-profits. The navigation bar is about immediacy, news, and action. In seconds, you are able to find information about this organization and there are catch phrases directing the viewer (almost rewarding them for the click – Learn More, Go, Sign Up) . The type plays off the organization’s long established logo. The main feature switches to serif type to hint at a journalistic feel. The visual indicators are underlined links and small text units that change to red when selected.

Style sheet –
Logo – Gill Sans MT Bold, 39- Auto Leading, Tracking 0
Navigation bar - Gill Sans MT Bold, 14- Auto Leading, Tracking 0
Feature Headline – Georgia, Bold, 28 - Auto Leading, Tracking 0
Feature Subhead – Arial, Reg, 18 - Auto Leading, Tracking 0
Secondary boxed features–headline: Gill Sans MT, Bold 24 - Auto Leading,Tracking 0
Secondary boxed features – text: Gill Sans, Reg, 12 - Auto Leading,Tracking 0
Caption – Arial, Reg, 10 - Auto Leading,Tracking 0

Document grid – The grid is based on five columns, each at 140 picas with 15 pica spacing.

Sources – All images were shot by me.

Nasar Website Layout

Rationale

Attia Nasar

Project: Interface Design Project

August 14, 2009

Not-for-profit site audience

This site is aimed at anyone really. The organization serves children in northern Pakistan and Afghanistan regions. But this site is for individuals around the world to learn more about their cause.

Website visual identity

I wanted to show that this organization is serious in its mission. Visually I wanted to show that this site is organized and capable of doing what they have set out to do. I think this site is much more navigable now and an instill trust in the audience that CAI is a organization to invest in. I used all images that currently are on their website. I just positioned them better. I used a very simplistic typeface, to show the simplicity and sincerity of this organization.

Design strategy

I think my home page is very clean and relays the information neatly. I wanted to place a greater emphasis on the imagery and logo with my use of light and dark colors. The navigation is very easy and simple. When you move the mouse over the sections a drop down menu appears and when you click on a section, a similar menu appears on the left hand side for easier navigation and the page you have clicked on is highlighted to show that it was visited.

Style sheet

I used Helvetic Neue Condensed Bold for all the headings, navigation links, headlines, subheads, size 14 and 12 and 10. For the body copy I used Helvetica Neue regular, size 12.

Document grid

The document grid is interesting. It’s like a 4-column grid.

Sources

All images are from their website. The Facebook and Twitter images are from Google.

Extras

I used the colors from their logo.