Walsh | Project 5

Design Strategy:

After looking at the current web page for the New York State Blues Festival, I decided to make the web page appear less formal and a little more festive. The original page seemed fairly straight-edged and corporate. I decided to concentrate a bit more on the music and the musicians.

Although I aimed and desired focus a lot on the music, there were not many pictures available from past events. I managed to find pictures of a few of the scheduled performers, but there were not many visuals that had to do specifically with the New York State Blues Festival. As a result I ended up using several of the logos for the corporate sponsors of the event to bring in some relevant visuals.

I have found this semester that I am not very capable, accurate, or productive when I sit down and draw out sketches. I cannot get a good idea of what I really want to do with my design until I sit down at the computer and start playing with colors, images, and type. As a result, I due not have an extensive selection of sketches to turn in. This meant longer hours in the lab but I have accepted that as a necessary means for me to produce my best work.

Typography:

For the event name in the headline of the web page I decided to use Auriol Limited Standard Roman. This typeface came across as both relevant the idea of a festival and blues.

For the rest of the web design I used Frutiger Limited Standard Light, and varied between bold and non-bold. After using Frutiger in the captions for my magazine design I decided I really like it as a typeface choice. It is very readable, smooth, and fulfills the need for a san serif in web design.

Color Information:

The colors in my web design are RGB. For the blue areas of the background and logo, information is R 36, G 150, and B 212. For the black areas the information is R 3, G 3, and B 5. For the dark blue font used for hyperlinked type, the information is R 0, G 0, B 255.

Buchholz | Week Fourteen

Design Strategy: When coming up with the design for my interface, I knew I wanted it to be very simple and clear. I did not want it to be cluttered with photos or information; I just wanted it to be very “to the point.” I did not want it to be fancy, as it has to appeal to a college-aged audience. I used color and photos to make it more interesting and did not have a lot of text, as college students do not necessarily have time to sit and read through a website.

Choice of Typefaces: I chose to use ITC Fenice Std for the header because I thought it was a fun serif font that was very readable. I used Tekton Pro in different weights and sizes for the links and the body text. This font is a sans-serif font, which is easy to read and stands out. It does not clutter the design and contrasts the text in ITC Fenice Std.

Visuals: I used images from past Mr. Golden Anchor events and framed them in a vintage Polaroid frame. I also used a large “golden” anchor in the background, which I traced and formatted in Illustrator. I thought having a large anchor was appropriate to go along with the title of the event. I used a deep blue background ( Pantone 288 U) to compliment the gold anchor and white writing to contrast the background color.

Website: Stop Paying for Slavery Tour

Design & Story Strategy:

I decided to do my website project on the same not-for-profit organization as my poster project, the Not for Sale Campaign. This is a different event from my poster project. This event is the “Stop Paying For Slavery Tour 2010.” It is a tour by the Not for Sale Campaign where they travel to different schools, corporations and etc., to educate consumers and people about the true face value of our dollars, human trafficking, and the modern-day slave trade. The organization already has an incredible website dedicated to this event, but I tried my best to make it different.

I found the event’s logo and decided to make that my header. On every link, there is a different picture (all found on their website) on the top left corner. I put this visually beautiful and symbolic picture on the “welcome” page because I felt it gave the first page the “WOW” factor.

On the side of every main container, there is a human trafficking statistic. So every time someone refreshed the link or went to a different link, there is be a different statistic.

I only have one main container because I didn’t want the website to look crowded. The main container and the separate links all provided enough information for the event.

Every active link is written in white, underlined and has bullets/dots on both sides. To show visual hierarchy within the text box, I either made them bold, a different color, or used bullets.

Choice of Typeface:

I used the fonts Cracked and Helvetica. I used Cracked because it symbolizes the pain that children and people are still going through today. It also looks like an old, torn down font –which I think symbolizes the historically horrible issue of modern day slavery.

I used Helvetica because it’s simple to read. It also allowed me to have a variety of choices when trying to create visual hierarchy.

Annie Leibovitz

I never had an interest in photography, but hearing Annie Leibovitz speak was really intriguing and inspiring. I’ve never seen the Hendricks Chapel that crowded either. She discussed her accomplishments and the obstacles she’s overcome as a photographer. It was inspiring to learn about her confidence, creativity, and passion. I was floored at her ability to turn simple things into art. She is able to give any picture a story and a life –a very rare skill. I was also incredibly impressed at her diverse portfolio. Her top magazine covers illustrate her eye for art and beauty. Through Leibovitz, I learned that pictures really are worth a thousand words. Prior to the event, I didn’t know who exactly Annie Leibovitz was. But I feel lucky to have gotten the chance to hear and see her speak.

Annie Leibovitz

I must admit that photography is not my greatest interest so I was skeptical of whether I would enjoy Annie Leibovitz's presentation in Hendricks Chapel on April 29. However, I was completely wrong. Before going to the event I did some research on Leibovitz. I was astounded to hear of her body of work, which was incredible. I then went to the event and her introducer informed the crowd (which more than filled the spacious seating of Hendricks) that she holds the distinction of having the two top covers in the last 40 years, as voted upon by magazine editors. Leibovitz then showed the crowd her some of her pictures while reading excerpts from her autobiography. I was shocked by how amazing she could look mundane scenes, like a hotel room, look amazing and something that someone can stare at in amazement. I was also stunned by her pictures of the living quarters of famous citizens, such as Emily Dickinson, Sigmund Freud, and Georgia O'Keefe. I really learned how photography can be beautiful in many different ways and am very glad I decided to go to this once-in-a-lifetime event.

annie leibovitz

When Annie Leibovitz came to talk to Syracuse she discussed her new book At Work. The book discusses how her life while working in photography. She talked about how her photos have more meaning when the person in them has passed away. I found that statement very interesting and also very true. When someone dies their memories can partly stay alive through their pictures.

The one point that I found most important was when Annie talked to her niece at the end. She talked about how this is a turning point for people in the magazine, photography, and other fields like that. From 50 years ago until now photography and the industry have already changed and now and in the future there are only more ways it can change for the better. Now is our time to start changing things.

Week 14 | Blackstone

Sam Blackstone
Web Design Rationale

Event Choice
For this project, I chose to continue with the same theme that I focused on for my poster project. Although I ended up moving away from the Jimmy V Celebrity Golf Classic because its website was already extensive, I found a local golf tournament that was affiliated with the Cystic Fibrosis Foundation. I went to their website and saw that while it was clean and easy to use, it was lacking any creative flair. By adding pictures, and more information, I thought my design was much better.
Typeface and Color
For my navigation bar I used Helvetica Regular because of its clarity and because you recommended that we employ san serif fonts. For the body font I chose ITC Avant Garde Gothic Std Medium. I really liked how strong yet easy to read this font was. I had my body font use the same color as the logo and navigation bars to give it some consistency. I used a green background for all my links and gave it a little shading effect, with the green becoming darker as the eye flowed down the page. I thought this gave a little dimensionality to the site. The color was R: 138 G: 173 B: 89. My navigation bar and my privacy policy bar at the bottom were the same color R: 25 G: 45 B: 116 and I used the gradient tool to once again add a little dimensionality and keep it from looking 2D. Besides the basic Home, About Us, and Contact Us, I used Register, Location, and Awards because I had the most information for those categories and because I thought that this information was definitely important for someone who was interested in the tournament.
Pictures
Most of the pictures I used I took with my camera. I did this because I knew what kind of pictures I was looking for and I knew the pictures would be high quality. The mouse over is a picture of a golf club that I traced in Photoshop then placed into the design. I thought this was creative and helped reinforce the golf theme. The reason my project is six separate documents instead of one is because when I asked one of the TA’s, they told me to do it like this. I just took off the aspects I didn’t want and saved it as another document. Overall, I was happy with how it came out.

Week 13 Spivack

The visual hierarchy on this website is very evident. The bigger pictures are the more important ones. 20% off REALLY stands out because of its size, and background color. The "Deal of the Day" is another portion of the site that stands out with the use of color and font sizes. The use of pictures and picture sizes also create a visual hierarchy. There are a lot of links on the home page that take you directly to relevant portions of the site. The navigation bar is easily read and found on the page.

Week 13- Westbury

Espn. com represents an example good hierarchy. When looking at the web site there is so much to look at. There is a lot of information presented on the initial home page. ESPN however does and excellent job pointing out the major headlines of the moment on the right hand side of the page. If a viewer was looking for the top stories, they are easily directed to the headlines. Also the biggest pictures represents the biggest story of that day. Overall ESPn is a website that represents a website with good clean use of hierarchy.

Week 13: Hierarchy

The website for the Make-A-Wish Foundation has a very well-run website with great hierarchy. The tabs are set about three-quarters towards the top of the page that is directly under the large organizational logo, making it near impossible to miss. Also, other popular links, such as wish stories, ways to donate, and news and events are very easy to spot on the screen because of the hierarchy in which the website was designed. A job well done by the Make-A-Wish Foundation.

Stephen Wilkes

Hearing Stephen Wilkes speak was a great experience for me. I really appreciate beautiful photography but never took the time to fully understand the thought, time and care that the photographer puts into one photograph. I have a very limited knowledge of photography, in my mind a professional photographer only works within the limits of a studio and models. Wilkes, as a photojournalist expanded my idea of how photographers see the world, literally the whole world. Wilkes has traveled all over the world and has returned with an array of stunning photographs of what people might consider boring or useless. However, Wilkes saw each of his experiences as an opportunity given to him to capture a great, unique moment in time. His love of history and the ability to bring history to life through photographs and the impact one photo can have impressed me. Though his pictures of subjects such as the abandoned medical ward on Ellis Island, or his work in China were breathtaking it was his passion, commitment and personal philosophies that kept me interested. He repetitively focused on the importance of committing time to your craft saying "You need 10,000 hours to become a master at something." He also spoke of the importance of patience. Even when he thinks he has the perfect shot he "always likes to stay a little bit longer to wait and see what's coming". Finally, Wilkes emphasized the importance of spontaneity. He talked about how you can plan and "do your homework" but "your dealt a card and you have to be ready with what's dealt to you, you have to live in the moment."

Week Thirteen | Odiamar

The StyleCaster website is an example of good visual hierarchy. The page is very welcoming with a lot of white space and the name of the page very clearly defined at the top of the page. Also, the page opens with a large welcoming visual to contrast with all the type information. All of the menu bars are very organized along the top and left with the most read stories along the right and the search bar in the right corner. This website is very effective visually.

Week 13 | Walsh

I found that cuteoverload.com has good visual hierarchy. They place the more important visuals along with the articles in a dominant position in the middle of the page. They list the links down the left side of the page and have advertisements on the right. The page title is at the top, also in a dominant position. Everything is well organized and clearly placed.

Buchholz | Week Thirteen

I think that youtube.com does a very poor job with using visual hierarchy. The website is very scattered and it is quite hard to navigate to around the side. When scrolling up and down, it is hard to determine the information and search around for the type of clip you are looking for. I think that by having clearly displayed categories and by using different type and colors, the site would be much easier to navigate around.

The website sneakernews.com is an example of good hierarchy. While this website holds vast amounts of information about sneakers, it organizes it effectively. The use of images as starting points, as well as the links in each of the sidebars allows the user to find what they want when they want. Through my extended use of the website I have found it easy to use and very understandable. The hierarchy used is the main reason for this characteristic.

Week 13 | Hierarchy

I think the facebook homepage is an example of bad hierarchy. All of the different things in the news feed pop up highlighted so it can be hard to focus on just one thing. The important tabs down the side are very small and not immediately apparent so a new user would have trouble finding them. Everything is also very cluttered and there is no real order and hierarchy to what is more important and what is secondary.

Markland/Week 13

While looking for a website that displays clear, understandable hierarchy of information, I realized that Syracuse's webpages are an excellent example. There is a clear use of grids in the layout, as the information is placed into different organized sections. These four focus boxes are asymmetric, which gives the webpage some dimension instead of a stagnant centered grouping of information, but they are still aligned and pleasing to the eye. The information is nicely grouped into different categories for prospective students, current students, and miscellaneous information about the school and it's places of interest. These headings are large, upper-case font and the sub-links that correspond to them are left aligned. This main information sticks out from the rest of the links on the site with its different font and color. All of this creates an excellent visual hierarchy. The rest of the color scheme also works very well. The main focus is color orange (not surprisingly!). Two different shades of orange that are seen in the main photo on the left are used which creates continuity between the visuals and the writing. Dark/light shades of grey are used for some contrast. Overall, I'd say our school's website has a good idea of how to create effective pages.

Markland/Week 12

** I used some extra spreads because of the concept of my magazine (a small, sophisticated feature story on one inspirational figure every month). I wanted to keep it very clean and simple and wanted to incorporate many of the different styles of the featured person, Alicia Keys, so I utilized extra pages to have a different theme of photos each spread to keep a form of consistency but create my ideal magazine.

The Story

The instant we were assigned this project, I knew that I wanted to do a feature story on Alicia Keys. I have been playing piano and singing since I was six so she has always been an inspiration to me. Also, she has risen to the top of the pop culture world, and I knew I would be able to find very striking images of her. I chose this story in particular because although it is a bit dated, it portrays her roots and her personality just the way I wanted to. It was a Rolling Stones article that I found through Google.

Typefaces

I wanted the headline typeface to be fluent and a bit feminine, reflecting the sound of Alicia’s music. I chose Spring LP Std because it was a script font but has a casual feel. For the body text I chose ITC Stone Serif Std, as we discussed that this is a great and legible font to use in class. The body text is 11 pt font, and I chose to use the same font for the captions but in smaller font (9 pt) and a different color, white. I liked the consistency of using the same font for both. The leading of the captions gave me difficulty; for some reason InDesign would not cooperate and let me alter them! I got assistance from both Shruthi and the lab assistance, and the leading just would not change! So I am unhappy with that aspect of my project, but I tried my best to work with it.

Sources

All of my images, including the ad on the back, were taken off of Google, except for one. On the third spread, there is a picture in the bottom left corner of a hand with Alicia’s song lyrics and her face over it (with altered opacity). The hand is a picture I took myself. I wanted to incorporate a touch of my own photography, and I liked the symbolism of a hand since she is a piano player, almost saying the music flows from within. The links to each picture can be found on my InDesign file, and I have marked each picture size on the grayscale copy.

Colors

It was difficult to find pictures that were big enough and all had the same color scheme. So, I chose to reflect color from the opening spread picture. I liked the bluish hue in the hat so I used that for the headline and the captions. I tried to match the color scheme of pictures on each spread while still keeping the deep blue consistent throughout the article with the pull quotes and song lyrics. Alicia has an extremely eclectic style, so I think that the little differences in each page reflects her diverse background ethnically and her personality. I want this magazine to be an upscale, monthly subscription magazine with feature stories on contemporary influential figures. Thus, the cover is very simple and sophisticated.

Markland/Week 11

This Motor Trend website is an example of what I think is a poorly designed website. While the information is legible, the space is too cluttered for the alignment of each section to serve its purpose of creating a visual hierarchy because the viewer is too distracted by what else is around. However, the colors work pretty nicely together and all of the information seems to be vital to the website. I think if the web designer would have carefully planned this out and utilized sub-links (perhaps on one of the sides of the website) for each category on the navigation bar, the site would have been organized more effectively.

Week 12 Kochman

For my magazine I started off with 700 pictures from my spring break to Walt Disney World in Orlando, FL. From there I found a story that someone had written about how Disney World has changed to become part of the 21st century.

For the cover I knew I was going to put a picture of Cinderella's castle, since that is the most well known spot in Disney. For the title of the magazine I used Kaufmaan STD bold font since I looked up fonts that Disney uses and it was one of them. The other font on the cover was Futura another font that Disney uses. The pantone color I used was a red that matched the red in the flags on the castle.

For the first spread I decided to create a photo collage in a shape of a Mickey. All the pictures are of something that is mentioned in the story and the mouse head is also something famous that is associated with Disney. The title and by line is in Neuland STD black because is is again one of the fonts that disney uses within its parks and resorts. The color of the title is another pantone red that matched the color of Mickey's pants. The purple pantone of the background is a color I used because it it on the keys/tickets into the parks and rooms. The deck head is in ITC Tiffany STD Demi because this font is as close as I could get to another one of Disney's fonts. It is also a font you can read that has many forms including Demi, Medium, and Medium Italic.

The second spread has a few pictures that are placed in the layout to give the idea of another Mickey Mouse head but upside down. The photo captions are in ITC Tiffany STD Medium Italic and the story is in the same font just as Medium. The sidebar is just a top ten list of must dos in Disney World. They are in the font ITC Tiffany STD Demi. I also brought in the purple color from the first spread.

Week 12 | Blackstone

Story Choice
When deciding upon the story, I knew from the start that I wanted to use a profile story about someone. At first, I chose Dustin Pedroia, the second basemen for the Red Sox, but after looking at his pictures, I realized there were only action shots and not too many high-resolution shots. I ended up choosing Jay-Z because I found a good story with a few visual cues and because I found a lot of high-resolution pictures.

Typeface
My title, Forte, means loud and/or strong in the musical context and is in Albertus Mt Std. I chose it because of its simplicity, which lends itself to permanence, and because this magazine is supposed to be focused on the music industry. My folio’s are also in Albertus Mt Std. My cover headlines are in Copperplate because it’s a very clean yet attractive typeface. My story headline, deck headline, and caption are in Minister Std. I liked this typeface because it was classy yet very strong, almost powerful, which is exactly what I think of when I see/hear/read about Jay-Z. My sidebar is in Futura because it’s very easy to read and my sidebar headline is in Gazette LT Std because I like the contrast of the serif headline with the sans-serif body text. My body text is in ITC Berkeley Oldstyle Std because of its readability and because it is one of the body text typefaces you recommended we use.

Source and File Sizes
- Cover Picture: http://alturl.com/nkqa
Width: 1500 pixels Height: 1515 pixels Resolution: 300 pixels/inch
- 1st spread picture: http://dyallo.files.wordpress.com/2008/07/jay_z_luomo_vogue_05.jpg
Width: 900 pixels Height: 1185 pixels Resolution: 72 pixels/inch
- Smoking Cigar picture: http://www.luxuryplastic.com/jay-z-and-beyonce-ballin-hard/
Width: 2700 pixels Height: 4052 pixels Resolution: 300 pixels/inch
- Jack of Hearts: (I cropped it in Photoshop) http://www.flickr.com/photos/mafleen/367141786/
Width: 380 pixels Height: 500 pixels Resolution: 72 pixels/inch
- Rocawear ad: http://anadaday.files.wordpress.com/2010/02/rcoawear9print.jpg
Width: 2285 pixels Height: 3104 pixels Resolution: 300 pixels/inch



Color Information
For my colors, I used the RGB palette. My story and deck headline and my caption colors are the same and are taken from the color of the background in the picture on page 3. The colors from the sidebar are also from the RGB palette, with the basic background of black and the gold/cream color coming from the color of the background on page 3.