To begin I set the page size. This changed throughout the time I was building the website. These are the final settings.
I initially changed the browser fill to white, this matched the websites canvas.
I placed the logo I had made in Illustrator at the top of the page. I did this by navigating to File > Place.
I selected the logo and placed it in the correct position on the page.
I used the rectangle tool to draw the navigation bar. I set the fill colour to white. I also dragged the rectangle to each side of the canvas, this makes it 100% width when in a web browser.
I used the text tool to write out each button.
Once this was done for all of my buttons I opened the scroll effect menu. Here I was able to set the scroll speeds so the navigation bar would freeze at the top of the page.
Next, I selected the rectangle tool again and drew out a box. This would become one of my floral spacers.
To insert the image fill, I clicked on fill near the top left of the screen and clicked the grey folder icon.
I then selected the image i wanted and clicked open.
I set the fitting to scale to fill so no gaps would appear. And on the scroll tab I set the scroll speed to 0. This would mean the image fill stays still while the box will appear to scroll over it. I repeated this step until I had a spacer for each section of the website.
For the titles I selected the text tool and drew out a text box. These are all equally spaced under the spacers in each section.
After some feedback from my colleagues I created this swirl pattern to fit under each title. These were simply added in using File > Place.
The first section at the top of the website is About. To begin I drew a text box and added in these paragraphs which describe who Deleytha is and what Rowan does.
I added in one of Rowan’s pictures to the right of the text using File > Place.
For the Music section I planned on displaying some of Deleytha’s music so it could be listened to. I added in text box for the text.
To be able to display his music and let people play it I decided on using Sound Cloud. They offer free embed code.
It was as simple as copying the code and going into muse and pasting it there.
After it is pasted, Muse creates a preview box so you can resize and place it into the correct position.
Under the sound cloud I added in Deleytha’s music video. I used YouTube for this and again it was as simple as copying the embed code and pasting it into Muse.
A preview is again shown so you can resize and place it correctly.
In the next section I am going to place a gallery. Muse comes with build in Widgets that are great for this and can be modified extensively. I selected the option with thumbnails and dragged it into the canvas.
These are the settings that the Widget comes with. To add new photos, I clicked the folder icon at the top and selected Rowan’s photographs.
I resized the main image as well as the thumbnails, this is the final position.
For the studio section I decided on a grid style layout for the images. I tried several different layouts. Here is one.
I decided to use two columns in the end.
Using file place, I added in each image and resized it. I had to try a few different combinations to get this looking correct.
Here it is looking more complete.
And finally here in their final position.
I added in a subtitle using the text tool.
In this section I wanted to do something a little different. I had planned on using a 3rd party widget for a lightbox where I could display many videos, preferably from YouTube. I then discovered that Muse had a lightbox widget that would work exactly for that purpose.
I watched this video which explained how to get this kind of effect.
So following the steps in the video, I selected this widget and dragged it onto the page.
Here are the options that are available with the widget.
I decided to display the layout so each thumbnail had the songs album artwork or a scene from the music video. These would be laid out in a grid and once clicked would open up a window with the video inside. I clicked on each thumbnail and clicked the folder icon next to image to set the fill image.
I repeated the above step for all the thumbnails and got them into the correct position.
To be able to view the video once the thumbnails are clicked I had to insert the html embed code for each youtube video. This was relitively simple. I clicked on each thumbnail and navigated to Object and clicked Insert HTML.
I got the embed code for each video from youtube which is freely available.
After I clicked on Insert HTML in muse this box appeared. I pasted the embed code here and clicked ok.
Now once the thumbnail is clicked on, the video appears in the lightbox area.
I uploaded to my friend’s web-hosting to test it. When the thumbnail is clicked the video appears with a lightbox effect.
The final section of the website is Contact. I used the text tool and added some details for the page.
I added another of Deleytha’s images to the page using File > Place.
Muse comes with another built in widget that I decided to utilise. I clicked on Simple Contact in the widgets panel and dragged it onto the page.
Here are the options that I can adjust. I decided that the simple form had the correct fields that I needed.
I place it under the text I added earlier
For the footer I drew out a box using the rectangle tool and set the fill colour to a green.
I used the text box and added this to the footer.
I made another pattern in the same style of the logo and the patterns under the titles. I added this in using File > Place.
Now that all the sections were in a finalised position I could add in the other functionality of the website. The page anchors were next. To make these all I did was click on the anchor button.
The cursor then turns into an anchor and I just clicked where I wanted it placed. This one would be the top anchor for the side arrow which will take the user back to the top of the website.
This one is for the navigation bar, specifically the About button. I placed it down above the floral separators after I received some feedback that suggested doing this.
Here I am showing how I linked the buttons in the navigation bar to the anchors. When I clicked on the hyperlinks drop down menu, all the anchors appear here for you to select.
At the top of the page I added in a slider. This was done using the same widget as the gallery. The only differences are that it will autoplay, have no buttons and no thumbnails. That way it works in the same style as a website banner.
In the widgets panel, I selected the Basic slideshow option and dragged it onto the page.
These are the default settings for the widget.
Here you can see I resized the box. I also unticked the Prev and Next buttons, as well as the Captions and counter. I was left with only the image itself.
Here you can see the settings I finished with. Autoplay is ticked and the speed of the transitions and how long each image shows for has been extended.
I linked each images to what it represents. As you can see below, all I had to do was click on each image in the muse file, navigate to Hyperlinks in the top tool bar and select where I needed it to be linked.