Day: February 23, 2018

Within Adobe Muse, there are some really creative ways to add movement to your website known as scroll effects. These usually take the scrolling feature of your mouse to play with the movement of different assets within the webpage. After creating a plan for my website, I already knew that I wanted to incorporate this feature into the History page where the scroll feature would allow the user to scroll through the company history and see where it started. After a search on YouTube, I came across this video which was coincidentally by the same author of the Responsive Design video. Here it is:

From this video, it taught me how to incorporate these scroll effects into the design my website. Using the Scroll effects tab on the right-hand side menu, I will be able to select an object that I want to have animation and check the motion box. By doing this I am able to establish the key position of the object, meaning the position it starts at and also gives me the ability to state the direction and speed the animation occurs, which is defined by the scroll rate, meaning that if the speed is at 2, the animation will play through on the website in the browser at twice the speed of scroll. These rule also apply to the existing animation of the object during the period it animated out, the exit direction is defined as well as the speed allowing to fully animate in then out again.

Following from this, I will also be able to control the opacity of object through the use of the scroll functionality, this is done in the exact same way, however, the start and end point need to be defined denoting what the starting opacity will be and what the ending opacity will be. I feel that this coud be useful within the history page as I want it to fade in from right to left and exit the same way, by perfecting the opacity I will be able to add smoothness to the animation, thus increasing the quality.

When creating my website in Adobe Muse, I want it to have a responsive design. Responsive design is an approach web-designers make to their websites and pages so that they present well on a collection of device screens, ranging from laptops to tablets to mobile phones (each has a different sized screen). Having this responsive design implemented into my product will make it accessible to my target demographic from multiple devices and this will furthermore allow me to optimise their experience on that specific device when browsing the website.

From a google search, I came across a video produced by Adobe which went into great detail about how to effectively execute a responsive design to a level at which I could understand it. Here it is:

From this video, it taught me about the basics of how to implement a responsive design into my website. Using the Breakpoint Bar located at the top of the screen, I will be able to use a slider to minimise and maximise the page to simulate different sized screens, this will allow me to see when objects within the page will contact, further showing me when I need to add a new breakpoint. After a new breakpoint is added, I would then alter the layout of the page so that none of the objects contacts each other – this is good as I can any changes I want without affecting any of the other breakpoint settings. This also means that I can optimise it the website for different devices –  as none of the settings on the current breakpoint affects any of the other breakpoints, the scale of some objects within the page can be reordered better for a smaller screen, meaning that would all be perfectly sized.

Following on from this, when the size of the webpage is smaller, some of the objects can be changed to suit the user. For example, within the video, the creator knew that when the webpage screen was at a small size, it would be predominantly used by mobile devices, this meant that she could change the banner menu to an Accordion menu to benefit tablet and mobile phone users. I thought that was really cool and would be something I would really want to incorporate into my own design.