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.

Week Thirteen | LaSorsa

The Apple website provides a perfect example of web hierarchy. The top toolbar lists the main sections of the Apple company including Support, Store and iTunes. These categories are on top because they are the first step in filtering all the information the website provides down to one specific thing a person is looking for. Once a category is clicked, the top scroll bar shows all of the items available. For your convenience, Apple supplies a picture and the name (just incase you are unaware of either). The main advertisement in the middle provides the latest news, depending on the subject of that certain page. If all of that does not allow you to find what you are looking for, there is a search bar on the top right. This website is very easy to navigate and does so well because of its visual hierarchy.

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.