2nd portfolio development idea: video blog

68
Video Blog

Upload: qiannie

Post on 21-Nov-2014

717 views

Category:

Design


1 download

DESCRIPTION

2nd Portfolio Development Idea: Video blog Website Layout

TRANSCRIPT

Page 1: 2nd Portfolio Development Idea: Video blog

Video Blog

Page 2: 2nd Portfolio Development Idea: Video blog

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

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

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

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

Things to consider / add in a Video Blogging

website

Page 7: 2nd Portfolio Development Idea: Video blog

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

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

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

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

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

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

This is the so main page, with the video about Jawbone Jambox review.

Page 14: 2nd Portfolio Development Idea: Video blog

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

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

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

Part of the main page of the second website.

Page 18: 2nd Portfolio Development Idea: Video blog

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

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

Certain players needed to be installed then can play the video.

Page 21: 2nd Portfolio Development Idea: Video blog

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

Design Considerations

Page 23: 2nd Portfolio Development Idea: Video blog

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

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

Initial Sketches.

Page 26: 2nd Portfolio Development Idea: Video blog

First initial sketch

Page 27: 2nd Portfolio Development Idea: Video blog

Second initial sketch

Page 28: 2nd Portfolio Development Idea: Video blog

1st layout of the Video Blog website.

Page 29: 2nd Portfolio Development Idea: Video blog

1st video blog layout

Page 30: 2nd Portfolio Development Idea: Video blog

2nd layout of the Video Blog website.

Page 31: 2nd Portfolio Development Idea: Video blog
Page 32: 2nd Portfolio Development Idea: Video blog

Pros and Cons found in the 1st layout.

Page 33: 2nd Portfolio Development Idea: Video blog

Pros: Neat layout with clear categories

Page 34: 2nd Portfolio Development Idea: Video blog

Cons: Eyes will feel uncomfortable because of the light colors.

Light background

Light wordings

Page 35: 2nd Portfolio Development Idea: Video blog

Pros: Search function is good.

Search bar at the top left hand corner.

Page 36: 2nd Portfolio Development Idea: Video blog

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

Pros: Arrangement of components is good.

Page 38: 2nd Portfolio Development Idea: Video blog

Pros: Allows user interaction

Page 39: 2nd Portfolio Development Idea: Video blog

Pros: Gives a feeling that it is more than just a video public sharing website

Page 40: 2nd Portfolio Development Idea: Video blog

Pros and Cons found in the 2nd layout.

Page 41: 2nd Portfolio Development Idea: Video blog

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

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

Pros: More privacyAllows more user privacy with account options before uploading videos.

Page 44: 2nd Portfolio Development Idea: Video blog

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

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

Pros: Good arrangement and focus points

Page 47: 2nd Portfolio Development Idea: Video blog

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

Pros: Good flow of components for navigation

Page 49: 2nd Portfolio Development Idea: Video blog

Pros: Gives a feel of half video blogging and video sharing (Something like

Youtube)

Page 50: 2nd Portfolio Development Idea: Video blog

‘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

Improvement of the 2nd layout

Page 52: 2nd Portfolio Development Idea: Video blog

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

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

Prototype

Page 55: 2nd Portfolio Development Idea: Video blog

Homepage

Page 56: 2nd Portfolio Development Idea: Video blog

When you clicked “Videos”

Page 57: 2nd Portfolio Development Idea: Video blog

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

When you clicked “Articles”

Page 59: 2nd Portfolio Development Idea: Video blog

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

When you clicked “Contact”

Page 61: 2nd Portfolio Development Idea: Video blog

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

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

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

A Walk Through.

Page 65: 2nd Portfolio Development Idea: Video blog

Home page

Page 66: 2nd Portfolio Development Idea: Video blog

Latest videos page.

Page 67: 2nd Portfolio Development Idea: Video blog

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

Contact page.