Web Page Design

Using Templates
and online WYSIWYG
Platforms
Web Page Design Using Templates and
online WYSIWYG
Platforms
 Learning Competencies:
• Create an original or derivative ICT content using online creation tools,
• platforms, and applications to effectively communicate messages related to
• specific professional track.
•
 Web Page Design Using
Templates and
online WYSIWYG
Platforms
The web is a gigantic place, and if
you are using internet every day,
you probably visit several websites
whether for news, entertainment,
business or education.
 A website is a collection of
publicly accessible, interlinked
web pages that share a single
Web Page domain name. Websites can be
created and maintained by an
Design 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.
 It means that your design should
align with a handful of soothing adjectives;
it should be simple, familiar, intuitive, clean,
and accessible. Use plenty of whitespace
(or padding and margins) to give the
elements of your site room to breathe and
Layout use grid-based designs to keep design
items organized and orderly.
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.
 Your site’s navigation is not a space in
Navigation 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.
 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. Of course, you’ll want to
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.
 Your site visitors and
potential customers want
information quickly such as, is
your brand trustworthy?
Experienced? Is it capable of
delivering topnotch products and
Content services? Given people’s short
attention spans and lightning-fast
first impressions, communicating
clearly is critical, thus, information
should be easyto read and digest.
 It is a pre-designed webpage on set of HTML webpages
that anyone can use to “plugin”. Website templates
allow anyone to setup a website.
A web design template is a catchall name for several
types of templates like;

Web 1. HTML templates – website design templates

represented with HTML code only

Template 2. 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.
 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 and mobile sites
through the use of online drag-
and-drop tools.
 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 dragand-
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.
Create Your Own
Digital Portfolio
Directions: Using Wix.com,
create your own e-portfolio on
specific subject area, to showcase
your work to future employers. In
this website, you can put
infographics, audio recordings,
video clips and texts together to
showcase your achievements and
experiences. This activity is an
alternative way for traditional
portfolio.