I felt the website layout project was a good way to wrap up the class because it incorporated the important aspects we had learned throughout, such as spacing, proper alignment, and color choice. However, using Photoshop as opposed to InDesign made the project more time consuming than others.
I used the snowflake background to juxtapose the soft red used as a background on the main site, as well as set a hopeful winter ambiance. I softened the red because I felt a harsh red didn’t convey a gentle and hopeful feeling. The pictures used continue the Christmas atmosphere and reinforce the motif of beauty and hope.
The traditional Toys for Tots image presents credibility for the website and reflects the idea of giving toys. I allowed for users to easily donate by clicking the “Give a Gift” button, which sounds more amiable than simply exclaiming “Donate Now.” The social network icons allow the viewer to quickly and efficiently link to the website’s corresponding pages. The wuphf.com site is a comical and fictional site from NBC’s The Office.
I used Verdana as my font because I liked the crisp lines against the dark background. All of the information was obtained from the official Toys for Tots website, but all the text besides the History page were original writing.
Overall, I enjoyed working on this project better than most because it allowed for more individuality.
For this project I decided to do Children’s Miracle Network. I used this non-profit organization because I felt I the pictures would be great and it look really good. For the home page I used Ariel font because I wanted it to be like a real website and work universally. I kept this page very simple and clean only adding a few things. For the second page I kept the theme the same and just added a little background knowledge with a big picture. For the donate page I wanted to make it very realistic. When I go onto websites I like when the paying information is very easy to understand. I made that the theme for my page, indicating how much they would like to donate and how they can pay. For the contact page, I made three areas one for the name, e-mail address, and the message they would like to send. On the final page I made it all photos. I did this so people could see how happy these children are regardless of their circumstances, and how great this program is. My entire project has the same theme simplicity, and big pictures. I wanted everything to look consistent, and I feel that it came out well.
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.
This website is for the same non-profit I used for my poster earlier in the year: the Buffalo Olmsted Parks Conservancy. I made the document in Fireworks, which was fairly easy to pick up and well-suited to the project. My original idea, however, was nowhere near the final design.
I tried to use colors other than green and beige, which were what came to mind first when thinking of “parks conservancy,” and which are also the colors of the current website. The logo and the images I used are the only things not “handmade.” Most was simple enough – the inner shadow and drop shadow effects go a long way.
I decided to keep the type the same for the entire website. It’s Times New Roman, which is as similar to the organization’s actual logo as I could find. It has some class, but isn’t overly fancy, and it gets the point across. The 12-column grid I used also helped keep the site simple, and once everything was boxed out, the process went smoothly. The color blue I used is also consistent throughout the site.
The background is a very light grey, as I felt white was a bit too stark, and colors were giving me trouble. For the Parks System page, I imagine each image lighting up on the mouse rollover, and sliding to the left and expanding on the click. Similarly, for the Master Plan page, each title would light up on rollover, and the text would expand from it on the click. The menu/nav bar would also have highlights on rollover, and there is a small tab under each section to indicate what page is open.
I tried to keep the website simple, but not overly simple. I feel that there is still a good deal of information on each page, but (at least for what I have made) there are still links to pages deeper in the site.
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!
When I first started my website I tried to base it around my poster design, thinking it would be easier that way. It turned out to hurt me a lot and took a lot of time that didn’t need to be used. I then tried to work off a theme from the poster of balloons being released, but that wasn’t working either. I finally decided to use the wild, wild west theme. What’s more free than the wild west with cowboys running around on their horses? I wanted to do a cowboy riding alone on his horse but I couldn’t find a good silhouette of this, so I used a horse running away.
I decided I didn’t like my homepage with just the letters and the horse so I thought what if I have a horse jumping a fence, escaping on the homepage and the rest of the pages are the horse running free? But I couldn’t find a picture of that. So I made a wanted sign for my homepage since it went with the theme. I still think the wanted sign is kind of small for the front page and that the name of the event is small on it, too, but I tried it taking up the whole page and I didn’t like that either.
I had the entire writing font in the same yellow at first for all the text boxes on the pages, but I decided to change that to black last minute. I found fonts online for the names of the bands. I wasn’t sure how to arrange them at first. I played around with making some of the names bigger, but it didn’t look good to me. I tried to keep the contact information page clean and simple. For the tickets page I got a screenshot from another ticket place for the security check and I made the buttons.
Like most of the projects I completed in graphics, this one was difficult for me. Its location in time – at the end of the semester – added to my lack of patience and inability to muster creativity, inspiration and ambition while grappling with design. Luckily, the idea to do Doctors without Borders came shortly after the project was assigned. It also helped that the existing DWB website is of purely functional design despite the fact that the efforts of DWB are nothing short of unbelievable. The current website does not mirror the feelings of hope one gets when considering the success of DWB. I tried to make up for that with my design.
I wrestled with the idea of putting images as backgrounds for each of the pages, but ultimately decided that the symbolism in the imagery outweighed the possibility of chipping away at the “cleanliness” we have been commanded to strive for the entire semester. The background images are intended to represent the scope of DWB, whose operations stretch into more than 60 countries. I originally wanted to have a green jungle scene, an arctic scene, and everything in between. The problem is that almost all of the countries hosting the efforts of DWB are between Tropics of Cancer and Capricorn, ruling out the possibility of an arctic scene wielding any symbolism. All of my colors are, as usual, the culmination of a lot of randomly changing the colors until I liked something. The color of “Doctors without borders” in the top right of every page was an accident that I ended up sticking with. Somehow that glacial blue really sticks out of the earthy tones which hail over the rest of the project.
As I started to say at the beginning of this rationale, I ultimately was held hostage by the amount of actual time that I had available to devote to this project. I feel like if this project had happened earlier in the semester, the final product would have been way more polished than this version. Some of the pages look almost childish to me, but that’s (I think) because I didn’t have hours of time to sit and look and play with it until it looked professional. For me, creativity requires time and devotion, and time for devotion. I just didn’t have that for this project.
The Toys for Tots website is kind of boring. It is a good website and the colors are elegant enough, but it is too stuffy and old-person-y. It doesn’t make me think of children or Christmas or anything. I decided to make the website more fun and kid-friendly. I used bright, Christmas-y colors like the red in the Toys for Tots logo (which is a good logo) a Christmas-y green, and a dark gray that is almost black, just to give the page some focus. I used Cooper Std for the heading because I felt it was fun and child-like without being overly cheesy and silly. The rest of the page is in Helvetica, because it is the best font.
I had originally drawn a Christmas tree and had that as the main image, but I decided it would be better to have pictures of toys to inspire people to donate. The website is direct, functional and fun.
After going back and forth between three nonprofits, I chose Room to Read as the organization to do my web design project. Room to Read’s mission focuses on literacy and gender equality in education in developing countries. The organization builds schools and libraries, and then stocks them with books and educational games. They also commission local writers to public children’s books.
After reviewing their current website and looking through their information, I decided to convey the most pertinent information in six pages (home, about us, what we do, where we work, what you can do, and contact us). I wanted to keep the site light and clean, even more so than their current site. I chose to have a white background and to use the blue, green, and yellow from their logo. I decided to use variation of the font family Helvetica for all of my type. I found a few really nice photos that I knew I wanted to use, so I made a large photo at the top of every page
On the homepage, I put a large photo of a girl reading and the donate button at the top. I added a banner below “Double Impact $500,000” to grab the user’s attention. Next, I placed their video and a blurb about it, then recent blogs and donation information. At the bottom, I added a sign up for our newsletter bar and buttons for various social media.
On the about and what we do pages, I have an image at the top relevant to the topic. The about page features a picture of the founder, John Wood, receiving flowers from girls Room to Read has helped, and the what we do page features children in a classroom. Both pages contain a lot of type. I increased the leading and used color to distinguish between the different sections.
The where we work page has a map with the countries they work in shaded yellow. Below, I have a listing of each country and what has been accomplished there.
The what you can do page contains four ways an individual can get involved with the organization with a picture, some text describing it, and an arrow indicating to click for more information.
The contact page contains a form for name, email, and message along with mailing information and phone numbers for various Room to Read offices.
Throughout the web design, I tried to remain consistent with spacing and alignment. I used the 978 grid.
