Scribd
Upload
143 views56 pages

ETECH Lesson 7 Week 9

Here are a few reasons why it is important to have a good quality website: - It creates a professional image and impression. A high quality, well-designed website shows that your business is professional and cares about its online presence and customer experience. - It builds credibility and trust. An attractive, well-organized site that is easy to navigate helps build credibility with customers and clients. It shows your business is legitimate and trustworthy. - It improves search engine rankings. A fast loading, mobile-friendly site that meets current web standards is more likely to rank higher in search engines like Google. Higher rankings mean more potential customers can find you online. - It enhances the user experience. An intuitive, visually pleasing site

Uploaded by

Aira Eunice Escasa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
143 views56 pages

ETECH Lesson 7 Week 9

Here are a few reasons why it is important to have a good quality website: - It creates a professional image and impression. A high quality, well-designed website shows that your business is professional and cares about its online presence and customer experience. - It builds credibility and trust. An attractive, well-organized site that is easy to navigate helps build credibility with customers and clients. It shows your business is legitimate and trustworthy. - It improves search engine rankings. A fast loading, mobile-friendly site that meets current web standards is more likely to rank higher in search engines like Google. Higher rankings mean more potential customers can find you online. - It enhances the user experience. An intuitive, visually pleasing site

Uploaded by

Aira Eunice Escasa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 56

Web Page Design

using templates and online


WYSIWYG Platforms
OBJECTIVES:
At the end of the lesson, you are expected to;
1. define WEB PAGE DESIGN and its basic
elements;
2. identify the different web templates and
WYSIWYG platform; and
3. design a website using an online
WYSIWYG platform.
FREE RESPONSE:
Directions: Answer the given question.
Does the design of the web page
deliver an appropriate message
to users?
QUESTION:
What are your thoughts
about the video.
The web is a gigantic place, and if you are
using internet everyday, you probably visit
several websites whether for news,
entertainment, business or education.
• How these websites work?
• How are they built?
• What skills are necessary to build a website?
With almost 1 billion websites
now on the internet, the answers to
these questions could be your first
step toward a better understanding
of website designing.
Web Page
Design
• A website is a collection of publicly
accessible, interlinked web pages that
share a single domain name.
• Websites can be created and maintained
by an individual, group, business or
organization to serve a variety of purposes.
• Together, all publicly accessible websites
constitute the World Wide Web.
Web design is a similar process of
creation, with the intention of
presenting the content on electronic web
pages, which the end-users can access
through the internet with the help of a
web browser.
• Every single web page in a website
has different content, but all the
pages are using a similar graphic
design.
• Often, sites will use website
templates, which contain all the
basic elements of web design:
Basic Elements
of Web Design
Layout
• It means that your design should align with
a handful of soothing adjectives; it should
be simple, familiar, intuitive, clean, and
accessible.
• To give the elements of your site room to
breathe, & use grid-based designs to keep
design items organized and orderly.
Layout
• Strong photography, icons, or graphics
provide supplementary information to
your text but make sure the images
complement each other and the brand
you’re looking to represent.
Colour
• As for choosing a color scheme, paying
attention to your topic, brand or industry
perspectives, along with your target
audience demographics will make this a
somewhat a painless process.
Always look for ways to narrow your scope from the roughly 7
million discernable hues the eye can detect.
Navigation
• Your site’s navigation is not a space in
which to be creative. First off, don’t fall
into the trap of overly animated hover
effects and complex.
Navigational elements which can exist in a site’s header,
body, and footer simply serve to direct your visitors to
the information they desire as quickly as possible.
Navigation Bar
Fonts
• Your text should be easily readable, which
generally means body copy should be at
least 16 pixels.
• Using a complementary font is ideal for
headings or accents, but don’t go beyond
three typefaces or unnecessary sizing
adjustments.
Fonts
• Make sure there’s plenty of contrast
between your text and the site’s
background colors, which generally
means a light color paired with a dark
tone. Also, avoid that piercing red-font-
on-green-background eyesore.
Content
• Your site visitors and potential
customers want information quickly
such as, is your brand trustworthy?
Experienced?
Is it capable of delivering top-notch products and
services?
Content
• Given people’s short attention spans
and lightning-fast first impressions,
communicating clearly is critical,
thus, information should be easy to
read & digest.
Web
Template
• This is a pre-designed webpage on
set of HTML webpages that anyone
can use to “plug- in”.
• Website templates allow anyone to
setup a website.
A web design template is a catchall name for several
types of templates like;
1. HTML templates – website design templates
represented with HTML code only.
2. PSD templates – templates which contain only
.psd files, graphics only, with no code
3. Flash templates – website design templates
developed with Flash
4. Flash intro templates – templates of an intro
clip, developed with Flash only and used to
represent a company or/and a project.
Online WYSIWYG Platforms
• Whether you’re attracted in learning to
make your own website or want to start
a blog without having to learn HTML or
other coding languages, you may want
to consider using a website builder that
makes use of a WYSIWYG editor.
WYSIWYG stands for WHAT YOU
SEE IS WHAT YOU GET. In other words,
you are creating a website using drag-
and-drop interface or changing the
way fonts look in an editor, that is
how your finished product will look.
• There are different benefits
related with using a WYSIWYG
editor. You have control over
what your website looks like, &
you don’t have to pay professional
to handle the coding for you.
• There are also a number of
web hosts that have their own
built-in editors, meaning you
can create your website and
publish it to the web
immediately.
WYSIWYG
(What You See Is What You Get)

WEBSITE BUILDERS
Creating a Website using an Online Website
Builder:
• Wix.com is a WYSIWYG cloud-based web
development platform that was first
developed and popularized by the Israeli
company also called Wix.
• It allows users to create websites & mobile
sites using online drag-and-drop tools.
1.Create an account on Wix through their
website www.wix.com and click GET STARTED.
2.Select “Create a New Site” from the drop-
down menu in the top right corner of the
dashboard. Once it’s clicked, Wix will ask what
type of website do you want to create. There are
options for everyone, from online stores to
personal portfolios.
3. Customize your website with the Wix Editor
Once you select a template, you can be able to
customize it in the Wix Editor using simple drag-
and-drop editing.
4. Update the Texts and Images
At this point, you can get to see a preview page
of your chosen template. This is where you can
play around with simple but brilliant editing
features, like the drag- and-drop design and text
boxes.
5. Personalize the Background
If small images are still not enough, you can also change
your template background. The left-hand sidebar features
a ‘Background’ button, which you can use to click and
change with ease.

6. Add Pages
Once you created a stunning homepage, there are few
other more pages you can add to ensure that your website
has everything visitors are looking for. For example, make
sure to include a “Home”, “About” and a “Contact Us” page.
7. Publish your Wix website
To make your website publicly accessible, you need to
publish it. To do so, click “Publish” from the top menu.
However, before Wix will publish your site, the last step in
the process is to create your own subdomain or connect
a custom domain. For a serious website, you should
connect your own custom domain name, rather than
using a Wix subdomain.
QUESTION:
Why is it important to
have a good quality
website?

You might also like