week 14 | WU

Yiwei Wu

GRA217 | Web Design

Rationale

Design Process

Since this is a website only for the event, there is not much information needed on the website in total and in each section. Therefore, I chose to do something different. I made this big blue box in the center of the page that contains all the information I need in homepage and other link pages. This way the central box is prominent. Also I make the headline hanging on the edge of the central box, and gave it a glow, which makes it looks like a sun hanging in the sky. In addition, I have two flowers as a continuity factor through out the six pages. On the homepage, the bee and the text are from Illustrator doc of my poster.

Typeface Choices

The headline, I used Postino Std since it has this thick strokes and fun characterastic. For the net bar links, I used Hobo Std. It is sans serif, which is easy to read and with a fun character. For other 5 link pages, I used Chalkduster for the titles, and Gill Sans for the body text. Gill sans is readable and looks simple and modern.

Pictures:

I found all the pictures from Say Yes to Education Syracuse Chapter’s website.

Week 14 Ryan McDonnell Web Design

(I think this appears backwards thanks to Blogger, so read it from bottom to top if it does)

Event Choice
When choosing my event I decided to do a lacrosse game for my old high school team that’s benefiting autism research. Lacrosse has held a special place in my heart and playing it back in high school is one of my fondest memories. When I heard they were having a game to raise funds towards a good cause, I felt this would be a very appropriate event to make a web site for.

Design Strategy
I wanted to keep my design simple and not too over the top. Considering this was for a one-time, annual event and for something which not much of a budget would be going into, I decided to not go overboard and just go simple with an appealing design. I was also going for user accessibility when going through the process of creating the web site. I made a clean navigation bar on the left hand side that is simple for finding links and for splitting up the site nicely. The photo on the top bar is of my high school’s field, which I felt would set up the page nicely. The autism ribbon also helps to signify the cause for the fundraiser. The circle with the D in the middle is a variation of my high school’s logo and I felt was good to fill up some of the excess empty space on the bottom of my navigation bar.

Color/Typeface Choice
The colors blue (RGB 1/1/248) and grey (RGB 181/180/180) are my high school’s colors, so I decided to make the site those colors. The current page is highlighted in white on the navigation bar to stand out from the links in grey so that the user knows what page they are on. The body type is black once again for legibility while the headline is blue to grab attention. I decided to go with the Futura family of fonts for the top bar and the navigation bar because I thought it went well with the simple design. My headline and body text, on the other hand, are the Arial family because although it’s one of the more used fonts out there, it is very readable for users of all ages.

Week 14: Reiter

Design: I chose to do my sorority's philanthropy because this past fall was the first time that I was able to participate in it and it was really fun and meaningful. There is so much work that goes on behind the scenes when planning something as simple as a soccer tournament. I wanted the site to be very simple and fun, to mirror the day. Although the topic is very serious, the actual day is very care-free and fun. I chose purple and yellow because I thought they contrasted well, and they were the colors of our shirts during recruitment for our philanthropy. I made three main containers for my website to make it simple and organized.

Text: For my text I used two fonts. For the sidebar I used Balzano Regular because although it did not have very many weights I thought it was a lot of fun and different. For the rest of my text I used Bulmer, in many differnet forms including italics, bold, bold, display, display, and regular. The colors I used were yellow and purple with the purple being R=83 G=19 and B=71.

Pictures: All the pictures were from friends in the sorority or my own camera. The logo I got from the Autism Speaks website. I traced a soccer ball for the marker on the side bar.

Week 14 | Leveille

Design
I wanted to create a clean, simple and organized look for the Savor New Hope: Showcase the Arts event in July. I also wanted to maintain New Hope Arts, Inc.’s “personality.” I decided to create a banner using a painting of a street in New Hope as the home page to introduce the user to the event. I felt that this emphasized the importance of art in the community. For the five linked pages I kept the layout the same in order to keep the site organized and easy to follow. To create gestalt, I incorporated the colors of the logo, red and black, throughout the design. The black portion of the logo also serves as the icon when a user hovers over a link. Black containers were used as sidebars throughout the design and red containers were used for the main information of each page. I included photos from the event in order to give the visitor a feel for what it is. Also, since we are at Syracuse right now, I chose to make the directions to the event from Syracuse University.

Typefaces
I used Bembo Std. for the navigation bars at the top and bottom of each page because this was the font I used on my poster. In order to create a stronger image for the event, I used Futura Std. bold for the flag and Futura Std. book for the headers. The reason I used two different weights was to create a sense of balance on the page. The main text is Helvetica because it is a font that anyone can see online and it is clear. Although the difference between the other two fonts and Helvetica is subtle, the main text also stands out on its own due to the font.

Week 13: Reiter

I decided to use the Marie Claire website because I have visited it a lot lately because I did a magazine project on it. I really like how the name Marie Claire is very large and red so that that name of the magazine is very established. However, I like their layout the best because I think it uses hierachy very well. It had the main picture in the center that draws the eye, but also 5 larger text heads that are headline for articles. Because of the larger text heads the eye is immediatly drawn there. Next, the eye goes down to the next biggest thing- the daily blog icon. I think hierarchy is used well here because it moves the eye around to the most important parts of the page. Obviously, the links at the top to other parts of the site are smaller because they aren't newsworthy or interesting...they are just there. However, the other headlines are different sizes according to their importance and attention- grabbing status. The use of smaller pictures for smaller stories, and bigger pictures for more important ones also contributes to hierarchy.

Extra credit | Annie Leibovitz | Staponkute

April 27, 2010

Annie Leibovitz

This evening, I had an opportunity to listen Annie Leibovitz. Honestly, I was not aware of how important she was and I haven't done a research of what she actually was. Now, after exploring information on internet and of course attending her lecture, I realized what a great opportunity of seeing her I had. Seeing and hearing all the names she worked with, makes me feel that this woman has already accomplished so much that many people can only dream about.

Not knowing of what celebrity I am going to hear, I was at first surprised of the number of peoples who attended. I came to Hendrick's Chapel about 30 minutes earlier and it was almost packed at that time. Not only the students were excited to see her, but professors, photography lovers, family, and friends were also there to support her.

The audience was applauding and shouting when she showed up. Leibovitz, being 60, still looked young and stylish. People could not stop taking pictures of her. After impressive introduction, I was excited to hear her speak and tell of how her life happened to be so successful.

However, I felt that her photography was talking more than Annie herself. Our professor for graphics design, Sheri Taylor, revealed that the projector was brought even from New York in order to satisfy Leibovitz's wants. That was also the condition Leibovitz would make an appearance at Syracuse. And I feel, it worked well. Lots of photos she showed were remarkable, but some not too much, for me personally.

I was amazed of how she was able to get into contact with celebrities such as John Lennon, Demi Moore, Nicole Kidman, Elizabteh II... This list of celebrities looks never end. I realized that being a photographer is not only about being good at your job but also about great personality. With this, she even the Queen Elizabeth could not resist of taking more pictures outside which was not planned before.

I think the beginning of her success was her young age of 19-20 and job at Rolling Stones magazine which brought her celebrities such as John Lennon to work with. Starting young, she already built an impressive portfolio which became well recognized and respected.

My father is a photography lover, and even though he would probably not know of Annie Leibovitz, her works would talk for her. I wish I could put myself in her shoes and have the experience she has. Meeting all the people she did is priceless.

Week 14 | Palermo

Design Strategy:

The event I chose is an annual fundraiser at my high school that goes towards the non-profit Camp Good Days and Special Times. I was unsure about what to do on the home screen until I settled on the idea of making it look like a dance floor pattern. I knew I wanted to incorporate my school’s colors (Green and White) with colors from the logo of Camp Good Days (Blue and Red). I chose a shade of neon green for the dance floor to contrast the forest green in the bar across the top of the website. The other colors in the dance floor were pulled from the Camp Good Days logo. Keeping with the dance/music theme, I titled my navigation bar playlists and put eighth notes next to each page title. I knew that the majority of people visiting the website would be students and parents so I tried to gear the content towards those audiences.

Choice of Typeface:

Since most websites have serif typefaces I went looking for a serif and decided upon Frutiger. Many of the serifs I looked at had bowls on the letter a’s that didn’t look good at medium point sizes. For the event title I placed the D and the M in black weight because the event is often abbreviated among students as “DM” in place of Dance Marathon.

Visuals:

The main visual was the dance floor on the home page that I described above. I used the colors in the dance floor as the background colors for the web pages. I chose grey as the color for the navigation bar because iTunes uses a lot of greys in their program and iTunes is popular for making playlists. Grey is also a universal color and goes nicely with the multicolored dance floor pattern. The other visuals were pictures that I got permission to use from a friend that took pictures of the event the year I was a senior and MC’d the event. I used the lasso tool to crop the photo featured in the upper left hand corner of every page showing students sitting with campers from Camp Good Days.