Lesson 6: Principles and Techniques of Design Using Online Creation Tools, Platforms, and Applications

SHA ETECH 11- EMPOWERMENT TECHNOLOGIES
Lesson 6: Principles and

Techniques of Design
Using Online Creation
Tools, Platforms, and
Applications
Web Page An effective website design should
fulfill its intended function by
Creation
conveying its message while
simultaneously engaging the visitor.
Factors that contribute to good

website design:
1.Consistency,
2.Colors,
3.Typography,
4.Imagery,
5.Simplicity and functionality
WEB TEMPLATES and
“WYSIWYG” PLATFORMS
WEB TEMPLATES
These are unique full-page layout
that contains generic information
which can be replaced by the users
with their own personal information.
“WYSIWYG” MEANS WHAT YOU
SEE IS WHAT YOU GET
In this kind of platform, no coding skills are
required. Instead, you manipulate with
design components using an editor window
and get the chance to choose what
elements are on your page.
BASIC WEB
DESIGN
PRINCIPLES
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.
Simplicity
Simplicity is the best way to go when considering
the user experience and the usability of your
website.
Color. It has the power to communicate messages

and evoke emotional responses. Keep the color
selection limited to less than 5 colors. Pleasing
color combinations increase customer
engagement and make the user feel good.
Typography or the text used. Typefaces should be

legible and only use a maximum of 3 different
fonts on the website
Imagery. All imagery should be expressive and

capture the spirit of the company and act as the
embodiment of their brand personality.
Navigation
Navigation is the way Website navigation is

key to retaining visitors. Keeping navigation
finding system used
If the websites simple, intuitive
on websites where
navigation is confusing and consistent on
visitors interact and
visitors will give up and every page is key.
find what they are
looking for. find what they need
elsewhere.
F-Shaped Pattern The F’ shaped
Reading layout mimics our
natural pattern of
reading in the West
The F- based pattern is the (left to right and top
most common way visitors scan to bottom).
text on a website.
VISUAL HI ERARCHY
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.
CONTENT
USING COMPELLING LANGUAGE GREAT CONTENT CAN ATTRACT AND
INFLUENCE VISITORS BY CONVERTING THEM INTO CUSTOMERS.
GRID BASED MOBILE

LOAD TIME
LAYOUT FRIENDLY
The grid-based layout arranges Waiting for a website to load will More people are using their
content into a clean rigid grid lose visitors. Nearly half of web phones or other devices to
visitors expect a site to load in 2
structure with columns, browse the web. It is important
seconds or less and they will
sections that line up and feel potentially leave a site that isn’t to consider building your
balanced and impose order and loaded within 3 seconds. website with a responsive
results in an aesthetically Optimizing image sizes will help layout where your website can
pleasing website. load your site faster adjust to different screens.
Online Creation Tools
TYPES OF VISUAL CONTENT
Infographics are graphic

visual representations of
information, data, or
knowledge intended to
present information Presentations use
quickly and clearly. They catchy images,
can improve cognition by Videos are recording videos, and graphics
utilizing graphics to of moving pictures in your presentation
enhance the human visual and sound, especially to get into the minds
system's ability to see as a digital file. of your target
patterns and trends. audience.
FOR VIDEOS
PowToon. The online
animation software of
PowToon is perfect for
storytelling and creating
Flash-style movies. You don’t
have to go through hundreds
of tutorials to learn motion
creation as PowToon will do it
for you.
FOR
INFOGRAPHICS
Piktochart is an infographic
creation tool that lets you design
stunning pieces worth sharing in
minutes.
Prezi is cloud-based presentation
For software that is simple to use as
compared to the traditional
Presentation slideshow makers. It displays
information not as series of slides
but as a large board that zooms
in on specific information, text, or
an image, giving presentations a
fresh and non-traditional feel.
SlideShare. You can use this

to upload and share
professional videos and slide
presentations.
For Web Site
Creations
Wix you can use this to
create your web site or mobile site.

Lesson 6: Principles and Techniques of Design Using Online Creation Tools, Platforms, and Applications

Uploaded by

Copyright:

Available Formats

Lesson 6: Principles and Techniques of Design Using Online Creation Tools, Platforms, and Applications

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lesson 6: Principles and Techniques of Design Using Online Creation Tools, Platforms, and Applications

Uploaded by

Copyright:

Available Formats

SHA ETECH 11- EMPOWERMENT TECHNOLOGIES

Lesson 6: Principles and

Factors that contribute to good

Color. It has the power to communicate messages

Typography or the text used. Typefaces should be

Imagery. All imagery should be expressive and

Navigation is the way Website navigation is

GRID BASED MOBILE

Infographics are graphic

SlideShare. You can use this

You might also like