Welcome to the Official Class Blog of GRA217- Section 4


Thursday, April 29, 2010

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.















3 comments:

  1. It really shows great consistency of color use in background and the body text. I liked the white boxes for the text and that really helped me to read the information.

    ReplyDelete
  2. I like how you made the shadow in the headline consistent with the mouse overs. It was a successful way to create visual continuity on each page. I also like the various colors of the boxes. It helps give the pages depth and keep the information organized.

    ReplyDelete
  3. I really love the entire layout of your web site. It's very uniform and consistent throughout and the color scheme is fantastic. I also really like how the pictures seem to pop from the page, and the text goes along with that because of the shadowing you used for your mouse-overs.

    ReplyDelete