Scribd
Upload
36 views

Undergoing the Process of Web Design and Web Development | Computer 9

Uploaded by

datujoycegabrielle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
36 views

Undergoing the Process of Web Design and Web Development | Computer 9

Uploaded by

datujoycegabrielle
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 24

LESSON 3

UNDERGOING
THE WEB
DESIGN & WEB
DEVELOPMENT
PROCESS
OBJECTIVES:
Identify the phases of the web
design and web development
process.

Value the importance of planning.


WEB
DESIGN
& WEB
DEVELOPMENT
PROCESS
There are different phases and processes in web designing and web developing.
1. INFORMATION
GATHERING
• The very first step is to get a
clear understanding of the website.
• It includes information gathering.
We need to consider many things..
• the purpose of the website
• the goals we wish to accomplish
• the target audience we want to attract to our site with • the
content our target audience will be looking for on our site.

2. PLANNING
• We then put together the information we gathered in phase
one. • We perform planning by creating a site map.

SITEMAP
• A site map describes how the entire site will look like.
• It lists all the areas of the website and the sub-areas, if applicable.
• It also shows the relationship among the different pages of the
website.
• This will help us build a user-friendly and easy-to-navigate
website.

PARTS OF THE
WEBSITE A. HOME PAGE
• This is the start or the main web page of a website.
B. PRODUCTS OR SERVICES
• This section allows visitors to see sufficient information
about the different products or services an individual, group,
or company offers.
C. ABOUT US
• This page introduces the creator/s or the company to the
website visitors including its history, people, and others. • It is
usually one of the first destinations that the visitors will look
for when arriving at a website.
D. CONTACT
• This provides website visitors different ways on how they can
contact us.
• It may include our phone numbers, email address, physical
address, or a map.
• A contact form may also be included.
E. DYNAMIC CONTENT
• We need visitors to keep coming back to our website. •
One way to do this is by including a section with dynamic
content such as blog, video, photo gallery, news, events,
frequently asked questions, testimonials, etc.
F. SITE LINKS
• In this phase, we also
create a wireframe to
describe the website's
user interface.
• A website wireframe is a visual
prototype of a web
page that focuses on content, layout,
and behavior.
• It usually doesn't include any styling,
color, or
graphics.
• It's like a blueprint to a house that shows the plan
for plumbing and electricity without the interior
design.
3. DESIGN
• This determines the look and feel of our website.
• In this phase, we incorporate the design elements for the website:
themes, colors, logos, among others.
• We visualize the content, and then create the sketch or the actual
graphic design of the website layout.

4. CONTENT WRITING AND


ASSEMBLY • A very important part of the process
is writing the content.
• We prepare the content to be ready before or during website coding. • We make sure we
have the right content that speaks to our audience. • We choose the appropriate text,
images, and videos that we will include on the website. • This phase also involves text
proofreading and editing.

5. CODING
• In this phase, we start creating the website itself.
• The web designer will take all the graphic elements and use them to
create the actual website.
• We usually create first the home page and then all the other pages
included in the site map. On the technical aspect, the web developer
writes the codes for it.
6. TESTING, DELIVERY, AND
LAUNCHING
• Everything on the website should be tested: links, forms,
scripts, and typography.
• We need to recheck what we have tested.
• We then upload our website files to the server.
• We use an FTP (File Transfer Protocol) software to do this. • After
deployment, we should run another test to make sure that all files have
been installed correctly and the website is fully functional.
7. MAINTENANCE & REGULAR
UPDATING • The development of the website does not
stop when it has been launched and has been made viewable to the
public.
• We always make sure that it works well and that viewers are satisfied.
• A feedback system will be a good feature of a website.
• To keep them visiting the website, we regularly make changes
and additions. Thus, we keep the website up-to-date.
Web Design & Web Development
Process 1. Information Gathering
2. Planning
3. Design
4. Content Writing & Assembly
5. Coding
6. Testing, Delivery and Launching
7. Maintenance and regular updating
PAIR ACTIVITY
PLAN YOUR WEBSITE
• Choose a partner, and decide what
historical place in the Philippines
or UAE you want to make a
website of.
• Create a website about your chosen
historical place in the Philippines
or UAE.
• Discuss with your partner the topic
of your web page.
• Fill out the worksheet as you plan
for your website.
PAIR ACTIVITY

CREATE THE SITE MAP & WIRE


FRAME • Work with
the SAME PARTNER
PAGE 20-21
INDIVIDUAL ACTIVITY

KNOW ABOUT HTML


• Read about HTML. Briefly answer the questions below. Write your
answers on the lines.
PAGE 21
Creating websites takes much of our time and
effort. This is why planning is very
important. When planning, we must have a
clear idea or well-defined vision of our
website. The plan is the blueprint of our
website. Planning offers us directions and
perspective. As an African proverb says,
"For tomorrow belongs to the people who
prepare for it today."
THANK YOU

You might also like