This is a little late, but when I saw it reminded me of Prof. Harper always telling us to keep things simple and to ask ourselves what we can take away. This is an article with examples of simple website ideas.

Continuing with the theme of making your own website…  Here are some helpful and practical tips when thinking of what you should put on your web page.  This might be something to consider looking at if you are planning on getting a head start on your own website over break or in the summer.

Here’s a picture that represented this website on another site:

Here’s a screenshot of the actual site:

I love dogs, so I wanted to find a non-profit organization that deals with rescuing and caring for them. When I found StrayfromtheHeart.org, I knew it was right for me because it not only had a cool name, but it wasn’t one of those huge, well-known non-profits that I knew other people would be doing. I was happy to bring awareness to an organization that was a little bit more unknown. When I found the home page photo of the three golden retrievers sitting in a tub together, I was inspired and knew exactly what I wanted the tone of my website to be. I wanted something warm, homey, and cheerful. I did not want anything dramatic or edgy.

In choosing my color-palette I took all of my colors from the home page photograph. I used the goldish-brownish color of the dogs’ fur as the background, and the yellow from the tub as my footer. I also used the pink from the dogs’ tongues for my navigation bar, which although may seem tacky to some, I believe keeps the site bright and prevents it from being too boring. I also took dog tags and altered them in photoshop so that I could use them as my buttons on my navigation bar. I also put a slight highlight on the upper half of the tags to make them look shiny. The font I chose for the navigation bar as well as other various elements of the site was Handwriting – Dakota. I felt as though this conveyed the cute and cozy feeling that I wanted the website to portray. For the “Adopt” button, I placed it a bit above the bottom of the photo because had I placed it any lower, it would not have been viewable without scrolling down.

For my About page, my goal was to keep things clean and simple, and not to have too much copy. Hence, I inserted the “read more” links at the bottom so as to offer the reader the opportunity to read on, but not clutter the page in the beginning. I chose the picture of the Beagle sniffing the flower because it conveyed the idea of exploration and discovery, which is what the About section is all about. I took the green from the photo and extended it to a box next to it that reads “Who are we?” I felt as though this was a good way to draw the reader in.

Now my Donate page may seem a bit strange and unconventional, but I don’t believe that good web design necessarily has to look boxy and symmetrical. I wanted to do something a little bit more fun and playful so as to grab the viewer’s attention when it came to giving money. The idea is that the dog is dreaming about a better life as a result of the donations that the organization is receiving. As the thought bubbles get bigger, the donation amounts increase. Of course, I wanted to offer the viewer the opportunity to donate their choice amount of money as well, which is why I created another bubble for that.

I also wanted to make a Shop page, since the website sells a ton of products to help raise money for their cause. This was perhaps the part that took me longest out of anything, because I had to make sure that all the items lined up. I decided to put a pink box behind all of the items so as to be consistent with the navigation bar. I also created a “shop by category” section to help organize the items further. I thought the dog wearing the “bling bling” shirt would be a cute and humorous way to entice people to buy the products. While it may seem a little out of place to some, I think it works perfectly because it gives a page of boring photographs of clothing, hats, etc. some flare.

My Adopt page is all about having the photograph interact with the buttons on the page. The dog in the photo is reaching out of the box with his paw, and the paws next to the buttons line up perfectly with it. The metaphor is that the dog is reaching out for all the things that are on the buttons, which are to be adopted and cared for. This page also follows the same format as the About page, which has the photo with a box next to it that draws from color in the picture. Overall, I think the website induces the warm, bubbly feelings that dogs often do in people, and effectively encourages them to donate and adopt.

For my web design project I decided to focus on the website thehungerproject.org. I thought this was a great website for it because it’s a non profit that helps to end world hunger, especially focusing on children. I started off with some darker colors because I knew this would have to be a serious website. The main colors that I used were grey, blue, white and black. I decided to have a big picture on each page, like a lot of the example websites had. To keep it cohesive, I made each of those pictures black and white, and played with the hue and saturation to get them to look darker and more somber. I used fonts that I thought were serious and simple to get my message across. I also added some color pictures in so the website wasn’t too dull, and I thought that they added a nice touch. My donate now box is big and red to get the point across, and I put it on every page, and even added a donate page just to really drive the point home that people need to donate; a good consistent call to action was what I was going for. I put facts on the front page, because I thought it looked really cool when other sites, like charity-water had mind blowing facts to start off the website. I also put a sentence type call to action on the first few parts next to the main picture, because I thought it fit in really well with those pictures and with the website. I tried to keep each box aligned to the grid so that it was a nice neat, clean website. All in all, I think it looks clean and appealing.

With this website, I wanted to incorporate my charity’s message into the design of my website. Since the charity I chose is environmental, I decided to communicate that with the background of the site, so I used a landscape image. With an image as the background, I knew I needed to keep the rest of the site simple so it wouldn’t look too busy, so I stuck with white as the main color of the site’s boxes, with blue, green, and yellow as highlight colors. I think this use of colors tied the site into the background well. I also wanted to use images effectively, so I used cheerful images focused on children since the charity is also about education. I kept the alignment generally the same for all the site’s pages, for the sake of consistency, and as a whole, I tried to make my site simple, clean, and easy to read.

For the website project, I decided to do a different nonprofit than my poster project, so I chose the Alpha Gamma Delta Foundation. The Foundation supports diabetes awareness and education, as well as gives back to the sisters of Alpha Gamma Delta Foundation. I wanted to show how all of the rewarding experiences the sisters of Alpha Gamma Delta have from Bid Day through their alumni days. I used the colors of Alpha Gamma Delta, red, buff, and green, throughout the entire website to reinforce the meaning of the Fraternity. At first, I used the Fraternity flower, the rose, in different colors as the background, but Professor Harper said that that was too busy. So instead, I included boxes as the reinforcements of color, but I did not want to include too many boxes since it cut off the flow of the website. I used the donate button on every page as a constant point of entry for viewers. The social media icons appear on the home page and the contact page, so people can connect with the Alpha Gamma Delta Foundation through other mediums like Facebook and Twitter. Overall, I think my website is effective in informing people about the Alpha Gamma Delta Foundation and soliciting donations for the cause.

Samantha Danziger

GRA 217.5

Rationale – Website

It took me an extremely long time to choose and settle on an organization. I ultimately chose End Human Trafficking Now, which is an initiative hailing from Switzerland.

I decided to go the darker route, to show the seriousness of the issue and settled on a black, gray, white and red color scheme. It’s classic and bold.  I used a downloaded grunge texture for the back ground. It was originally brown so i desaturated it and went from there. I remade the logo using a hand print.  It’s like someone saying stop and also like someone reaching out.

I followed the 978 grid system and created 6 pages.  They were all pretty similar with small layout differences, such as the side  bars and forms for information.

I used a different picture and headline on each page, each nailing home the importance of the issue of human trafficking.

Links in the body copy are in white to contrast with the black body copy.  the navigation is simple and you can tell what page you’re on because of the small black arrow.

On the pages with side bars there is a small white arrow to display which page you are on.

http://projectearthday.com/