Evaluation and Reflection

1) Visual Communication:

In what ways does the visual communication/message of the piece meet the needs of the brief?
When I met with my cousin to ask what he wanted he said he wanted it to look ‘pretty’ and he said he liked ‘floral wallpaper’. I think that I have managed to create something which is pretty and floral.

What are the strengths of the visual communication? Why?
I think the strengths are that I managed to create something which is in ‘tune’ with Rowan’s music. His music is quite tranquil and calming and I think I have created a design which reflects that.

In what ways could the piece be mis-read or mis-understood by the audience? Be specific about who the audience is.
The client wanted a floral design. I don’t think I would have gone down that route if he hadn’t of requested it. People may misinterpret flowers as meaning romance or it may remind them of a wedding. It may remind them of Laura Ashley. The new generation of young people like these floral designs. For them the floral designs are hip and cool.

In what practical ways could the piece be developed or improved?
If I had the programming knowledge I would have loved to add a section where fans can chat to each other or where Rowan can answer their questions. Luckily Rowan has his own Twitter so fans can ask him questions there. I also made a contact page so he can be contacted. I made a Twitter icon on the site which takes viewers directly to his twitter.

2) Reflection of own working practices:

Be very honest with yourself in this section. Please feel free to approach a member of staff for help finding ways to develop skills.

How was my time keeping?
My time keeping was quite good. The site was completely finished a few days before the deadline. A friend has given me hosting for the design for free.

How was my research?
My research was very helpful since I had never made a website for a musician before and I really didn’t know what they should contain. I don’t really look up a lot of music websites. If I want to listen to music I usually just go to YouTube. I have showed how my research has directly influenced my design like in the post about how I organised Rowan’s musical influences.

How did I use evaluations to help with my ideas generation and development?
At every stage I made evaluations of what I was doing. I talked about whether my research would actually be applicable to my website or not. I saw a few things that I might have used if I was a programmer and able to do more like the roll overs in Flickr. They were really attractive and functional.

The way Muse’s widgets work also put some restrictions on what I could achieve but it wasn’t a problem. The widgets are great! I would have achieved less without them.

How did I use experimentation during the project? How can I make this more effective?
The place I used the most experimentation was on the vectors I made. I spent quite a few days experimenting with floral vectors. It isn’t easy to design something like that. Vectors take a long time to make. I tried out different floral wallpapers to see which ones looked the best. I experimented with online filters. I’ve never tried that before.

In what ways did I show that I had achieved the Learning Outcomes? How can I improve this next time?
I think I have covered all the learning outcome by completing a lot of research, experimentation, making a lot of ideas and using evaluations on a constant basis.

What parts of the project did I enjoy most? Why was this the case?
Making the swirl vector for the footer was my biggest achievement out of the vectors I made, as well as the swirl device I placed under each title. I really like the way the musical influences video gallery looks. It looks really colorful yet it has a lot of breathing room. I’m really happy that my design has a lot of breathing room in general. I did this because I was inspired by Baggle Design. I made a post on Baggle.

What parts of the project did I enjoy least? Why was this the case?
Using Adobe Edge Animate is quite difficult and not particularly intuitive. I need to keep using it so I remember how. Learning to use Adobe Edge Animate was a great achievement for me.

What areas inspired me? Why was this the case? How could I follow these up?
The idea of making something my cousin would actually like and put his name to is what inspired me. I didn’t want to let him down so I put a lot of effort into creating what he wanted.

What areas were challenging or difficult?  Why was this the case?
Adobe Edge Animate was definitely difficult because it isn’t very intuitive.

How can I go about developing and improving the parts I found difficult?
Ideally I would like to learn to use all of Adobe’s new software but I don’t know if that will be possible or not. I can use tutorials from YouTube to learn.

Any other points?
I really hope my cousin likes the site so much that he chooses to make it live and uses it as his official website. I would be so happy if he does.


Final Design

Here is the final website design.

Problem Solving

22/04/14 > I initially tried to make the Welcome clip using the museGrid Video Background Widget.
muse grid

This page shows I downloaded it.
22 04 14 MuseGrid

Initially the video clip I used was the one my cousin had made. The video looked fine until I put it into the widget and then it looked awfully pixelated. It really ruined it. I wasn’t happy with this at all.

The solution to this problem was to remake my cousin’s video in Adobe Edge Animate. I used his photographs and copied his style so it would look at similar as possible. I’ve explained how I made this in my post called ‘Step By Step For The Welcome Page In Adobe Edge Animate’.

11/05/14 > I made the footer wider than the canvas, thinking that would make it full screen but it didn’t! I previewed it and it looked like this.
11 05 14 footer 2

The solution to this problem was to drag each end of the rectangle to each end of the canvas, a red guide shows that you have reached the end. This makes the box 100% width when seen in a web browser.

14/05/14 > As you can see below the F on the menu freezes above all the others.
f at top

To fix this I had to go into Adobe Muse and select the F. I navigated to the Scroll Effects tab and set the ‘key position’ to the same value as all the other objects on the menu. I have marked it below with a red arrow.

Idea For The Rollovers Animation

How did you come up with the idea for the rollover animation for you social networking icons?

While doing research, I found this site which I spoke about in my presentation. This is the site that has all the cool, colourful animations on it.
noir 20  05 14

I found their contact page which looks like this. At the bottom are their social networking icons.
contact 20 05 14

I made a video of their social networking icons. It’s best to watch the video in full screen.

The screen recorder I used doesn’t pick up all the details so you may want to actually go to the Soleil Nior contact page and see for yourself.

I thought the way they moved was really fun and eye-catching so this is why I decided to use Adobe Edge Animate to make my icons animated. I made my icons slightly different. Soleil Noir have the coloured part pop up from below whereas I decided to have the coloured part drop down from the top.

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.

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.

Step By Step For Linking The Welcome Page To The Website

To link the welcome page to the Muse website I had to turn the Deleytha logo on the screen into a button/link.


I did this by clicking on the actions button at the bottom of this image.

After clicking, I selected click from the top of menu.

I added in the text that I found on the link at the beginning. I replaced where it said index.html in the example to site.html so it would link to the Muse webpage.

Step By Step For The Welcome Page In Adobe Edge Animate

To make the welcome page for my website I had to use a program called Adobe Edge Animate. I first placed the images onto the canvas. I learnt the technique from this video. https://www.youtube.com/watch?v=PpvmKRb1rSQ

Using File > Import I added in all the images that I would need.

The way this works will be that each image will fade from 0% opacity to 100% opacity one after another. This should give the effect of the page having a video background.

I created a black box using the rectangle tool that would fade in and out as the transition was taking place. This made the background black between fades.

So first I clicked on the Toggle Pin button and dragged the pin across the timeline.

Once the pin has been dragged along the timeline I could change the Opacity in the top left corner.

I did the same for the black layer.

I realised I could just copy and paste these transitions and invert them if needed. So now it was just a matter of getting them into the correct order.

Here you can see a step by step of the correct order. This is about half way through the animation. The purple layer you can see fades out while the black layer (in pink) fades in. After that the black will fade out while the next image fades in from 0 opacity.
Now 4 seconds further along the timeline I copied a transition and pasted it. I inverted the transition so it was now 100% to 0%.

Now you can see it is 100% to 0%.
I did the same for the black box except this was 0% to 100% so it would fade in.
Using copy and paste I set the black to go back to 0% and set the next image to fade in.
Moving along 4 more seconds I have added in the transition to fade the black in again.
I copied another transition and pasted it onto the correct image, setting it to fade 100% to 0%
This is now the end of the animation. I needed it to loop on the page so I had to search Google on how to do this.

I found a usefull article here on the subject. http://www.cyprich.com/2012/09/05/how-to-create-a-loop-in-adobe-edge-animate/

Following the instructions on the link, I clicked on TimeLine and navigated to Insert Trigger.
This box appears and this is where I typed in this.play (0);

Now I just closed this window and when previewed the Timeline loops.