Paola Panfili

CS 130-2

10/24/2013

HTML Website Report

This website wants to promote a band that is very famous in the United States but unknown to the rest of the world. Their music is a mixture of very diverse musical genre that go from rock to soul and pop, and it has a religious American Christian background; however, their songs go beyond the religious message. Because of this mixture of genres I decided to use colors that are representative of the band, namely black, white, gray, and a shiny green.

In the background, I have a blurred image that is just a portion of a previous picture I had. I wanted to give this precise effect because it really tells a lot about the group and their music. In fact, the predominant black is interrupted laterally by this flowery motive colored in gray that resembles the merger between rock and soul that the group embodies. I do not know if in the future I am going to keep this motive. In fact, I was thinking about having some kind of dark background with some white inserts but much starker, for example a wooden background or a jeans texture.

On top of the page I have decided to position an image that represents the group particularly since it is one of their most successful songs and it is somewhat their motto. In the future, I am thinking about making that image the background of my index page. I imagine it to be split vertically in two equal parts; one should be visible while the other should have a transparent layer on top, and on that layer I would be writing all the sections of the website linked to the different pages.

For the sections I have included the history, band members, the discography, tour dates, and media archive. I have used a bold white color for the name of the sections with the shiny green as text shadow. Also, I have decided to position a border bottom all the way long under the section name since it gives an idea of structure. I have three bulleted lists in the website; however, I have decided to turn the bullets in actual images with a white background and black musical instruments. However, given the size of the image I was thinking about changing it with a simpler icon. In addition, I have assigned to each section a representative image that I would like to use somewhere in the actual website. In reality, I might think about doing a specific section only for images and pictures and one only for videos. In fact, I would like to position some videos in the website. In addition, in the very first section, I decided to single out news information about a new member of the band in a centered box that also has a different background color. I have done this because I would like to use the same method in the future to stress some news such as special tour dates, special interviews, and other events that might interest the followers. The color of the box is a gray that quite resembles the color of the flowers in the background, so that it seems to give a sense of continuity with the rest. In the very first section, I utilized a margin right in order to stress the lateral background and the text as well.

Despite the sections I have outlined above, I would like to add other sub sections since this group has also an established group of followers called “the Breathers” and I want to create a page dedicated to them and to their activities. Also, I would like to make the whole website more dynamic with sliding images and more advanced graphic solutions.

GRADE B+/A-

GRADE ANALYSIS

PROS

The web page is well developed according to the design rules/standards/options discussed in class.

Both the css and the html are clearly structured.

An good effort was put in creating effective style

The site presents the beginning of a good design that can be further improved

CONS

The top image is much too large

The text change too much with smaller resolution – the margin settings overlap?