Lesson 8

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. But have you ever wondered how these websites actually
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.

What is It

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 such as:

Layout – 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 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.
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. 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.

Content - Your site visitors and potential customers want

information quickly such as, is your brand trustworthy? Experienced? Is it
capable of delivering topnotch products and services? Given people’s short
attention spans and lightning-fast first impressions, communicating clearly
is critical, thus, information should be easy to read and digest.

Web Template
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;

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, and you don’t have to
pay a 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

WIX SQUARESPACE WEEBLY WORDPRESS SHOPIFY

* Easy drag- * Easy to * Easy to * Near- infinite *Easy-to-
and-drop use use customizability
use product
interface platform dashboard * thousands management
* Limitless * Beautiful * Professional of available
plugins and * Inventory
customization design for - looking management
options sites templates themes and POS
integration

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.

For this topic, you will create your own

personal website that focuses on your
passion or hobby.

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 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.