WEEK 7 | The Allur of Color Starter Post

Color.

Life would be Pleasantville without it. Black and white can be dramatic, but life is so much more exciting with color.

Color really matters. When you select clothes or school supplies - your choices are guided by many concepts - personal preferences, how a color makes you feel, how our different cultures even assign meaning to colors.

Ya’ll have already tried your hand at designing with color – some in the resume project and all with the poster project – and can attest that it's easier said than done.

I found an article at the Color + Design blog that gives some basic info on color theory and designing. Read this post before beginning the below assignment.

Also, for fun check out this Fashion Color Report that Pantone (yes, Pantone) puts out every year with predictions for the season’s favorite colors. Read through the descriptions of what designers are saying about the colors they use.

Eventually you, too, should be able to say why you use a color and think about what kinds of color you should use to add that extra meaning and effect to your design. For that, you have to get into the head of your audience!


ASSIGNMENT

For this week, POST FOUR examples of color (image, poster, video – to use video, just copy and paste the embed code on the youtube page):

1. Subtle use of color (monochromatic or very little color)
2. Bold use of color (bright color, many colors, etc.)
3. Black and white only
4. Strong contrast in values other than black and white (light and dark areas using tints of the same color or different light and dark colors)

Things to think about: are they using one color (monochrome) or many colors, like this relaxing Sony Bravia commercial?







Offer brief analysis on why the color used is so effective. What does the color make you feel? Luxury? Aggression? Calm? Speak to whether analogous or complementary colors are used. For that, you may want to look at this Flash application that is really handy for learning those terms and what they mean. It’s also linked from the Color + Design post.

Remember, this is an introduction to each of the elements of color. We'll be taking an in-depth look at color in class soon.

Don't forget to title your post and put labels on it (your name, any elements of your post that would easily identify it - e.g. Tide ad or Wired Magazine layout).

Other color sites that are fun:
http://kuler.adobe.com/ - helps you find CMYK, RGB and Hex values for a wide range of colors and also helps you find color themes/palettes easily.

Project Posting- Website

I didn't mean for my website to post in reverse order, sorry! Also, I don't actually have a saved copy of my rationale and I handed in my typed rationale under Taylor's door today so I can't retype it up. I could try to think back to what I said but what it comes down to is that I used grids, I thought of a creative way to represent the visual themes my poster used to make it all part of the same concept, and that I did what I did because I thought it looked good. That's all design is and should be, in the end.

Extra Credit- Ira Glass

After attending his lecture, Ira Glass is my new favorite person. I was very impressed and just blown away by his performance at Hendricks Chapel back in the beginning of November. I use the word performance because he did more than just lecture the audience that evening: he told us stories, he played clips from past interviews, he even played background music. He was very funny and he mesmerized the audience with his great storytelling abilities.

He opened his performance with all the lights off and talked about how the radio is an excellent medium for storytelling because the lack of visuals forces the audience to listen. He then went on to talk about how archaic traditional journalism has become because it no longer tries to engage the audience. Glass also discussed his method for storytelling that gives action followed by another action and then a thought so that it keeps the audience intrigued with constant bait.

Overall I really enjoyed Glass’s presentation. He has an amazing knack for finding stories in the most pedestrian of places. And after becoming so accustomed to the banal, monotone voices of most broadcast journalists today, it was very refreshing to listen to someone just sound so human.

Tom Kennedy

I went to the lecture given my Tom Kennedy, a photojournalist and now currently the head of the New York Post's multimedia department. He talked about how print journalism is in trouble and photography is being cut back significantly. He suggest that stories now must be riveting and connect with people. There must be power in the story and readers feel a connection personally are more likely to continue reading the story. Readers must be pulled in and the subject becomes more like a one on one connection. Photojournalists must step up their game, and find a way to compete in the digital age. Multimedia is a great outlet for photojournalists, and Kennedy suggests that finding new technology is important when competing with videos and audio. In order to find these new outlets him and his team use the site blue box to experiment with different forms of multimedia and eventually interactive media at some point. Right now photojournalism in in a discovery zone and they are figuring out what to do next.

By Kristen Jones

Grids

The Tiffany&Co. website demonstrates two of the of the 6 grid based design strategies. The first strategy is about joining for variety. It suggests that that when using grids you should use a mixture of horizontal and vertical grids. Majority of the grids are horizontal but there are vertical grids Incorporated on the page that are not obviously sectioned off. It adds interesting layouts an breaks up the space. The information and drop down menu as are vertical grids to add variety. The second principle that the website incorporates is the illustrating areas strategy. The idea suggest that a design is incorporated adds something stimulating to a boxy design. The ribbon on the website breaks up the space but it does not cross over the grid lines. It is maintained with the grids but still crosses over to others, adding a interesting design. The Tiffany&Co. website is great example of using grids usefully.

By Kristen Jones

I have enjoyed this class so much! This was the largest workload class I took this semester, and probably should have been worth 4 credits, but all of the hard work payed off. It's so funny when I look back on the word mark project, and how I thought that is was sooo difficult! As the semester progressed the projects became more and more time consuming and intricate, but the skills that I has accrued had also increased. Now, I can't even help noticing design flaws and strengths wherever I go. I am getting to be a bit of a design snob; almost to an obnoxious point.
I really enjoyed the critiques that we received from our peers. That may be one of the most useful forms of critique because our generation will be the receivers and creators of the design messages we transmit. I valued what my friends thought of my work, and was both stimulated and challenged while watching them advance in their projects as well.
This was one of my favorite Newhouse classes! I have learned valuable life skills in this course that I know will prove vital later on in my career.

Katlynn Brunkhorst Week Ten: Grids

It dawned on me the other day that my own BUILDING, Booth Hall, is an excellent example of a grid that comes from real life. Each window grouping the ground and eight floors has a three window configuration, and then a cement divide. When you get to the second portion of the "L," where the suites are located, it moves to a four window configuration. There are a series of grid systems involved here that clearly took some thoughtful planning. You have the two large rectangles that form the front faces of the building, then the block of three and four window segments, then the horizontal rows, and vertical teal sections (which I must say look cool from the outside, but they serve no larger purpose except for blocking light from coming into my bedroom!). Also note the smaller black rectangles under many of the window groupings, and the odd add-on above the first floor.
The structure was built in 1963, and is a sister building to Dellplain next door. I'd say that the grid scheme and color choice was indicative of the era. Could it be that were are getting away from the even grid look when it comes to architecture and forms of design in general? It seems that when we dumped the Modernist Era in art design we did so in structural design, as well. Have you seen the oddly narrow and awkwardly angled/balanced windows of Ernie Davis Hall?!

Hannah Doolin: Interface Design

Design Strategy:
Although I did my poster design for The Chair Affair, I chose to do an interface design for The Mutt March, a non-profit event put on by the Michigan Humane Society, because I felt that I could be more creative with my design. Also, the event was created in memory of Laura Lee Greer, who was my friend’s grandmother. The family is very involved in the event, so I was able to use some photos and information that they had.
I decided to use a textured background because I thought it would make the site visually appealing. I chose a stock photo of grass because paired with the bone-shaped buttons in the foreground, I thought that this gave the feeling of a dog playing in the backyard. The next idea was to use bone shapes for the navigation buttons on my site. I used Illustrator to trace a photo of a Milkbone to do this.
For the headline bar at the top and for the container on each page, I used a bright blue color because it contrasted well with the green grass, and added a bright, playful look to the page. I used a font from dafont.com called Mandingo and decided to make it white because it contrasted well on the bright blue. When the viewer navigates from one page to another, the text on the navigation button changes from white to blue so that it is clear which page they are currently viewing.
To make the headline bar more interesting, I created a doghouse in Illustrator and placed it in the upper left corner of the page as a navigation button that would take the viewer to the Michigan Humane Society website if they wanted any more information about the organization. I then created little paw prints and the image of a dog walking off the page. As well as adding cute detail to the page, it also acts as a way to draw the reader’s eye from the left side to the right side of the page.

Choice of Typeface:
I used a font called Mandingo from dafont.com for the headline type and typeface used for the navigation buttons. I chose this font because it looked young and playful, which is what comes to mind when I think of dogs.
I used Rockwell for the information in the containers on each page because I thought that it stood up well to the quirky Mandingo type and is easily readable.

Color:
The red color used for the bone navigation buttons (C=0 M=100 Y=100 K=0) contrasts well with the green background and works well with the Michigan Humane Society logo on the homepage because of the red heart. I used this same color to outline the headline bar, for accents in the doghouse image, and for the photo bowl.
The bright blue color used for the headline bar and containers (C=80 M=46 Y=0 K=0) also contrasts well with the green background and adds bright color to every page.
For text that would link the viewer to another site, I used a brighter blue color (C=50 M=0 Y=0 K=0) to show the viewer that this was something that should be clicked on.

Photos:
Some photos were taken from online sources and some were scanned because they were my own images.
On the event page I used a screenshot image from Mapquest.com, which would be clicked on by the viewer to navigate to the map and directions to the event location.
I created the photo bowl in Illustrator as a fun interactive image that the viewers can click on to view photos from Mutt Marches in the past.

FINAL PROJECT

Though initially I was going to make a much more complex website, I remembered who my audience is supposed to be. This site is just going to be looked at by a small number of people from my town, likely from a link from the high school site. With that in mind, I kept my school colors as the two main colors for the site, blue (R: 12 G: 37 B: 146) and gold (R: 163 G: 174 B: 65). Though I thought of using more holiday colors, or even just more white, I decided to stay with what the school knew best, their own colors, especially since I thought the blue background worked well.

All the possible information is up on the website. I tried to stretch it out as much as I could, but when all was said and done, this was all the information needed for the toy drive. If I had added anything more it would have been useless and fictitious. By giving the readers contact information, informing them what the drive is about, and telling them how to donate and volunteer, a simple yet efficient website is created. Also included are links to a facebook group for the event and a way to download the poster.

On the header, “Roxbury High School” is in Joanna MT Std, a serif that complements well with the “Annual Toy Drive” in Ocean Sans Std, a sans serif. The navigation bar is in Helvetica as I just wanted a simple, clear typeface that did not draw much attention to it. For the body type on each page I used Verdana, which I thought fit well on the page since it is not very flashy and easy to read, and if the school chooses to use this site, can be shared by Macs and Windows.

When all is said and done, the intention of this website is simply to inform my high school about the toy drive. I want them to be able to go on the website, and feel like they are right at home, like it is part of the school. I also wanted them to walk away with no further questions. I believe I accomplished both of these goals.

Wrap-Up Post: Matt Colon

As many have said on here, I wasn't sure what to expect when I took this class, but I was very excited to learn graphic design. Messing around with Photoshop is something I never really did, ever, so I wanted a chance to finally get to do that. And I certainly did, over the course of many all-nighters and absurd hours spent in the labs, but I got a strange sense of pride for what I made that I never really have felt for any essays I've written in the past or anything like that. And since I at least like to think I'm pretty creative, it seemed a great outlet to channel that creativity and approach things from a unique perspective.

Except that's when things went wrong. I really felt my creativity being stifled in this class. Anytime I tried to do things from a unique perspective, I'd be greeted with a C or B- grade on a respective project and nothing but comments from Taylor about how, essentially, it would be better if I did what she wanted. AKA standardize it. In my opinion, design is subjective and so there really is no such thing as a fair way to grade, but I really believe that everything should be given the benefit of the doubt and appreciated for what it is. Uniqueness is what makes the world an interesting place, or else everything would be the exact same.

And really when it comes down to it, Taylor's grading system literally makes no sense to me. I'm not doing badly in the class, but it's more the principle of it. If you tell me in one project NEVER to center-align things, but the next project how a stair-step alignment is weird and would be better center-aligned, where does that leave me? Confused and slightly annoyed by the hypocrisy. Being docked points for grammatical errors within the magazine article we did not have to write kind of makes me wonder if she's just out to get us for whatever she can, regardless of how much is actually wrong.

Great class, all in all, but severely ruined by Taylor.

Very late hierarchy post- Matt Colon

Every time I sign in to the internet, my homepage is set to comcast.net so it's a site I see very very frequently. I definitely need to get around to changing it, but it clearly displays good examples of visual hierarchy at work. The entire thing is very clearly grid-based, with vertical bars leading the reader's eye down to similar pieces of information. It seems a bit crowded but in reality it works fine. The left column is gray and focuses on specific interests one might want to peruse. The middle column, in white, focuses on news items among of various types-- international, sports, etc. And then to the right is another gray column further divided into boxes, one of which has the email/phone-related stuff, ads, and media-related items.

The color scheme is simple yet effective. Titles of "containers" are colored and a larger font than the body type of whatever is in the section. Information is grouped very efficiently, so when you want one type of information you only need to really look at one particular section. All in all it's just a very effective, albeit busy and crowded, example of web design.

Katlynn Brunkhorst; Project Posting Website Design

For my website, I chose to stick to my original non-profit and make a page for the “Build-a-Ballpark Fundraising Party” for Beautiful People, an organization that provides adaptive sports programs for kids under 18 with disabilities. I chose to re-create the visual look rather than basing it on my original poster, considering the name of the fundraiser was also changed right before the event on October 23rd. It was no longer "Field of Miracles,” so I wanted to focus more on the construction aspects of a ballpark.
I played with the idea of exposed wood boards for the lettering of the event title, but struggled with doing so in Photoshop. I chose to create everything in Indesign, instead. It was important to me that I create something original for my navigation bar. I didn’t just want a cliché bar across the top of the page, but I still wanted to include a graphic that functioned as a container. I decided to have each base on my mini baseball diamond navigate you to the other pages. When you scroll your mouse over each base, it will turn red and pop out. I also made the search button into a base to continue the visual hierarchy.
One suggestion Professor Taylor had made for my poster project was to focus more on Doc Gooden, the guest speaker at the event. My parents were able to get a signed photograph from the event this past October for me. I traced over his authentic signature and included it on the bottom of the page; partially covering a picture of him to allude to the fact that signed autographs would be available for purchase at the fundraiser.
I pulled all of the colors from aspects of the Beautiful People logo, and made sure that any images I included also featured the same brightly colored team T-shirts. I actually chose Caflisch Script Pro for the “Fundraising Party” title because it was similar to the look and stroke weight of Doc Gooden’s signature and it was similar to the font used on the team T-shirt. I also wanted to think of a creative way to provide a link to Anthony’s Pier 9, the classy restaurant where the event was held. I made a baseball that also looks similar to the one featured on the T-shirt. I wanted to use a font that was more playful and bold for the “build-a-ballpark title,” rather than the exposed wood. I picked Italia STD book because the serifs looked like the tops of baseball bats, and the counters in the “b’s” were rounded enough for me to draw the same little baseball inside as the Anthony’s Pier 9 link.
The tickets page was my favorite one to design, and it was by far the most time consuming. One again, I pulled the same colors from the Beautiful People logo to form the four boxes that would work as the ticket purchasing area. This gave people a choice to reserve their tickets online and receive them in the mail and pay with cash or check, or just buy them on-line with a credit card. You could also buy additional autograph photos or pre-order them for pick-up at the event itself. I also included an encouraging quote from Doc that persuades potential attendees that he has endorsed the cause and it is a worthwhile outlet for their donations. I had a bio page for both Doc and the auctioneer for the event, Billy Staples, who also is an author. If you click on the book, it will take you to his personal website to buy his book as well. I also included a photo gallery on this page of some of the recent activities that Beautiful People’s kids have been participating in during the off-season.
The info page provides a link for directions to the event itself, and a breakdown of just how much building the ballpark will actually cost. I may improve upon my design some more, but I was thinking of pitching it to my Mom to see if Beautiful People would be interested in making it go live for next year’s event. Too bad I don’t know the first thing about code writing! ☺

Web Design

The purpose of project five was to create a web design for a non-profit event. I chose to “piggyback” off my poster design and create a web page for the annual Thanksgiving Night Celebrity Bowling event hosted by the Ryan Cameron Foundation. I based my website greatly off my poster design—using the same colors and concepts to create continuity between the two media. I wanted my website to be functional, simple, and modern. That, in combination with my goal of fluidity, is why I chose to minimize font differences and excessive color.
The background of my website is gray (R= 162, G= 167, B= 173); it is on the left and right side of the “red carpet” that is placed in the middle of the page (R= 236, G= 45, B= 47). I got the concept of the red carpet from my poster and from the location in which the event takes place, Red Carpet Lanes. Other than the entrance page, in addition to the background, the header “Walk It. Roll It. Give It” is on every page in a black header box. The white in the header, and on any page, is written in R=255, G=255, B=255 white. The yellow on the entrance page, and on the header is written in R=247, G=236, B=33. In the right hand corner, the quick search box can be used to find information on the website quickly by entering text in the box and clicking “quick search”. The navigation bar is white, and when a link is not being hovered or selected all text is black. The text on all pages is Futura. The header is written in size 48 PT, “quick search” is size 18 PT, body text is size 18 PT, navigational links are size 18 PT, the title of the event on the homepage (and entrance page) is size 21 PT, and the location/time information on the homepage is size 17 PT.
The entrance page is different from the homepage and pages that navigate away from the homepage. The entrance page is meant to be a cool prelude to all the important information from the event. I used the design for “Walk It. Roll It. Give It” from my poster design; the header is written in Jazz LET Std, size The idea is when one typed in the web address this page would come up, and to get to the homepage, they click on the “Thanksgiving Night Celebrity Bowling” link. I kept RCF’s logo throughout the website in the right hand corner; patrons visiting the website can simply click and return to the homepage. When a link on the navigation bar is hovered over it turns red. When it is selected, the navigation bar shifts, the selected link will be the furthest link left and it turns red. I decided to make them shift, so that when the bowling pin acted as an arrow pointing from the top navigation bar to navigational links specific to a section it would lay awkwardly across the screen. As displayed on the “support us” page, when a sub-link is not selected they are black, but when one is selected it turns white.

Interface Project

I didn't save my rationale for this project, so here's an abbreviated version of it:

I wanted a simple, easy to navigate website for this event. The White Ribbon Campaign deals with raising awareness about domestic violence and sexual assault, so I didn't want anything too playful or distracting from the content. I used the blue in the background because it matched the logo well, and the only other color I really utilized was the light purple. I stuck to Georgia in terms of the font I used for the content, and Snell Roundhand for the headliner. I repeated the logo for the navigation links. I took two of the photos: the ones with the signs in them. The other images were found online and related to the event.

Week 13 | Hierarchy

This is the Lucky Brand Jeans website. I find it very useful and easy to navigate, as well as being pleasing to look at visually. Right now their homepage is set to a holiday theme with appealing products as the first thing seen. From there, you can select either "shop for him" or "shop for her," which narrows down your options into mens and womens clothing. This can also be done by using the navigation links at the top of the page. This makes it very easy to find what you're looking for. After I selected women, I chose sweaters from the drop-down nav bars so that I could find what I'm looking for. After selecting a sweater I like, I can enlarge the image to see if I would like to order it. At this point, the price as well as different color options also appear. Overall, this website does a very good job of allowing the viewer (or potential customer) to find the items they are looking for in an easy way. The search button at the top of the website also helps the user find what they're looking for, making the website very easy to use.

Week 14 | Wrap Up

I was really excited for this class because I am a graphics major, and this is the introductory class to graphics. I had friends who had taken the class before me, so I was already aware of what the projects were coming into the class. While this course did demand a lot of my time, I am really happy with what I have learned through taking it. While I had done design work in high school, this course taught me new concepts, and pushed me to try new things. I had never worked with Illustrator before, and while I'm still really shaky on this program, it was nice to be introduced to it.

Each of the projects presented challenges to me in different ways. The most difficult part of the resume was figuring out how I wanted to present myself on paper, and what design would allow me the most room for content. The logo project was really rewarding because while I had initially struggled with how I wanted to represent my name and future career, I'm really happy with the result. Physically gluing the business cards together, and mounting the project on the board was also pretty stressful and time consuming, but it ended up looking really nice. The magazine project was the one I was looking forward to the most, but this ended up being challenging for me. Because I was very set on using my own images throughout the magazine, it made completing the project a little bit more difficult because of the extra limitations I had put on myself. While it was nice looking through a magazine that contained all images I had shot, I think it would have been easier to complete had I chose not to do this. The website was a little boring in comparison to the other projects. My other main issue with this project was getting all the right layers to show at the right time..photoshop was a little difficult to work with at times.

All in all, I think this class prepared me very well for GRA 356 next semester, and I'm happy with the results the semester produced.

Website

Entrance Page-I wanted my entrance page to look like an invitation you would get in the mail. I used the event as the seal that would be on the invitation to give an idea of what the site was about. I also used a piece of the border from the invite to frame the page and break up some of the white space.

Other Pages-I made my banner to mimic the poster that I used for the event in a more scaled down version. I included just one on the invited border as to not crowd the white space but lead the reader’s eye to the title. The banner for the links is the same pattern from the entrance page and they would turn black when active to match the color scheme. I incorporated the black and white pattern from the entrance page as a background like you suggested. I used the same invitation format with a bit of transparency as a container for all of the even information. I then included a link to the Dunbar site with their logo and slide show of the children. I wanted to include pictures of kids to give a face to the children the event was for, I also wanted to make the side donor and search friendly do I included a sidebar on every page with that option. For fonts I used Helvetica because the Dunbar logo used that font and I did not want a ton of different front, and it is a very functional font. I used Ruziicka as a script font to look like an invitation but also add readability. I also used the Zaphino font from my original poster. I did use a different font called Bickhan Script. I wanted to use the font throughout the site but it lacked readability; large and as a single line it functioned well.

Kirsten Jones

Web design

Design Strategy:

I chose to use the same event for my web site that I used for my poster project. That event is the Kappa Karwash which benefits Reading Is Fundamental. In using the same event I wanted to play off of the soap bubble theme that I used in my poster. I used to soap bubbles ad the link on my navbar to add interest and creativity, but also because it makes the link stand out and they become more user friendly. To distinguish which page was being viewed I put sponges on either side of the soap bubble link to that page. I wanted my web site to be simple, user friendly and clutter free so I wanted to make sure I used white space and didn’t cover every inch of the page in color. On my directions page I overlaid a blue fleur di lis over the star on the directions page indicting Kappa Kappa Gamma because that is the symbol of the sorority. Overall I tired to keep the images, text, and layout as simple and minimal as possible as to not overwhelm the user.

Typeface:

To give my web site a simple, clean, and streamlines feel I chose to use sans serif fonts that were on the lighter side. The font used in my header is called Castorgate and was downloaded from dafont.com. Aside from the header it is used only one other place which is on the home page. I stacked the type next to Kappa Karwash in 18 pt. to effectively fit it in. The rest of the type on my five pages was all Helvetica Neue in either regular weight or LT Std 57 condensed. I chose to use Helvetica because it is such a perfect font that it would not distract attention away from the information on the web site or clutter it.

Color:

I chose to use a blue theme for my web site, since the soap bubbles that I used from my poster were blue but also because the colors of Kappa Kappa Gamma are light and dark blue. I also thought that blue would be a safe color choice and not too crazy or hard to work with. The other color that I chose to offset the blues was yellow because the sponges were yellow and the warm color contrasted well against the cool blues. The blue and yellow used throughout the five pages tied the whole web site together and really created the crisp, simple, and streamlined look I was going for. The shade of blue used on the stacked part of the header to the left of Kappa Karwash is RGB:152, 202, 241. The dark blue used throughout the five pages as the background container, navigation bar, and the header “Kappa Karwash” is RGB: 89,139,240. The stroke outlining the soap bubbles is RGB: 17, 191, 218. The color inside the soap bubbles and also used on the contact and about pages is RGB: 191,231, 247. The color used to emphasize that certain pieces of type are links is RGB: 10, 1, 128. The shade of yellow used throughout the five pages is RGB: 248. 213, 74. The sponges used on the navigation bar are made of two shades of yellow, a darker RGB: 249, 198,6, as well as a lighter RGB: 252, 198, 6.