WEB DESIGN AND TECHNOLOGY

UNIT-1

INTRODUCTION TO WEB DESIGN

Introduction:-

Website-A website is a collection of web pages and related content that is

identified by a common domain name and published on at least one web server.
Websites are typically dedicated to a particular topic or purpose, such as news,
education, commerce, entertainment or social networking.

Web Design-
Web design refers to the design of websites. It usually refers to the user
experience aspects of website development rather than software development.
Web design used to be focused on designing websites for desktop browsers;
however, since the mid-2010s, design for mobile and tablet browsers has become
ever-increasingly important.

A web designer works on a website's appearance, layout, and, in some

cases, content.

Classification of Web Design-

1. World Wide Web (WWW).

The World Wide Web -- also known as the web, WWW or W3 -- refers to all
the public websites or pages that users can access on their local computers
and other devices through the internet. These pages and documents are
interconnected by means of hyperlinks that users click on for information. This
information can be in different formats, including text, images, audio and
video.
 2. Web Browser.

A software application used to access information on the World Wide Web

is called a Web Browser. When a user requests some information, the web
browser fetches the data from a web server and then displays the webpage
on the user’s screen.

3. Web Server.

A web server stores and delivers the content for a website – such as text,
images, video, and application data – to clients that request it. The most
common type of client is a web browser program, which requests data
from your website when a user clicks on a link or downloads a document on
a page displayed in the browser.

4. Web Pages.

A document which can be displayed in a web browser such as Firefox,

Google Chrome, Opera, Microsoft Edge, or Apple Safari. These are also often
called just "pages."

Web Development.

Web development refers to the creating, building, and maintaining of websites. It

includes aspects such as web design, web publishing, web programming, and
database management. It is the creation of an application that works over the
internet i.e. websites.

-------------------------------------------------------------------------------------------------------------

 WORLD WIDE WEB

The World Wide Web (WWW), often referred to simply as the web, has become
an integral part of our daily lives, transforming the way we access information,
communicate, and interact with the digital world. But have you ever wondered
how this vast network of interconnected websites, pages, and resources actually
works? In this article, we embark on a journey to explore the intricate
mechanisms that power the World Wide Web, uncovering the technologies,
protocols, and concepts that enable seamless navigation and information sharing
across the global digital landscape.

The World Wide Web -- also known as the web, WWW or W3 -- refers
to all the public websites or pages that users can access on their local
computers and other devices through the internet. These pages and
documents are interconnected by means of hyperlinks that users click
on for information. This information can be in different formats,
including text, images, audio and video.

What is WWW (World Wide Web)?

The World Wide Web (WWW), commonly referred to as the web, is a

vast and interconnected network of digital information that is
accessible through the internet. It consists of a collection of web pages,
documents, multimedia content, and resources linked together using
hyperlinks. The web allows users to access, share, and interact with a
diverse range of content, including text, images, videos, audio, and
interactive applications.

Working of WWW:

The foundation of the World Wide Web relies on an assortment of

distinct technologies, encompassing Web browsers, Hypertext Markup
Language (HTML), and Hypertext Transfer Protocol (HTTP).

A Web browser serves as the gateway to access web pages, functioning

as software that renders text, data, images, animations, and videos
from the Internet. These programs enable the exploration of
hyperlinked resources found on the World Wide Web through the
interfaces they provide. While initially, Web browsers were primarily
employed for web browsing, their scope has significantly expanded.
They now serve as versatile tools that cater to a variety of tasks,
 including conducting searches, email communication, file transfers, and
more. Among the widely utilized browsers are Internet Explorer, Opera
Mini, and Google Chrome.

Features of WWW:
 HyperText Information System
 Cross-Platform
 Distributed
 Open Standards and Open Source
 Uses Web Browsers to provide a single interface for many services
 Dynamic, Interactive and Evolving.
 “Web 2.0”

Components of the Web

The components of the web include:
1. Web Pages: These are individual documents containing content such as text,
images, videos, and interactive elements. Web pages are the building blocks of
websites and are accessed using web browsers.
2. Websites: Websites are collections of interconnected web pages that are
hosted on web servers. They are organized to provide information, services, or
resources to users.
3. Hyperlinks: Hyperlinks, or links, are clickable elements within web content that
allow users to navigate from one web page to another or to access different types
of resources.
4. Uniform Resource Locator (URL): URLs are web addresses that specify the
location of a resource on the web. They consist of a protocol (e.g., http, https), a
domain name, and a path to the resource.
5. Web Browsers: Web browsers are software applications that enable users to
access and view web pages. They interpret HTML and other web technologies to
display content in a user-friendly format.
6. Web Servers: Web servers store and deliver web content to users’ browsers
when requested. They process HTTP/HTTPS requests and respond with the
requested resources.
7. Web Development Technologies: Technologies like HTML, CSS, and JavaScript
are used to create and enhance web pages. HTML structures content, CSS styles
its appearance, and JavaScript adds interactivity.
8. HyperText Transfer Protocol (HTTP) and HTTPS: HTTP is the protocol for
transferring data between web browsers and servers. HTTPS is a secure version
that encrypts data to enhance security.
9. Search Engines: Search engines index web content, making it searchable and
discoverable. They provide users with relevant search results based on queries.
10. Social Media and Interactive Platforms: The web hosts social media networks
and platforms that enable users to connect, communicate, and collaborate.
11. E-Commerce and Online Services: E-commerce platforms facilitate online
shopping and transactions, while various online services offer resources, tools,
and information.

Introduction to HTML

HTML stands for Hyper Text Markup Language. It is the standard markup
language used to create web pages. HTML is a combination of Hypertext and
Markup language. Hypertext defines the link between web pages. A markup
language is used to define the text document within the tag to define the
structure of web pages.
This language is used to annotate (make notes for the computer) text so that a
machine can understand it and manipulate text accordingly. Most markup
languages (e.g. HTML) are human-readable. The language uses tags to define
what manipulation has to be done on the text.

What is HTML?
HTML stands for Hyper Text Markup Language and it is used to create webpages.
It uses HTML tags and attributes to describe the structure and formatting of a
web page.
What is HTML?
HTML stands for Hyper Text Markup Language and it is used to create webpages.
It uses HTML tags and attributes to describe the structure and formatting of a
web page.
HTML Example

<! DOCTYPE html>

<html>
<head>
<title>First HTML Code<title>
</head>
<body>
<h1>Welcome to our page<h1>
<p> Hello everyone</p>
</body>
</html>

 WEB BROWSERS
Web Browser Definition: A software application used to access information
on the World Wide Web is called a Web Browser. When a user requests
some information, the web browser fetches the data from a web server
and then displays the webpage on the user’s screen.

History of Web Browser

Today web browsers are easily accessible and can be used on devices like
computer, laptops, mobile phones, etc. but this evolution of making browsers
available for easy use took many years.

Given below are some salient points which one must know with regard to the
history of web browsers:

 “WorldWideWeb” was the first web browser created by Tim Berners Lee in
1990. This is completely different from the World Wide Web we use today
 In 1993, the “Mosaic” web browser was released. It had the feature of
adding images and an innovative graphical interface. It was the “the world’s
first popular browser”
  After this, in 1994, Marc Andreessen (leader of Mosaic Team) started
working on a new web browser, which was released and was
named “Netscape Navigator”
 In 1995, “Internet Explorer” was launched by Microsoft. It soon overtook as
the most popular web browser
 In 2002, “Mozilla Firefox” was introduced which was equally as competent
as Internet Explorer
 Apple too launched a web browser in the year 2003 and named it “Safari”.
This browser is commonly used in Apple devices only and not popular with
other devices
 Finally, in the year 2008, Google released “Chrome” and within a time span
of 3 years it took over all the other existing browsers and is one of the most
commonly used web browsers across the world
For those who are willing to know more about the Internet, can visit the linked
article.

Functions of Web Browser

Our dependency on the Internet has massively increased. Stated below are
functions of web browsers and how are they useful:

 The main function is to retrieve information from the World Wide Web and
making it available for users
 Visiting any website can be done using a web browser. When a URL is
entered in a browser, the web server takes us to that website
 To run Java applets and flash content, plugins are available on the web
browser
 It makes Internet surfing easy as once we reach a website we can easily
check the hyperlinks and get more and more useful data online
 Browsers user internal cache which gets stored and the user can open the
same webpage time and again without losing extra data
 Multiple webpages can be opened at the same time on a web browser
 Options like back, forward, reload, stop reload, home, etc. are available on
these web browsers, which make using them easy and convenient
Types of Web Browser
The functions of all web browsers are the same. Thus, more than the different
types there are different web browsers which have been used over the years.

Discussed below are different web browser examples and their specific features:

1. WorldWideWeb

 The first web browser ever

 Launched in 1990
 It was later named “Nexus” to avoid any confusion with the World Wide
Web
 Had the very basic features and less interactive in terms of graphical
interface
 Did not have the feature of bookmark
2. Mosaic

 It was launched in 1993

 The second web browser which was launched
 Had a better graphical interface. Images, text and graphics could all be
integrated
 It was developed at the National Center for Supercomputing Applications
 The team which was responsible for creating Mosaic was lead by Marc
Andreessen
 It was named “the world’s first popular browser”
3. Netscape Navigator

 It was released in 1994

 In the 1990s, it was the dominant browser in terms of usage share
 More versions of this browser were launched by Netscape
 It had an advanced licensing scheme and allowed free usage for non-
commercial purposes
4. Internet Explorer
  It was launched in 1995 by Microsoft
 By 2003, it has attained almost 95% of usage share and had become the
most popular browsers of all
 Close to 10 versions of Internet Explorer were released by Microsoft and
were updated gradually
 It was included in the Microsoft Windows operating system
 In 2015, it was replaced with “Microsoft Edge”, as it became the default
browser on Windows 10
5. Firefox

 It was introduced in 2002 and was developed by Mozilla Foundation

 Firefox overtook the usage share from Internet Explorer and became the
dominant browser during 2003-04
 Location-aware browsing was made available with Firefox
 This browser was also made available for mobile phones, tablets, etc.
6. Google Chrome

 It was launched in 2008 by Google

 It is a cross-platform web browser
 Multiple features from old browsers were amalgamated to form better and
newer features
 To save computers from malware, Google developed the ad-blocking
feature to keep the user data safe and secure
 Incognito mode is provided where private searching is available where no
cookies or history is saved
 Till date, it has the best user interface
Apart from these, Opera Mini web browser was introduced in 2005 which was
specially designed for mobile users. Before the mobile version, the computer
version “Opera” was also released in 1995. It supported a decent user interface
and was developed by Opera Software.

 WEB SERVERS
Web Server: Web server is a program which processes the network
requests of the users and serves them with files that create web pages.
This exchange takes place using Hypertext Transfer Protocol (HTTP).
Basically, web servers are computers used to store HTTP files which
makes a website and when a client requests a certain website, it delivers
the requested website to the client.

Types of Web Server

Apache HTTP server: It is the most popular web server and about 60
percent of the world’s web server machines run this web server. The
Apache HTTP web server was developed by the Apache Software
Foundation. It is an open-source software which means that we can access
and make changes to its code and mold it according to our preference.
The Apache Web Server can be installed and operated easily on almost all
operating systems like Linux, MacOS, Windows, etc.
Microsoft Internet Information Services (IIS): IIS (Internet Information
Services) is a high performing web server developed by Microsoft. It is
strongly united with the operating system and is therefore relatively
easier to administer. It is developed by Microsoft, it has a good customer
support system which is easier to access if we encounter any issue with
the server. It has all the features of the Apache HTTP Server except that it
is not an open-source software and therefore its code is inaccessible
which means that we cannot make changes in the code to suit our needs.
It can be easily installed in any Windows device.
 Lighttpd: Lighttpd is pronounced as ‘Lightly’. It currently runs about 0.1
percent of the world’s websites. Lighttpd has a small CPU load and is
therefore comparatively easier to run. It has a low memory footprint and
hence in comparison to the other web servers, requires less memory
space to run which is always an advantage. It also has speed optimizations
which means that we can optimize or change its speed according to our
requirements. It is an open-source software which means that we can
access its code and add changes to it according to our needs and then
upload our own module (the changed code).

 IDENTIFY BASICS OF USABILITY

What — Definition of Usability

Usability is a quality attribute that assesses how easy user interfaces are to use.
The word "usability" also refers to methods for improving ease-of-use during the
design process.

Usability is defined by 5 quality components:

 Learnability: How easy is it for users to accomplish basic tasks the first time they
encounter the design?
 Efficiency: Once users have learned the design, how quickly can they perform
tasks?

 Memorability: When users return to the design after a period of not using it, how
easily can they reestablish proficiency?
 Errors: How many errors do users make, how severe are these errors, and how
easily can they recover from the errors?

 Satisfaction: How pleasant is it to use the design?

There are many other important quality attributes. A key one is utility, which
refers to the design's functionality: Does it do what users need?

Usability and utility are equally important and together determine whether
something is useful: It matters little that something is easy if it's not what you
want. It's also no good if the system can hypothetically do what you want, but you
can't make it happen because the user interface is too difficult. To study a
design's utility, you can use the same user research methods that improve
usability.

 Definition of Utility = whether it provides the features you need.

 Definition of Usability = how easy & pleasant these features are to use.

 Definition of Useful = usability + utility.

Why Usability Is Important

On the Web, usability is a necessary condition for survival. If a website is difficult

to use, people leave. If the homepage fails to clearly state what a company offers
and what users can do on the site, people leave. If users get lost on a website,
they leave. If a website's information is hard to read or doesn't answer users' key
questions, they leave. Note a pattern here? There's no such thing as a user
reading a website manual or otherwise spending much time trying to figure out
an interface. There are plenty of other websites available; leaving is the first line
of defense when users encounter a difficulty.

The first law of ecommerce is that if users cannot find the product, they
cannot buy it either.

For intranets, usability is a matter of employee productivity. Time users waste

being lost on your intranet or pondering difficult instructions is money you waste
by paying them to be at work without getting work done.

Current best practices call for spending about 10% of a design project's
budget on usability. On average, this will more than double a website's desired
quality metrics (yielding an improvement score of 2.6) and slightly less than
double an intranet's quality metrics. For software and physical products, the
improvements are typically smaller — but still substantial — when you emphasize
usability in the design process.

For internal design projects, think of doubling usability as cutting training budgets
in half and doubling the number of transactions employees perform per hour. For
external designs, think of doubling sales, doubling the number of registered users
or customer leads, or doubling whatever other KPI (key performance indicator)
motivated your design project.
 How to Improve Usability

There are many methods for studying usability, but the most basic and useful
is user testing, which has 3 components:

 Get hold of some representative users, such as customers for an ecommerce site
or employees for an intranet (in the latter case, they should work outside your
department).
 Ask the users to perform representative tasks with the design.

 Observe what the users do, where they succeed, and where they have difficulties
with the user interface. Shut up and let the users do the talking.

It's important to test users individually and let them solve any problems on their
own. If you help them or direct their attention to any particular part of the screen,
you have contaminated the test results.

To identify a design's most important usability problems, testing 5 users is

typically enough. Rather than run a big, expensive study, it's a better use of
resources to run many small tests and revise the design between each one so you
can fix the usability flaws as you identify them. Iterative design is the best way to
increase the quality of user experience. The more versions and interface ideas you
test with users, the better.

User testing is different from focus groups, which are a poor way of evaluating
design usability. Focus groups have a place in market research, but to evaluate
interaction designs you must closely observe individual users as they perform
tasks with the user interface. Listening to what people say is misleading; you have
to watch what they actually do.

 IDENTIFY GOOD WEB DESIGN

An effective website design should fulfil its intended function by conveying its
particular message whilst simultaneously engaging the visitor. Several factors
such as consistency, colours, typography, imagery, simplicity, and functionality
contribute to good website design.

When designing a website there are many key factors that will contribute to
how it is perceived. A well-designed website can help build trust and guide
visitors to take action. Creating a great user experience involves making sure
your website design is optimized for usability (form and aesthetics) and how
easy is it to use (functionality).

Keep in mind some points while designing website

1. Website purpose.
2. Simplicity.
3. Navigation.
4. F-shaped pattern reading.
5. Visual Hierarchy
6. Content.
7. Load time.

1. WEBSITE PURPOSE
Your website needs to accommodate the needs of the user. Having a simple clear
intention on all pages will help the user interact with what you have to offer.
What is the purpose of your website? Are you imparting practical information like
a ‘How to guide’? Is it an entertainment website like sports coverage or are you
selling a product to the user? There are many different purposes that websites
may have but there are core purposes common to all websites;
1. Describing Expertise
2. Building Your Reputation
3. Generating Leads
4. Sales and After Care
2. SIMPLICITY
Simplicity is the best way to go when considering the user experience and the
usability of your website. Below are ways to achieve simplicity through design.

1. Color
2. Type
3. Imagery

3. NAVIGATION
Navigation is the wayfinding system used on websites where visitors interact and
find what they are looking for. Website navigation is key to retaining visitors. If
the website navigation is confusing visitors will give up and find what they need
elsewhere. Keeping navigation simple, intuitive and consistent on every page is
key.
4. F-SHAPED PATTERN READING
The F- based pattern is the most common way visitors scan text on a website. Eye-
tracking studies have found that most of what people see is in the top and left
areas of the screen. The F shaped layout mimics our natural pattern of reading in
the West (left to right and top to bottom). An effectively designed website will
work with a reader’s natural pattern of scanning the page.
5. VISUAL HIERARCHY
Visual hierarchy is the arrangement of elements in order of importance. This is
done either by size, colour, imagery, contrast, typography, whitespace, texture
and style. One of the most important functions of visual hierarchy is to establish a
focal point; this shows visitors where the most important information is.
6. CONTENT
An effective website has both great design and great content. Using compelling
language great content can attract and influence visitors by converting them into
customers.
8. LOAD TIME
Waiting for a website to load will lose visitors. Nearly half of web visitors expect a
site to load in 2 seconds or less and they will potentially leave a site that isn’t
loaded within 3 seconds. Optimising image sizes will help load your site faster.

What is Web Accessibility

Web accessibility means that websites, tools, and technologies are designed and
developed so that people with disabilities can use them. More specifically, people
can:

 perceive, understand, navigate, and interact with the Web

 contribute to the Web

Web accessibility encompasses all disabilities that affect access to the Web,
including:

 auditory
 cognitive
 neurological
 physical
 speech
 visual

Web accessibility also benefits people without disabilities, for example:

 people using mobile phones, smart watches, smart TVs, and other devices
with small screens, different input modes, etc.
 older people with changing abilities due to ageing
 people with “temporary disabilities” such as a broken arm or lost glasses
 people with “situational limitations” such as in bright sunlight or in an
environment where they cannot listen to audio
  people using a slow Internet connection, or who have limited or expensive
bandwidth

Evaluating Accessibility

When developing or redesigning a website, evaluate accessibility early and

throughout the development process to identify accessibility problems early,
when it is easier to address them. Simple steps, such as changing settings in a
browser, can help you evaluate some aspects of accessibility. Comprehensive
evaluation to determine if a website meets all accessibility guidelines takes more
effort.

There are evaluation tools that help with evaluation. However, no tool alone can
determine if a site meets accessibility guidelines. Knowledgeable human
evaluation is required to determine if a site is accessible.

DESIGN DRIVES ACTION AND ORGANIZES CONTENT

What is a content strategy for websites?

Website content strategy is the process of planning, creating, delivering, and

maintaining content to align with business goals.
A content strategy involves understanding the needs and behaviors of the target
audience. This is easier when it’s focused on identifying key performance
indicators (KPIs) and goals. And then determining what types of content will be
most effective in achieving them.
1) Define the target audience
The target audience for this company is homeowners interested in renovating
their homes.
2) Determine the primary content goals
The website’s primary goal is to educate homeowners about the renovation
process. It would also showcase the company’s services and encourage visitors to
contact the company to request a consultation.
3) Identify the key topics
The key topics for the website will include home renovation trends and how to
choose the right contractor. The site would also cover the renovation process
(including timelines, costs, and potential challenges) and the company’s specific
services.
4) Plan the content calendar
The content calendar will include weekly blog posts, quarterly e-books, and
monthly newsletters. Each piece of content connects to a specific topic and goal.
5) Establish the tone and voice
The tone and voice of the content will be educational, approachable, and
authoritative. The content will be written in a way that is easy for homeowners to
understand. While still demonstrating the company’s expertise.
6) Decide on content formats
You present the content in a variety of formats, including written blog posts,
video tutorials, and infographics.
7) Develop a plan for promoting the content
The marketing team promotes the content through social media, email
marketing, and search engine optimization (SEO) strategies.
8) Evaluate and adjust the strategy
The content strategy will be regularly evaluated based on the KPIs (such as
website traffic, engagement, and conversion rates). Then it will get adjusted as
needed to improve results.

How to write compelling web content

Writing compelling web content is essential for engaging your audience and
achieving your business goals.
Here are some tips on how to write effective web content:
Know your audience
Before you start writing, you must understand your target audience and what
they seek. What are their pain points, interests, and goals? What information or
solutions can you provide to help them?
Write clear and concise headlines
Your headline is the first thing your audience will see, so make it count. Use clear,
benefit-driven language to communicate the central message of your content and
entice readers to keep reading.
Use subheadings to break up text
Subheadings can help break up long blocks of text and make your content more
scannable. Use descriptive and benefit-driven language to clarify what each
section is about.
Keep it simple and focused
Write in a clear and straightforward way that is easy to understand. Avoid jargon
or technical language that may confuse or alienate your audience. Focus on the
main message and keep your content streamlined.
Use storytelling
People connect with stories, so consider using personal anecdotes or case studies
to make your content more engaging and relatable. Effective storytelling makes it
easier for customers to envision how your solution can meet their needs.
Incorporate visual elements
Adding relevant images, videos, or infographics can help break up text and make
your content more engaging. Visuals can also help communicate complex ideas in
a more accessible way.
Include calls-to-action (CTAs)
Every page should include a clear and prominent CTA that tells the reader what to
do next. Make sure your CTA is relevant to the content and provides value to the
reader. For some pages, it may be best to include multiple CTAs throughout the
copy. Perhaps one after each paragraph that discusses a feature of one of your
offerings.
Edit and proofread
Before publishing your content, make sure to edit and proofread it carefully.
Check for spelling and grammar errors, and ensure the content is well-structured
and easy to read.
 UNIT-2

WIREFRAME

A wireframe is a two-dimensional illustration of a page’s interface that specifically

focuses on space allocation and prioritization of content, functionalities available,
and intended behaviors. For these reasons, wireframes typically do not include
any styling, color, or graphics. Wireframes also help establish relationships
between a website’s various templates.

The Value of Wireframes

Wireframes serve multiple purposes by helping to:
 Connect the site’s information architecture to its visual design by showing
paths between pages
 Clarify consistent ways for displaying particular types of information on the
user interface
 Determine intended functionality in the interface

 Prioritize content through the determination of how much space to allocate to

a given item and where that item is located
Creating Wireframes
It’s important to keep in mind that wireframes are guides to where the major
navigation and content elements of your site are going to appear on the page.
Since the goal of the illustrations is not to depict visual design, keep it simple.
 Do not use colors. If you would typically use color to distinguish items, instead
rely on various gray tones to communicate the differences.
 Do not use images. Images distract from the task at hand. To indicate where
you intend to place an image and its size, you can instead use a rectangular
box sized to dimension with an “x” through it.
 Use only one generic font. Typography should not be a part of the
wireframing discussion. Within the wireframes, however, you may still resize
the font to indicate various headers and changes in the hierarchy of the text
information on the page.
Although wireframes differ from site to site, the following elements often are
included as standard elements on wireframes:
 Logo
 Search field
 Breadcrumb
 Headers, including page title as the H1 and subheads H2-Hx
 Navigation systems, including global navigation and local navigation
 Body content
 Share buttons
 Contact information
 Footer

Types of Wireframes
Wireframes can vary both in their production, from paper sketches to computer-
drawn images and in the amount of detail that they convey. Low and high-fidelity
are terms used to identify the level of wireframe production or functionality.
 Low-fidelity wireframes help facilitate project team communication and are
relatively quick to develop. They tend to be more abstract because they often
use simple images to block off space and implement mock content, or Latin
(lorem ipsum) text as filler for content and labels.
 High-fidelity wireframes are better for documentation because of their
increased level of detail. These wireframes often include information about
 each particular item on the page, including dimensions, behavior, and/ or
actions related to any interactive element.

Features of Wireframe
Understanding the 3 features of Wireframe helps you get a better idea of this kind
of diagram.

1. Wireframes are simple black and white layouts that outline the specific size and
location of page elements, site features, conversion areas and navigation for your
web site or UI.

2. They do not include color, font choices, logos or any real design elements that
take away from purely focusing on a site's structure.

3. We often say that wireframes are much like a blue print to a home. What we
see in them are the bones of a page - the very basic framework of how it will be
set up and how it works.

WEB ARCHITECTURE

What is Web Architecture?

Web architecture refers to the overall structure of a website or web application,
including the way it is designed, implemented, and deployed. It involves the use
of technologies and protocols such as HTML, CSS, JavaScript, and HTTP to build
and deliver web pages and applications to users.

Web architecture consists of several components, including the client, the

server, the network, and the database. The client is the web browser or
application that the user interacts with, and the server is the computer or group
of computers that host the website or web application. The network is the
infrastructure that connects the client and the server, such as the internet. The
database is a collection of data that is used to store and retrieve information for
the website or web application.

Web Architecture Components

There are several components that make up a web architecture −
The client −This is the web browser or application that the user interacts with.
The client sends requests to the server and receives responses from the server.
The server −This is the computer or group of computers that host the website or
web application. The server processes requests from the client and sends back
the appropriate response.

The network This is the infrastructure that connects the client and the server,
such as the internet. It allows for communication between the client and the
server.

The database −This is a collection of data that is used to store and retrieve
information for the website or web application. The database can be located on
the same server as the website or web application, or it can be hosted on a
separate server.
The design and layout −This refers to the way the website or web application is
structured and organized, including the layout, navigation, and overall
appearance.
The frameworks and libraries − These are tools and resources that are used to build
and maintain the website or web application. They can include frameworks like
Ruby on Rails or Django, or libraries like jQuery or React.
The deployment and hosting − This refers to the way the website or web application
is deployed and hosted, including the hosting environment (such as a shared
hosting plan or a cloud platform) and the process for deploying updates and
changes to the website or web application.

Why is Web Architecture Important?

Web architecture is important because it plays a crucial role in the performance,
scalability, and maintenance of a website or web application.

A well-designed web architecture can improve the user experience by ensuring

that the website or web application loads quickly and reliably. It can also make
the website or web application easier to maintain, as it provides a clear
structure and organization that makes it easier to find and modify different
components.
Web architecture is also important for scalability, as it determines the website
or web application's ability to handle increasing traffic and usage without
experiencing performance issues. A scalable web architecture can support
growth and handle changes in traffic patterns without requiring major changes
to the system.

WEB APPLICATION ARCHITECTURE

DNS- The Domain Name System (DNS) is the phonebook of the Internet. Humans
access information online through domain names, like nytimes.com or espn.com.
Web browsers interact through Internet Protocol (IP) addresses. DNS translates
domain names to IP addresses so browsers can load Internet resources.

Load balancer- Load balancing is the method of distributing network traffic

equally across a pool of resources that support an application. Modern
applications must process millions of users simultaneously and return the correct
text, videos, images, and other data to each user in a fast and reliable manner.

Web app server- A web server connects to the Internet and supports physical
data interchange with other devices connected to the web. On the software side,
a web server includes several parts that control how web users access hosted
files.

Database- It offers a big variety of instruments to perform, delete, organize, and

update computations.

Cashing service- Caching is the process of storing copies of files in a cache, or

temporary storage location, so that they can be accessed more quickly.
Technically, a cache is any temporary storage location for copies of files or data,
but the term is often used in reference to Internet technologies.

Full text service- Full text search is a powerful feature that allows you to perform
complex queries on text data stored in your database.

Services- Services will be built in a form of a separate application once the web
app attains a specific level.

Data warehouse- It is a way of storing and exchanging data online through the
internet.

CDN- CDN stands for content delivery system. The system sends
HTML/CSS/JavaScript files and images. Basically, it delivers content taken from
the end server around the globe so users can load sources.

IDENTIFY CLIENT REQUIREMENT

Clients expectations are directly tied to satisfaction and a projects success.

Setting Client Expectations in Web Design

1. Identify the type of client You are working with.

2. Establish the client’s Goals and Objectives for the project.

 3. Clearly Define Project Deliverables.

4. Create detail plan for completing Task.

5. Set Realistic Expectations and be transparent About What Can Be

Accomplished.

6. Establish Limits and Boundaries.

7. Conduct status Meetings.

8. Make Sure to Sign a Contract.

9. Be Clear on What Happens If Plans Change.

WEBSITE CONTENT

Website content is any written, audio, or visual content element on a website. It

can include blog posts, marketing copy, photos, logos, embedded videos,
podcasts, and any other creative elements on a site.

Website content can also combine mediums. A blog post might include text,
images, and an audio option to listen to the article. Single elements like
interactive infographics might also combine multiple elements. For example, an
interactive map of the US that populates with state-specific info when a user
hovers over an individual state might combine graphic design and text into a
single piece of web content.

Characteristics of good content

 Clear. Clarity is paramount. Confusing content frustrates readers and

discourages engagement with your site.
  Polished. Presenting clean, polished, and grammatically correct content can
increase trust—while spelling and grammar errors and typos can diminish
it.
 Digestible. Companies format website content for easy consumption on
digital platforms. Because many website visitors skim, content often
includes informative headers, bulleted lists, and short paragraphs to
provide value to readers who are in a rush or looking for a specific piece of
information.
 Valuable. Good website content delivers value—either educational or
entertainment. Educational content increases an audience’s knowledge
base in a particular area or helps the reader solve a specific problem, while
entertaining content moves or delights the reader

Types of Content for Web

1. Text

2. Images

3. Videos

4. Audios

5. Infographics

6. Calls to Action

7. Forms

8. Social media Links

9. Interactive Features.
 UNIT-3

WEB GRAPHICS

Graphic means any visual element represented by the computer. Web

Graphics are those graphics that are used in a website. These graphics can be
photos, videos, logos, banners, etc. Humans are more attracted to visual
elements rather than textual elements. So, to make a website more appealing
and user-friendly addition of web graphics is a necessity.

Elements of Web Graphics

There are many types of Web Graphics but let us understand only the most used
Web Graphics.

 Pictures: Pictures can convey information much faster and effectively than
text as the average person responds far better to visual information
compared to just plain text. Pictures are not only more effortless to recognize
and process than words but also easier to recall. There are many image
formats such as jpg/jpeg, png, etc.
 Videos: Video can be part of the website UI or be used to convey additional
information that can’t be conveyed using text or images. But videos can slow
down the site and take much more time to load than any other graphic so it’s
better to embed video from other platforms. Some video formats are mkv,
mp4, etc.
 Animations: We can use animations such as GIF in the website or code
directly in the site using CSS, JSS or any other technology. Animation can be
very helpful to boost the UI look and feel. Clever use of animation make the
user experience must better and worth remembering. Micro interactions are
commonly used animation in the websites.
 SVG (Scalable Vector Graphics) : One of the most popular format used in the
website to display icon or any scalable graphics. It is because the width and
 height of the graphic can be change to any size which is good for a responsive
design. If we want to make our page responsive then raster images should be
changes to SVG if possible.
 Logo: A SVG or image used in the sites to represent brand identity. A logo if
very important for the site because the user can forget the site name or URL
but most of the time user will remember the logo. It better to create a logo
that matches the site name or brand name.

JPG/JPEG (Joint Photographic Experts Group)

 JPGs are the gold standard when it comes to uploading photos to the web.
 These files are compressed, which allows for faster load times and smaller
document sizes. However, the compression does reduce the quality of
images, so there are some instances where a JPG might not cut it.
 Save images as a JPG when they have many different colors and details and
don’t need transparent backgrounds.
 Best use: JPGs are ideal for uploading photography or a digital
presentation.

PNG (Portable Network Graphics)

 PNGs are not terribly different from JPGs, but have one very important
distinction — they can be saved with transparent backgrounds.
 If you need to include a headshot, but don’t want the pesky white box
background, PNG is the way to go. Similar to JPGs, PNGs are also
compressed images, but they are considered “lossless” — meaning the
compression doesn’t reduce the quality.
 File sizes will be slightly larger, which is something to consider, but aren’t
typically large enough to clog up your site when used in moderation.
 Too many PNG files will inevitably slow down your website’s load time,
which will negatively affect SEO and cause impatient users to bounce.
 Best use: PNGs are ideal for smaller graphics and photos with transparent
backgrounds.

GIF (Graphic Interchange Format)

 Whether you pronounce it “Jif” or “Gif,” a GIF is a file format you’re likely
already familiar with.
  GIFs are capable of being animated, and support the amusing animated
loops we’ve become accustomed to encountering daily. Go ahead and hop
on Giphy.com to explore random GIFS to your heart’s content.
 GIFs use a more limited color palette than other photo formats, so you
shouldn’t use this format for a static photo.
 Best use: GIFs are ideal for animated loops.

SVG (Scalable Vector Graphic)

 SVG is a pretty unique file format. They allow for interactivity (think hover-
over effects), and are infinitely scalable without ever losing their sharpness.
 Look at this example of taking 100px wide version of Digital Ink’s logo in
various file types and then scaling it up to 500px.
 While the JPG and PNG are blurred terribly, the SVG is perfectly crisp.
 SVG files are made up of a code called XML, which translates the visual
elements into text. It may look like nonsense when you open it as a text
document, but this allows seamless integration into HTML code.
 Best use: SVGs are ideal for vector-based graphics, including your logo, any
icons, and infographics.

SAVING IMAGE FOR WEB

Saving images in the proper color space

There are two color spaces computers use to display images: RGB and CMYK.
RGB (red, green, blue) is the standard color space for digital devices. By default,
any image created by a camera or computer is saved in this color profile.
However, you may have images that are CMYK, a color profile used by printers.
Before using these images on the web, a program such as Adobe Photoshop can
convert the colors to RGB so your images are vivid and bright.
To convert a CMYK image to RGB, open the image in Adobe Photoshop. Go to
Image on your menu bar, and in the dropdown hover over Mode and select RGB
Color. This will convert the image to the RGB color space and you may notice
some colors are more vibrant. Next, go to File then Save As and save the file. Be
sure to change the file name so you or someone else knows it is a file for digital
applications.

Compress the file sizes

When saving images for the web, we recommend the file size should be less
than 2MB (2048 kilobytes) to maintain fast page loading speeds . That being
said, we also want images to be sharp and not pixelated.
Image quality is contingent on factors such as the final file size and compression
settings. With the right compression settings, you can achieve good image
quality and a small file size. Generally, you can save a file with an image
compression level between 70-80% without seeing pixelation, or the individual
points of color.
Note: The amount of compression will vary on a number of factors including the
original image’s file size and format. You can use a free tool such as Imagify to
further compress the file size.
Use the correct file format

There are four major file formats for saving out images and graphics for the
web: JPG, PNG, GIF and SVG. Each file format has its benefits, drawbacks and
intended use case.
Your image or graphic should be saved to a particular format based on if it’s a
raster or vector. Raster images are created with pixel-based programs or
captured with a camera or scanner. These images have a finite number of pixels
and can lose quality when scaled larger.
JPG, PNG and GIF are formats best suited for raster images. Vector graphics are
created with vector software and can be infinitely sized without losing quality.
SVG and GIF are best suited for vector images, while you can also save a vector
graphic as a JPG or PNG, however you lose the ability to scale your graphic
infinitely.

JPG

JPG or JPEG is the most common raster file format for images.
Pros
 Smallest file size
 Best for high quality photos

 Compatible on web and any device

Cons

 Image quality can be greatly reduced if compressed too much

 JPGs do not support transparent backgrounds

When to use JPG

JPGs are best for non-moving photos and other files that don’t require
transparent backgrounds. Avoid using JPGs on colored backgrounds.
 PNG

PNG is another common raster format that is more versatile than a JPG. PNG
can support more colors (over 16 million) and support transparent
backgrounds, or an alpha channel.
Pros

 Ability to have a transparent background for layering your image on colored

backgrounds

 Can be compressed without losing as much quality as a JPG

Cons
 File sizes tend to be larger than JPG

 Does not support animation

When to use PNG

PNGs are best for graphics with sharp edges, text graphics, logos, icons and
other designs. Use a PNG for graphics that need to be placed on non-white
backgrounds, such as all-white logos on a black background.

GIF
 GIF is a raster format that allows you to have animated images. Images are
sequenced on top of each other to create motion.
Pros

 Ability to create animated images and messages

 Supports transparent backgrounds

Cons

 Image quality and file size are tied to the number of colors. More colors in the
image will have a sharper image but larger file size. Less colors in the image will
have a grainier image but smaller file size.

 You’re limited to using an image with 256 colors.

When to use GIF

GIFs allow you to have the flexibility to display multiple images and interesting
transitions in the same graphic. However, avoid using photos and graphics with
many colors if you need a small file size.

SVG

that allows you to have sharp graphics and manipulatable objects on the web.
SVG can be created and edited in vector programs such as Adobe Illustrator or
Figma.
Pros

 Small file size

 Infinite sizing (vector) without losing quality
 Flexibility for developers (can change settings including color and size)
 Can be edited by in a vector program such as Adobe Illustrator
 Supported in Microsoft Office products for graphics

 Can be animated

Cons

 SVG files are not ideal for displaying high-quality digital photos
 Older browsers such as Internet Explorer cannot support SVG images

When to use SVG

SVG can be used for logos, icons, graphics and other illustrations used on the
web. Graphics can be stretched and compressed without compromising quality
and look great on mobile devices with high pixel density displays (see more
below).
4

 Export multiple sizes for high pixel density displays

As mobile devices have become the preferred device for users to view digital
content, they have higher resolution screens than the typical desktop
computer. These HiDPI, Retina or high density displays have more than 200
pixels per inch (PPI). The standard for web and most desktop computers is 72
PPI. If a user views a 72 PPI image on their mobile device versus a computer, it
will not look as crisp as an image saved out with more pixels.

COLOR THEORY

Color theory is the basis for the primary rules and guidelines that surround color
and its use in creating aesthetically pleasing visuals. By understanding color
theory basics, you can begin to parse the logical structure of color for yourself to
create and use color palettes more strategically. The result means evoking a
particular emotion, vibe, or aesthetic.
Color is an important aspect, if not the most important aspect of design, and can
influence the meaning of text, how users move around a particular layout, and
what they feel as they do so. By understanding color theory, you can be more
intentional in creating visuals that make an impact.

COLOR WHEEL
 color wheel is an illustrative tool used to help us define colors and their
relationships to one another, the first one was invented in 1666 by Sir Issac
Newton and several variations have been used since then.

Primary Color(Red, Blue, yellow)

These three primary colors are the foundation of the color wheel. They are called
the primary colors because their true color pigments cannot be created by mixing
any other combination of colors and all other colors in the color wheel are
derived from these three hues. When painting it is important to have a true red,
blue, and yellow to help you mix a variety of other colors.

Secondary Color(Violet, Orange and green)

 Secondary colors are created by mixing equal parts of two primary colors
together.

Red + Blue = Violet

Red + Yellow = Orange
Blue + Yellow = Green

TERTIARY COLORS: Blue-Violet, Red-Violet, Red-Orange, Yellow-Orange,

Yellow-Green, and Blue-Green
In total, there are six tertiary colors. Tertiary colors are created by mixing equal
parts of a primary and secondary color together.

Blue (primary) + Violet (secondary) = Blue-Violet

Red (primary) + Violet (secondary) = Red-Violet
Red (primary) + Orange (secondary) = Red-Orange
Yellow (primary) + Orange (secondary) = Yellow-Orange
 Yellow (primary) + Green (secondary) = Yellow-Green
Blue (primary) + Green (secondary) = Blue-Green

COLOR HARMONY

Color harmony is a basic color theory technique for combining colors. This
technique suggests potential relationships between colors that we can use to
convey our messages or create a particular universe. It’s essential to master it for
directing our art and expression meaningfully, creating pleasant aesthetics, and
achieving better artistic results.

Complementary colors: They establish a relationship, as its name indicates, of

complementarity. They are directly opposite on the wheel. They are visually
striking hues when combined but can also be discordant, so it is better to use
them sparingly, for example, to accentuate or highlight.

- Analogous colors: Analogous colors are found on both sides of the key color
around the color wheel. They usually represent color combinations that are found
in nature and are visually appeasing. Excessive use of analogous colors can make
your work appear monochromatic, so it is recommended to use them very
mindfully.

- Triads: Color triads, like primary colors, are spaced with some regularity around
the color wheel. This color scheme can be quite elegant if we choose one color
that dominates and use the others as accents. However, blindly relying on this
scheme can make the result confusing.

- Monochrome: This harmony is achieved by a single color and its different tones.
Monochrome relationships force us to play with shapes and textures more
creatively. The biggest challenge they present, according to the expert, is being
able to differentiate between them when putting together color schemes.

ELEMENTS OF DESIGN COMPOSITION

CONTRAST- Contrast is the difference in brightness, hue, saturation, or shape

between two or more elements in a design. Contrast can create emphasis,
hierarchy, interest, and mood in your design. For example, you can use contrast
to draw attention to a specific element, such as a headline, a logo, or a call to
action. You can also use contrast to create a sense of depth, dimension, or
movement in your design. For example, you can use contrast to create a 3D
effect, a shadow, or a gradient.

BALANCE

Balance is the distribution of visual weight or importance among the elements in

a design. Balance can create a sense of stability, harmony, or symmetry in your
design. For example, you can use balance to align the elements along a horizontal,
vertical, or diagonal axis. You can also use balance to create a focal point, a center
of interest, or a visual flow in your design. For example, you can use balance to
arrange the elements according to their size, shape, color, or position.
Kinds of balance
Symmetrical balance is when both sides of a composition have equal visual
weight. This creates a more formal or classic feel.
With this type of balance, you could draw a line through the middle of your design
and each side would be the same. In other words, each side is a mirror image of
the other.

Asymmetrical balance is when elements aren’t weighted equally. This adds visual
interest and is ideal for more modern or informal designs.
With this type of balance, the visual elements on either side of a composition
aren’t mirror images of each other.

Radial balance is when you distribute elements around a single point — usually
the center of a composition. This can help draw the viewer’s eyes to a key point.
With this type of balance, elements don’t have to be perfectly symmetrical, but
they may end up that way naturally since everything radiates out from one place.

2. Rule of Thirds

The rule of thirds is a type of composition in which an image is divided evenly into
thirds, both horizontally and vertically, and the subject of the image is placed at
the intersection of those dividing lines, or along one of the lines itself.

The rule of thirds is a composition guideline that places your subject in the left or
right third of an image, leaving the other two thirds more open. While there are
other forms of composition, the rule of thirds generally leads to compelling and
well-composed shots.
3. Emphasis

Emphasis is the part of the design that catches the viewer's attention. Usually the
artist will make one area stand out by contrasting it with other areas. The area
could be different in size, color, texture, shape, etc. Movement is the path the
viewer's eye takes through the work of art, often to focal areas.

4. Proximity

In graphic design, proximity is a principle of design that refers to the spatial

relationship between the elements of the design. The rules of proximity are pretty
simple: things that are related should be nearer to each other, and things that are
unrelated should be placed further from each other.
5. Pattern
Patterns are simply a repetition of more than one design element working in
concert with each other. A seamless pattern is one where every element within a
design (no matter how often it's repeated) combines to form a whole.

6. Line

Line forms a basic structural element of any composition. A line does not have to
be straight, it can be a curve, a zig zag, a diagonal, or any of the forms that line
can take. If you look closely, you will notice lines everywhere and which you can
make use of in your composition.

7. Shape
 A shape is a two- or three-dimensional object that stands out from the space
next to it because of a defined or implied boundary. A shape can live in different
areas in space, and have other elements like line, color, texture, or movement.
Like forms, shapes come in two different types: geometric and organic.

Geometric shapes can be drawn using a ruler, compass, or digital instrument

Organic shapes are found in nature or drawn by hand.

8. Unity

Unity is created when there is a relationship between the different elements in a

design or artwork. Unity adds order to a composition and helps us see it as one
thing instead of a number of separate parts.
There are a number of techniques that can be used to create unity:

 simplicity
 proximity
 repetition
 continuation

Although most artists and designers try to create a sense of unity in their work, it
is important that compositions are not so unified and similar that they seem
boring. There should be some variety within a piece of work.
.

Typography is the art of arranging letters and text in a way

that makes the copy legible, clear, and visually appealing to
the reader.

It involves font style, appearance, and structure, which aims to

elicit certain emotions and convey specific messages. In short,
typography is what brings the text to life.
Importance of typography

Typography builds brand recognition

Not only will good typography enhance the website’s personality, but your users
will subliminally begin to associate the typeface featured on your site with your
brand.

Unique, consistent typography will help you establish a strong user following,
build trust with your users, and help to carry your brand forward.

Typography influences decision-making

Typography has a profound effect on the way that users digest and perceive the
information conveyed by the text.

Eye-catching type is much more persuasive than weak fonts that don’t reinforce
the message of the text.

Typography holds the attention of the readers

Good typography could be the difference between someone staying on your

website for one minute or half an hour.

It’s important that your website is visually stimulating and memorable, and
typography plays a huge role in this process.

3. The different elements of typography

To get started in typography, you first need to get to grips with the eight essential
typographical design elements.
3.1. Fonts and typefaces

There’s some confusion surrounding the difference between typefaces and fonts,
with many treating the two as synonymous.

A typeface is a design style that comprises a myriad of characters of varying

sizes and weight, whereas a font is a graphical representation of a text
character.

Contrast

Much like hierarchy, contrast helps to convey which ideas or messages you want
to emphasize to your readers.

Spending some time on contrast makes your text interesting, meaningful, and
attention-grabbing. Most designers create contrast by playing around with
varying typefaces, colors, styles, and sizes to create impact and break up the
page.
3.3 Consistency

Keeping your typefaces consistent is key to avoiding a confusing and messy

interface.

When conveying information, it’s essential to stick to the same font style so your
readers instantly understand what they’re reading and begin to notice a pattern.

3.4 White space

Often referred to as “negative space,” white space is the space around text or
graphics.

It’s often overlooked and tends to go unnoticed by the user, but proper use of
white space ensures the interface is uncluttered and the text is readable.

White space can even draw attention to the text and provide an aesthetically
pleasing experience. White space often takes the form of margins, padding, or
just areas with no text or graphics.
3.5 Alignment

Alignment is the process of unifying and composing text, graphics, and images to
ensure equal space, size, and distance between each element.

Many UI designers create margins to ensure that their logo, header, and body of
the text are aligned with each other.

When aligning your user interface, it’s good practice to pay attention to industry
standards. For example, aligning your text to the right will seem counterintuitive
for readers who read left to right.

3.6 Color

Color is one of the most exciting elements of typography. This is where designers
can really get creative and elevate the interface to a new level.

Text color, however, is not to be taken lightly: nailing your font color can make
the text stand out and convey the tone of the message—but getting it wrong can
result in a messy interface and text that clashes with the site colors.
Color has three key components: value, hue, and saturation.

A good designer will know how to balance these three components to make the
text both eye-catching and clearly legible, even for those with visual impairments.
Often, designers will test this by viewing the text in greyscale (without color) and
making tweaks if the text is too dark or too light against the background color.

3.7 Hierarchy

Establishing a hierarchy is one of the most vital principles of typography.

Typographical hierarchy aims to distinguish between prominent pieces of copy

that should be noticed and read first and standard text copy.

In an age of short attention spans brought about by social media, designers are
urged to be concise and create typefaces that allow users to consume the
necessary information in short amounts of time.

COLOR PALLETE

A color palette, in the digital world, refers to the full

range of colors that can be displayed on a device screen or other interface, or
in some cases, a collection of colors and tools for use in paint and
illustration programs. The color palette reveals a lot about the electronic
design of the device or technology, and its visual capabilities for human
users.

The digital color palette emerged from the earliest computers, which only had
monochrome displays. Early examples include the Teletext format with a three-bit
RGB eight-color palette and the Apple II personal computer with a 16-color
palette. Devices like early Atari, Commodore and Apple computers and consoles
used their own evolving color palettes built on new color technology.
Eventually, advances in display technology introduced a 256-color VGA display
that remained a standard until the creation of modern flat-screen plasma screen
monitors.

Early color palettes used hexadecimal values to represent and select the array of
colors possible in the display systems. Modern color palettes are more likely to
show users a color wheel or sophisticated color selection tool to choose from a
wide variety of hues and shades of color. It is worth noting that the advancement
in digital color palettes and video display color choices coincided with and allowed
for the rapid evolution of the modern digital camera, which has now been
embedded into smartphones and mobile devices.

3 Steps process for choosing colors for a website is

1. Choosing a primary color

2. Choosing a secondary color
3. Choosing an accent color