The VH1 Save the music homepage was definitely my inspiration for my magazine project. I love the colors, they are very kid friendly. The shapes are round, much like my web design. It has links to videos as well as social media. Their donation bar is very unique and it stands out. Overall I really love this homepage. It is also easy to navigate through it
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.
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.
In class we talked about the importance of owning your own space on the internet. This web designer owns his own website, and I think it’s really cool. It’s definitely important for your web page to have the right information on it, but it has to be visually appealing as well… Even if you aren’t going into a creative career.
For this project I wanted to take a non-profit organization that had a website that was, maybe not so organized, and make it better. I chose the Songs For Kids Foundation, because for everything that they do, I was surprised they did not have a neater website.
First for the background I tried throwing in random templates. I did not like the way any of them looked. It didn’t look “kid friendly”. So then I decided to play with the colors from the logo. I used the eye-dropper tool in PhotoShop to take samples of each of the colors in the logo; the pink, blue, and yellow.
Next thing I did was to create a background. I did not want anything too exaggerated. So plain blue it was. At first it was pink on the bottom but then I decided to make the rest of the background white. Later I added a lighter blue bar for my navigation bar and for the bottom textbox because I wanted it to look as if it was fading into the white, but visible.
My next move was adding in my navigation bars. I did not want them to scatter across the toolbar. I wanted to make it organized and easy for the eyes to see. I then added my Twitter, Facebook, and Youtube Applications. I put the logo at the top of the page. It goes right into the blue background, and almost blends in. I used a large image for my homepage and the other pages as well. I used pink bubbles to represent which page was highlighted.
It was difficult to determine where to put my DONATE button, but I believe it fits just right at the top right hand of the page. I also added in a search bar because it made my page feel even more real. At the bottom of the homepage I have a description of the organization along with two pictures side by side. These pictures would represent a slideshow continuously playing on every page of the website.
For my font I wanted something that could be bolded and rounder so I chose Lucinda Grande. For the titles the font size is 18-24, but for most of the body of the text is ranged from 18 to 14.
The grid I used was taken from 960 Grids, and I downloaded the 12 bar grid. I used rulers throughout the document to align everything. Overall I feel that my website is very clean, easy to read, and gives you all the important information.
Website Rationale:
For my web design project, I picked the organization, Calling All Crows, which is a non-profit that specializes in empowering women around the world. The great thing about Calling All Crows is that it was founded by one of my favorite musicians, Chad Stokes, so it has a very grassroots feel. The organization provides a way to support global women’s rights in an intelligent and pro-active way, unlike the methods in which some feminists on the SU campus are fond of using, but that’s a story for another day.
While designing the headline of the website, I used the font, cracked, that a classmate suggested to me. The font provides a tattered and rundown feeling, which reflects the condition of the women that the organization is benefiting. By personifying the need for help this way, it allowed me to use hopeful images for the main banner. I definitely took the suggestions to heart and got rid of a lot of boxes that were cluttering the pages. I made the main image longer and I got rid of the majority of my body copy. I also upgraded Calling All Crow’s logo by adding a glowing crow that is perched on the picture frame. I was going to use their original logo that involves three flying crows, but it didn’t fit into the design of my website.
The main idea of my website is that it’s easy to read and navigate. The box in the bottom right serves as a source for further information on Calling All Crow’s events, projects, and social media. If this represented a complete work, the blue text would link to a separate, affiliate website, that would contain more in-depth information on these specific projects and events. Other than that, I arranged my design to better fit the grid, which, as you can see in my drafts, wasn’t the original case.
Have a Merry Christmas!
-Tom
For my website project I chose The Jimmy Fund as my non-profit. The Jimmy Fund is a non-profit charity in coalition with the Dana Farber Cancer that raises money for the fight against cancer for children in adults. The organization is the official charity of The Boston Red Sox.
After looking at The Jimmy Fund’s official charity website I realized that it was lacking images. On each of the pages on my website, I featured a large image in order to attain the viewers attention. I constructed a home, about us, events, volunteer, beating cancer, and red sox corner page. I decided to include the Jimmy Fund logo in the header of all of the pages and the Dana Farber Cancer Institute logo on the footer of all of the pages.
I decided to use the color scheme of black, white, and red (the colors prevalent in the Red Sox’s uniforms). Back home in Massachusetts, The Jimmy Fund is heavily identified with the Red Sox so I thought it was appropriate to use their colors.
For the layout, I wanted to design something simple and easy for the viewer to read and obtain the necessary information. Through looking at the charity water website I was able to attain a better understanding of how effective spacing can impact a website. I used the 978 grid to align various text boxes as well as smaller images. Throughout the pages I also incorporated small images that relate to the specific page.
I decided to utilize two different fonts in all six of the pages: orator and trebuchet MS. I changed the leading in order for the paragraphs to be read more easily. I wanted to make sure that the viewer could read the typography accurately. For the search bar, I made the page that the viewer was on red, in order to contrast from the other pages. I hope that my new design allows the viewer to successfully and easily navigate through the website.
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.
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!
I really enjoyed looking at this website. I love the background and how the colors fit so perfect in the overall concept. This layout provides inspiration for others to see how they can design their website. The colors coincide with the theme and the flowers and swirls adds to the concept of the look.
