FYP Project K00121609 April 2017
Blog 17: Update on Activities:
The 'owl theme' in this project as in my project presentation designs represent a tool-tip/action to be taken in the project, so that whenever the viewer sees an owl there is e.g. a point to note, form to be filled out etc.
For the contact form page, I created a GIF animation from still photos of owls. These change from one owl view to the next with a second interval. The idea behind putting it in the contact page was to put life into what would otherwise be a slightly static element of the website. It is a focus for the viewer and eye-catching to spend some time watching. Its presence also indicates an action i.e. the form to fill out.
I enjoyed the making of this GIF and will look at other places I can include these in my project with different image themes.
Next, I made a video of a river for a 2-minute 'tranquility experience' that is part of the website. Here, I paid attention to features such as: light and shade, contrast and similarity, focusing still on one area of the river as a constant where its variable is the water flowing past. It gives a sense of calm and focus. It is both stimulating in its flow with the sun shining causing the water to glitter and relaxing in its consistency.
There were sounds of cars in the background of the audio. However, the river video is exactly what I was looking for. I will obtain audio elsewhere tomorrow and will bring this into Premiere Pro and apply sound to the video.
I sourced an attractive image for the 'about' section of my website. It is animated, consisting of swirls and lots of action. The lines link well to my logo on the top left of page and also the minimalist theme in my design. It runs continuously representing consistency and is dynamic in its design and animation.
I wrote up the introductory section of my website and also values section. Here to maximize efficiency in use of text, I stated the main points with links for more information as 'read more' labels accompanying the paragraphs.
I sourced my icons from Glyphicon, Favicon and Google searches. I scaled these to suit the image sizes to fit in with my website design and applied colors to suit the style in areas of the page in which I was inputting them. This was 'darkgray' for the contact section e.g. email symbol which I put beside the 'design your day' email address that I have set up for this website. I have also a 'purple theme' running through the website. Here, the icons for the 'activities' area that display categories of activities in the website I used a simple purple colour so that while they are different in appearance (for each activity set), they are similar in scaled size and in colour. This shows that they are a part of the same section/theme.
I have been learning about 'hex-colors,' and using the online 'hex colour pickers' to select colors that are not directly available in the CSS libraries I use frequently. After experimenting for a while with the shades I selected two additional colors for the website, similar to whats already there but slightly different. This was to again maintain consistency and linkage in the website along with hints of variation to maintain interest. The two colors I use quite a lot in this website are:
#D6C7DA -> lilac
#818181 -> gray
For one of my activity pages of 'words' I have included amongst lots of programming code the following:
I have a 'Welcome to this page, what is your name'? button, on click an alert box appears and the user inputs their name and clicks 'ok', they then receive a return message:' Hi, (name), hope you enjoy the website !' This is created using a function with a user prompt and document get element by programming code.
A switch statement for a new life management quote for every day of the week. Once the clock is 12:00 midnight the quote automatically changes to that for the next day. This I can update once a week so that for every 7 days there is a new set of quotes for the next 7 days. This is amongst the heuristic principles of creating interest, expectation, memorability, recognizably to the website, so that the user revisits the website, with the expectation of, what the next new quote of the day is.
A series of quotes on a timer that appear every 2 seconds for focus. The user clicks the button and ten quotes of the day appear one by one each every 2 seconds. It has an endpoint at the tenth since I wanted this to be option for the viewer to click again if they wanted a re-run instead of an infinite loop. These quotes about life Management can be regularly updated. I used a series of timeout functions for to achieve this effect.
I have an online clock working on this page also. I have used a 'function' including the 'document get element by' code for this. The clock starts on-load of the page, for the part of the project that is focus as an 'awareness of time' in its different formats. There is a button accompanying this clock where the user can click to stop the clock when they choose. It also tells the exact time always.
I have been researching and implementing different layouts: using inline block floating boxes; image modals, jumbatron, columnar layouts, flex-items. I particularly like the 'image modal' which displays an image and on-click of this it zooms out to a larger full screen view, very interactive. There is an 'x' out option to close the modal and it returns to the original clicked image. Its steps are very clear: first call to 'get the modal,' then 'call to get the image and insert it into the modal and use 'alt' tag for the caption, next using the 'span' element to close the modal. Once again I am using the continuing theme of seeing the 'owl' as a call to action. In this case I will use it in the contact form area at the 'submit' button step.
I have also been using elements like iframes, carousels and panels to display information in a lively, dynamic, action way to enhance the overall UX/UI experience of the website. I am developing infographics as novel ways to display information. I am interested in animating effects. It started out as something quite difficult to work with, but the more I learn about animative effects for regular code the more straightforward the programming code is becoming. The keyframes, opacity and transforms and translates as well as features such as box-shadows are quite useful for turning static pages into interactive pages. The technical code of these works with some javascript and jquery e.g. for the navigation bar scrolling to different parts of this homepage.
I have created an interactive games page as computer games have been proven to be helpful for mindfulness and focus, or just to spend a few minutes. The games are well-known so they won't be an arduous task. I have attached an accompanied 'about' page with some notes on 'what to expect from these games.' The games included are: 'TIC-TAC-TOE,' n-blox,' 'PACMAN,' Simon Says.'
I will continue this blog tomorrow......
For the contact form page, I created a GIF animation from still photos of owls. These change from one owl view to the next with a second interval. The idea behind putting it in the contact page was to put life into what would otherwise be a slightly static element of the website. It is a focus for the viewer and eye-catching to spend some time watching. Its presence also indicates an action i.e. the form to fill out.
I enjoyed the making of this GIF and will look at other places I can include these in my project with different image themes.
Next, I made a video of a river for a 2-minute 'tranquility experience' that is part of the website. Here, I paid attention to features such as: light and shade, contrast and similarity, focusing still on one area of the river as a constant where its variable is the water flowing past. It gives a sense of calm and focus. It is both stimulating in its flow with the sun shining causing the water to glitter and relaxing in its consistency.
There were sounds of cars in the background of the audio. However, the river video is exactly what I was looking for. I will obtain audio elsewhere tomorrow and will bring this into Premiere Pro and apply sound to the video.
I sourced an attractive image for the 'about' section of my website. It is animated, consisting of swirls and lots of action. The lines link well to my logo on the top left of page and also the minimalist theme in my design. It runs continuously representing consistency and is dynamic in its design and animation.
I wrote up the introductory section of my website and also values section. Here to maximize efficiency in use of text, I stated the main points with links for more information as 'read more' labels accompanying the paragraphs.
I sourced my icons from Glyphicon, Favicon and Google searches. I scaled these to suit the image sizes to fit in with my website design and applied colors to suit the style in areas of the page in which I was inputting them. This was 'darkgray' for the contact section e.g. email symbol which I put beside the 'design your day' email address that I have set up for this website. I have also a 'purple theme' running through the website. Here, the icons for the 'activities' area that display categories of activities in the website I used a simple purple colour so that while they are different in appearance (for each activity set), they are similar in scaled size and in colour. This shows that they are a part of the same section/theme.
I have been learning about 'hex-colors,' and using the online 'hex colour pickers' to select colors that are not directly available in the CSS libraries I use frequently. After experimenting for a while with the shades I selected two additional colors for the website, similar to whats already there but slightly different. This was to again maintain consistency and linkage in the website along with hints of variation to maintain interest. The two colors I use quite a lot in this website are:
#D6C7DA -> lilac
#818181 -> gray
For one of my activity pages of 'words' I have included amongst lots of programming code the following:
I have a 'Welcome to this page, what is your name'? button, on click an alert box appears and the user inputs their name and clicks 'ok', they then receive a return message:' Hi, (name), hope you enjoy the website !' This is created using a function with a user prompt and document get element by programming code.
A switch statement for a new life management quote for every day of the week. Once the clock is 12:00 midnight the quote automatically changes to that for the next day. This I can update once a week so that for every 7 days there is a new set of quotes for the next 7 days. This is amongst the heuristic principles of creating interest, expectation, memorability, recognizably to the website, so that the user revisits the website, with the expectation of, what the next new quote of the day is.
A series of quotes on a timer that appear every 2 seconds for focus. The user clicks the button and ten quotes of the day appear one by one each every 2 seconds. It has an endpoint at the tenth since I wanted this to be option for the viewer to click again if they wanted a re-run instead of an infinite loop. These quotes about life Management can be regularly updated. I used a series of timeout functions for to achieve this effect.
I have an online clock working on this page also. I have used a 'function' including the 'document get element by' code for this. The clock starts on-load of the page, for the part of the project that is focus as an 'awareness of time' in its different formats. There is a button accompanying this clock where the user can click to stop the clock when they choose. It also tells the exact time always.
I have been researching and implementing different layouts: using inline block floating boxes; image modals, jumbatron, columnar layouts, flex-items. I particularly like the 'image modal' which displays an image and on-click of this it zooms out to a larger full screen view, very interactive. There is an 'x' out option to close the modal and it returns to the original clicked image. Its steps are very clear: first call to 'get the modal,' then 'call to get the image and insert it into the modal and use 'alt' tag for the caption, next using the 'span' element to close the modal. Once again I am using the continuing theme of seeing the 'owl' as a call to action. In this case I will use it in the contact form area at the 'submit' button step.
I have also been using elements like iframes, carousels and panels to display information in a lively, dynamic, action way to enhance the overall UX/UI experience of the website. I am developing infographics as novel ways to display information. I am interested in animating effects. It started out as something quite difficult to work with, but the more I learn about animative effects for regular code the more straightforward the programming code is becoming. The keyframes, opacity and transforms and translates as well as features such as box-shadows are quite useful for turning static pages into interactive pages. The technical code of these works with some javascript and jquery e.g. for the navigation bar scrolling to different parts of this homepage.
I have created an interactive games page as computer games have been proven to be helpful for mindfulness and focus, or just to spend a few minutes. The games are well-known so they won't be an arduous task. I have attached an accompanied 'about' page with some notes on 'what to expect from these games.' The games included are: 'TIC-TAC-TOE,' n-blox,' 'PACMAN,' Simon Says.'
I will continue this blog tomorrow......
No comments:
Post a Comment