ONLINE PLATFORMS
MINIMALIST / MODERN / C R E AT I V E
01
PLATFORMS
CONTENTS
02
WEB DESIGN PRINCIPLES AND ELEMENTS
PLATFORM
• It refers to a program created by
developers that can be modified or
reprogrammed by outside users
• It is a facility for programming or
developing an application tailored to
the users specifications
ONLINE
PLATFORM
• Are online Web sites created to aid
users in creating their Web content and
cater to different kinds of information
such as texts, images and videos
• It has the ability to program, modify and
access the application remotely using
the Internet
3 LEVELS OF
PLATFORM
Level 1 – Access API (Application Programming
Interface)
• It is the most common type of internet
platform.
• The apps on this level run elsewhere and
call into the application via web services
API to draw on data and services
• The processes of building and running the
application itself is solely done by a
developer who possesses both technical
expertise and financial resources.
3 LEVELS OF
PLATFORM
Level 2 – Plug-in API (Application Programming
Interface)
• 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 user interfaces
• Non-internet example: Photoshop
• Common Web sites that uses plug-in
API: YouTube, Flickr, Twitter,
Facebook, Google Maps
YouTube
• It is a Web site dedicated to hosting video clips.
• Users can create an account and upload videos for public or private
viewing
• An API tool is created to enable developers to embed the YouTube video
player and play any YouTube content on their Web sites
flickr
• It is a Web site that caters to the hosting of images
• Users of the site create a private account wherein they can upload images and
categorize the images as to whether they are viewed privately by the uploader or by
the public
• An API is created to enable a Web site developer to embed or use images on Flickr
• The image slide player API of Flickr can further organize the presentation of images
in a slide show
twitter
• It is a social networking service that enables the users to send and read short messages with
140 characters
• These short messages are called tweet
• Twitter APIs are used by developers to embed Twitter functions in developing Web sites
• Commonly, in using Twitter API, users can find a facility to create messages and tweet those
messages.
• Furthermore, there are Web sites using Twitter API to display information or message from a
certain user commonly governing those Twitter account
Facebook
• It is a social networking Web site that requires the user to register an account and create a
user profile
• A profile contains information about the owner of the account
• Different users can then connect with one another by adding them as friends
• Users are also capable of posting information on their wall or the page that contains users
information
• Users can post images, videos and Web site links on their wall
Facebook
• Facebook APIs are used to connect an individuals wall or an organizations
Facebook account so that the audience and users can easily access
Facebook services connected to a Facebook account
Google Maps
• Google Maps APIs are one of the most used APIs by Web site developers
• Google Maps APIs are used to indicate a location of an establishment
described on a Web site
• These APIs enable the developers to display an accurate map depicting the
satellite views or the actual appearance and layout of roads and buildings in a
particular area
3 LEVELS OF
PLATFORM
Level 3 – Runtime Environment
• Developer code is
uploaded and runs online
inside the core system
• Examples: Andreessens
own Ning and
Salesforce.com
Web Design
Principles and
Elements
• To create an effective Web site or
Remember
Web page, the designer of the
Web site must instill a number of
pointers
• The designer should also make
the Web site eye-catching
• The Web site should make
visitors curious so that the
information presented on the
Web site is widely disseminated
Yato supremacy !!!! T///T
WEB DESIGN PRINCIPLES AND ELEMENTS
Our work is the presentation of our capabilities
—— from EDWARD GIBBON
• Purpose • Images
• Communication • Navigation
• Typefaces • Layouts
• Colors • Load Time
A Web site can be categorized
primarily in terms of the goal it aims
to fulfill
PURPOSE
Web sites can be categorized into
different types and functions
depending on the purpose they serve
In creating Web page, the
the user or audience designer should define first the
purpose of the Web page to
determine the theme of the site
This will help the developer
Web site visitors may want to look for create a more organized and
information, be entertained, play relevant site
games, socialize or transact
business
COMMUNICATION
When we visit a Web site, the primary objective is to absorb as much valuable
information as possible in the shortest amount of time
The information or text on a Web page should be concise and direct to the point
• The arrangement of the • Use headings, sub • Outlining will also avoid
text should be organized headings and bullets long fuzzy sentences
in manner that would
entice readers
TYPEFACES
• This is an essential factor in Web site design because this is considered the most dominant and
noticeable in terms of visuals
• It deals with text format, text style and text.
• The appearance of the text can greatly contribute to the perception of the visitors to the Web site
• Academic Web sites will use simple typefaces, whereas those that deal with entertainment will use
fancy and artistic typefaces
COLORS
• These enhance the experience of visitors of the Web site
• The appropriate combination of the foreground color and
background color can produce a better viewing experience
not only in the images and pictures but also in the texts
• Colors can introduce a mood or make the Web site lively
and enticing for viewers
• Colors can introduce the perception of a modern or classic
look on the Web site
• Border colors of images or button colors can define the
mood that the Web site reflects
IMAGES
• Images alone placed on the Web site can deliver a complete
message that the Web site wishes to communicate to the
audience
• Choosing the correct images can connect the Web site to
viewers of the audience effectively
• The most commonly used images are infographics
• Images with proper balance, color and contrast accompanied by
texts can deliver great impact and information to the audience
• The ratio of the size of the image with respect to the Web page and
text can also contribute to its impact on the site visitors
NAVIGATION
• It refers to the facility that the audience can use
to go through the Web site and its subpages
• There are several ways on how to create an
effective and good navigation system on the Web
site:
• Hierarchical organization of information so that
users can logically anticipate the location of
information
NAVIGATION
• Placing the buttons or links to direct the audience
to a specific page or location on the Web site
• Use of search bars to enable the audience to
type key words and phrases
NAVIGATION
• Whatever method is chosen for navigation, the
three-click rule should be followed wherein the user
should find the prospect information within three
mouse clicks
LAYOUT
• It refers to the physical
arrangement of the
content and elements on
a Web site
Possible Layouts
• Grid
• F-Pattern
• Mobile
POSSIBLE
LAYOUT
Grid
• It can be useful because they will
enable the user to create sections or
groups of related information
• Information can be arranged in
columns and group boxes that can be
placed anywhere on the Web site
• This will help in creating an eye-
soothing arrangement of texts and
photos
POSSIBLE
LAYOUT
F-Pattern
• Placing more
information at the top
and left part of the
screen
POSSIBLE
LAYOUT
Mobile
• Place the majority of the Web
site elements, especially the
important ones at the middle of
the Web page
LOAD TIME
• It is the time that the Web site will load or appear onto the viewers display
device
• If the Web site takes some time to load, most especially if there are too
much content, the user will most likely search for another source
• It is best to minimize the elements in a Web page and remove the elements
that are not important in delivering the information
• Optimize the size and resolution of the images
THANKS FOR
YOUR
ATTENTION
Prepared by E-Teach Subject Teachers
AY 2020-2021
St. Anthony’s College, San Jose, Antique
