The donation page was one of the hardest pages to make in my opinion. All those boxes on how and how much to donate can make a page feel over crowded. This is a non profit site that i thought did a good job with their donation page. It is simple, easy to understand, yet gives you so much information on the different ways to donate. I tried to model my web design donation page off of this one.
Although the web design project is over, this website was actually used to create my project. Though I was unable to use the various colors and styles, I liked the font of the website. This website can be used for future students who might need help looking for inspiration.
I can not begin to count the number of times professor harper has told me that “less is more”. To me less means boring or not as pretty. But then I found this article on 20 Fresh Examples of Minimal Web Design. This tells you how to make the most with less. It’s always better to have a fresher cleaner page, that something cluttered and not so visually pleasing.
Ahhhh if only I had found this sooner. But I’m sure someone in the future will benefit from this. This is an article describing ways to make your web design better. It has some really helpful tips as well as some interesting designs on display. CLICK HERE to read it and check it out.
This website is from a website called One Page Love. It lists a bunch of websites that are only one page. I thought this was helpful not only for the web design and layout ideas, but because it is an example of someone putting their resume and all the work they have done into one page. Since professor Harper was talking about buying our own domains for our websites, I thought this would be helpful.
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.
Pets Unlimited is a 24-hour veterinary center, shelter and adoption center in San Francisco, CA. Their website felt a little crowded to me and I though it would be a good idea to draw the viewer in with large pictures, simple text and easy to read tabs.
I incorporated the colors of the Pets Unlimited logo (white, black and red) into my web design because they are very bold colors, which draw attention to the cause. I placed my navigation bar at the top of my page to make it easy for viewers to navigate. I used blue to highlight the page the user is on, as well as a white arrow. The image I used on me home page shows a dog with a yellow blanket beneath him and I took this yellow to use for my headlines. I used this mustard yellow throughout the rest of my pages for continuity. I used three fonts throughout my web design: Hobo Std for the title and headlines, Helvetica for the text and Handwriting – Dakota on some of my images.
On my about and adopt page I wanted to connect the users with the animals which is why I included a button to “meet” or “adopt” a chosen animal. This gives users an opportunity to see the animals throughout their search, and hopefully will inspire them to adopt or donate.
My main challenge was that I wanted to keep the text of my pages clean and simple without being boring. I originally had a black background but that took away from my images and Pets Unlimited information. I stuck with white since the top of my page was busy. I added red lines to separate information and included pictures to brighten up the text.
Overall, I think my web design is very clean and easy to navigate. My images are large and emotionally appealing and my fonts are readable.
RationaleThis project was a long one and to be honest not my favorite. I think looking back I enjoyed the magazine and poster the most. I was originally going to do my website on Runway Relief which is what I did my poster on however the more and more that I tried to find pictures and info for the website I failed. I then found “Project Earth Day”. Project Earth Day is an organization that allows emerging fashion designers to create clothing out of eco-friendly material and then the cause raises money for U.S. Green Building Council and other environmentally friendly companies in an effort for everyone to go green. If you look at the original website (www.projectearthday.com) it is awful and very unorganized. I kept similar color schemes but changed the layout completely.
On the first page of the website I created the “Project Earth Day” title in illustrator and converted it to outlines and then placed it in Photoshop. I like the color scheme of black, white, and green, as the black and white relates to fashion and the green incorporates “eco-friendliness”. As for the navigation bar, the green highlights what page the viewer is on. The top two bars were duplicated on every page. The bottom bar is the ‘copyright’ bar that I also duplicated on every page. Each page has dominant photos from the fashion shows and events. If the website were to be live, After each event the photos would switch. The bottom bar is the info section on each page. Each page looks very similar to each other as I wanted to keep it simple and easy to navigate. One of my biggest pet peeves is where there is too much going on. I like when everything is simple and classic.
On the second page is the About Us page. Like I said I kept the same two bars but highlighted about to let the user know which page we were on. The pictures I used on About Us Page is one of the founders and people working on the project and the second is from a runway show. I did a white text box towards the bottom because this page had the most text and I did not want it to be hard on the eyes with white on black.
The third page is the Support Us page, where I created a green donate button to be in keeping with the overall theme. Since the button is pretty big, I decided to use only one picture so that it does not take away from the overall page. Next to the button I put some text about the charity so the user knows where their donations are going before they donate.
The fourth page is the Contact page. The contact page has a “fill out form” where one who is interested can put their information and send an e-mail to projectearthday.com and ‘we’ would respond immediately. However, if the person did not want to contact us, but to learn more about the charity, then they can refer to the other websites and contact those people.
The fifth page is the events page. On the events page I posted previous posters for the events and then gave the user information about the upcoming event on earth day 2011.
Lastly is the photos page where I added photos from Runway shows to see the students work. Users can go and click on the button to look at the photo gallery. Also, I added a place where photographers can ‘apply’ to be the photographer at the next runway show.
The font I used throughout the website is Helvetica in white, green, and black. The only other font on this website is the outlines I created in Illustrator.
Enjoy!
This is just one of the many websites that has a terrible design. This article tells of the 30 worst looking websites you could possibly go to. They are all over the place with no dominating images and confusing colors. The worst part about them is that they really don’t use a grid system or any type of alignment at all. These sites are prime examples of what not to do, and they really show you how important alignment and grids are to websites and to your web design project.
