Trixie Banal

Module 4 Lesson 1: Online Platforms

Online platforms or online website created to aid users in creating their web content and cater to different kinds of information
such as texts, images, and videos. Another unique feature of online platforms is the ability to program, modify, and access
the application remotely using the internet.

Types of Online Networking Platforms

A diverse range of websites has been created for a variety of reasons and purposes on the internet. Some of these
websites have the capacity to store a big database with millions of subscribers. Social media websites are examples of
such networks. Users usually check out VPNs because these sites include a lot of sensitive information.

There are also other sorts of internet networks that do not rely on subscriptions to generate traffic. Blogging, photo sharing,
video sharing, online books/libraries, and social discussion sites are some other examples. Let's take a closer look at what these
types of internet networks can accomplish.

1. Social Networks
In a nutshell, the objective of a social networking site is to provide a platform for users to communicate with people from all
over the world. Facebook and Twitter are two popular social media platforms. These social networking services allow users to
share, post, and comment to other users' content, which can range from blog posts to images and videos.

2. Blogging

Blogging sites provide users with a social media platform where they may only post and write blogs. The features of this type of
site enable users to get the most out of their SEO efforts and to reach a larger audience than their current readership and skills
allow. Tumblr and Medium are two popular blogging platforms.

3. Photo Sharing
Sharing media information, such as images, has grown extremely popular since the digital era began. Engaging in internet
communication has greatly expanded our options by providing us with the ability to transmit and receive visual content. Instagram
and Snapchat are the most popular of these services, which focus solely on visual material and allow users to communicate
photographs to one another or post them to their profiles for public viewing.
4. Video Sharing

It is undeniable that, as technology advances, we now have gadgets that allow us to capture and record visual content such as
videos. Trends that contain videos have a greater chance of going viral and reaching a larger audience. Youtube and Vimeo are two
well-known examples of video-sharing websites. These websites provide users with a platform to submit videos and share them
openly with other people all over the world.

5. Social Discussions and forums

Some of the most popular websites nowadays are community or social discussion forums. These social networking sites
allow users to ask questions and receive replies from all of the site's subscribers. Audiences can gain insight into what's on other
people's minds and use what they learn for inspiration and fresh content for their own purposes. Reddit and Yahoo! Answers are
two popular instances of social discussion forums.

Lesson 2: Basic Web Design Principles and Elements

Web design is a concept of planning, creating, and maintaining websites. The very process of using creativity to design and
construct a website and updating it regularly to incorporate changes is also referred to as web designing. Besides the creation and
updating, this concept also involves taking care of the user interface, the architecture of information present, the layout, the colors,
content, navigation ergonomics, as well as the designs of the various icons. Some other areas in web design include search engine
optimization, user experience designs, standardized codes, graphic design, as well as interface design.

Lesson 2: Basic Web Design Principles and Elements

1
Basics Elements of a Website

Header
The topmost (top) portion of a webpage is known as the header. The header is a vital element because it is the region that
people see before scrolling the page in their initial seconds on the website. The header is supposed to convey the website's primary
navigation so that users can scan it in seconds and get to the important pages that can benefit them. Headers are also known as
site menus, and they are used as part of the principal navigation on a website.

Headers can incorporate a variety of useful layout features, such as:

 A logo is usually one of the most basic parts of a brand's identity.

 a button that prompts you to take action
 links to fundamental website content categories
 social media connections
 contact information for the most part (telephone number, e-mail address, etc.)
 In the case of a multilingual interface, a language changer is available.
 field for searching
 box or button for subscription
 Links to product engagement, such as a trial version, downloading from the AppStore, and so on.

This does not imply that all of the items listed above should be contained in a single web page header: in this case, the
header section would be overburdened with data. The more objects that draw the user's attention, the more difficult it is to focus on
the important ones. Designers decide on the strategically significant options based on design tasks, often in collaboration with
marketing specialists, and pick them from the list or add them to the mix.

CTA Button
A call-to-action (CTA) button is a user interface element that encourages a user to perform a certain action. This action
displays the conversion for a certain page or screen (for example, buy, contact, subscribe, etc.). To put it another way, it transforms
a passive user into a proactive one. So, technically, any form of button that supports a call-to-action text can be used. Because of its
engaging character, this style of button stands out among all the other buttons on the page or screen: it must grab users' attention
and encourage them to take the desired action.

Effective call-to-action buttons are easy to notice; designers purposefully build them so that website users can see and
respond to them in a matter of seconds. That's why they're usually big buttons with microcopy (like "Learn more" or "Buy it now")
that explains the page's main action and encourages users to take it. Visitors are more likely to read the information quickly and
leave it untouched if CTA buttons are not well defined and draw attention.

Hero Section
The above-the-fold (pre-scroll) area of the web page contains the element that presents the strong visual hook: a hero image,
slider, catchy piece of typography, video, or anything else attracting visitors' attention and transferring a needed message. Make no
mistake, the term doesn't require that all images of this kind include a human, animal, mascot, or any other kind of character.

What is the definition of a hero image?

A big eye-catching image that is frequently displayed in the above-the-fold zone of the webpage just below the website header
is referred to as a "hero image" in web design. The core notion is covered by this simple scheme from Balsamiq.

2
Footer
The footer is the lower (bottom) portion of a web page that usually signals the conclusion of it. The footer, as another common
zone of global website navigation, provides an additional place for relevant links and data that users may be looking for.

Footers can include the following:

 Signs of a company's or product's brand identification, which commonly include the company's or product's name and
logo.
 Links to user assistance pages, such as the FAQ page, the About page, the Privacy Policy, the Terms and Conditions,
and the Support Team, among others.
 creators of the website
 Information and contact forms
 connections to social media profiles for a corporation or a product
 badges and testimonies
 Signs of certification
 box or a button for subscription

Slider
A slider is an interactive element that uses a slideshow or carousel-style to promote different products, deals, and so on. It's
very popular for presenting a sort of gallery of items or services on e-commerce and company websites.

Sliders have divisive interactive components that are frequently the subject of heated disputes. Among the advantages, we can
point to the following:

 conserving page space

 user participation
 visually appealing hook

Search
Internal search is a feature that allows a visitor to search the information on the website and displays it based on the search
query. When properly tuned, it displays relevant content, providing a shortcut to what the user requires. As a result, the internal
search saves the user time and effort, improves the digital product's usability and appeal, aids user retention, and boosts conversion
rates. A search field, often known as a search box or search bar, is the interactive element responsible for internal search in the
user interface: it allows a user to write in a search query and, in this way, retrieve the bits of content that are required.

Menu
In user interfaces, the menu is one of the most important navigation elements. It is a graphical control that displays the
interface's interaction possibilities. In essence, it can be a list of commands — in this instance, alternatives will be provided with
verbs indicating probable actions such as "save," "delete," "purchase," "send," and so on. A menu can also show the categories in
which the material in the provided interface is structured, and this is a good moment to use nouns to mark them.

Menus can be arranged vertically or horizontally. The following are some of the most common types found on various websites:

 Horizontal menu: the most frequent and well-known style of menu, which displays the main navigation as a horizontal
line in the website header, as described above
 Sidebar menu: this kind, which is relatively traditional, displays a vertical list of alternatives on the left or right side of the
web page.
 Dropdown menu: a more complicated sort of menu for content-heavy websites; when the primary menu item is clicked or
lingered over, a list of supplementary options appears below it. Another similar option is a dropdown menu, which appears
when the list opens up rather than down, but the concept is the same.
 Megamenu: this is a sophisticated expanding menu in which a large list of many alternatives is shown in a two-
dimensional dropdown structure; this approach works well in situations where there are many possibilities.

3
  Hamburger menu: The menu expands when the hamburger button (usually indicated with three horizontal lines) is
clicked. This is a space-saving option that is frequently used on mobile versions of websites.

Breadcrumbs
Breadcrumbs are navigation features that help visitors navigae their way through a website: they can see where they are on
the site and become more familiar with the layout. So, while breadcrumbs provide a tool for improved wayfinding, they do not
replace the primary navigation menu; rather, they provide a secondary level of navigation and improve website usability if the
website has many pages.

Level

Types of Breadcrumbs

 Location-based
 Attribute-based
 Path-based

The following are some of the advantages of breadcrumbs:

1. breadcrumbs give consumers another way to interact with the information and help them understand the website's
structure.
2. Breadcrumbs allow website visitors to bounce from one level of the hierarchy to any previous step with minimal effort and
without having to go all the way back.
3. breadcrumbs take a narrow horizontal line with plain-looking text pieces that don't require much room if they're well-
crafted.
4. No misinterpretation: breadcrumbs are rarely misunderstood by users since the behavior pattern for them has developed
through time, and individuals rarely confuse them with anything else.
5. decreased bounce rate: breadcrumbs are wonderful help for first-time visitors or people who don't have much experience
dealing with complex websites; the more confident they are, the less likely they are to leave the page.

Form
A form is a user-interactive element that allows them to send data to a system or server. In a word, it's a digital version of any
genuine paper form we've have to fill out to provide someone the information they need; however, digital forms can have more
options and capabilities to make the process even more seamless, clear, and user-friendly. Users interact with forms frequently in
their digital life, starting with the process of registration, entering personal or financial details, making payments, submitting
comments, subscribing to a newsletter, and so on.

Forms must be incredibly simple and easy to use because they are the actual point of connection between the user and the
digital product. And the simpler the UI piece, the more thought and work designers should put into it, right? Make the data input logic
well-thought-out, the form navigation intuitive, and the number of required actions as low as possible. Don't forget to include visual
cues and tips to assist the user with the form filling process.

Cards
Cards, also known as tiles, are layout elements that aid in the organization and visualization of homogeneous data or material
in a scannable and intuitive manner. Cards are generally arranged in a grid, but in this method, each card appears to be an
independent piece. Different forms of content regarding a certain item can be combined into cards. A product preview card on a
catalog page, for example, could feature an image, a title, and the basic functionality of adding it to a shopping cart or saving it to a
wishlist, among other things.

4
Video
Although video is not a fundamental component of a web page, with the advancement of web development solutions and
technical capabilities, we are seeing it appear more frequently on websites of all types these days. A snappy video made with an
understanding of the target demographic, as described in the article about video content in UX design, is a tool for catching clients'
attention as well as a well-tested means of informing them swiftly and brilliantly. Video material activates many perception channels
– audio, visual, and motion – at the same time, and it usually does so while delivering a story. A strong, passionate, and memorable
video presentation is generally the result of a combination of things

Progress Indicator
A progress indicator is a modest but useful element that allows visitors to see where they are in the overall volume of content
or set of actions. It's useful on pages with a lot of text material that needs a lot of scrolling, such as long-read articles or manuals.
Users won't get lost as a result of this signal, and they'll be able to better predict the amount of time they'll need to read or browse.

Users can also use progress trackers to help them complete long and difficult forms or procedures that require a series of steps or
actions. Users get confidence after seeing what portion of the path has been covered and what lies ahead.

Favicon
Favicon, also known as URL icon or bookmark icon, is a unique form of symbol that appears in the URL line of the browser
and in the bookmark tab to symbolize a product or brand. It allows consumers to quickly establish a visual connection with it while
browsing. This interface element has proven to be effective in terms of website promotion and visual identity recognition. It makes a
significant contribution to online usability due to its modest size.

Tags
This is another type of secondary navigation level, which is used in blogs and websites with a lot of similar content. Tag is a
keyword or phrase that allows users to jump right to the objects that have been marked up with it. Tags are pieces of metadata that
offer easy access to specific content categories, so they help with navigation by providing another way of categorizing content.
Furthermore, because tags are frequently created by users, they serve as an alternative to the names of categories that are defined
by the website and cannot be changed by users.

Lesson 2: Basic Web Design Principles and Elements

PRINCIPLES OF GOOD WEBSITE DESIGN

An excellent website design should accomplish its goal of communicating a specific message while also engaging the visitor.
Consistency, colors, font, imagery, simplicity, and usefulness are all characteristics that contribute to successful website design.
There are several important elements to consider while developing a website that will influence how it is perceived. A well-designed
website can aid in the development of trust and the prompting of visitors to take action. Making ensuring your website design is
optimized for usability (form and aesthetics) and how easy it is to use is part of creating a great user experience (functionality

1. Website Purpose
The user's requirements must be met by your website. On all pages, having a straightforward, clear goal will assist the user in
interacting with what you have to offer. What exactly is the goal of your website? Are you disseminating useful knowledge in the
form of a 'How to guide'? Is this a website for amusement, such as sports coverage, or are you trying to sell a product to the user?
Websites can serve a variety of purposes, but there are a few that are common to all of them:

1. Expertise: Defining It
2. Developing Your Credibility
3. Obtaining Leads
4. After-Sales Service

2. Simplicity
When it comes to the user experience and usability of your website, simplicity is the way to go. Here are some design ideas
for achieving simplicity.

Color
Color has the ability to convey information and elicit emotional responses. Finding a color palette that is
appropriate for your business can allow you to impact client behavior. Keep the color palette to no more than
five hues. Complementary colors look great together. Color choices that are pleasing to the eye improve
consumer engagement and make the user feel happy.

Typography

5
 On your website, typography plays a crucial function. It catches the eye and serves as a visual representation of the brand's
voice. Typefaces should be readable, and only three different fonts should be used on the website.

Imagery
Every visual part of communication is referred to as imagery. Still photography, artwork, video, and all forms of graphics
are included. All images should be expressive, represent the company's attitude, and serve as an extension of their brand
personality. The majority of the information we consume on websites is visual, so it's critical to use high-quality photos as a
first impression to give visitors a sense of professionalism and credibility.

3. Navigation
On websites, navigation is a wayfinding system that allows users to engage and find what
they're looking for. The ability to navigate a website is crucial to retaining visitors. If the website
navigation is difficult to use, users will abandon the site and look for what they need elsewhere. It's critical to keep navigation clear,
intuitive, and consistent across all pages.

4. F-shaped pattern reading

The F-based pattern is the most popular approach for website users to scan material. According
to eye-tracking studies, the majority of what individuals see is on the top and left sides of the screen.
The F-shaped layout is modeled around our natural reading pattern in the West (left to right and top to
bottom). A well-designed website will make use of a reader's natural skimming habit.

5. Visual
Hierarchy
The arranging of things in order of importance is known as visual hierarchy. Size, color,
images, contrast, font, whitespace, texture, and style are all used to achieve this. Establishing a
focus point, which shows visitors where the most significant information is, is one of the most
important tasks of visual hierarchy.

6. Content
Both outstanding design and terrific content are required for a successful website. Great
content can attract and influence visitors, transforming them into clients, by using captivating
language.

7. Grid-based Layout
Grids aid in the structure of your design and the organization of
your information. The grid aids in the alignment of things on the page
and helps to keep it tidy. The grid-based layout organizes content into a
neat, rigid grid structure with columns and sections that line up, seem
balanced, and enforce order, resulting in a visually appealing website.

8. Load time
Visitors will leave if they have to wait for a website to load. Nearly half of web users anticipate a site to load in two seconds or
less, and they may abandon a site that takes more than three seconds to load. Increasing the size of your images will help your site

load faster.

9. Mobile friendly
People are increasingly using their phones or other gadgets to access the internet. It's critical to think about designing your
website with a responsive layout that adjusts to multiple screen sizes.

6
Lesson 3: Website Builders

To construct a basic and professional-looking website these days, you don't need to be a web developer with coding abilities and a
lot of time and money. Squarespace, Wix, Weebly, and other popular website builders make it simple for even a novice to create a
professional-looking website in a short amount of time, even if they require more advanced services like email marketing or an
eCommerce website.

The ideal website builder for you is determined by your individual requirements. Because there are so many possibilities, combing
through all of the free options for a simple website and all of the eCommerce website builders for a more sophisticated commercial
website can be intimidating. Because of the industry's complexity and growth, you have more options than ever before, and you can
simply locate the finest website builder for your goals and needs.

Free online Website Builders

What is a Website Builder, and how does it work?

A website builder is an internet platform that enables you to create websites without writing or editing code. Working with a
website builder is simple because they provide a what-you-see-is-what-you-get editing interface, which means that what you see
while changing your site is the same as what you would see if it were live and visited in a browser. Professionally designed website
templates, easy-to-use drag-and-drop editors, and 'on-board' hosting services are all included in the top website builders.

Building a website with a website builder platform is a viable solution for anyone who lacks coding skills. It's a step-by-step
procedure that requires you to:

1. Select a ready-made template.

2. To personalize and improve the operation of your site, add widgets and elements (such as a blog, social media buttons,
photo galleries, shopping cart)
3. Create and publish your website.

Features of a Website Builder

Most platforms provide the following typical website builder functionality. The amount of flexibility provided by each feature is
determined by the website builder and package you choose:

Templates
Hundreds of distinct, professionally designed templates, organized by business kind, are available from most site builders.
The template, once chosen, will serve as the foundation for your website's design, but it can be tweaked to suit your needs. Blank
canvas lay uts are also available from several website builders.

Customization

You can tweak your template, add or remove items, change colors and fonts, add pages, integrate applications and widgets,
and more with the best website builders. Some site builders also allow you to change the code of your site if you have web
programming experience.

Editor with drag-and-drop functionality

The drag-and-drop editor is what makes website builders so user-friendly; it allows you to pull elements from a 'element
library' (often a sidebar) and drop them exactly where you want them on the page.

SEO (Search Engine Optimization) software

Based on some basic input from you, most web builders take care of fundamental SEO settings like title tags and meta
descriptions. Additional SEO features, including as redirect management, sitemap development, and indexing settings, will be
available on the more advanced platforms.

Mobile responsiveness
The provided templates will, in most cases, be responsive, meaning they will alter their display to fit multiple screen sizes and
devices. The greatest website builders also let you edit your site's mobile version separately from the desktop version.

7
 Customer Service
To aid their users, most site builders provide an extensive knowledge base, video lessons, and instructions. You may
normally contact the platform's customer service center by email, chat, and/or phone once you've created an account.

Here are some of the best free website builders. Try to visit each site and learn more about what they offer.