Brittany Fuino: Poster, Usability, Web Site and Logo Project

The website for Iams is a good example of usability. It separates the page into two big links for dogs and links for cats, with a navigation bar at the top and two pop out navigation bars on the left side. The bottom has containers that keep the page neat and clean with a search bar in the upper right hand corner. If you scroll down you can find additional information and links, bordered by a cute pet toy rope to signal the bottom of the page.

In designing my personal logo, I wanted to come up with something that somehow visually incorporated part of my name in a picture. Using B. Fuino I came up with the idea of

using an image of a bee I drew out by and and used the pen tool in Illustrator to smooth it out and make it into a usable image. To continue the idea of movement I added a trail following after the bee which connects the front of the business card to the back and leads the eye to my last name. I used ITC Goudy Sans STd for the text because its curvature compliments the curves of the bee. The "o" in Fuino looks similar to the bee's head, and the "i" looks similar to the stripes on the bees, making the overall logo more visually appealing. Although my last name is in all caps, I decided to use the antenna of the bee to dot the "i" in both my last name and first name on the back of the card. I also tried to match the weight of the dots in the stroke of the bee's trail to the circular end of the bee's antenna. This also ties the front of the card to the back. I chose to use the pantone color 130 C for its warm, goldenish honey color. The info on the front of the card is on the opposite side of the info on the back side of it to give it more modern of a look. I found an image online of honeycomb and used live trace to play with it until I could individually select each section and fill them with color.

I created a website for my sorority's annual event called "Kicks for a Cause." It supports our national philanthropy, Autism Speaks. I incorporated the colors of our philanthropy in considering my design, and attempted to keep that theme throughout. Alpha Xi Delta's colors are double blue and gold, which can be seen in the navigation bar and the header. I took the idea of using green and orange from Autism Speaks. It works well because orange and blue are complementary colors. The primary color is warm (the orange) with blue, the cool color, being secondary. I put a soccer ball on each page to create continuity, and rotated it on the home page to match the soccer ball in the actual photo above it. I also added the logo for Autism Speaks in one of the hexagons of the soccer ball. I used Helvetica and New Baskerville to contrast each other in the header. I like how Baskerville's delicate typeface contrasts the boldness of Helvetica. I also used Janson in my body text to make it easy to read yet appealing.

Grids, Usability & Hierarchy | LanceArmstrong.com | Mitchell Franz

I really, really like the grid system within Lance Armstrong's site for several reasons.

First, I love the big picture and I think that also shares some hierarchy within the grid. The different grids that I see are the navigational bar, the photo, the rectangle links and then the ad going down horizontally. Vertically speaking, I see a grid system, but it is broken by the photo. Otherwise the nav bar, the bottom rectangle box links and the ad all line up and are apart of the grid system within this website. The usability of the site is easy and efficient. I like how the box is displayed around the Bio or whatever current page you are on.

The pages are easy and simple to navigate with clean, smooth transitions. Overall a great, fun website that serves its purpose.

Mitchell

Wrap Up | Mitchell Franz

Where to start about this class and this semester. I don't think I can effectively capture what this class was all about and what it meant to me and such.

This class challenged me. It challenged me to think about graphics, design, presentation and the delivery of information in a totally different, new way. Before I use to analyze things, but only certain things that had a huge impact on me positively or negatively. Now I am analyze more and more and it is everincreasing as the days continue.

Graphics 217 was also tiring. Late nights in the labs. Stressed, frustrated and fatigued graphics students all around hustled around computers for that last minute touches or to do their project completely over. I pulled one whole all nighter and another almost all nighter with several regular just plain late nights. It was worth it though. I am looking at the world a little different in terms of design.

I like the projects and I feel I leave this class prepared to handle any graphic design for myself and possibly even some freelance graphic design if it comes my way. Also as a photographer I am constantly looking for inspiration and this class has provided much inspiration over the past 16 weeks.

Reading a fellow graphics student Zac Cullen's post, I love his pull quote about graphics and so would like to requote him.

"The collective grumbling of all the poor, miserable, tired, hungry, and frustrated graphic students unified us and we wore our bloodshot eyes the next day like a badge of honor."  - Zac Cullen

With that said, I also had fun. There was not the stress of tests, quizzes, readings and such. I love being able to be creative and free. The classes were also fun and we were able to play a few related academic games which was nice and also the motion graphics videos were very inspiring. It has me thinking about taking AfterEffects and also I am continuly searching for them.

All in all this class was terrific and is close to being my favorite class this semester next to my photo class and my COM class. It definitely ranks above Philosophy 107.

Thanks,
Mitchel

Identity Project | Mitchell Franz

Design Strategy:

The image I desire for myself is professional and sophisticated while also conveying the photography part. This is how I decided to do the ‘M’ and ‘F’ followed by the [o]. Part of me did not want the Mitchell Franz Photo underneath, but I feel it is necessary since my initials could potentially - although immature - be taken as a derrogratory word. Also I feel the logo displays s sense of simpleness and that is what I am about too, but then the vagueness of the logo and the rich Didot font, I think, add a sense of richness and elegance.

Typeface Choices:

Following with the professionalism as well as keeping with a sense of I am a elegant photographer, I chose Didot as my font to convey that message. Didot is a font as well as Bodoni that is displayed as a high end font - fashion magazines and such. I would like Mitchell Franz Photo to be carried the same way. Although I think I could use a nice clean sans serif for the ‘Mitchell Franz Photo’ below the logo.

Thanks,

Mitchell

 

Web Design Project

Design Strategy:
I waited and searched to find an organization that I cared about. One that meant something to me. After some searching there was one right in front of me, Help-Portrait. H-P already had a great national website. Also on the website was downloadable logo and graphics. There started my design strategy. I wanted the Syracuse site of H-P to flow with the national one. I decided to keep the red, black and white color scheme. Through Smashing Magazine I found a great texture. Their font was Gotham and I wanted to use the same font, but didn’t want to buy Gotham from Hoefler & Frere-Jones so a quick Google search turned up a look alike, Hit the Road. I began constructing my structure, the website’s bones. After some opinions from friends and a few more changes later, I decided upon the design of the website.

Typefaces:
As previously stated, I wanted to use Gotham, but didn’t want to buy it so I found Hit The Road. It turned out to be a great font and looks almost identical to Gotham.

Color:
I matched a red from one of the graphics I downloaded from the H-P national site and stuck with it. I used varying opacities of it such as 65%, 85% and 100%. Also I use the red to pull out the current page your visiting in the navigation bar.

 

 

 

Thanks,

Mitchell

Week 5 Post: Gestalt

The picture posted is a great example of gestalt. The only color used is Black, the shape is created through the placement of black color and the white space surrounding it.

By strategic placement of the black spikes in a circular shape, the image of a ball is created. This design uses several of the gestalt principles. First, it uses closure, because the shape isn't actually enclosed or touching. Second, it uses Proximity. Because the spikes are placed close to each other, viewers look at the group of spikes as one image. Figure and Ground is definitely used here as well, the black shapes and white space in the background. 

Week 1 Post- Bad Type

The typeface used on Ashlee Simpson's "Bittersweet World" album is a perfect example of Bad Type. The type is inconsistent throughout its letters. The thickness throughout the letters varies way too much. The thick "B" and top of the "T" in "Bittersweet" contrasted with the thinness of the rest of the letters leads the eyes to places that aren't supposed to attract attention. Instead of looking at the word "bittersweet" as a whole, but rather viewers look at the individual letters.

Another problem with this typeface is that the top of the A and the bottom of the W is cut off. This makes no sense and doesn't look appealing. It also just adds to the choppiness of the font.

Project Posting-Website

For my website, I wanted to do something fun. What I came up with flows well with my event, which is a carnival. I chose to use 5 different pages, a home page, a contact us page, a volunteer page, an about us page and a photo page. Through using all of these pages, I was able to convey all of the information that I needed to about my event. The typeface that I used was Vectora. I used vectora because it was simple, has large counters and a large x-height. I think that the combination of these factors would make it really easily read on the internet.

Project Posting #5 -- Website

Design Strategy:

To create an easy to use website for the Rainbow Classic that allows the viewer to donate to the cause, find information about the game day, buy tickets, and derive a shallow understanding about what the donated money benefits.

To attract the interest of the viewer and intrigue them to navigate further throughout the site.

The site should embody a the childish spirit of the charity while connecting the event to the school spirit of both of the participating high schools through color and familiar t-shirt designs.

Type:

I want my type to be fun, childish, and easy to read while still being decorative. The typeface family Chalkboard achieves this through its big, round curves and its rounded serifs.

It was important to me to have a type face that would most likely be an option for the next phase of the internet’s step towards a bigger variety of typefaces being available. Since Chalkboard is available for the basic library in a mac and pc I though this would be an option that was practical as well as interesting.

Pictures:

I made the background of the basketball court in Illustrator using the line and circle tools and placed the picture in photoshop. I made the image more transparent so it has a nice effect.

The heart shaped stethoscope that is used for the navigation sidebar was a picture I found on the internet. I enlarged the image so that it would fit the words, but kept the heart shape relatively small in comparison. I then took that image into illustrator and traced over it using the calligraphy tool. I then place the image into photoshop and put the words on top of it. I added the basketball by putting that image into illustrator and using the curved line tool to create the bouncing effect.

The image on the homepage of the children is the mascot for Golisano Children’s Hospital. I took an image of the mascot into Illustrator and traced over it with the calligraphy tool. I then put the different t-shirts on the two mascots. These t-shirts are worn every year by the different high schools in their student sections. They promote school spirit and are essential to the atmosphere of the Rainbow Classic.

Color:

MAROON (SCHOOL COLOR FOR MENDON) : R(189)G(32)B(79)

BLUE (SCHOOL COLOR FOR SUTHERLAND) : R(52)G(63)B(136)

Michael Boren: Web Design

Design Strategy

I used the same event from my poster project: a broomball philanthropy tournament held by my fraternity, Delta Chi. As a member of the Delta Chi Philanthropy Committee, I know we, as a fraternity, would want our Greek letters incorporated into the Web design. So I shrunk the main art piece from the poster project: the triangle (representing the letter Delta) with the broomball sticks that form an ‘X’ (the letter Chi). I kept the symbol with the name of the event below it on every page to keep the event’s name and the fraternity’s symbol both evident. The broomball sticks in the symbol were traced. I enlarged one of the broomball sticks and rotated it so I could incorporate the line of links near the top of the Web page with broomball. I created the containers with the rounded rectangle tool in Illustrator and then dragged them over to InDesign, where I created this project. The balls on the Time/Place page were used to separate date and location. Those balls, which I just took and shrunk from my poster project, are used in broomball. I also provided a map for viewers to click on that links to Google Maps, and a link to the foundation the philanthropy is raising money for. Viewers can get more detailed information this way.

I had a lot of photos from last year’s tournament to use, so I created two small containers and a long one. I could alternate photos and text with these container sizes, depending on photo sizes and the amount of info being used. Since a viewer reads from left to right, I stuck the headline font (FIND THE CUP IN YOU) to the far left on the page, started the links a bit more to the right, and put the containers further to the right side of the page.

Choice of Typefaces

I used Mezz Std at the top, because its oddly shaped type resembled the curves of a cup to me. The typeface also has a slightly italic look, providing movement on the page. This is important since broomball has a lot of movement, whether it be running or swinging sticks. Below the triangle, I used Ashley Script MT Std to keep this italic, moving look going. For the links, I wanted to use a serif typeface that had nice strokes but also stood out when it was bold versus regular. ITC Veljovic Std worked out well for this. I bolded a link whenever the viewer was on that certain page to identify what page he or she was on. I also used this typeface for the quotation marks to they would look like curved quotation marks and connect with the typeface of the links up top.

In the containers I used a sans serif-like font to differentiate it from the serif links up top. I used bold and semibold styles on the first two pages to label what the paragraphs were about. I used those styles on other pages as well to highlight the most important information. I used the regular, display and light styles for less important information.

Choice of Colors

Our fraternity wants our colors of red and buff incorporated into the event, so I used red and different shades of yellow for the backgrounds and typeface colors. I used a slightly darker shade of yellow for the containers to identify where information was. I also used a darker yellow to outline the containers so the info would easily be contained.

Photos

All of my photos were taken from Facebook from last year’s tournament. I used a photo of the trophy to emphasize the cup and photos of people competing to show a viewer what broomball was like. On the ‘Tradition’ page, I used a photo of four people with their arms around each other to emphasize how the event brings different groups of people together.

Website: Zach Cullen

Design: I wanted this website to have a unified theme with my poster, so I incorporated elements from that design into the website. I used the cans from the poster as my navigation links, and for the active link I used a change in color and the orange ribbon for hunger awareness. I used the same bowl I drew for the poster on the home page and on other pages as well. I chose not to make it part of the Header because it was awkward and didn’t fit well.
I only used four links, but there are three pages for the third link, sign up. I decided to make this a multi-step process because I thought it made the experience more interactive and fun. On step one, the three bowls are buttons and the type turns orange when you click on it. The rectangles to the right are also buttons that turn orange when you click on them. When you proceed to the next page the bowl you chose appears, and you fill in the information. The third step, “Fill your bowl,” is a page that tells the user how to promote their drive and build excitement about the event, including a download of my poster.
I used grey rectangles as containers for information throughout, and sometimes to signify buttons. The ones that say things like “check out the documentary” and “get the facts” are links to the other pages on the website.

Typefaces: I chose the Futura typeface family for all of my type. I thought that it’s classy, readable, and fun. Futura condensed looks really good in all capitals, which I use throughout. I used the condensed bold for some bowls and in the header that says the name of the event. For regular text I used Futura medium, and for contrast in the headings I used Condensed medium.

Colors: The background color comes from the light blue background/sky in my poster. I created a texture using and image of stacked cans, which I adjusted to be black and white. I also increased the exposure and brightness to make it lighter.
I used dark grey for the text because with the lightness of the background and the white container, black had too much contrast. I used orange, the color of hunger awareness for various headers and for my active links. I used a medium blue for contrast with other headings.

Web Design: Jordan Clifford

Design Strategy:

I chose to do the same event I did for my poster design because I wanted to keep it simple and do something I was familiar with/have a connection to. Orange Pulse Dance Troupe only has a website for the group in general not one specifically detailing the charity showcase; therefore much of the showcase related specifics get lost in the information overload on the main website. I wanted to create a website that would breakdown show specific information and lay it out in an easy to use and easily accessible way.

Starting out on my first spread, I ran both my header and navbar horizontally across the screen-view and left them rather simple for easy navigation. To indicate active state I have the navbar lettering changing from white to orange so you know what page you are on. The dancer is a sketch I found off of Google that I edited and desaturated in Photoshop. I liked the position the dancer was in and thought that her foot worked well leading the reader up to the info about the showcase. The type color in the word “7^th annual “ to “showcase” matches the different hugs found in the photo; and I also add a drop shadow to the letters OPDT to create dimension.

I have three sidebars that I recycled throughout each of my five pages in different combinations. The first is my Location/Poster sidebar. I chose to put this information in a sidebar because I didn’t think it was necessarily enough to take up a whole page but also because I thought having this info easily accessible would be more beneficial to my reader – the poster is easy (and free) publicity and the map is helpful for those who do not know the Syracuse campus well. The images on this sidebar are a map of main campus that I got off of our university website and the poster picture is a PNG I created of my poster layout from project #2.

My second page is the “About” page which gives a little background on OPDT explaining what they are about, how they started, what activities they do and how they benefit the community. I also added information on the charity selected to be the beneficiary of the showcase this year so that those who decide to go or want to donate money know where and to whom their charity is going. This page also debuts my second two sidebars. The first being OPDT’s executive board and the other is a list of choreographers and the dances they are choreographing. I wanted to give OP a “face,” so I chose to post photos of the four main leaders of the board: the president, the VP, the secretary, and the treasure. These photos are not real, I found them off of a Google search for headshots and thought they most resembled the Facebook photos of the real girls. The choreographer sidebar is there to kind of show those who are interested a list of the types of dances they can expect to see in the performance.

My third page is the photo gallery. I used a photo I found off of OP’s real website media page. I envisioned that there would be several photos skimming across the screen in a slide show format with the buttons along the bottom giving the viewer the opportunity to pause the action and peruse the photos at their own pace. I chose to put the exec board sidebar on here because I thought it fit well and kept with the idea of giving OP a “face.” The Location/Poster sidebar is here for people to reference back to.

Next is the ticket page which gives the site viewer – if interested – the option of buying their ticket online and getting them shipped to them or if they prefer to just buy their tickets in person, I provided Schine’s hours of operation, contact info, and website address. The order form was copied from TeenVogue.com’s magazine subscription form.

And last but not least is my contact page. It is simple and somewhat empty because OP doesn’t have much by way of contact other than email and their website. I made up a phone number to fill up space and make it look better. I also reposted my exec board sidebar and choreographer sidebar so that incase someone does decide to send an email they can choose from either list whom to address their comments toward.

Type Choice:

The font I chose was Myriad pro. I used different combinations of regular weight, italic, condensed; bold condensed, and bold condensed italic. This was actually the default font of the version of Photoshop I have on my laptop. I meant to change it but once I found out it was somewhat versatile I decided to keep it.

Color:

My color scheme came from my event poster. I wanted to keep a gestalt going between the two pieces and I though that black, orange and white flowed well together. The orange color is R: 249 G: 125 B: 11.

Taylor Miller: Project Post- Website

For my website interface project, I chose the pancake breakfast from home that I did for the poster project. I wanted the site to be kid friendly, as well as adult appropriate. To do this, I tried to mix fun shapes with simple and modern text.

For the overall layout, I created a white box with a slight shadow against a grey background. I did so because it narrowed the page which directs the visitor where to look on the site. I then created a yellow textbox within that white space, directing their attention even more to where the content would be loaded once they clicked on a certain link. Since this event doesn’t have a logo, I made one up. I took colors from pancakes (yellow and brown) and just created a simple and sleek logo using Harabara (one of my new favorite fonts that I found when doing my magazine). I put a slight shadow on the text to make it visible on the white background and to separate the colors from the white in a soft but precise manner. Also at the top, I included a picture to click on to download a poster that you could print and hang yourself. For my header, I thought it would be fun to use pancakes as my buttons. I figured that it would appeal to all ages, as well as being visually appealing to the visitor. I also included a Kiwanis logo on every page of the website.

For my homepage, I was really stumped at what to put on it. I finally came up with the idea to do a sort of news/updates esque page where the reader could see how the breakfast was going and to know that it was an active event and not one thrown together at the last minute. I created some headlines to go along with an article on the breakfast. At the bottom of the page, I decided to include a Facebook, Youtube, Twitter, and Flickr link since I think any key to a good website is having social interaction with it’s users, and in order to do that, you need to have pages for social websites such as those four.

For my contact page, I included the two Key Club Advisors and the Key Club president with their contact information. I also decided to include some links to websites that people visiting my site would probably be interested in seeing. For the pictures of the people, I took the pancake shape and used the “paste into” option to keep the shapes consistent with the header.

For my about page, I just wrote a brief biography on the event (I participated in it for four years) and also included a picture of a school. I also wrote down all of the key info for the event. I decided it was probably important to include that since year to year prices may change and the date will always fluctuate.

For my directions page, I included a Google map of where the school is located, and a search bar for anyone to type in their address and find directions from their location to the school instantly.

For my photos page, I put on four Polaroid pictures. The way I wanted it to work was you would need to roll over the picture with your mouse in order for the picture to fade in, somewhat like a real Polaroid works. Also a description would appear in handwriting, and it would actually handwrite in flash as if someone was writing it on the Polaroid. I also included a link to the events Flickr for photos of past events.

Since I already provided the pricing on the about page, I decided that the tickets page should include a fill-out box for ordering your own tickets online. I was going to included a credit card box and all of that but then I remembered you are usually directed to a secure website when entering that kind of information. I also put in a little button for a family to win a free breakfast because I figured that would gain more hits for the site as well as promotion for the event.

Web Design- 12/8. Project post. Elena Carroll

Web Design Rationale:

For my web page I decided to do it on the tiny preschool my mom works for in Santa Fe, New Mexico. It is a non-profit school, and only has thirty students. Because the school is so small, it is almost unheard of, and difficult to raise money for. However, they do put together events such as bake sales to raise funds for the classrooms, supplies, computers, animals and other school materials. The event is very localized, and has very little national or other affiliation, so I found it difficult to find extra links to make, or to fill the pages with more material. The event does involve a preschool, so I decided to make it look cute and appeal to young children. The bake sale is on December 19^th, and it is a holiday sale so I also knew I wanted the spread to reflect winter and holiday treats. I took the logo for the preschool, scanned it in, and put in on the top of the page. So the rest of the page would not look blank and have awkward white space I added pictures of baked goods bought at the sale, edited them in Photoshop and pasted them on to the page. I also decided to align snowflakes down the sides of the pages to add extra winter decorations. I found the pictures on google, selected certain snowflakes, and pasted them down the sides.

For my colors I wanted it to have a winter feel, but not be an obvious red and green Christmas scheme. I went with a dark blue color of R: 41, G: 133, and B: 154. I also matched it with a lighter yellow color of R:27, G: 241, and B: 227. For my fonts I found one of Defonts that mimicked the handwriting of a child. It matched with the student drawings I found, and fit the site well. I made the body of the webpage Century Gothic so it would look clean and organized in contrast to the childish handwriting. The body also needed to be much more readable, so I needed a font that would not cause any confusion or look sloppy. I added pictures taken at the school while the children were there, and also added a contact page to get in touch with the teachers. For the selection bar I added gingerbread men to know when a user is selecting a tab. When the mouse runs over a tab, it changes to a brown/yellow color, and a gingerbread man appears next to the tab being selected. I also added a directions page to the location of the bake sale since it will not be held at the preschool. Also, to note the location I used a Christmas tree instead of the star Mapquest provides.

I wanted my website to look readable, clean and cute. It does not have a lot of links or extra features because the school is very simple. However, I wanted it to cause interest, and hopefully entice lookers to go to the sale, or maybe become interested in the school for their own children. I want the site to appear professional, safe, child-friendly, and impressive to prospective parents.

Binta Jammeh- Web Design Project Post!

Design Strategy

I intern for the American Red Cross in Syracuse, and every year they put on a Halloween S.A.F.E. Fair in the Near-West Side Neighborhood. The Red Cross works to build community partnerships and spread the word about the services that the organization offers by setting up events like the S.A.F.E. Fair that have the potential to bring out the entire community.

The Near-West Side is a predominantly Hispanic immigrant neighborhood where a lot of the parents do not speak English, so I knew immediately that I would have to cater my website to the children who did speak English. (Just in case the parents wanted to check the site out too, I created an option to view the site in Spanish).

The S.A.F.E. Fair is for kids and adults of all ages, so I didn’t want to make it too child-like. I chose visuals that were quintessential to the Halloween season, but I made sure they were the right combination of spooky and fun. I also added inner and outer shadows and transparencies to give the visuals an added spooky feel.

I set up four main links that would provide more information on the event and how to participate. I chose to outline each navigation button in the shape of a Halloween characters. I chose to use a different visual/texture for each link in order to give the website movement and to keep it interesting.

Choice of Typefaces

I chose three main typefaces for the web design- Ghost Town, Lucida Sans, and Gill Sans. I chose to use the Ghost Town display font only on the first page to give the feel of Halloween and the set the reader up for the rest of the website. I love using the Ghost Town font because it is the perfect spooky Halloween font. I used the sans serif fonts of Lucida Sans and Gill Sans because they are easy to read and gave me the room I needed to play with different weights and styles.

Color

I only worked with two colors, the orange and the orange-brown. I wanted to shy away from using the typical Halloween colors of black and orange throughout the entire website in such a dominant way, because I wanted to provide a new spin on the holiday. I think the brown complements the main visuals on each site wonderfully, and although the orange is not used very much, when implemented, I think it is very effective in getting the Halloween feel across. The RGB value for the orange is R= 241 G= 113 B= 40 and the value for the brown is R= 109 G= 40 B= 18