Scribd
Upload
512 views32 pages

Ete XXXX

This document discusses 10 principles of effective web design: purpose, communication, typefaces, colors, images, navigation, grid-based layouts, "F" pattern design, load time, and being mobile friendly. It provides examples and explanations for each principle to help make websites easy to use and understand for users.

Uploaded by

Alexia Nool
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
512 views32 pages

Ete XXXX

This document discusses 10 principles of effective web design: purpose, communication, typefaces, colors, images, navigation, grid-based layouts, "F" pattern design, load time, and being mobile friendly. It provides examples and explanations for each principle to help make websites easy to use and understand for users.

Uploaded by

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

GROUP1

Principles and Elements of Web Designing

Google Image 12-Berry


Principles and Elements of Web Designing

What is Blog?

Principles of Effective Web Design

10 Principles of Good/Effective Web Design


• Purpose • Navigation
• Communication • Grid Based Layouts
• Typefaces • “F” Pattern Design
• Colors • Load Time
• Images • Mobile Friendly
`

Article Read Examples View history

BLOG
 Blog is a discussion or informational site
published on the World Wide Web(www)
typically displayed in reverse chronological
format order.
 A blog (short for “weblog”) is an online
journal.

Examples of blogging tools are:


• Blogger
• WordPress
• Tumblr
• LiveJournal
Next
Next
ABOUT CONTACT ETECH

Like the phrase 'beauty


is Principles
in the eye of of the
Effective
beholder', effective web
design is judged by the
Web
users Design
of the website and
not the website owners.
ABOUT CONTACT ETECH

There are many factors


that affect the usability
of a website, and it is
not just about form
(how good it looks), but
also function (how easy
is it to use).

Principles of
Effective
Web Design
Purpose
 Good web design always caters to the
needs of the user.

 Your website needs to have a clear


purpose for your website users in the
most effective way possible.

TYPES OF PURPOSES:
• Are the people who visit your website
trying to interact with you or making a
purchase (E-COMMERCE)?
• Entertainment
• Portfolio
eXAMPLES
PORTFOLIO ECOMMERCE ENTERTAINMENT
eXAMPLES
PORTFOLIO ECOMMERCE ENTERTAINMENT
eXAMPLES
PORTFOLIO ECOMMERCE ENTERTAINMENT
COMMUNICATION
Users tend to want information quickly, so it is
important to:

• Communicate clearly
• Make your information easy to read and digest

EFFECTIVE TACTICS TO INCLUDE IN


COMMUNICATING:

 Organizing headlines and sub headlines


 Using bullet points
 Cutting the waffle (Make the text more
concise/shorter)
EFFECTIVE TACTICS

HEADLINES AND BULLET POINTS


TYPEFACES
 It is all about how we use fonts.
DO NOT USE
 Sans serif, Arial and Verdana are easier to
TOO MANY
read online.
FONTS
 The ideal font sizes for reading easily are
FOR YOUR
16px to 18px.
WEBSITE.
 Maximum of 3 typefaces or fonts to keep

your design streamlined.


eXAMPLES
COLoRS
 A well thought color palette can go a long
way to enhance the user experience.

 Using contracting color for the text and


background will make reading easier.

 Vibrant colors cerate emotions and should


be used (e.g. for buttons and call to
actions)

 White space/ negative space is effective at


giving our website a modern look and
uncluttered look.
eXAMPLES
IMAGES
 A picture can speak a thousand words.

 Choosing the right images for your website can


help connect with your target audience

 Consider having high quality professional photos,


infographics, videos, etc.
• as this is more effective at communicating than having only a
written text.
Examples
NAVIGATION
 It is about how easy it is for users to
take action and move around your
website.

 Using or following the


‘three click rule’

• Which means users will be able to


find the information they need
within three clicks.
EXAMPLES
EXAMPLES
GRID BASED
LAYOUTS
 Placing content randomly on your
web page can end up messy.

 Grid layout arranged contents


into sections, columns, and
boxes that line up and feel
balanced.
eXAMPLES
“F” pattern design
 Eye studies identified that people
scan computer screens in an “F”
pattern.

 Users read from


• LEFT TO RIGHT and TOP TO
BOTTOM

 Effectively designed websites will


work with a reader’s natural
behavior and display information.
eXAMPLES
eXAMPLES
Load time
 We all hate a website that takes ages
to load.

 When making a website, we need to


optimize image sizes, and
combining code into a central CSS
or JavaScript file.

 Minify HTML, CSS, and JavaScript


to speed up the website’s load time.
eXAMPLES
Mobile friendly
 It is now common to access websites
from multiple devices and multiple
screen sizes.

 If your website isn’t mobile friendly,


you can rebuild it in a responsive
layout.
eXAMPLES

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy