Portrait - LiveWeb
LIVEable Web is a term I came up on my own, but what does it mean you might ask? Is it a place where you can live? a website to find a place to live maybe? Well, if your answer is yes to both of these, you are very wrong. LIVEable Web, in my definition, is a interactive website that makes you stay and use for an extended period of time. This magnet value is something every web developer, designer would hope to achieve, because honestly, if you build something, you want the user to appreciate and stay for long, unless that is not your intention to begin with.
I have came up with a list of points to consider when you are in the sphere of thinking to build or interact your audience with the web. The points are not in sequential order, they are my thoughts which I feel are important.
Level of interaction - Is there any interaction other than clicks to another page?
Communication - What are you communication, what ways are you communication other than words?
Interest/Content - What is the level of interest for your content?
Design - Consider your design style, Minimal? Eccentric?
Mood - Is there a certain mood that you would like to capture when your audience interact with your web?
Magnet Value - How are you engaging your audience to make them stay for an extended period of time?
Technology - What is the level of technology are you using?
Website Examples
Why is it great?
- Intro (Video)
- Users are greeted by a intro video which is very inviting.
- Responsive
- The website is responsive regardless of size.
- Minimal Design
- It has minimal elements which is enough for the design aesthetic of the website.
- Intuitive Navigation
- Easy to navigate from pages to pages. Call to action buttons are also subtle yet prominent.
What is Interesting?
It allows the user to experience Philips Hue on the website like how a person would use it in person. It is fully interactive, a substitute for a live experience by setting the ambience mood on the website. Product information is well positioned.
Getty Images + iStock
Why is it great?
- Refreshing
- Despite the use of timeline has been around for the longest time, they reinvented the idea and made it look refreshing.
- Interactive
- Timelines are usually stop, pause and play. The timeline they use are very interactive where they can click on any of the images/videos without disrupting the collage video.
- Magnet Value
- It is very intuitive and it makes the user want to explore further and more at the same time.
What is Interesting?
It has an interesting concept of using timeline as the background while the video montage of all the photos and videos from Getty Images + iStock are being used. The timeline is very well paced with the video and the clickable images invites curiosity to the user.
BryBry
Why is it great?
Intro/Loading page
- The loading page is unlike any usual website where you click and wait. It makes the user interact with the button while the website is loading.
- Good Esthetics
- The background of the website changes color to complement the video. Design is very organized. The use of the circular shape as a toggle for the video is an interesting play rather than the conventional ones.
- Intuitive
- It is very intuitive and it makes the user want to explore further and more at the same time.
What is Interesting?
This portfolio website is clear and precise. It has esthetics value and it is very modern and fresh.
Others
Assignment 1
I was struggling a little with this, I was going back and for with different ideas and I wanted to do something that would be satisfying. I initially wanted to make a portrait of me where I could type in any of the keyboard and it will call out a video.
However, that went down quite badly as the function that I called did not play as I wanted it to be. Instead, the video just played and overlay on top of one another.
So I went back to my initial idea which was just a basic play/pause and change of size for the video.
For the self-portrait assignment, I decided to show an embed generic genre video that I often watch when I need to destress. I was inspired by two sources of tutorials, one which shows how to embed a video and you can have multiple buttons and using function to play and change the screen size of the video. I also wanted my video to interact with the canvas by doing a screen capture each 3/4 seconds and display it onto a timeframe.
However I couldn't achieve to get the timeframe done, I don't understand how the function works for the script. I did however, manage to find a broad tutorial that shows how you can have a video capture from your original video source.
