Instead of making a website for a non-profit event, I asked if I could make a website to showcase my portfolio. Earlier this year, I bought my domain name, steveprosonic.com, in anticipation of this project. I must admit this project took more time than I had anticipated, but I really wanted a design that I could be proud of. I can now confidently say that I am proficient with the vanishing point filter in Photoshop. It took some searching, but I found a great video tutorial on how to use it.
Not being a non-profit event, this website presented a challenge for me. It was tougher to construct a story. Then I realized this website was going to have a very different approach for it. I will be using this site to showcase my portfolio, so I realized the site would have to be primarily visual. Story telling took a back seat to creating a simple layout that wouldn’t distract from the images.
I started with a simple landing page with four links on it: Steve Prosonic, Learn, Work, and Live. Each link went to it’s own page with the “Steve Prosonic” link directing the user to the contact page. The design of the landing page was a dotted line starting in one spot and going off the page symbolizing my journey though life and growth. Each link was a dash on the line showing that these acts are a part of my journey.
On the Learn page I had my university information as well as conferences I’d attended and learned from. On the Work page I have links to galleries of my advertisements, design work, and photography respectively. I also have a quick synopsis of the places I’ve worked. On the Live page I have galleries of some interesting experiences I’ve picked up and some cool places I’ve been. For the layout of my image links, I have large icons
My favorite part of the design is the navigation bar image that took hours to create. I’m still new to graphic design so this would have probably taken 5 minutes for a pro. It is a play on the dotted line image I have on the landing page, but it is from a different perspective. To further symbolize my journey through life. I changed the view from an overhead perspective to one from beside the dashed lines which are actually huge blocks. They go on forever to show the infinite possibilities and the daunting task of going where I want to be. The person shielding his eyes and standing next to the dashed line blocks is me.
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.
Rationale of Webdesign
Jianglin Gui
GRA217-2
I choose the unicef as my project because it’s the most famous and maybe the most successful NGO. However, when I look at its website, it’s not as perfect as it should be. So I decide to make some changes that I think can improve the design of unicef.com.
There were so much information on its original homepage and looks too crowded and a little annoying. Following the “less is more” principle I try to give more space and display fewer words on the page. And I put big pictures in the front of the web to attract more attention and to leave a deeper impression than the original site.
I study the website of charity:water and greenpeace a little bit and get many good ideas to do my project. I also consider the unicef website of different countries. They have the same style and theme but different ways to display information and picutres.
I use the feather effect on all the boxes I put on the web to show a more huggable and harmonious feeling to people rather than harshness.However, as the prof. suggests, I take out 90% of the feather and glory effect.
And I pay attention to the horizontal space between the boxes and paragraphs.
Almost at the last moment, in class today while I was showing my work, I got to know that I cannot use Indesign to do this project. The export progress is really painful. I export the pages from Indesign to EPS format, and then open the EPS to adjust the Artboard size which is smaller than the size of my pages. Then I save the work as Illustrator format. However, the layers totally mess up. It seems like the software automatically divides my page into several pieces but not in an organic way. And at the same time, the names of the layers change and not in an order at all. I feel so frustrated about this.
I designed this site for a local organization called Voices for Independence. It’s an organization that advocates and provides services for people with disabilities. It’s a pretty grassroots organization, but they do have a website of their own. The only thing is, it’s not very exciting. I wanted to re-vamp it.
Aside from supporting everything the organization is about, I chose this organization because I love the name “Voices for Independence”. To me, it always invokes the idea of being a voice shouting for justice, change, and equality; of being bold enough to make yourself heard. That’s the idea I wanted to transmit through the website.
I chose the color red as my primary color for its boldness and the color gray as my secondary because it helps to tone down the red. This way, the viewer gets the effect of the eye-catching red, without feeling overwhelmed by it. The only two other main colors I use for background and text are black and white because they’re simple, professional, and they fit well in the design.
The layout is very simple. I think it fits because, with the main idea of the website being so bold, the simple page makes it accessible and less overpowering. I went for very clean lines throughout, very bold headlines to transmit the idea of being bold, and simple text and photo layout. I used the grid as best as I could, but I think I didn’t make some of my elements whole column lengths, which kind of messes up the rest of the alignment.
Overall, I am very happy with the way that this web design came out. I used the program Adobe Fireworks to create it and it was my first time using the program. It was frustrating at first, and this project took a lot of time in a very busy time of year, but I’m satisfied with the result.
***PLEASE NOTE THAT THE 5TH PAGE IS MISSING A CLOUD OVER “Take Action” BUT IT IS THERE ON THE PDF (I don’t know why JPEG won’t show the cloud for this page….***
Karen Hor
GRA217.2 / Professor Harper
Web Design Rationale
Projects just get more challenging through out the semester doesn’t it! This web design project was extremely time-consuming and difficult to conceptualize and create. I have never pulled an all-nighter inside a school building before—last night I didn’t sleep and stayed at Newhouse Mac lab to get this web design together. To my surprise, I also saw three other classmates from our class as well. Congratulations, Professor Harper, your course made four of your students lose a night of sleep! Also, I was upset the water main broke in Newhouse—I couldn’t brush my teeth in the morning.
As for my web design, I based off my website from the poster project: ASPCA. I thoroughly enjoyed this project despite the hardship because I am a huge animal lover and Animal Planet. The first time I ever heard about ASPCA was on a series called, “Animal Cops.” I decided to incorporate the orange from its logo (it’s their signature color) and also a shade of light sky blue. Both are complementary colors, not to mention Syracuse University’s colors, so I thought it would be effective in that way.
I spent hours looking for the right images on Google. I meticulously chose specific pictures to match each “tab” in the website. For example, the home page shows a cute Chihuahua in an elf costume because we are nearing the holidays. The “Take Action” tab has an image of two dogs running—hence, action. I also made sure to write cute, catchy quotes (that they would probably say if animals could talk!) with each corresponding image.
I used Helvetica throughout the whole site because it was simple and clear to read. I realize I used a lot of text in this project and that you said we should keep in mind to keep things on a minimum and simple, but due to the nature of this organization, I believed it was important to write as much as possible. A website full of images of animals just isn’t enough information. It works for Charity Water, but ASPCA needs a more informative approach rather than a visual one.
I know that it is not perfect, but I think it’s safe to say I’m probably most proud of the work and time I put into this project compared to our other ones. I still like my resume project the most, though. Happy Holidays!!
I found this project to be the most time consuming of all of the assignments turned in this semester. I had never designed a website before or even thought about how much went into it. I worked on it basically every spare minute I had: in other classes, while I got ready in the morning, while watching TV, after I got back home from parties at 3am. I really wanted to do well on this assignment.
I chose not to use the same non-profit organization that I used for my poster considering how much I struggled with that design. I decided instead to work with The Oiled Wildlife Care Network considering how relevant the topic of oil spills has become since the BP incident. I am also extremely passionate about the environment and I was really upset by all of the damage caused and the amount of animals that were harmed. I also assumed that there would be a decent amount of high-quality images to use in my design and information to use.
In creating the layout for my site I chose to use the 16-column grid and aligned my text and images to it. I chose black for my header and footer boxes because it was stark and wouldn’t take away from the poignancy of my images. I chose white for my text for this same reason. Yellow, baby blue, and green are the colors in the organization’s logo, which I incorporated into other textual elements and accents. Other than my homepage, I chose to have a two vertical column layout (the homepage has a two column horizontal layout).
The most difficult aspects of this project were making sure that everything was properly aligned with the other elements on the page as well as with the grid. It was also hard to make sure that I was keeping my design simple and clean. I originally had too many boxes and too many colors, which worked to take away from my images and overall design.
After going to office hours and receiving feedback from the class I was able to refine my site to where it is currently. I am actually pretty satisfied with it and am proud of all of the work that I put in. I think back to when I started the class and see how much I have learned. I had almost no knowledge of Adobe Creative Suite products and now I am able to use them relatively easily to make extremely large projects. I feel that this project as well as all of the other projects in this class were very useful and the knowledge that I have gained will assist in making me much more marketable in the future.
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.
