Day: February 24, 2018

As the last part of my Muse research, I wanted to explore what Anchor Links are. From previous projects I have used them before, however, since then I have completely forgotten how to use them. By researching them it would a good opportunity to refresh my memory o them and also explore what other options I have available for using them.

Exploring YouTube, I found this video below explaining how to use them exactly within a one-page website. Here it is:

From the video, I found that the anchor link system is often used on a one-page website. In the example above, the man used different coloured sections to represent different parts of the website, and then used the anchor point tool, denoted by an anchor symbol in the toolbar to add different points on the page that were then named. From this, each of the anchor points was placed in the centre of the page of every section and then linked accordingly via the hyperlinks tab to the menu. This enabled all of the links to redirect the user to relevant sections (if linked correctly).

Conclusion:

I feel that using this on a one-page website is very practical as it saves the user from having to scroll a lot. However, from my plans, I decided to use multiple pages in order to break the website up which I feel would make it easier for the user trying to find info about my product. I will have to research further to see if I can still use the anchor points to link different pages together, and if not, I will have to find a solution which will work for me.

Along with my Adobe Muse research, I wanted to explore my options with Rollover Effects. From my previous projects, I have experimented with different rollover effects to support a product by revealing additional information about a topic – this was a really inventive way to display the information without cluttering up the webpage, but it also helped to increase the presentation quality. By further exploring my options into all of the different rollover effects I would be able to achieve, I will be able to select the ones that would be best suited to complete the function that is desired, either being an animated rollover effect for a button or image.

From a generic YouTube search, I came across a plethora of videos discussing rollover effects within Muse, and after watching multiple I concluded that they all gave the same information. However, here’s two really good examples of rollover effects used in an aesthetically pleasing way:

From the videos, I have learnt that the basic form of rollover effects stems from the states panel at the top left of the screen. In simple terms, one object on the website can have 4 different variations due to the 4 states that it can be in Normal, Rollover, Mouse Down and Active. This is where the predominant changes can happen, and when these changes are made, they don’t affect any of the other states. For example, A square in the ‘Normal’ state could be coloured grey, and then, if the state of the object was changed into ‘Rollover’, the user could then change the colour to red. This would mean that the square in the browser would be grey until the cursor rolled over it.

Although very simple, this could then be developed by adding extra elements such as lines, like in the video above, further adding to its visual complexity. The same rules also apply for images where one image can be programmed to change to a different image once rolled over, which can also be further stylised with transition effects such as a transition period and delay, defining how long it takes the images to transition to one another, and also how long it takes for the transition to begin after the cursor hovers over the image.

Conclusion:

Although these rollover effects for both buttons and images demonstrated within the two videos are aesthetically pleasing, their design style might not be suitable for my product and the image I want to create for it. I feel the rollover functionality on the images is dated and would benefit more from a Parallax effect being used on it with a scroll effect, however, this is not to say that I would completely disregard the use of rollover effects, as I have found another tutorial on a rollover home/back button which is very interesting.

They use of this, although made completely redundant by the back buttons available on the browser does add a nice effect and is also executed by effectively.