Final Design

Here is the final website design.

Advertisements

Organising The Root Folder

The root folder contains all the HTML, Adobe Muse files and images I have used. I have organised it in a simple manner. The Assets, CSS and Scripts folders are all part of what Adobe Muse exports. The Index.html file is the welcome page as this will be what people will initially visit. The site.html file is the Muse page.
one

Below shows inside the Images folder. These are the images that were imported into Adobe Muse and also the images for the Welcome Page. They have been merged into 1 folder.
two

Chatting With The Client – Floral Separators

The client sent a link to this Instragram page. He said he likes the borders around the pictures. See below for a close-up.
DuPree2 DuPree http://instagram.com/collindupree

The client said that Collin Dupree uses an app called Afterlight. I went to this page to have a look. I don’t have an iPhone so I was unable to download it and try it out. I asked a friend to download it onto his phone instead.2 https://itunes.apple.com/gb/app/afterlight/id573116090?mt=8 The different parts of the website needed demarcation.

My first idea was to use this app to put pretty borders around the clients’ photos. It looked like this.
1

Here is another picture I put a border around to see what it would look like.
image (2)

This idea was a good one I think and I was feeling good about it but then I realised that I needed a line of demarcation between the different sections. At first I was going to use different coloured backgrounds. So for example, black, then white, then grey and repeat or something of this ilk.

I had a try using brushes to make a floral design which could be used as a separator. Here are the brushes I tried.
brush
http://www.brushking.eu/320/floral-photoshop-brushes.html

3
http://www.brushking.eu/390/floral-ornaments.html

The results didn’t look good. It just looked unprofessional and messy. I didn’t save everything I did apart from this example below.
green

I abandoned that idea. Then I had the idea to use floral ‘wallpapers’ for the lines of demarcation. This meant that I had to stop using the floral borders around the images or it would be floral overload! So I chatted with the client and asked him what type of floral designs he likes. This was much better since a more uniform pattern looked a lot better than random brushes.

Here are the ones I ended up using. To make this one I had to copy and paste a part of the image and fit it together like a jigsaw since the original image was too small. I think this looks really pretty. I got rid of the blue one (see below) and swapped it with this one. It has more detail than the blue one.
purple-parts
http://www.decorsupplies.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/6/3/63F5305D14390FEACDB972E2E9344B42.jpg

To make this one I had to copy and paste a part of the image.
Roses-wallpaper-from-Laura-Ashley
http://housetohome.media.ipcdigital.co.uk/96/0000140f6/50c3_orh550w550/Roses-wallpaper-from-Laura-Ashley–PHOTO-GALLERY–Style-at-Home–Housetohome.jpg

This one is the right size.
Flower Wallpaper Tumblr Hd 1080P 12 HD Wallpapers
http://gamespe.com/flower-wallpaper-tumblr-hd-1080p-12-hd-wallpaper.html

This one is the right size.
Flower Wallpaper Tumblr Hd Background 9 HD Wallpapers
http://gamespe.com/flower-wallpaper-tumblr-hd-background-9-hd-wallpaper.html

This one is the right size.
floral-btumblr-bbackground-backgrounds-392624441
http://us.cdn291.fansshare.com/pictures/tumblrphotography/floral-btumblr-bbackground-backgrounds-392624441.jpg

To make this one I had to copy and paste and fit pieces together to make a bigger image.
green seperater
http://www.amazon.com/York-Wallcoverings-AP7427-Silhouettes-Wallpaper/dp/B0060S7MLG

Here are the ones that I considered using but decided against it in the end.
3219891_large
http://www.lauraashley.com/content/ebiz/lauraashley/invt/3219891/3219891_large.jpg

small blue
http://vintagebackgrounds.tumblr.com/post/44482148255

467DACE8266640A66F471E62A3FDBA9B
http://www.decorsupplies.co.uk/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/4/6/467DACE8266640A66F471E62A3FDBA9B.jpg

blue old pop
http://www.popscreen.com/pg/820861423/Brewster-14945704-Floral-Toile-Blue-Floral-Toile-Wallpaper

I swapped this one out for the purple one four days before the deadline because it isn’t very detailed. To make this one I had to use image trace in Illustrator. The original image was too small so I made it into a vector. This enabled me to make it bigger but detail was lost when I traced it. So in the end I abandoned it.
love-letter-by-laurence-llewelyn-bowen4
http://www.diy.com/nav/decor/wallpaper-wall-stickers/wallpaper/greens/Love-Letter-Wallpaper-in-Teal-by-Laurence-Llewelyn-Bowen-for-Graham-and-Brown-10787549?ecamp=SEAPLA11278257&ef_id=Usr1GQAABdfk412-:20140508104612:s

I didn’t like the texture of the background.
b4bf671d76323ae8da8aa4a80b9974b0
https://www.etsy.com/uk/listing/115101413/1940s-vintage-wallpaper-floral-wallpaper?ref=market

I tried altering it but it didn’t end up working out. When I copied and pasted the image it was obvious to see where the joins were.
b4bf671d76323ae8da8aa4a80b9974b0 2

I tried using Image Trace in Illustrator. It just looks blurred and messy. At this point I abandoned the idea.
pink (2)

I wasn’t totally happy with the image of the large roses with the green leaves on the white background. It reminded me of a photograph and didn’t match well with the others which were stylised and less realistic and detailed in appearance. I thought a good way to change it would be to use a filter. I think my client likes filters. I did a Google search and tried out the different filters.
filter
http://www.fotor.com/features/photo-effects.html

I found this one below to be the best.
filter2
https://pixlr.com/o-matic/

Here is a picture of college which I took a while back.
2013-09-27 08.27.56

Here is an example of what the filter can do.
16 05 14

Here I am trying out different filters.
dun
dun3 dun4

In the end I decided on this look and I’m glad I did because I had a lot of positive feedback on it. I choose this one because I think the client will like the shabby chic look. The ones above look too bleached out.
dun5

Here are the final choices. I’m really happy with these choices since I’ve had so much positive feedback from my tutor and fellow students. I can tell that people are not expecting to see floral patterns like these as they look surprised and happy when they see them.
final

Decision Making For The Slider – Feedback in Class

So my first idea was to set out the home page to emulate one I had identified in my research.
jer lar
http://jeremylarsonmusic.com/

Here you can see I have left a space for the content. As you can see below, there isn’t much room so I abandoned my initial idea and decided to have just a slider. Keep it nice, clean and simple.
11 05 14

In class I asked for feedback from the tutor. I showed all the different options for the placement of the type so I could decide which one was the best.
DSC_0036 home studio 2 rows

DSC_0036 home studio

From all the feedback and from my own considerations, this is the final choice.
dsc_0036-with-type

Options shown in class:
Valley

From all the feedback and from my own considerations, this is the final choice.
valley-2-rows

Options shown in class:
itunes 1

itunes 2 rows

itunes 2 rows top right

itunes 4 rows top right

split3

split2

itunes 4 rows bottom left

split

From all the feedback and from my own considerations, this is the final choice.
itunes-4-rows-bottom-left

I hope this post illustrates everything I’ve been learning. I’ve been listening to my tutor and my fellow students and acting on their feedback. You can see here how my process has brought me to the right choice in the placement of the type for the slider.

Step By Step For Deleytha’s Website In Muse

To begin I set the page size. This changed throughout the time I was building the website. These are the final settings.
1 new page

I initially changed the browser fill to white, this matched the websites canvas.
2 browser fill

I placed the logo I had made in Illustrator at the top of the page. I did this by navigating to File > Place.
3 place for logo

I selected the logo and placed it in the correct position on the page.
4 selecting logo

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.
5 place menu bar

I used the text tool to write out each button.
6 place menu titles

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.
7 highligh all set scroll

Next, I selected the rectangle tool again and drew out a box. This would become one of my floral spacers.
8 place spacer box

To insert the image fill, I clicked on fill near the top left of the screen and clicked the grey folder icon.
10 fill settings

I then selected the image i wanted and clicked open.
insert floral

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.
11 fill scroll settings

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.
12 page titles

After some feedback from my colleagues I created this swirl pattern to fit under each title. These were simply added in using File > Place.
13 place swirl under title

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.
14 inserting text

I added in one of Rowan’s pictures to the right of the text using File > Place.
15 placing image

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.
16 inserting more text

To be able to display his music and let people play it I decided on using Sound Cloud. They offer free embed code.
17 soundcloud

It was as simple as copying the code and going into muse and pasting it there.
18 pasting soundcloud

After it is pasted, Muse creates a preview box so you can resize and place it into the correct position.
19 placing soundcloud

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.
20 youtube embed code

A preview is again shown so you can resize and place it correctly.
21 placing youtube

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.
22 gallery widget

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.
23 gallery settings

I resized the main image as well as the thumbnails, this is the final position.
24 finished gallery

For the studio section I decided on a grid style layout for the images. I tried several different layouts. Here is one.
2

I decided to use two columns in the end.
25 studio images

Using file place, I added in each image and resized it. I had to try a few different combinations to get this looking correct.
26 studio images

Here it is looking more complete.
27 studio images

And finally here in their final position.
28 final images

I added in a subtitle using the text tool.
29 music influences

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.

https://www.youtube.com/watch?v=rnZNv2jTC9c#t=453

So following the steps in the video, I selected this widget and dragged it onto the page.

30 lightboxy

Here are the options that are available with the widget.
31 lightboxy

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.
32 lightboxy thumbnails

 

I repeated the above step for all the thumbnails and got them into the correct position.
33 lightboxy thumbnails done

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.
34 lightboxy insert html

I got the embed code for each video from youtube which is freely available.
35 embed code

After I clicked on Insert HTML in muse this box appeared. I pasted the embed code here and clicked ok.
35.5 embed code

Now once the thumbnail is clicked on, the video appears in the lightbox area.
36 lightbox done

I uploaded to my friend’s web-hosting to test it. When the thumbnail is clicked the video appears with a lightbox effect.
37 lightboxy onpage

The final section of the website is Contact. I used the text tool and added some details for the page.
38 contact start

I added another of Deleytha’s images to the page using File > Place.
39 placed images

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.
40 form

Here are the options that I can adjust. I decided that the simple form had the correct fields that I needed.
41 formsettings

I place it under the text I added earlier
42 form done

For the footer I drew out a box using the rectangle tool and set the fill colour to a green.
43 footer box

I used the text box and added this to the footer.
44 footer text

I made another pattern in the same style of the logo and the patterns under the titles. I added this in using File > Place.
45 footer pattern

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.
46 anchor

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.
47 anchor

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.
48 more anchors

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.
49 link anchors

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.
50 slider

These are the default settings for the widget.
51 slider

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.
52 slider

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.
53 slider

 

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.

linkingslider

 

Step By Step For Up Arrow In Muse

I got a vector arrow from the website shown below.

http://all-free-download.com/free-vector/vector-icon/fine_arrow_icon_vector_163087.html

arrow

I edited the arrows colour in Illustrator. I saved it as a .png file.
1

I went into Muse and clicked File > Place.
2

I navigated to where I had saved the file. I clicked Open.
3

I positioned it on the page. I clicked the anchor button. I clicked at the top of the canvas to place the anchor.
4

I clicked on the arrow and then I clicked on the drop down menu. I selected ‘top’.
6

I edited the scroll settings.
7

I uploaded the changes to the host and checked that it worked.
8

Step By Step For Animating Icons In Adobe Edge

Here is where I got the vectors from for my social media icons. The ones you don’t see links to were already on my computer from a previous project.
pin
http://business.pinterest.com/en/brand-guidelines

last fm
http://www.psdicons.net/2013/06/20/last-fm-icon-psd-png/

spot
http://vector4u.com/logo/spotify-logo-vector-download/

I created a new file in Edge and made the size 24 x 24.
1 new file

Next I went to File > Import, selected the Grey image and Colour image and clicked open.
2

After I had resized them to fit the canvas I made a spacer that was 13 pixels high. This will ensure all my animations are uniform.
3

To make the animation smooth I highlighted both images and made them into a symbol, this allowed both images to move together.
4_

I made sure to untick ‘Autoplay Timeline’.
5_

I then dragged the pin across the timeline to 0.078 seconds. This would be the length of time that the movement would take.
6

Now I could select the image and press the down arrow key until the coloured image was in the grey images previous position.
7

I then inverted the transition by right clicking and selecting ‘Invert Transition’. This means that at 0 seconds, the grey image is visible.
8

To stop the animation from autoplaying once the page was loaded I had to untick autoplay on the stage layer.
9

To make the animation interactive I clicked on the ‘Open Actions’ button in the timeline. This brought up a menu with different trigger options.
10

I clicked on mouseenter and clicked on the play button in the menu on the right. This meant that once the user’s mouse hovered over the animation it would play.
11

The next one was mouseleave. I selected playreverse, meaning that once the user’s mouse left the animation it would play backwards.
12

13

The last one was click. This was so I could link to the correct social media website.
15

I had to Google how to do this and found a useful website that had the solution, shown below.
14
http://stackoverflow.com/questions/17173379/how-do-you-open-a-link-in-a-popup-window-in-edge-animate

To make sure people knew it was a link that could be clicked I changed the cursor to ‘pointer’.
15_5

Edge allowed me to preview in a browser so I could test it before exporting.
16

I had to change the publish settings as the default is set to ‘Web’, I required it to be ‘Animate Deployment Package’.
17

I simply clicked the correct option.
18

Once I had exported the animation, I could place it into Muse.
19

I navigated to the animation file and clicked open.
20

I then placed it into its correct position.
21