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

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.

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.
 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 navigate 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.

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.

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).

Here are some suggestions to consider while planning your next web project.

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
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.