2nd Portfolio Development Idea: Video blog
description
Transcript of 2nd Portfolio Development Idea: Video blog
![Page 1: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/1.jpg)
Video Blog
![Page 2: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/2.jpg)
What is a Video Blog?
• It is also known as ‘Vlog’.• It is a platform that uses videos as their basic mode of
content to deliver their messages, rather than using text or images.
• Basic idea:– Uses videos as a platform to share the bloggers’ thoughts
and their views or to raise some kind of awareness about a topic, product or service.
• Typical bloggers’ voice who wants to express his or her thoughts.
![Page 3: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/3.jpg)
Purpose of Video Blogging.
• Able to reveal thoughts, opinions, feelings etc truly.• It is normally uncensored, thus, it gives the video
blogger a chance to share his or her opinions freely.• Video blogging allows readers or viewers to hear your
voices clearly, be it in a jokingly or angrily manner. • It also allows the readers or viewers to see video
blogger’s facial expressions and their body movements.
![Page 4: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/4.jpg)
What is the difference between Podcasting and Video Blogging?
• Video Blogging is placing a video on the traditional blog platform (Written text). Alternative to having a blog post that contains all text, you can have a blog post that is just a video itself, but with little text.
• Video Blogging is created from the videos in which the blogger has shoot using digital video camera. It is being recorded, upload it to the computer, followed by uploading it to the video blog, type a short description of the video on the blog, and use coding to make the video display on the blog post.
![Page 5: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/5.jpg)
What is the difference between Podcasting and Video Blogging?
• File formats and coding is needed in order to make the video appear on the blog (Video Blogging).
• Podcasting is just an audio file that is only available via RSS
![Page 6: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/6.jpg)
Things to consider / add in a Video Blogging
website
![Page 7: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/7.jpg)
Consideration: [Richer Web experience]
• Instead of having a long blog post, combine what is written in the blog post into a short video.
• Able to save time for the readers.• Not many people will read word by word.• Most readers prefer to read introductory messages
and tend to skip the rest of the content.
![Page 8: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/8.jpg)
Consideration: [Bigger audience]• Videos tend to attract more audience.• Not all readers like to read from line to line. However, with videos,
they are able to estimate / gauge the feelings even if the readers do not understand the language.
• Videos are one of the best ways to reach the audience as readers are able to hear and see you in person at the same time.
• Readers will have a better understanding about the personal side of yours, readers are able to visualize your (You as the blogger) life just by watching the video.
• Thus, it will definitely be able to make you as the blogger to stand out and will leave the audience / readers a deep impression.
![Page 9: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/9.jpg)
Consideration: [Marketing & Promotion]• Alternative to just having a textual blog post to promote the item you are
offering it for sale, videos can be one of the best methods to promote it by expanding your reach.
• An introduction about the product / service using video is able to gain more trust easily and in a quicker way compared to a textual blog post. At the same time, able to persuade a random visitor to become a customer of yours.
• It is known that with the use of keywords to search for something in any of the search engines, we might see some video results being plastered between the search results pages.
• Above mentioned, it is one of the good ways to gain some additional traffic through the results to allow more viewers to visit your blog and watch the videos
![Page 10: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/10.jpg)
Consideration: [Time]
• Not all viewers have the time to read line by line.
• If whatever the person wants to say can combine into a video, the readers will be happy to re-visit the blog again.
![Page 11: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/11.jpg)
Problems that I faced when visiting the original video blogging websites.
• Long videos are being posted on the blog.• Not search-engine friendly.• Certain players needed to be installed then can play
the video.• Giving the user privacy to blog about their own
stuffs
![Page 12: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/12.jpg)
Examples of problems I had encountered.
1) Long videos are being posted on the blog
Website Link: http://video.gearlive.com/
![Page 13: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/13.jpg)
This is the so main page, with the video about Jawbone Jambox review.
![Page 14: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/14.jpg)
Playing the video…•Long video posted in the website (Squared it with RED)
•Followed by a short description of the product that the person is going to introduce.
![Page 15: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/15.jpg)
Another example of long video posted on the website.
•Long video posted in the website (Squared it with RED)
•Followed by a short description of the product that the person is going to introduce.
![Page 16: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/16.jpg)
Examples of problems I had encountered.
2) Not search-engine friendly.
Website Link: http://chasingmills.blogspot.com/
![Page 17: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/17.jpg)
Part of the main page of the second website.
![Page 18: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/18.jpg)
No ‘tags’ or ‘relevant keyword’ in the post title.
When searching for ‘Blue Sunday’ video in GOOGLE,
A few of the videos of the same name popped up.
![Page 19: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/19.jpg)
Examples of problems I had encountered.
3) Only certain players needed to be installed then can play the video.
Website Link: http://chasingmills.blogspot.com/
![Page 20: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/20.jpg)
Certain players needed to be installed then can play the video.
![Page 21: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/21.jpg)
Problems that I am going to tackle on.
• The timing of the video that is going to be posted on the blog. (Time)
• The ‘relevant keyword’ in the post title. (Easier for the user to locate the video)
• Players that can be used by almost everyone (Saves time for users who are needed to download a new player just to view the video)
![Page 22: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/22.jpg)
Design Considerations
![Page 23: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/23.jpg)
Video Blog• Requirements of the website.
– Short description of the video blog site.
– Contact (email, facebook, twitter?)
– Logo / name of the website (able to link it back to the home page)
– Videos and information to be nicely arranged.
– Color used for the website.– Fonts used in the website.
• Research.– Websites / Tutorials.– Site visits – original Video
Blog websites.
![Page 24: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/24.jpg)
Video Blog• Target Audience.
– 16 + year old and above (As there would be fans of modern pop music and also attracted to other videos like Entertainment etc)
– 40 + year old and above (Fans of vintage music)
• Website Editing.– Simple layout.
• Requirements for the users.• Videos must not be too
long as different users have different bandwidth.
• Website must be clear enough for the user to be able to navigate well.
• Must be updated so that it will keep the regular viewers to revisit the website again and again.
![Page 25: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/25.jpg)
Initial Sketches.
![Page 26: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/26.jpg)
First initial sketch
![Page 27: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/27.jpg)
Second initial sketch
![Page 28: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/28.jpg)
1st layout of the Video Blog website.
![Page 29: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/29.jpg)
1st video blog layout
![Page 30: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/30.jpg)
2nd layout of the Video Blog website.
![Page 31: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/31.jpg)
![Page 32: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/32.jpg)
Pros and Cons found in the 1st layout.
![Page 33: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/33.jpg)
Pros: Neat layout with clear categories
![Page 34: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/34.jpg)
Cons: Eyes will feel uncomfortable because of the light colors.
Light background
Light wordings
![Page 35: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/35.jpg)
Pros: Search function is good.
Search bar at the top left hand corner.
![Page 36: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/36.jpg)
Pros: Good focus point for the users.
Video at the main page to absorb user’s focus or attention
![Page 37: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/37.jpg)
Pros: Arrangement of components is good.
![Page 38: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/38.jpg)
Pros: Allows user interaction
![Page 39: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/39.jpg)
Pros: Gives a feeling that it is more than just a video public sharing website
![Page 40: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/40.jpg)
Pros and Cons found in the 2nd layout.
![Page 41: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/41.jpg)
Pros: Nice color management and combination
Lighter background
Darker background
Dark with light background and also with some darker wordings
![Page 42: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/42.jpg)
Pros: User interaction with the “Stay connected” options.
User will interact with the “Stay connected” options. (Twitter, RSS and Email)
![Page 43: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/43.jpg)
Pros: More privacyAllows more user privacy with account options before uploading videos.
![Page 44: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/44.jpg)
Pros: Good express links with video categories.
Good express links with video categories and submissions of videos at the homepage.
![Page 45: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/45.jpg)
Cons: The Page 1 of 10 options
The above ‘Page 1 of 10’ options can be removed as it can be replaced by inserting 1 special video of the day or week to attract users.
![Page 46: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/46.jpg)
Pros: Good arrangement and focus points
![Page 47: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/47.jpg)
Pros: Main logo for user to remember the title of the video blog
User is able to remember the name of the website better as the main logo is big and its placed at the top left corner.
![Page 48: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/48.jpg)
Pros: Good flow of components for navigation
![Page 49: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/49.jpg)
Pros: Gives a feel of half video blogging and video sharing (Something like
Youtube)
![Page 50: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/50.jpg)
‘Final Layout’
• I would pick the 2nd layout because:– Color management and combination is good.– There is an user interaction which is the ‘Stay connected
options’ at the top right hand corner.– It allows more user privacy with account before
uploading.– Gives a feel something like Youtube (Half video blogging
and video sharing)
![Page 51: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/51.jpg)
Improvement of the 2nd layout
![Page 52: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/52.jpg)
Improvements made.Before After
Removed the ‘Page 1 of 10’ options. One special video of the day or week to attract users.
![Page 53: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/53.jpg)
Improvements made.
Removed the word ‘Latest’. Latest videos should be as a category. Thus, naming the navigation as ‘Videos’ would be better
![Page 54: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/54.jpg)
Prototype
![Page 55: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/55.jpg)
Homepage
![Page 56: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/56.jpg)
When you clicked “Videos”
![Page 57: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/57.jpg)
Video PageWhen the user clicked, the tab will turn blue.
List of videos will be shown at this page, with a scroll bar for users to scroll through the page.
![Page 58: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/58.jpg)
When you clicked “Articles”
![Page 59: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/59.jpg)
Article Page
Title of the name of the articles
URLs to be clicked on in order to lead the user to the website of the article.
![Page 60: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/60.jpg)
When you clicked “Contact”
![Page 61: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/61.jpg)
Contact Page
A HTML contact form will be at this page for the users to send in their enquires with regard to the video blog site.
![Page 62: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/62.jpg)
From the initial prototype
• There are ‘Pages of 1 of N’ options earlier on at the bottom of the website.
• ‘Latest videos’ was written as navigation.• There are video categories as express links for the
users.• Overall, it is something like Youtube whereby you are
able to sign up and upload the videos you want. Or, you can just view the videos that are on the website.
![Page 63: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/63.jpg)
Improved Prototype.
• ‘Pages 1 of N’ options was removed because another alternative can be adding some special videos of the day or week to attract the users.
• ‘Latest Videos’ has changed it to ‘Videos’ instead as ‘Latest Videos’ should be as a category instead of a navigation. Thus, it has been changed it to ‘Videos’
• The rest of the components on the website remained.
![Page 64: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/64.jpg)
A Walk Through.
![Page 65: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/65.jpg)
Home page
![Page 66: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/66.jpg)
Latest videos page.
![Page 67: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/67.jpg)
Articles page.
When user clicked on one of the links, it will lead to the website as shown below.
![Page 68: 2nd Portfolio Development Idea: Video blog](https://reader035.fdocuments.us/reader035/viewer/2022070302/546f37f6af79592e498b526e/html5/thumbnails/68.jpg)
Contact page.