Final Project

We were briefed on the final project on week 5. The project is to create a website based on a musician we chose.

Using Muse, we can make a responsive website using breakpoints, the website will then be using fluid width. This is the same function as using Bootstrap on Dreamweaver. This breakpoints function allows us to have different breakpoints in the web design, so that at a certain breakpoint, your design could be completely different from the previous one; this function is useful when you want to make your website look its best in different gadgets (desktop, tablet and phones).

For Muse CC, there’s a function to do this without breakpoints and it can be found here:

Screen Shot 2017-01-18 at 1.05.31 AM.png

These function like breakpoints, but by using this, you can keep your browser width ad a fixed width in each division, making it a lot easier when laying out your design on Muse.

For this final project, I decided I wanted to make a website for the Kagamine Vocaloids. Kagamine Rin and Len is a part of the Vocaloid genre where the singer’s voice is autotuned to give it a higher pitch. They are the second ones made, after the most popular Hatsune Miku, therefore they have “02” on on their arm (act 02).

The website will have a modern and minimalistic look, using the electric yellow and black color palette that the Kagamines are known for.

Here is my moodboard:

Screen Shot 2017-01-18 at 12.58.57 AM.png

Brainstorm:

photo-on-1-18-17-at-1-17-amphoto-on-1-18-17-at-1-20-am


Week 6 – 7

For the website, I looked around for references online and found a website I really like : http://toyfight.co/

The website is minimalistic and quirky, which I really like. From here I decided to have a parallax website rather than the usual static website. Here are my sketches:

del1del2del3

For the measurements, I used:

Desktop: 2560 x 1600

Tablet: 1024 x 768

Phone: 750 x 1334

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s