Interface Design: Claire Bourque

Design Strategy:

I went into this design process with my Theta Bowl poster plan and project in front of me. I thought that design was very effective for my target audience, college fraternity men. For this reason, I used an image of a football field, found at krylon.com, as my first layer to work on. For my repeating container space I made a "coach's clipboard." To help impress that idea onto my audience, I drew a football play with symbols, using the paint tool in Illustrator, and placed it on the "clipboard." These two visuals together speak strongly to my target audience.

For my side navigation bar I used a referee signaling a touchdown, found at fotosearch.com, to draw the viewer's eye up the left side. My navigation buttons are duplicates of the football I had traced in Illustrator for my poster project. I used my poster design plan to create the page titles and organize the needed information of the event. My goal for this design was to give the allusion of a fun, rough and athletic event, but to still keep my design clean and well executed.

Typefaces:

I chose to use Princetown as the typeface for my headline, because it is quickly identified with athletics. It is easy to read, but still helps to portray my event. I first used Handwriting-Dakota for the small phrase, "are you ready?" because I thought it made the design feel more personable and "rough around the edges." I liked the typeface so much, that I decided to continue it on my navigation bar. I think it creates a strong connection for the viewer and directs them where to go next. The last typeface, which is used in all of the containers, is Adobe Caslon Pro. I previously used this typeface for my magazine project's body text and found it very easy to read and clean. I think it creates a solid contrast against the other typefaces, so that the viewer can easily identify the different sections of the design.

Color:

I used a brown (R=51 G=51 B=0 at a fill of 74%) for the "clipboard" container to help aid that allusion. My second color was the lime green (R=204 G=255 B=51) used for the navigation bar and body text. I wanted to stay in the green and brown color scheme for this design, but I liked how the lime hue really popped out yet still stayed in synch with the design. It's also a great contrast from the white for the other navigation buttons.

Images:

The images I have not mentioned, such as the ones found on the "Photos" and "Sign Up" pages, were all taken by various members of Kappa Alpha Theta and sent to me by email.

WEB DESIGN

I decided to change it up a bit and do a different event than the one I used on my poster. For this project I chose to use the 10^th Annual Holiday Dinner sponsored by the Smile Train. Smile Train is an organization that deals with cleft palates and it is a very successful charity world wide. In terms of design strategy, I thought about five different pages that would make someone want to attend the event. My first page was “home.” This page consisted of a holiday picture, a description of the organization, and then hyperlinks of how to purchase tickets for the dinner, how to sign up for emails, and how to find out more information about the organization and event. My next page was “upcoming events.” This page consisted of the details of the holiday dinner and ways to make donations to the organization. It also provided a hyperlink of a calendar for 2010 events so people would be able to mark their calendars for the future. I also recommended involving friends and families and in order to hold fundraisers to help these children born with cleft palates. My “smiles” page consisted of words that describe some goals of the Smile Train. I provided pictures of children who have this problem and each of their inspiration stories. The “directions” page consisted of a map of the address of the event. I provided hyperlinks for the viewer to click to find out directions from each of their locations. If their location was on listed, I provided a hyperlink from “other” locations. My last page is “contact us.” This page consists of pictures and names of the main people involved in the organization including the president, chairman, and vice president. I then provided hyperlinks with office locations, how to email us, questions and concerns, and all of the other faculty.

For my typefaces, I wanted something simple, but visually appealing. I didn’t want anything too curly and crazy. I chose to mix between Verdana, Arial, and Myriad Pro. All of these are similar, but have a little difference so I thought it was a good variation. Since the Smile Train logo consists of green, blue, and orange, I chose to keep those colors consistent throughout my website. Since my website had a background color and a different color for the navigation bar, I figured simple type faces would contrast well. I chose to use blue and orange also because they complement each other and really added to my web design.

website design

For my web design project, I used a local walk called Our Little Hero. The Our Little Hero walk conjoins with the Buddy Walk, a walk to raise money for Down syndrome. Christine Pietrow started organizing this walk and it “Our Little Hero: C.O.P.” after her son, Christopher Owen Pietrow, who has Down syndrome, he is about 5 and a half now.
I used the main background color because it is the same color the Buddy Walk website uses. The box for the main information is a transparent white, which turned into a lighter blue, because of the background. I used the gold color because of the background in the logo and it is an accent color for the Buddy Walk website. I used the darker blue in the header because I wanted to resemble a cop uniform, which are navy blue and have bits of gold, like in the badge, for accents. I have a badge on the left side of the navigation bar. The grey for the navigation bar is to contrast with the blue colors. I tried white, but it was too much of a contrast. The background of the page that it active is darker so that the user can knows the page that is active. There is a picture of Chris in the header to make sure the visitors know how the Mount Holly walk started.
I used Bruno for the headers, both the header of the entire website and the header for each of the pages. I chose this font because it reminds me of children. The typeface reminds me of children and conveys a care-free ambiance. This website is about Christopher and I feel like the website should convey a childish mood, and I feel like this font is perfect for what I wanted to convey in the website. I only used this for the very important things, hierarchy, because it would not work in a small font size, so I brought in a contrasting typeface. I used Mercurius as my main type because it is easy to read and resembles a more cleaned up, but childish type. It also had a wide type family and allowed me to work with the hierarchy of the page and make some things bold to convey importance.

Wrap-up

Since I am no where near a graphically-creative person, this class was one of the toughest so far that I have had to take. I learned a lot from this class, which is something that made me lik the class, but I realized very quickly that I am not as creative as I need to be to get a great grade in this class. I came into the class thinking that it would be a fun class and possibly my favorite, I am sad to say that I was wrong in my expectations. While this class was very fun and interesting and I learned a lot from it, it also was very stressful, a very tough class for me and was not a favorite class because of my lack of graphical-creativeness. I enjoyed the class for the sole purpose that I learned the basics of the adobe programs, which will help at some point in my pr career, but needless to say, I am in no way a graphics major. From this class, I have also gained an appreciation for graphics majors and the people who design magazines and such because I see how much work they put into the designs and how creative they are. I have been astonished by the amount of creative and wonderful designs that I have seen throughout this semester. This class definately allows me to appreciate the people I will be working with in the future.

Web Design- Andrew Tredinnick

For my localized non-profit event I did the Wrobo Run, which is a walk/run that raises money to donate to hospitals for veteran’s medical services. I wanted to use a patriotic theme without it looking tacky so I chose to use darker shades of red and blue. I also continued the theme from my poster of the running stick figure and placed that in my background to truly get the point across. I also used the same typeface, Minion Pro Bold, throughout the web-pages on both my header and titles of each of the pages to provide succinctness to my website. I chose this particular serif typeface because it gives off a strong, defiant feeling with its large x-height that I feel encompasses the qualities of our armed forces. It is also has a uniqueness about it as the descender on the R is not completely standard.

For the rest of my interface design I used variations of the typeface Tahoma, in both bold and different sizes and colors to jump off the page on particular pages. I used this sans serif type because it is obviously has good readability. I also chose to use a proportional page that has the body text cover a wide region in the foreground because I wanted my design to be unique and not cover the entire page. The body text on my webpage covers 500 pixels, while the two sides of my background cover 300 pixels total when pieced together. For my navigation bar I wanted the sections to reverse color when scrolled over, so on my homepage I took an image of a mouse pointer and flip-flopped the colors of the word promote. I wanted my colors and typefaces to provide hierarchy for my web design and I did so by using two prominent colors and two demanding typefaces. Finally I used particular images to provide as support for the text. I used multiple pictures to simulate links and others to add a feeling of realism for my event.

Last Post! Interface Design Project Post

The not-for-profit event that I did for my poster had a very extensive website so I wanted to pick a new event that had either had a very basic website or no website at all. In high school I volunteered with Habitat for Humanity and participated in and helped plan my school’s alternative Spring Break trip with Habitat. I decided to design a website about the trip that included general information about HFH, this year’s trip, and past trips and photos. For inspiration, I went on to smashingmagazines.com and looked through their showcase of good designs using texture. I wanted a background that was reminiscent of construction, so I went with a plywood background that I downloaded from the website’s collection of free textures. For the header I just wanted something simple and clean, so I just made a white box and placed the HFH logo in it, which I downloaded off the website, and then underneath it put the event title using the same green as the rooftop in the logo. For the font of the header title, I used Myriad Pro Bold because it was a font that closely resembled the font in the official HFH logo. For the navigation bar I made the buttons post-its and made them look like they were nailed to the background. For the navigation bar font, I used Myriad Pro Semibold to maintain visual continuity with the header. For the page containers I encased any body copy in a white rectangle with rounded edges because I thought it made the page look lighter and not quite so serious. For the body font I went with Arial regular because I wanted a sans serif font to contrast against the light serifs of the Myriad Pro font of the header. For the individual webpage headlines, I traced an image of a yardstick and filled it in with the same yellow color as the post-its. For the font the used Myriad Pro Semibold in all caps and in the same green color as the font of the navigation buttons. The photos on the “Home” and “Photos” pages are my own pictures from the Spring Break trips that I went on in high school. The photo on the “Join Us” page I took from the Burlington County HFH website. The pictures of the forms on the “Forms” page I took using a screen shot from the HFH Collegiate Challenge website.

Website Project Post

When designing my website, I wanted something that would fit with the theme of my event. Since my event is a rockoff for the Red Cross, I wanted to make sure the site incorporated music and also kept the colors of the Red Cross. I chose to do a red, white, and black color combination, because these colors are used a lot with music, and they are also the colors of the Red Cross. I did six pages, because I needed to include ticket information. The first page, the homepage, took me the longest, because I had to set up all my containers. I created the music staff on Illustrator, and I created the text for the music staff in Photoshop. The fonts I chose were Myriad Pro, because I used this in my poster, and I thought the sans serif was readable. I chose to download my other font, which is called “Rock It,” because I needed something that made one think of Rock N’ Roll. The image on the first page, the guitar, was chosen because the guitar is the main instrument one thinks of when thinking about rock music. I tilted the image in Illustrator, because I wanted the image to lead the reader to the text. I rotated every image on my pages, except for the drums, in order to direct the reader.

The second page, the about page, keeps the same pattern as the home page, but the image in the bottom left is now a drumset, and the information between the stars, and the text in the red container is changed. The information between the stars is meant to give additional information about the current page. In this page, the information simply gives the date and time of the event. If a reader wanted the information quickly, without having to read all of the container content, then they could simply look between the stars on every page.

The next page, the past winners page, includes a violin on the bottom left hand side. The violin was chosen, because CXtec Dinosaurs have a violin as one of their main instruments. I wanted to include a YouTube video, so a reader could see an example of the performance from the year prior. Also, I used the image of the band to create consistency on the page, as show a professional picture of the band.

On the directions page, I wanted to make the page as user friendly as possible. To do this, included a map of the Landmark Theatre. I also created a spot where one can put their home address in, and the site will tell them how to get to the Landmark Theatre. I created all the shapes and select bar in Illustrator, and then I placed them into Photoshop. The microphone picture once again creates direction.

On the contact page I used a flute to show direction, and I included all the contact info for both people who wanted to attend the show, and also for bands who wanted to perform in the show.

For the tickets page, I wanted to easily direct the user to a page that would let them purchase tickets. I created the purchase tickets shape in Illustrator, and then I carried it into Photoshop.

The color for the red font in the music staff is R=235. G=45, and B=45. The red of the container is R=222, G=0, B=0. The red of the bar beneath the staff is R=255, G=0, and B

-Briana Bartel

Change to Office hours

I need to cancel my availability at the 8-10pm help session tonight, but I can be available from 1-5pm today instead of 1-3pm. I'll either be in the office or have a note there saying where I am in Newhouse.

Wrap Up Post

Truth be told I was not excited when I found out I had to take this class and there were many times throughout the semester that I was less than thrilled with it. However I will say that this class has done an excellent job at forcing me to become knowledgeable and experienced in the Adobe design programs with which I had little to no previous experience. I now feel confident enough using the inDesign, Illustrator, and Photoshop programs to execute basic designs.

This class has also opened my eyes to the endless possibilities of type. Before this class, when I looked at a poster or advertisement or anything using type for that I matter I had no regard for things such as visual hierarchy and visual-verbal communication, and when I chose a type I never considered things like readability or x-height. Now I am constantly noticing and critiquing the use of the Gestalt principles as well as keeping an eye out for new and exciting designs that take risks.

As much stress and as many freak-outs as this class has caused me overall I do not regret taking it. By being inundated with assignments, I have been fully immersed in the basic principles of design and basic functions of the Adobe programs.

Wrap-up

As the semester is coming to an end, I can't ignore the fact that I've learned more than I ever expected to get out of this course. I don't think I'll ever again be able to look at a sign, poster or any form of type again without thinking about leading, kerning, serifs, sans serif, etc. or the use of type. At the beginning of the semester I thought that this course was going to be just about creativity and creating something visually pleasing. I never imagined the technical aspects that come along with graphic design.

What I will take away most from this class is an overall ability to asses and analyze design as good or bad. No longer will I just see words, colors and shapes, but I can also recognize, choice of typeface, layout, hierarchy, color choice, etc. Not to mention that I now have a basic overall understanding of how to use all of the indesign software and photoshop.

The hardest part of this class for me was the amount of time that must be spent in the labs to complete the projects. Sometimes I would be in the labs past midnight working on a project. When you're in the labs hours seem to go by like minutes. A problem I faced while working on the projects was that sometimes we weren't taught in lab how to use a certain program or tools necessary to complete a project until a few days before the project was due. For example, I wanted to start the website project the week it was assigned and hopefully have most of it done before Thanksgiving break, but wasn't taught in lab how to use photoshop until the thursday before it was due the next Tuesday.

Overall I learned a lot in this class, but I won't lie, I'm looking forward to turning in the last project and being relieved of all of the stress it brought me!

Logo Project

In creating my logo I really had no idea what I wanted to do at first. I am a magazine major and wasn’t sure how in incorporate that into a logo. After a bit of thinking I decided that since I’m specifically interested in women’s fashion and beauty magazines that I would design my logo from that. A tube of red lipstick is the epitome of chic in the fashion and beauty world so I figured that was a great route to go. The whole idea of my logo is for it to appear as if my name has been written out in the lipstick, so I chose a font that was similar to my cursive handwriting. The lipstick tube I traced with the pen tool from a picture off of the internet.

The typeface I used is Spring Std LP in light and regular. I chose this font because it looked like cursive handwriting so went along with the idea that my name was written in the lipstick. On my business card and stationery, my name is written in Spring Std Regular 48 pt while my phone number and e-mail are Spring Std light 18 pt. On my envelope I made the logo smaller so my name is 36 pt and my address is 12 pt.

The only colors I used were black, red, and a goldish color to keep my design simple I used the red because I was going off of the idea of a tube of red lipstick, but the warmth of the color makes my name stand out. The black is pantone process black EC, the red is pantone 200 EC, and the gold is pantone 458 EC.

Hierarchy- Amazon

The Amazon website is a great example of hierarchy in action. Users who frequent this site are either looking for a specific product or searching with nothing specific in mind. The hierarchy of this website makes it accessible to both types of users. The most basic way to navigate through the online shopping site is by department. There is a nav bar on the top left of the site that lists all of the departments making. The top center of the page there is a search bar where users can search for specific products. Both of these features are what most users are looking to do when visiting the site so putting these links on the top of the site and in a large bold font makes for great hierarchy. As you venture down the page there are feature products listed for the user who isn't sure what they want, as well as other information that one might find they need once they begin navigating the site. The layout of the site is very strategic and is a great example of hierarchy.

finally.

So graphics has been an interesting course for the "results-oriented", perfectionist. I've never hated, yet secretly enjoyed a course as much as I have GRAPHICS 217. I had heard much about "Sherri Taylor" as many people call her behind closed doors; and, in my mind I knew I was going to have a hard time pleasing a woman who lived for something I could give a damn about. Although her priorities are still on the back burner in my mind, she has lit a small fire in me that may one day ignite to something big (doubtful--but it sounds good).

Tom Kennedy Lecture: Andrew Tredinnick

Tom Kennedy. the director of photography for National Geographic, spoke in Newhouse 1 recently to discuss the recent struggle for journalists in the recent economy. Although the lecture seemed to be more geared towards photo journalists it definitely struck me as inspiring. He spoke moreso to deliver the message that the way journalists present their products should seek to escape from the print paradigm to create a new direction for multimedia. For me this is important because if I choose to go into the newspaper industry I am going to have to become more creative in getting my writing across to reader that wants to see something innovative. He showed examples of good and creative story-telling which provoked great responses from the audience which sought a website that was inventive. He expressed that students, like myself, have the best tools at our disposal to move journalism in an entirely new direction that will enable it so survive. Kennedy explained that he hasn't stopped learning new things within his craft and hopes that interest from new sources will lead to inspire people about the future of the multimedia industry.

Recap: Andrew Tredinnick

I honestly didn't know what to expect when I was placed into this course at the beginning of the semester, and I can definitely admit that I did not know exactly all of the components that graphics encompassed. The projects were surely time-consuming, but unlike most classes I felt the projects actually aided in learning the course material. I really enjoyed both the poster project and magazine project even though they took the longest to accomplish. This being said I feel that despite innumerable hours in the computer labs I was able to feel that the projects I produced were worthwhile and I was proud to create them.

I must say that looking at a blank document was at times extremely menacing, but once my creative intuition took over some of the projects were actually fun to create because you did not have many restrictions. This class enabled its students to gain skills in design and software while allowing them to design for something they actually like. I was able to design for what I wish to become (a sports journalist) and create an magazine article for my love of sports. I must say that I had trouble being able to truly carry out my inspirations on specific aspects of the projects and especially the logo project. I just could not create a design that truly emulated or looked good at times, which was frustrating. All in all graphics was a class that I did not truly expect as I learned about typography along with leading and kerning, I will no longer to be able to look at the New York City street signs without recognizing Helvetica. This class has truly allowed me to brainstorm in a new way and be creative, when most class have a load of restrictions placed upon their students.

Wrap-Up

This semester in one word is TUFF. I'm am not the creative type so a class based solely on creativity was not exactly my cup of tea. I really liked the projects and learning about type was very interesting. I found trying to apply good design was the hardest, but making the magazine was the most fun. I expected this class to be somewhat easier and not as time consuming but all in all it was great experience. Communicating visually i think is one of the most challenging things for me personally to do. I find writing to come naturally so it was cool to try out new ways of communicating.

Hierarcy

I choose the iTunes store as a good example of hierarchy. I thin theta the dominate picture grabs your attention and directs you to the important ads that iTunes is trying to promote. The smaller visuals of the album art work in the middle of the page is the second most important in formation and the second most dominate information. The containers of information are grouped based on their importance and relevance. I think the website is easy to use and pleasing to the eye.

By Kristen Jones

Wrap Up Post

When I signed up for this Graphics class, everyone told me how challenging of a course it was. I was told I would be spending many nights in the computer labs working on projects. Well, this was definitely true. The course was very challenging, and I spent hours upon hours in the computer lab, but I learned more in this course than I have in any other course. Not only did this class allow me to learn new software programs, I also enjoyed doing the projects. Someone said in the class one time that you work really hard on your project, but you are SO proud of your work. This is completely true. I was/am proud of every single project I turned in. The class lessons on color, hierarchy, type etc. really helped my understanding of graphics. Now, no matter where I am, I always notice the type around me. I will be walking down Marshall Street, and I will see an ad and understand why certain things were placed where they were. I learned X height, kerning, and leading are all very important factors of readability. I also learned that color is a huge part of drawing the reader to your page. Overall, I feel I will be using things that I learned in the course for my entire career. Being a pr major, it's important to know a lot of different software and skills, and I really feel this class was useful for my major.

Hierarchy--The North Face

The North Face website is one I frequent because I'm always looking for more things to keep me warm. The homepage is fairly horizontal, with the navigation bar at the top. I like that when I scroll over the "women's" tab it gives me a selection of items to choose shopping from and they're in a logical order (probably in order of most purchased). The homepage, without scrolling over any of the navigation tabs, is very effective. The main picture takes up a good amount of space and is followed by three pictures below it that each take up 1/3 of the picture above it. Overall, the site has great hierarchy that makes it easy to shop and easy to search for anything I need, whether it be a store location or a specific coat!

Claire Bourque: Wrap Up

This graphics class was full of surprises for me, because I really had no idea what to expect. All I thought was that I was going to enjoy it. I can't say I'm going to miss the constant stress of having one project on top of another, but I will miss the actual assignments. I loved doing all of the projects, but I could have spent so much more time on them. I didn't know much about any of the programs we worked with, so every time I really got into a project and learning all of the new ways to do things, it was time to move onto something new. I'd have to say my favorite project was definitely the magazine, because it's what I'm most interested in. I originally came into this school as a magazine major and I hoped to eventually work as a layout designer. That project was so much fun, because it gave me a chance to see if I had made a mistake in switching my major. As much as I enjoyed the project, I now know I made the right choice. I can't imagine designing a layout for an article that I don't have a passion for. My least favorite project was the logo, because honestly- mounting and cutting all of that was the death of me. And to top it off, I had to do it all again for my redo. It was miserable. Also, it was rough without some clever name play on words or a future career with an image to go with it. I really struggled with that. Aside from my complaining though, I enjoyed creating physical projects that I actually had use for. I have already sent my resume out to a potential employer.