Principles and

Techniques of Design
Using Online Creation
Tools, Platforms and
Applications
Web Page
creation
WEB Page Creation
▪While it's easy to build a web page, it's hard to make it look right. If all you
want is plain text, everything will be too straightforward. The tricky part is when you
want something more. Most bad web pages are bad because of their design rather
than their contents. The more stuff on the page, the messier it gets and the less
likely you are to keep the interest of the visitor
(http://billconner.com/techie/webpages.html).
▪
▪An effective website design should fulfill its intended function by conveying
its message while simultaneously engaging the visitor. Several factors such as
consistency, colors, typography, imagery, simplicity and functionality all contribute to
good website design. A well-designed website can help build trust and guide visitors
to act. Creating a great user experience involves making sure your website design
is optimized for usability (form and aesthetics) and how it easy is it to use
(functionality). (https://www.feelingpeaky.com/9-principles-of-good-web-design/).

3
WEB TEMPLATES and “WYSIWYG” PLATFORMS
“WYSIWYG” means What You WEB TEMPLATE
See Is What You Get
These are unique full-page layout that
In this kind of platform, no coding
contains generic information which
skills are required. Instead, you
can be replaced by the users with
manipulate with design components
their own personal information.
using an editor window and get the
chance to choose what elements are
on your page

4
Basic web
design principle
Website purpose
Your website needs to accommodate
the needs of the user. Having a simple
clear intention on all pages will help the
user interact with what you have to
offer. Are you imparting practical
information like a ‘How to guide’? Is it
an entertainment website like sports
coverage or are you selling a product to
the user. 6
Simplicity
Simplicity is the best way to go when
considering the user experience and the
usability of your website. Below are
ways to achieve simplicity through
design.
▪ Color
▪ Typography
▪ Imagery
7
navigation
Navigation is the way finding system
used on websites where visitors interact
and find what they are looking for.
Website navigation is key to retaining
visitors. If the websites navigation is
confusing visitors will give up and find
what they need elsewhere. Keeping
navigation simple, intuitive and
consistent on every page is key. 8
F-shaped reading pattern
The F- based pattern is the most
common way visitors scan text on a
website. Eye tracking studies have
found that most of what people see is in
the top and left area of the screen. The
F’ shaped layout mimics our natural
pattern of reading in the West (left to
right and top to bottom). An effective
designed website will work with a
reader’s natural pattern of scanning the
9
page.
Visual hierarchy
The arrangement of elements is order of importance.
This is done either by size, color, imagery, contrast,
typographically, whitespace, texture and style. One
of the most important functions of visual hierarchy is
to establish a focal point; this shows visitors where
the most important
information is.

10
content
An effective web design has both great
design and great content. Using
compelling language great content can
attract and influence visitors by
converting them into customers.

11
Mobile friendly
More people are using their phones or
other devices to browse the web. It is
important to consider building your
website with a responsive layout where
your website can adjust to different
screens.

12
Online creation
tool
Types of visual content
Infographics Videos Presentations
are graphic visual are recording of use catchy images,
representations of moving pictures and videos, and
information, data, sound, especially as
graphics in your
or knowledge a digital file.
intended to present presentation to get
information quickly into the minds of
and clearly. your target
audience.

14
Sample online creation tools
Infographics

15
Sample online creation tools
Videos

16
Sample online creation tools
Web Site Creations

17
Sample online creation tools
Web Site Creations

18
 Learning task
Create your own Blog on the things you like or on somethings your good at.
Don’t forget to remember the principles of web and graphic designs when
creating your blog. Choose your own online platform for your blog. Your work
must be published online. Give the URL of your blog to your teacher for
checking.

19
Any questions?
You can find me at:
▪ JEZREEL B. PUNTO
▪ Jezreel.punto@deped.gov.ph

20
21
A picture is worth a
thousand words
A complex idea can be
conveyed with just a single
still image, namely making
it possible to absorb large
amounts of data quickly.

22
Want big impact?
Use big image.

23
Use diagrams to explain your ideas
Lorem Ipsum

Lorem Ipsum Lorem Ipsum

Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum

24
And tables to compare data
A B C

Yellow 10 20 7

Blue 30 15 10

Orange 5 24 16

25
 Maps

our office

Find more maps at slidescarnival.com/extra-free-resources-icons-and-maps 26

89,526,124$
That’s a lot of money

185,244 users
And a lot of users

100%
Total success!
27
 Our process is easy
Vestibulum congue tempus
03
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.

Vestibulum congue tempus

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.

01 02
Vestibulum congue tempus
Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor. Donec
facilisis lacus eget mauris.

28
Let’s review some concepts
Yellow
Is the color of gold, butter and
ripe lemons. In the spectrum
of visible light, yellow is
found between green and
orange.
Yellow
Is the color of gold, butter and
ripe lemons. In the spectrum
of visible light, yellow is
found between green and
orange.
Blue
Is the colour of the clear sky
and the deep sea. It is located
between violet and green on
the optical spectrum.
Blue
Is the colour of the clear sky
and the deep sea. It is located
between violet and green on
the optical spectrum.
Red
Is the color of blood, and
because of this it has
historically been associated
with sacrifice, danger and
courage.
Red
Is the color of blood, and
because of this it has
historically been associated
with sacrifice, danger and
courage.
29
4000

3000

2000

1000

You can insert graphs from Excel or Google Sheets

30
Mobile
project
Show and explain your
web, app or software
projects using these
gadget templates.

31
Tablet project
Show and explain your
web, app or software
projects using these
gadget templates.

32
Credits
Special thanks to all the people who made and
released these awesome resources for free:
▪ Presentation template by SlidesCarnival
▪ Robots by Alex Monge
▪ Photographs by Unsplash

33
Presentation design
This presentation uses the following typographies:
▪ Titles: Bebas Neue
▪ Body copy: IBM Plex Sans Condensed
Download for free at:
https://www.fontsquirrel.com/fonts/bebas-neue
https://github.com/IBM/plex/releases/tag/v5.1.3

You don’t need to keep this slide in your presentation. It’s only here to serve you
as a design guide if you need to create new slides or download the fonts to edit
the presentation in PowerPoint®
34
 Timeline

Yellow is the color of

Blue is the colour of the Red is the colour of danger Black is the color of ebony gold, butter and ripe White is the color of milk Blue is the colour of the
clear sky and the deep sea and courage and of outer space lemons and fresh snow clear sky and the deep sea

JAN FEB MAR APR MAY JUN JUL AUG SEP OCT NOV DEC

Yellow is the color of White is the color of milk Blue is the colour of the Red is the colour of danger Black is the color of ebony Yellow is the color of
gold, butter and ripe and fresh snow clear sky and the deep sea and courage and of outer space gold, butter and ripe
lemons lemons

35
Roadmap
Blue is the colour of the Red is the colour of danger Black is the color of ebony
clear sky and the deep sea and courage and of outer space

1 3 5

2 4 6

Yellow is the color of gold, White is the color of milk Blue is the colour of the
butter and ripe lemons and fresh snow clear sky and the deep sea

36
Gantt chart
Week 1 Week 2

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Task 1

Task 2 ◆

Task 3

Task 4 ◆

Task 5 ◆

Task 6

Task 7

Task 8

37
SWOT Analysis
STRENGTHS WEAKNESSES
Blue is the colour of the clear Yellow is the color of gold,
sky and the deep sea butter and ripe lemons

Black is the color of ebony and White is the color of milk and
of outer space fresh snow
OPPORTUNITIES THREATS

38
Business Model Canvas

Key Partners Key Activities Value Propositions Customer Relationships Customer Segments
Insert your content Insert your content Insert your content Insert your content Insert your content

Key Resources Channels

Insert your content Insert your content

Cost Structure Revenue Streams

Insert your content Insert your content

39
Funnel

AWARENESS Insert your content

DISCOVERY Insert your content

EVALUATION Insert your content

INTENT Insert your content

PURCHASE Insert your content

LOYALTY Insert your content

40
Team Presentation

Imani Jackson Marcos Galán Ixchel Valdía Nils Årud

JOB TITLE JOB TITLE JOB TITLE JOB TITLE
Blue is the colour of the clear Blue is the colour of the clear Blue is the colour of the clear Blue is the colour of the clear
sky and the deep sea sky and the deep sea sky and the deep sea sky and the deep sea

41
 Competitor Matrix
HIGH VALUE 2

Competitor
Compet
itor
Our company

Competitor

HIGH VALUE 1
LOW VALUE 1

Competitor

Competitor Competitor

LOW VALUE 2
42
Weekly Planner
SUNDAY MONDAY TUESDAY WEDNESDAY THURSDAY FRIDAY SATURDAY

09:00 - 09:45 Task Task Task Task Task Task Task

10:00 - 10:45 Task Task Task Task Task Task Task

11:00 - 11:45 Task Task Task Task Task Task Task

12:00 - 13:15 ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time ✔ Free time

13:30 - 14:15 Task Task Task Task Task Task Task

14:30 - 15:15 Task Task Task Task Task Task Task

15:30 - 16:15 Task Task Task Task Task Task Task

43
Extra
resources

44
Extra
resources

Change the faces and have fun!

45
SlidesCarnival icons are editable shapes.

This means that you can:

▪ Resize them without losing quality.

▪ Change fill color and opacity.

▪ Change line color, width and style.

Isn’t that nice? :)

Examples:

Find more icons at

slidescarnival.com/extra-free-resources-icons-and-m
aps

46
Diagrams and infographics

47
You can also use any emoji as an icon!
And of course it resizes without losing quality.
How? Follow Google instructions https://twitter.com/googledocs/status/730087240156643328

✋👆👉👍👤👦👧👨👩👪💃🏃💑❤😂😉😋
😒😭😸💣
👶😸 🐟🍒🍔💣 📌📖🔨🎃🎈🎨🏈🏰🌏🔌🔑
and
many more...

48
 Free templates for all your presentation needs

For PowerPoint and 100% free for personal or Ready to use, professional Blow your audience away
Google Slides commercial use and customizable with attractive visuals