Lesson 12 Flashcards
This explains the process
creating websites from
scratch.
Web Design
Workflow
This phase will let
the web designer
identify the goals
and audiences of
the website.
Goal Setting
Checkout similar websites
to yours that would serve
as a _
Reference
Checkout similar websites
to yours that would serve
as a reference.
● The following slides are
essential web pages and
basic functionalities of
the website to help you
achieve your intended
goals.
is the first web page that most
audiences see.
This page should be designed to quickly guide
the audience to find what they are searching
for
Home Page
lets the audience know the goals
and other essential information of the person
or the organization involved in the website.
About Page
lets the audience communicate
or get in touch with the organization or
website administrator
Contact Page
contains a set of posts that will help
a person or an organization to capture the
attention, to educate, or to persuade their
target audience.
Blog Page
Essential Webpages
Home Page
About Page
Contact Page
Blog Page
maintain and
share blog posts.
Blog Module
lets
audiences connect with the
website creator.
Contact forms
allows automated postings
to the social media
accounts of web creators
Social Media Integration
lets the websites be
searchable on search engines.
Search Engine Optimization
(SEO)
track down the
audiences’ activities.
Web Analytics
prevents the audiences from
spamming.
Comment Spam Protection
send emails to the
audiences.
Newsletter
Essential Website Tools
Blog Module
Contact forms
Social Media Integration
Search Engine Optimization
Web Analytics
Comment Spam Protection
Newletter
Establishes the
website’s identity
by coming up with
a name, domain
name, logo, and
colors that will
represent the
website.
Branding
This phase will
allow web
designers to
visualize the layout
of the website by
creating a sitemap.
20
Website Structure
A diagrammatic
representation of the
website components
which provides web
designers a clear idea
of the website’s
structure.
Sitemap
- Choose a method of making a
sitemap either through
sketching or online tools. - Draw a box that would become
the homepage and label. - Below the homepage box, draw
a second level containing
additional boxes that
represents the website’s
essential web pages. - Draw lines between each box
of a web page to indicate that
they are connected directly to
the homepage. - Continue adding boxes and
connect the lines to a specific
web page if adding another
web page.
How to Create a Sitemap?
After visualizing the
structure of the
website, This step will
allow web designers
to represent the
design for each page
of the website by
creating a wireframe.
Mockup
is
considered as
blueprint that
represents the user
experience of the
website.
wireframe
- Choose a method of making a
wireframe either through
sketching or online tools. - Research some web design
trends and practices to help
in knowing the contents that
will be included on the
website. - Start to sketch the different
web contents.
How to Create a Wireframe?
After setting the
objectives and
creating a layout, it is
now the time to put
all those ideas by
making the website
either through coding
or website builder.
Design &
Development
will require a web
designer to learn the
basics of HTML
(Hypertext Markup
Language).
Coding
helps a web designer to
create a website without the prior knowledge of
coding.
Website Builder
This phase will
help web
designers to check
or fix the errors
that might affect
the functionality of
the website.
Testing
Publishing the
website can be
done after
thoroughly
ensuring that
every part of the
website has no
errors.
Launching
refers to the banner placed on the top
of the website. It includes the logo, name,
images, videos and user interface elements.
Header
shows a list of buttons that lets
the audience check and access some parts of
the website
Navigation Bar
is part of a website that displays
information which is not part of the page
content. It also contains social media posts,
advertisements and other related links.
Side Bar
defines the main body of the website.
It contains various types of web design elements
such as the text, images, videos, and others.
Content
part is found at the bottom part of the
website which allows the audience to view
copyright information and other useful links.
Footer
