Web Design

Process:
 At the end of this lesson, students
should be able to successfully:
1. List the steps of designing a
website.
Objectives 2. Briefly describe the events
that occur within each step/phase.
3. Identify some of the crucial
things that one must consider
when planning a website.

9/3/20XX Presentation Title 2

Website Design
Process
1. Analysis
2. Planning
3. Design
4. Content
5. Development
6. Testing
7. Deployment

9/3/20XX Presentation Title 3

Think-Group-Share
1. Think about the steps of
website design.
What may be sub-activities for each
step?

2. In your group, discuss the

activities.
3. Share requested information
with the class about the
sub-activities.
9/3/20XX Presentation Title 4
Analysis
Analysis
Website Purpose
Website Goals
Targeted Audience

9/3/20XX Presentation Title 6

Analysis
a. Website Purpose: Determine the primary reason for creating
the website. This could be for information sharing, e-commerce,
entertainment, or any other specific purpose.
b. Website Goals: Define clear, measurable objectives for the
website. These could include increasing online sales, attracting
a certain number of visitors, or improving user engagement.
c. Targeted Audience: Identify the intended audience or users of
the website. Understanding their demographics, needs, and
preferences is crucial for tailoring the design and content.

9/3/20XX Presentation Title 7

Planning
Planning
Site Map
Website Structure
Technology Used

9/3/20XX Presentation Title 9

Planning
a. Site Map: Create a visual representation of the website's structure,
showing how different pages are connected. This helps in organizing
content logically.
b. Website Structure: Define the order of pages and how they relate
to each other. Determine the navigation structure to make it user-
friendly.
c. Technology Used: Decide on the technology stack and tools that
will be used for website development, such as content management
systems (CMS), programming languages, and frameworks.

9/3/20XX Presentation Title 10

Design
Design
Wireframe Modules
Visual Style

9/3/20XX Presentation Title 12

Design
a.Wireframe Modules: Develop
wireframes or basic sketches of the
website's layout. These wireframes
serve as a blueprint for the visual
design and help in arranging
elements.
b.Visual Style: Create the visual
identity of the website, including
colors, typography, and imagery.
Ensure that the design aligns with
the website's purpose and goals.
9/3/20XX Presentation Title 13
Content
Content
Copywriting
Photos and Videos
Search Engine
Optimization

9/3/20XX Presentation Title 15

Content
a. Copywriting: Generate high-quality and relevant textual
content for the website, ensuring it communicates the
intended message clearly and effectively.
b. Photos and Videos: Gather and create multimedia
elements like images and videos that enhance the
website's visual appeal and convey information.
c. Search Engine Optimization (SEO): Optimize content
and structure to improve the website's visibility in search
engine results, using relevant keywords and meta tags.
9/3/20XX Presentation Title 16
Development
Development
HTML and CSS
Coding
Databases
Responsive
Design
9/3/20XX Presentation Title 18
Development
a. HTML and CSS Coding: Write the HTML and CSS code to
build the website's structure and style it according to the
design. Ensure it's responsive for different devices.
b. Databases: If necessary, integrate databases and
backend functionality to handle dynamic content, user
accounts, or e-commerce transactions.
c. Responsive Design: Implement responsive design
techniques to ensure the website works well on various
devices, including desktops, tablets, and smartphones.
9/3/20XX Presentation Title 19
Testing
Testing
Technical Testing
Browser
Compatibility
“Does it Fulfil its
purpose?”
9/3/20XX Presentation Title 21
Testing
a. Technical Testing: Thoroughly
test the website for functionality,
including forms, links, and
interactive features, to identify
and fix any technical issues.
b. Browser Compatibility: Ensure
the website performs
consistently across different web
browsers and versions.
c. "Does it Fulfil its purpose?":
Evaluate whether the websitePresentation Title
9/3/20XX 22
Deployment
Deployment
Monitoring
Debug
Maintenance

9/3/20XX Presentation Title 24

Deployment
a.Monitoring: Continuously monitor the website's
performance, security, and user engagement post-
launch.
b.Debug: Address any issues or bugs that arise after
deployment promptly.
c. Maintenance: Regularly update content, apply
security patches, and make improvements to keep
the website relevant and functioning optimally.
9/3/20XX Presentation Title 25
 Crucial
Target Audience,
Consideration Purpose, Content,
s Usability, Visual design

9/3/20XX Presentation Title 26

Target Audience
• Understanding your target • Different audiences may
audience is vital because it have varying design
shapes every aspect of preferences.
your website, from design
to content. • For example, a website
targeting teenagers may
have a more vibrant and
• You need to tailor your youthful design, while a
website to meet the website targeting
preferences and professionals might have a
expectations of this more formal and clean
audience. design.
9/3/20XX Presentation Title 27
Purpose
• The design and content of • The purpose affects the overall
the website should align layout, functionality, and calls-
closely with its purpose. to-action on the website.

• Visitors should • For example, an e-commerce

immediately understand website's design will focus on
product displays and checkout
what the website is about
processes, while a blog's
and what they can do on design will prioritize readability
it. and content presentation.

9/3/20XX Presentation Title 28

Content
• Content should be of high • The content dictates the
quality, relevant to the layout and structure of the
target audience, and easy website.
to understand.

• It should also be regularly • The design must

updated to keep the accommodate text, images,
website fresh. and multimedia in a way that
is visually appealing and
easy to consume.
9/3/20XX Presentation Title 29
Usability
• Usability refers to how • Websites should be designed
easily and effectively with the user in mind.
users can interact with
and navigate the website.

• Elements like menus,

• It involves factors like buttons, and forms should be
user-friendliness, intuitive intuitively placed, and the
navigation, and overall layout should make it
accessibility. easy for users to find what
they need.
9/3/20XX Presentation Title 30
Visual Design
• Visual design plays a • Visual design choices should
critical role in branding align with the target audience
and creating a memorable and purpose.
identity for the website.
• For example, a website
• Consistency in design targeting children might use
elements helps reinforce bright and playful colors,
the brand. while a corporate website
may opt for a more
professional and subdued
color palette.
9/3/20XX Presentation Title 31
 Activity
Time!

9/3/20XX Presentation Title 32

Activity time !
1. Focus on planning content,
selecting templates or
designs, and creating a
basic layout.

2. Create a simple webpage

using the tools on Wix.com.

3. Apply the knowledge of the

web design steps and
considerations discussed
earlier.
9/3/20XX Presentation Title 33
Thank you

9/3/20XX Presentation Title 34