FINAL PROJECT

TITLE : DEVELOPMENT OF WEBSITE FOR THE CLOSETS

COMPANY AND HOW A PROMOTIONAL VIDEO CAN
PROMOTE THE PRODUCT

COURSE CODE BEC20202

MULTIMEDIA TECHNOLOGY AND

COURSE APPLICATION
FACULTY ELECTRIC AND ELECTRONIC

1) NUR SHAFIQAH BINTI ABDULLAH

ANASTAS ZORIN (DE160031)
2) NOR FARA SYAHIRA BINTI MAHPAR
(CE170158)
3) MEENACHI A/P PARTHIPAN (CE170050)
4) NUR IZZATI NABIHAH BINTI MOHD ZAINI
(DE170062)
5) NUR AZURA BINTI SHAMSUDIN
TEAM MEMBERS (DE170159)

SECTION 3

LECTURER’S NAME DR. RADZI BIN AMBAR

No Task Page

1 1.0 Project Planning

1.1 Website concept
1.2 Justification of concept selection
1.3 Schedule-Activity, duration chart &
description

2 2.0 Hardware & Software Requirement

2.1 Software selection
 Brief description on software &
source link(if related)
 Justification of software selection
2.2 Hardware devices specifications

3 3.0 Website storyboard

3.1 Screen layouts-content
3.2 Screen layouts-flow

4 4.0 Conclusion

5 5.0 Project Planning

5.1 Video concept
5.2 Justification of concept selection
5.3 Schedule-Activity, duration chart &
description

6 6.0 Hardware & Software Requirement

6.1 Software selection
 Brief description on software &
source link(if related)
 Justification of software selection
6.2 Hardware devices specifications

7 7.0 Video storyboard

7.1 Screen layouts-content
7.2 Screen layouts-flow

8 8.0 Conclusion
1.0 Project Planning
1.1 Website Concept
The concept of this website is to promote the boutique store which is The Closets. We
had chosen the clothing store at Parit Jelutong because it is one of the top producers for
clothing in Batu Pahat and it has various choices of clothes. In the making of the website,
Wix.com had been used to create the webpage. Our website consists of images, text, and
video. It is one of the best ways to attract more customers to come and try the clothes.
The website that we create has multipage .We provide various choices of clothing and
accessory images including their prices. So, it will be easier for user to survey the
boutique store first before making any further action. In contact us page, we already put
our contact number and location so that user will know where to find the boutique store.

1.2 Justification of Concept Selection

The purpose we chose this concept is because we think that there are several companies
promote their product by using an unattractive video. We just want to make something
different from the others but still have the same goal that is to promote the product from
boutique store.
 1.3 Tasking-Project Member Task Distribution

NAME MATRIC ASSIGNMENTS

-Web development
Nor Fara Syahira
CE170158 -Web report
Binti Mahpar
-Full report

-Proposal project
Nur Shafiqah Binti
-Video report
Abdullah Anastas DE160031
-Full report
Zorin

Nur Izzati Nabihah -Actress

DE170062
Binti Mohd Zaini -Storyboard

Meenachi A/P -Video Editor

CE170050
Parthipan - Video Storyboard(report)

-Actress
Nur Azura Binti
DE170159 -Storyboard
Shamsudin
 WEEK WEEK WEEK WEEK WEEK WEEK WEEK WEEK WEEK WEEK WEEK WEEK
ACTIVITY
2 3 4 5 6 7 8 9 10 11 12 13
Project Briefing
Group discussion
Task Distribution
Research on
searching the
suitable
application of
website
Start doing the
website
Discuss about
website input
Mid semester break

Website
improvement
Website
improvement
Combined in the
video that we had
made
Final Presentation
Project Report
Submission

Table 1.3(a): Schedule Activity

4.5
4
3.5
3
2.5
2
1.5
1
0.5
0
week 1 week 2 week 3 week 4 week 5 week 6 week 7 week 8 week 9 week week week
10 11 12

Hour
Hour
Table 1.3(b): Duration Chart
2.0 Hardware and Software Requirement
2.1 Software
Wix – Web Development Company. Wix was established in 2006 by Avishai Abrahami,
Nadav Abrahami, and Giora (Gig) Kaplan. The Abrahami brothers and close friend
Kaplan, developed the Wix website builder as a result of their frustration with the
complexities of website creation. They sought to revolutionize the way individuals and
businesses alike take on site creation and management. 11 years later Wix is helping over
110 million users, many of whom with no development skills to create a beautiful,
professional and functional web presence. No creative limits, no coding – just complete
freedom to express yourself and manage your entire business online. We offer a drag n'
drop website builder with HTML5 capabilities, 100s of designer-made templates, top
grade hosting, innovative Apps and tons of features for free. We offer valuable premium
services, though our business model still allows us to provide complete websites to
everyone for free. Wix's global user base, open SDK (Software Development Tools), and
unparalleled design capabilities create a unique ecosystem. Partners, developers, web
designers, and other online professionals can effectively market their apps and services to
millions through the Wix App Market. Wix continuously pursues ways to provide its
current and potential users with the finest technology, support, and unique solutions to
create and manage an incredible online presence.

2.2 Hardware

1. Laptop

Laptop is used to design the website.

3.0 Website Storyboarding
3.1 Screen layouts-content
 Home page of the website
 We provide a shawl’s tutorial video and a promotion video that had been done
together. We also put some descriptions for user-friendly. Five buttons which are
home, shop, about us, contact and store policies are provided.
3.2 Screen layouts-flow
1. Home page
 It consists of four pictures of boutique store in slideshow and the video that came
from YouTube that had been published about a few years ago talking about the
greatness of shawl’s tutorial in Batu Pahat. There is also a promotion video that
will make user feel attracted to scroll for the whole website.
2. Contact us page
 Provide almost all of the information needed about the store including the store
location. It is easier for the user to find this store because the location had already
been set in Google maps.
3.3 Screen Layouts Format
4.0 Conclusion

There are many applications to create a website that requires us to get the right
tools and resources. It can easily to integrate into current technologies and software. The
standard tools used for creating the website will ensure that things such as home, shop,
about us, contact and store policies. Our pages will become attractive if we use the right
tools. Other than that, the display will be situated in the browser and visitors would be
glad to visit again. After all the hard work and cooperation given by the group members,
this website is the result and all of us quite satisfy with the result even though there are
plenty room of improvement for this task. Lastly, in this website we also be able to help
the boutique store upselling their products and they give a good response to receive our
cooperation.
5.0 Project Planning
5.1 Video concept
The concept of this video is to promote the attires and the accessories that are sold by this
company. We chose The Closet which is situated at Parit Jelutong because it is one of the
shops that sell modern attire and accessory around this area. They have various types of
attires suitable for muslimah including headscarf. In our video, we created a story about
two girls who were talking to each other about their planning to do some revisions for
upcoming test. While they were talking, one of them, Azura, praised the headscarf which
is donned by Izzati. Later, Izzati told her about the shop that sold it. She showed the
company’s Instagram account and they viewed through the account and kept on talking
about the discount offered.

5.2 Justification of concept selection

The purpose we chose this concept because we think that this company has the possibility
to be well-known among the ladies in this area especially for the students. Mostly
companies that sell this kind of attires and accessories at this rural area do not expose
their business to the crowd. To be an establish company, a commercial video is needed in
order to be remembered by others rather than only having a website. Website and
commercial video have the correlation to promote a product. Here we are going to make a
commercial video in order to announce to the crowd about the existence of this company.
We still have the same goal like others which is to promote local business.
 5.3 Tasking-Project Member Task Distribution
Name Matric Number Task
Nur Shafiqah Binti Abdullah DE160031 1. Proposal for the
Anastas Zorin project.
2. Video report.
3. Full report.
Nor Fara Syahira Binti CE170158 1. Web development.
Mahpar 2. Web report.
3. Full report.
Nur Izzati Nabihah Binti DE170062 1. Actress.
Mohd Zaini 2. Storyboard.
Meenachi A/P Parthipan CE170050 1. Video editor.

Nur Azura Binti Shamsudin DE170159 1. Actress

2. Storyboard

5.3.1 Character for Video

No Members Characters
1 Nur Izzati Nabihah Binti Mohd Zaini Student 1
2 Nur Azura Binti Shamsudin Student 2
 5.4 Schedule Activity, Duration Chart and Description

Activity W2 W3 W4 W5 W6 W7 W8 W9 W10 W11 W12 W13

Project 
briefing

Group
discussion

Task
distribution

Web
Development

Acting tool
preparation

Shooting
process

Mid-semester
break

Editing
process

Insert the
video in the
website made
Compile video
part in the
report
Check for the
last time

Project Report
Submission
Table 5.4(a): Schedule Activity
 Hour
7

0
week 2 week 3 week 4 week 5 week 6 week 7 week 8 week 9 week 10 week 11 week 12

Hour

Table 5.4(b): Duration Chart

6.0 Hardware and Software Requirement

6.1 Software Selection
Windows Movie Maker-Windows Movie Maker is the video editing program that is
included with Windows XP. Windows Movie Maker allows you to quickly build a
personalized movie that incorporates video, still images, background music, and
narration. This movie can be customized further by adding titles, transitions, and video
effects.
Windows Movie Maker was designed to be easy to use even if you don’t have any
experience with video editing. The program includes a task pane that guides you step-by-
step through the three steps involved in creating a movie:
1. Capturing video from your camera or importing it from a hard drive or other
storage device.
2. Assembling the video clips and other resources into a movie using the Timeline or
Storyboard.
3. exporting the finished movie into a format that can be shared with other people
 2.2 Hardware Selection
1. Laptop

Laptop is used to edit the video by using application.

2. Smartphone

Use to record the video to put into the website.

7.0 Video Storyboard

7.1 Screen layouts-content

Movie Maker on operating systems prior to Windows 7 largely has the same
functionality, though there are some variances in the interface and menus. With that idea,
we create a video with shop contents for people to easy know. We use window
moviemaker as a platforms for create.

Import from device

If the Autoplay dialog box does
not pop up when we turn camera
on just go to File > Import from
device, select the source you wish
to upload from then click Import.
 Split
Movie Maker will now split the
clip at the exact time if chosen and
has created two separate clips. We
need to either split the clip a
second time to create an individual
clip, can move to another part of
the sequence, add a transition to, or
delete altogether.

Adjusting audio level

To change the audio levels of a clip
navigate to the Edit tab under Video
Tools and select video volume to adjust
the sound level. Once adjusted, the
specific clip selected is the only one to
have its audio adjusted.

Adding transitions
To add these transitions just
select the clip we would like to
use a transition on and click on
the Animations tab on the
ribbon toolbar to bring up the
dozens of transition choices.

Adding Effect
Located under the Visual Effects tab on the ribbon toolbar
previewing the wide number of effects is like previewing the
transitions
To add a title, caption, credits page click on the clip you want the title page to precede and under
the Home tab select Title.

Title
Just add your desired title in the text box then click out of the slide and you’ve just created a title
page.

Caption
If you want to feature a title page with a background, or just add a line of text to any clip, clicking
on the Caption button

Credits
To give credit where credit is due we will need a full credits page and Movie Maker gives you the
option of adding customizable credits along with separate director, starring, location, and
soundtrack slides.

Savings movie maker in computer

We can save the movie to computer instead of posting it online by clicking the Save Movie menu
to the right of the Share section. The drop down menu offers several file formats for your movie,
including high definition displays, any size of Android or iPhone, a variety of tablets, as well as
other websites.
 Burning the video into Dvd

Burning the finished movie to

DVD requires access to another
Microsoft program, Windows
Media Player, as well as an
installed burner on computer.
For those with burners installed,
Windows Media Player is a free
program so we will quickly
cover how to burn your finished
movies to DVD.

7.2 Screen layouts-flow

Video is known as rich media content and it can boost customer engagement, increase
the time spent on a site and help convert sales. Used cleverly and with a purpose, video
can transform the website into a dynamic interactive site that will attract repeat visits.
8.0 Conclusion

For the conclusion, we applied all of the skills learned during lecture session and lab
session by using Windows Movie Maker in order to complete the task given. By
completing this video project, we improved the editing skill among us even though it was
hard for the first time. We made several online researches to get full understanding on
how to use Adobe Premiere so that an extraordinary video can be produced. In addition,
after completing this video, we realized that there are many things that we need to learn
so that we could master this application. After all the hard work and cooperation given by
the team members, we managed to complete this video on time. This video is the result
for all the hard works before. Willing to learn and cooperative behaviour are the keys to
complete the task.