projectchance

Web Design Final (HTML/ CSS/ JavaScript coding)
—

For my web design final, the objective was to design and bring to life a website for any artist - I chose Chance the Rapper. The website had to be built in a manner which shows the personality of the artist in a playful manner and in addition, the website had to entice the user with subtle design elements/ features.

Content used for the website are owed by the respective parties.
// 2015

Planning and Research

—

The key to creating a successful website was down to examining Chance's current website: chanceraps.com. It iwas vital to understanding what HE would have wanted for this website. So I begin to break down and attempt to discover the purpose behind the current website layout.

Keeping this in mind, I picked the four main pages to be redesigned and coded:

The general rule applied to all the sections/pages: as little information as possible, but just enough for users/ fans to understand who he and SoX are.

So the planning began:

Understanding z-index

—

Before we get to digitizng plans, understanding the CSS property z-index was important:

Similar to layers, the z-index property allows us to create a stack order of different elements. Giving a z-index of 0 to a particular <div> places it at the bottom of the stack, a value of 1 stacks that on-top etc. The higher the value, the higher the importance. This is crutial because, the manner in which the website is designed is heavly dependent on the creation of a hierarchy of layers.

Mocks/ General Design Elements

—

Home Page

Menu

News

Shows

Sox

Video Background Loop
—
With the introduction of HTML5, it has become easier to insert video conrent into a website, yet alone have a loop running as a background. To add to the design, I decided to take this route.

Understanding the Code:

In order to make it work, we need a video with an ID in the HTML and customization in the CSS.

In the HTML, I give the video an ID of "bg-video"; have 3 different sources in case one fails; .mp4, .webm (web media) and an image incase user is unable to load both videos.

In the CSS, I give rules that basically translate to: i want the video to be fixed on the page (position: fixed;) , i want it centered on the page, and i want the video to take up all the space in a given window (min-width= 100%; min height = 100%) and most importantly, I want the video to be at the bottom of my stack/ hierarchy (z-index: 0).

</div>

video#bg-vid{
position: fixed;
left: 50%; top: 50%;
min-width: 100%; min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}

Screen Simulations

—