Welcome to the Official Class Blog of GRA217- Section 4


Showing posts with label web design. Show all posts
Showing posts with label web design. Show all posts

Friday, May 7, 2010

Friday, April 30, 2010

Web Design Project - Seo







Concept
The event I chose for web design project is “Syracuse Festival of Races”. It is a annual festival event that I think it is good for people in Syracuse to know about this festival. For this website, I used a silhouette of men running as a logo for this event. I tried to put fewer contexts on the website and summarize the information that people need to read.
Links
Since the event of this website is straightforward, I tried to find images to help people understand this website clearly by looking at the images. The color I put for each navigation bar is consistent with the color of headings. I chose the color carefully because the highlighted color may distract people from reading the information. All the pictures of people are from the official website Syracuse Festival of Races.
Font
The typeface I chose for this website is Arial for all headings and body contexts because I think Arial is not only a great typeface for reading information but also a good for heading when its bold. For the title of the event Syracuse Festival of Races, I chose Cooper Gathoam because I wanted to chose different typeface but at the same time, it shows similarity with other texts.
Color
I used black background for my navigation bar, and for each color link, the color is directly traced for the image of silhouette on the top right corner. Headings for each page also show consistency with color.

Wednesday, April 28, 2010

Web Project - Igbeare





Design Strategy:

I decided to do my website on a local food drive that takes place in my church. I kind of took the idea from the outreach dinner the church usually has. This food drive is an ongoing event but when they have the dinner they give the items to those in need. For the color palette I wanted something light and colorful. Since I knew I was going to use pictures that popped I didn't want the background colors to be too distracting. I decided to focus mainly on the food drive. I wanted a grocery bag at the sidebar with the navigational links because I didn't want the audience to forget what the event was about.
For my fonts I used Friz Quadrata Standard for all my body texts. I then used Benguiat Standard for my heading. Lastly, I used Albertus Standard for my navigation bar. I wanted all the fonts to compliment each other without competing with each other. I thought they looked visually appealing together.

Tuesday, April 27, 2010

Week Fourteen Part 2, Stefaniak


Strategy:

Since I had already created a poster for the Pawcasso art auction event, I wanted to be able to utilize my design in other ways. Because the event is annual, I thought that creating a website design for it would be the perfect way to go about expanding my design. Therefore, the website mirrors the poster design in several ways, using a similar color scheme and style.

In order to create an effective design, I started out with an enter page. When I go to websites, I feel as if pages that start with a big visual that you must navigate past to get to the actual website builds up intensity and aggrandizes the website. For this reason, I created an enter page with the visual large and prominent in the center, leading the viewer to the rest of the information about the event. All the pages that follow consistently follow the pattern of navigation bar on the right to frame the faded cat picture, and information in the center for easy readability. I used the grid mainly to center and lay out my design.

Typefaces:

Though the website is very similar to the poster design, I used all sans serif typefaces on the website. I felt that fonts such as these, Grotesque MT Std, Myriad Web Pro, Helvetica LT Std, and Myriad Pro, were more consistent with web readability than the serif fonts used in my poster design. In addition, all fonts except for the picture caption have a drop shadow effect on it. Since 3d visuals are more interesting than flat ones, I thought adding a shadow to the type would create dimensionality and interest.

Week Fourteen, Stefaniak





Strategy:

Since I had already created a poster for the Pawcasso art auction event, I wanted to be able to utilize my design in other ways. Because the event is annual, I thought that creating a website design for it would be the perfect way to go about expanding my design. Therefore, the website mirrors the poster design in several ways, using a similar color scheme and style.

In order to create an effective design, I started out with an enter page. When I go to websites, I feel as if pages that start with a big visual that you must navigate past to get to the actual website builds up intensity and aggrandizes the website. For this reason, I created an enter page with the visual large and prominent in the center, leading the viewer to the rest of the information about the event. All the pages that follow consistently follow the pattern of navigation bar on the right to frame the faded cat picture, and information in the center for easy readability. I used the grid mainly to center and lay out my design.

Typefaces:

Though the website is very similar to the poster design, I used all sans serif typefaces on the website. I felt that fonts such as these, Grotesque MT Std, Myriad Web Pro, Helvetica LT Std, and Myriad Pro, were more consistent with web readability than the serif fonts used in my poster design. In addition, all fonts except for the picture caption have a drop shadow effect on it. Since 3d visuals are more interesting than flat ones, I thought adding a shadow to the type would create dimensionality and interest.

Website | Murphy


Erica Murphy | Website rationale

Non-for-profit event

My non-for-profit event is affiliated with a club that I was involved with in High School. I chose this specific club because it was the club I was the most involved with in high school. I chose the annual bowl-a-thon because I had my own pictures from previous events. I thought that this would make it easier to create a design when I already knew what visuals to use.

Design strategy

I chose to use a 12-grid system because I felt that my containers were too large for the 16-grid system. I also thought that spreading objects and type across two columns was easier to design. I used the same color pink throughout each page and just changed the opacity to create visual continuity. Pink is the official color of the Susan B. Komen foundation, so I thought this worked well with the theme of the bowl-a-thon. I used a bowling ball to dictate which page was the main page and kept the circle theme going with the shape of my pictures. I also used a bowling pin on each page to hold extra information and to help contain the main text.

Choice of Type

I wanted to use somewhat girly and fun fonts to contrast the brown, boyish colors of the bowling ally. I couldn’t find the font I wanted for the headline in suitcase, so I found a font on dafont.com titled Sooperfresh. I used Emmascript for the links on my web pages and trade gothic LT Std for the body text. The script and sans serif fonts provide a nice contrast to each other.

Friday, April 23, 2010

Web Hierarchy - Rinder





New York Magazine's website, I think, has a great hierarchy. Across the top is a navigation bar leading the user to potential pages they can visit. When the mouse scrolls over a page, a drop-down bar appears giving the user even more specific options within that subject page. Then, in the fashion page, for example, there is a sidebar navigation with more subheads. This is in a different container than the main text on the page so the user knows it's a navigation box.
The light blue text shows the user that these will open a new article or link.