ECE551 PROJECT 3: Website Development Report
Website Development of Fit and Lift Company
Nurul Anis binti Harun Mas Atira binti Mior Hajri
Student of Bachelor’s Degree in Operation Student of Bachelor’s Degree in Operation
Management Management
ECE551 – Multimedia System and Application ECE551 – Multimedia System and Application
UiTM Cawangan Terengganu, Kampus Dungun, UiTM Cawangan Terengganu, Kampus Dungun,
Sura Hujung, 23000 Kuala Dungun, Terengganu. Sura Hujung, 23000 Kuala Dungun, Terengganu.
[email protected] [email protected] Noorizzaty binti Mohamad Sobri
Student of Bachelor’s Degree in Operation
Management
ECE551 – Multimedia System and Application
UiTM Cawangan Terengganu, Kampus Dungun,
Sura Hujung, 23000 Kuala Dungun, Terengganu.
[email protected] <video> tags. HTML uses cookies to store temporary
Abstract – This report consists of the data but HTML5 uses SQL databases and application
development process of multimedia project which is a cache to store offline data. HTML does not allow
website. The process requires a meticulous JavaScript to run in the browser while HTML5 allows
organization starting from project planning until the JavaScript to run in the background. This is possible
release of final product which fulfilled the desired due to JS Web worker API in HTML5.
results. The objective of this website is to describe
the prospects and needs of the company and to
Keywords–website development process; project
planning; skills and resources; project design. communicate clearly, specifically, and convincingly to
customers about our company.
1. INTRODUCTION
2. LITERATURE REVIEW
Hypertext Markup Language (HTML) is a
sample markup system used to create hypertext Multimedia plays an important role in today’s
documents that are portable from one platform to society because nowadays society is all things
another. Meanwhile, the website is a collection of appropriate to the times. Multimedia is a good way of
web pages and related content that is identified by a communication because it is easy to communicate and
common domain name and published on at least understand what they are saying. Tools for the World
one web server. Both HTML and website Wide Web are web servers, web browsers, website
development are related to each other. The website makers and website developers, plugins and delivery
uses tags to perform functions such as formatting vehicles, and beyond HTML.
text and embedding media. Idea Development
The benefits of using Adobe Dreamweaver
are it highlights the coding so that it can be quickly This project is to create a business website
scanned. Next, it helps beginners understand what for our client and publish it as a free service. This
the coding does for a website and users receive project will be completed in Jun 2021. Firstly, this
code suggestions. By using the Adobe business website is for exercise equipment company.
Dreamweaver, the coding is instantly checked, and Customers who browse this site are customers who are
creating content variations is easy thanks to a word committed to staying healthy and exercising regularly,
processing interface. especially when at home. Through this website,
The differences between HTML and HTML5 customers can easily compare available tools. Our
are HTML did not support audio and video without goal is to build a business website as a marketing tool
the use of flash player support while HTML5 supports to increase customer loyalty through better service.
audio and video controls with the use of <audio> and
Skills of website development
This study source was downloaded by 100000846258041 from CourseHero.com on 07-05-2022 12:32:43 GMT -05:00
https://www.coursehero.com/file/112988316/REPORT-ECE551-PROJECT-3docx/
With Dreamweaver, simple and complex
Text, image, audio, animation and video are websites can be designed using point-and-click
the best multimedia elements to deliver our message. methods. Web designers who use Dreamweaver are
The hardware available consist of laptop, mobile empowered to choose different views when creating a
devices and Wi-Fi router and the software available website. Next, is the ability to create websites that
includes Canva and Adobe Dreamweaver. We are very look consistent because Adobe Dreamweaver includes
familiar with Canva and Dreamweaver apps. templates for websites that are very useful in the
• Canva is easy to use and has everything we need for designing process. Web designers can make changes
attractive designs. to a website design simply by editing the
• Dreamweaver offers a few different ways to create our Dreamweaver template file. Dreamweaver software
own free website. comes with a built-in FTP feature; so, it is possible to
upload files directly to the website.
Skills in creating and development
3. METHODOLOGY
We work as in team. The skills and task assigned are:
Elements of multimedia on a web page
Navigation - The website design should be easy to
Task Skills navigate and the menu items should accessible easily
Information Gathering Project Management skill from any page. Hence, we create five menus which are
Planning Strategic and Planning Home, About, Products, Website Project, and Contact
skills button. We also create search button for customer to
Design Design for the Web skill find the equipment that they want and another buttons
Start Development Web Technology skill for product to sort all the product by category.
Content Writing andProgramming skill Visual Design - The overall layout and visual
Assembly appearance of the website are aligned with a handful
Testing and Review Software Testing skills of soothing adjectives. The designs are simple,
Release the site to theClient Management skill familiar, intuitive, clean and accessible. We also used
client grid-based designs to keep items organized and
This project is completed within 3 weeks. To orderly.
be precise would be 22 days. We therefore manage to Content - The contents on the website play a major
use our time efficiently. The cost for developing this role in the search engine placement. We insert the
project is free because we only use Adobe contents that are related with the business which is the
Dreamweaver, and Canva. exercise equipment. Many pictures and videos of
equipment, banners and animation that we include to
attract the attention of visitors. We also put suitable
audio on our website to make customers feel relax and
enjoy the music when they are choosing their
equipment.
Information Accessibility - We also make the website
easily to access by the visitors. We place key
Figure 1: Gant Chart of Task Assigned and
information such as phone number and address. We
Time Taken to Complete
also put the form of request for appointment, so that
when customer want our services, they can fill the
form. Hence, the visitors able to reach out without
wasting their time to pursue entire site.
Branding - We add credibility and trust into the
website by creating the personal and product branding.
The logo, banner and video advertisement are direct
reflection of the business and brand. The logo of Fit
and Lift has its own meaning in its design. We want to
make sure the visitors immediately can make a visual
connection right after visiting the website.
Figure 2: Estimation of the Total Time Required for
Each Task Concept: Design Structure
We use linear design structure for Fit and Lift’s
Benefits of design using Adobe Dreamweaver. website development for every information and
This study source was downloaded by 100000846258041 from CourseHero.com on 07-05-2022 12:32:43 GMT -05:00
https://www.coursehero.com/file/112988316/REPORT-ECE551-PROJECT-3docx/
product. Linear structure is the most common people
used because it is well-organized, and it can ease the
visitors to get the information. We also use
hierarchical for the button on home page. A visitor
may start on a home page and go deeper through
series of menus to reach to a particular page they
want. Available menus on our developed website are
about us, our products, website project, and our
contact. We put the “Add to Cart” button. So, it can
ease customers to order and collect their desired
product. Figure 3: Home page
Website Development Flowchart
Start discussion (Identify
the inteded audience,
goals, & objectives)
Input (Determine the
elements needed, cost and
time. Make a project plan)
Validate (Get approval or
validation from client)
Process (proceed the
designing website)
Report (Make a report Figure 4: About page
about the website
development)
Presentation (Present the
website created more
details to our clients)
4. ANALYSIS
Figure 5: Products page
This study source was downloaded by 100000846258041 from CourseHero.com on 07-05-2022 12:32:43 GMT -05:00
https://www.coursehero.com/file/112988316/REPORT-ECE551-PROJECT-3docx/
Home – it shows the main page of this website.
About Us – the history on how and why Fit and Lift
company was built and started.
Products – The products of the company were listed
here. It helps visitors to choose and decide their
purchase.
Project website – it includes the member’s profile, our
organizational structure company, and the project
Gantt Chart.
Contact – consists of address, the maps, mobile
number and hyperlinks to media social accounts. It
helps people who are in reaching the products.
e) Background colour – as the background colour, we
use colour transparent because we put the different
background image for every page that related with the
exercise equipment.
Figure 6: Website project page f) Purple colour – we use this colour for certain title and
button as it suitable with our logo company and it is
contra to stand out without being too striking.
g) “Add to Cart” button – positioned for every trending
equipment that customer always buy.
5. CONCLUSION
We conclude this report briefly with our presentation
on this project. We hope the Fit and Lift company will
be satisfied with our service and benefit from the
development of this website. We hope the company
will get more customers and be able to expand their
company to the rest of the world. Thank you for
trusting us and giving us the opportunity to apply your
Figure 7: Contact page services and skills.
a) The banner – we place three banners on three slides
on the website page. Our banners show the name of
the company, Fit and Lift company, the illustration of
exercise equipment, promotion, and encouragement
words for customers. Hence, when customers surf this
website, they will know about this company
automatically.
b) The logo - The logo created is based on the company
name. In the logo design, we put a cartoon illustration
of a man lifting a dumbbell in accordance with our
company name which is Fit and Lift. It is a simple
logo that can make customers easier to recognize our
company logo.
c) The contents – video advertisement and pictures of
exercise equipment. It is to attract customers and also
to make customers feel satisfied with our equipment.
They can look clearly to the equipment.
d) The menu – our menus consist of Home, About Us,
Products, Project Website, and Contact. it is easier the
customer to get know about our company and the
equipment available.
This study source was downloaded by 100000846258041 from CourseHero.com on 07-05-2022 12:32:43 GMT -05:00
https://www.coursehero.com/file/112988316/REPORT-ECE551-PROJECT-3docx/
Powered by TCPDF (www.tcpdf.org)
