Progress of Website

Week 8 – 11

So after deciding on everything I moved on to making the flatplan on AI, this went on for 2 weeks or so. Here are screenshots of my flatplan:

Desktop:

Screen Shot 2017-01-18 at 1.38.12 AM.png
Home Page

This slideshow requires JavaScript.

This slideshow requires JavaScript.

This slideshow requires JavaScript.

The Tablet flatplans are similar but its in portrait orientation.

After finishing up what the design would look like, I decided to go ahead and start making the website. As I said before, I decided to use Muse.

For the website, I start out using fluid width and creating breakpoints, this later turned out to be a bad decision, but I’ll get to it later.

So I laid everything out and on the A Master, got rid of the footer and the header, this is because I don’t want a fixed header area and I’m not using a footer since its a parallax website.

From here, I only did what we were taught in class, I anchored some buttons to a set point of my page:

Screen Shot 2017-01-18 at 1.47.51 AM.pngThis is the widget I used, I made the background transparent, changed the font and words and got rid of the circle.

I then linked this button to an anchor point or to a page (profile page, music or merch).

After everything is laid out and linked, I tested it out. I previewed the website on Muse. What happened was that it looked really messy and all over the place.I then previewed the site on my browser to see if it was just a fluke, but the same thing happened.

After asking for help, apparently it was the fluid width that was the problem. Using fluid width messed up my whole composition and I had to redo the layout again after changing it to fixed width.

The new thing I learnt how to do was to make a photoshop button.

Photoshop buttons are buttons that you make yourself, these are most likely based on pictures. How:

  1. Put the photo in photoshop and get rid of the unnecessary background
  2. Copy the layer 2 or 3 times (I did 2 times because I didn’t see a need for my button to change when active)
  3. On the copied layers, change it however you want and then rename the layers. Keep in mind that your layers should be in this order:Screen Shot 2017-01-18 at 1.54.58 AM.png

4. After that, just go to Muse –> File –> Place Photoshop Button. Then just confirm                 that the layers are where you want them, click ok and you just finished making your                button.

So then I linked them to the pages again.

The next thing I learned is how to link a button to another website:

First, copy the link of the website you want it to redirect to. Then go to the hyperlink drop down menu:

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

Then just paste the link here:

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

and that’s it, your button is linked to another website.

To add music, just download an audio player widget (ran into a problem there because its a fixed size widget) and link your mp3 file in it.

For videos, here’s a helpful forum: https://helpx.adobe.com/muse/using/embedding-videos-html-content.html

 

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