Website Design - Rinder

Subject Choice:

I chose to use the same nonprofit event that I used for my poster design project. I also used a similar color pallet to the one used in my poster: shades of pink.

Layout and Design:

I used the 16-collumn grid to create my design. For my layout, I used the pages: Home, Sponsors, About, Class Info, Contact us, and Class Schedule. I put these in a navigation bar across the top of the page for easy visibility. The title of the event, Pilates for Pink, is across the top of the navigation bar.

I kept the overall design of my website very clean. On most of the pages, I used a rounded, white box to hold the text. I included one picture on each of the pages (besides the Sponsors page, and the Class Schedule page). I used a smaller rounded-edge box to hold the title of the pages. On some of the pages, I overlapped the text box and the picture to give it a sense of layering and dimensionality.

I added the Facebook and Twitter logo since most websites today have some form of social media access on their websites. I also added Privacy Policy, Copyright Information, and Help across the bottom of the website.

Typefaces:

For the title of the web page, I kept the letters lowercase to make it seem approachable and low-key. The event is Pilates, which as a form of relaxation and strength training, should be relaxed, and so should the type. I put a gradient on the text to give it a more 3-dimensional look.

I used the same font, Myriad Pro, in different sizes and weights to give the website visual continuity. I thought the font, a sans serif, would work well on the web. It is easy to read and had a large family to work with.

The color of the navigation bar text is white in its original state, and the same color (R252, G195, B234) as the webpage’s background in the mouse-over state. The text in the white text boxes are is the same color as the background of the navigation bar (R237, G115, B119). This also gave the website visual continuity.

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.

Week Eleven | Murphy

I think the apple website is a really successful website. The grid structure is really obvious which enhances the ease of use. Apple's mission is to make electronics easy to use and simple to understand. What better way to showcase this motto than through its website. At first glance, the website is organized and sleek looking. Everything is right in front of you to help navigate the site. Immediately, I feel comfortable with the site which helps sell the products that apple is advertising. The words use the same type, but in different weights to break up the information. The site also has a good contrast between pictures and text. It is overall easy to read and easy to follow.