Scribd
Upload
27 views24 pages

Web Page Design and Elements

Uploaded by

kizaruofficial12
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
27 views24 pages

Web Page Design and Elements

Uploaded by

kizaruofficial12
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/ 24

• The first website on the World

Wide Web was created by


Tim Berners-Lee, who was
then a computer scientist at
European Organization for
Nuclear Research (CERN) in
Geneva.
Level 1 - Access API
• API means application
programming interfaces.
• It is the most common type
of internet platform.
• The apps on this level run
elsewhere and call into the
platform via web services
API to draw on data and
services.
Level 2 - Plug-in API

• This is the kind of platform


approach that, historically,
has been used in end-user
applications to let developers
build new functions that can
be injected or plugged into
the core system and its user
interface.
Level 3 - Runtime
Environment
• In a Level 3 platform, the
huge difference is that the
third-party application code
actually runs inside the
platform-developer code is
uploaded and runs online,
inside the core system.
WEB DESIGN
PRINCIPLES
Visual Hierarchy
• This explains the order in which
human eye perceives what it sees.
This is a technique wherein, as the
developer, you must distinguish the
importance of every part of your web
page.
• Elements should be ranked according
to its importance and your objectives.
It can be shown using varying sizes
and amount of content.
Proportion
• You can make use of the
golden ratio, a magical
number approximately equal
to 1,618 that makes all things
proportioned to make a
design aesthetically
pleasing.
Hick's Law
• This law can be considered as a
guideline for decision making in a
viewer's perspective.
• Hick's law states that "with every
additional choice, the time required
to make a decision increases.“
• This law does not only hold true for
web design but also in several
other situations and settings.
• This means that we need to reduce
the number of choices to provide a
better user experience.
Fitts' Law
• According to this law, the time
needed to move to a target is
dependent upon the size of the target
as well as the distance to the target.
• This means that the larger the object
or target and the shorter the distance,
the easier would it be to move to it or
reach it. However, this does not
mean that the bigger, the better but
that usability factor of a target runs as
a curve and not as a straight line.
• When a visitor enters the website, he or she must be
able to access each bit of information in the easiest
manner. Typefaces must be readable to all and is not
Accessibility too fancy for some to access or understand. Make your
own color palette and choose contrasting colors for the
background and written content so that it can be easily
read. Make sure your images are of high-quality and
are suitable for your purpose.
Visible Language
• A web page design should
communicate with the
users clearly and in an
engaging manner.
• The following are principles
for a successful visual
language: organize,
economize, and
communicate.
White Space and
Simple Design
• White space helps divide the web
page into several distinct parts or
areas that make it simpler for the
users to process information.
• The following are some of the
other things that can be
considered as a part of a simple
design:
• Grid-based layout.
The content of this
layout is divided into
columns, boxes, and
different sections.
F-pattern design.
• Design a web page or website in a way
that complements the natural reading
behavior of the visitors like the "F-pattern."
• Regular Testing
Test Early and Test Often, or TETO, is
another web design principle that all
designers and website owners must
consider.
• Conducting usability tests every now and
then provides important results and
insights into many kinds of problems and
complications related to a website layout
or aspects of design.
• Websites constantly need upgrades and
updates to maintain the visitor customer's
interests and trends.
WEB • To produce a good web design and an
DESIGN effective visual and technical appeal of
a website, there are some elements
ELEMENTS that must be considered.
Links
• Normal. This is the default state of a link Example: Normal.Link

• Visited. This is a link that is not being hovered over or clicked but
whose target has been visited by the user. Example: Visited.Link

• Active. An active link is one that is currently being clicked by the user.
Example: Active.Link

• Hover. The hover state is what the link looks like when the user moves
the mouse over it. Example: Hover.Link
Forms
• Form label
Forms typically collect personal data that users are reluctant to
give out. As such, properly informing users of the exact
purpose of the form is wise.
• Input fields and labels
Plan on how the input fields of the form will be laid out on the
page and how the labels for those fields will be styled and
oriented relative to the fields.
• Form Validation
An important related detail is forming validation. This is the
critical point where the website communicates the user
requirements and errors in a form.
Three things to consider in Form Validation:
Required fields
All required fields should be indicated. This is done usually with an
asterisk.
Real-time validation
Some validation can be done in real time as the user completes the
form. This kind of validation informs the user as quickly as possible
of any problems with the data they have inputted.
Post-back validation
This kind of validation happens after the user has submitted the
form. The style used for real-time validation is often repeated here,
but another option is to group all errors into a single message.
• Status Messages: Errors, Warnings, Confirmation
Users will usually need some sort of feedback after
performing an action on your website. The most likely
scenario is after submitting a form, but many other
events could occur as well.

You might also like