NATURE AND PURPOSES

OF ONLINE PLATFORMS
LEVEL 1- ACCESS API
• API means application programming
interfaces. It is the most common
type of internet online 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 it 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.
Visual Hierarchy
• This explains the order in which
human eye perceives what it sees.
This is a technique wherein, as the
developer, you have to distinguish
the importance of every part of
your web page.
Proportion
• You can make use of the golden ratio. A magical number
approximately equal to 1.618 that makes all things
proportioned so as to make a design aesthetically pleasing.
Then there is also the Fibonacci sequence where each term is
defined as the sum of the two previous terms: 0, 1, 1, 2, 3, 5,
8, 13, 21, and so on.
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 a number of other
situations and settings.
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 it or reach it.
Accessibility
• 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 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.
Visible Language
• A web page design should communicative
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:
Gird-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
“F-pattern”
Conventional designs- conventional or conservative designs
still work well as far as visitor response or likeability is
concerned. They add a hint of trust, reliability as well as brand
credibility.
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.
Links
• Normal- this is the default state of a link (i.e., one that is not
being hovered over or being clicked or pointed to a URL that
the user has already visited)
• Visited- this is a link that is not being hovered over or clicked
but whose target has been visited by the user.
• Active- an active link is one that is currently being clicked by
the user. Most developers will replicate the hover state here if
a style is not provided to them.
• Hover- the hover state is what the link looks like when the
user moves the mouse over it. This and the normal states are
the ones most designers prepare for.
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
• 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. Carefully
consider your website and the actions that
users might take, and plan for the
messages that the website will need to
communicate.
Animations: Pop-ups, Tooltips,
Transitions
• Tooltips- those little pop-ups when user’s mouse
hovers over elements.
• Image rotators or sliders- home page slide
shows are all the rage, and a wide range of
options is available for transitions and styles.
• Lightbox- you can style not only the lightbox
itself, but also the transition to it.