1.01. - Introduction To Web Designing

24/09/2021
Noida Institute of Engineering & Technology, Greater Noida
Introduction to web Designing
Unit: 01 Dr. Pankaj Kumar

Subject Name: Web Designing Assistant Professor
Subject Code: KCS-052 Computer Science & Engineering
Course Details: B. Tech. (CSE) 5th Semester Noida Institute of Engineering & Technology, Greater Noida
Outline
• What is Web Design?
• Web Design Elements
• Types of website design
• Website Design Tools
• Basic principles involved in developing a website
• Website Development Planning Process
• Domain Name
• Web Hosting
1
24/09/2021
Outline
• Web Page
• What is responsive web Designing?
• Website
• Web Standards
• W3C recommendations
What is Web Design?

• Web design is the process of planning, conceptualizing, and arranging
content intended for the Internet.
• Modern web design goes beyond how things look (aesthetics) to
include how things work (functionality).
• Web design is not limited to websites as it includes other uses such as
web apps, mobile apps, and user interface design.
2
24/09/2021
Web Design Elements

• When designing a website, it’s imperative to consider both the look
and the functionality of the site.
• Integrating these elements into the design will help maximize the
performance of the site, regardless of how performance is measured.
• For example, because of search engine optimization, web design can
have a huge impact on our performance in search engines like
Google.
Web Design Elements

• There are Two type of Elements in Web Design:
• Visual Elements • Functional Elements
• Written Content or Design • Navigation
• Fonts • Speed
• Colors • Animations
• Layout • User interactions
• Shapes • Site structure
• Spacing • Cross-browser & cross-device
• Images & Icons compatibility
• Videos
3
24/09/2021
Different Types of Website Design

• There are three types of Website Design:
• Fixed design
• Liquid or Fluid design
• Responsive design
Fixed Design
• Fixed web pages have a set width that won't alter when the browser
is resized, no matter what device the website is being viewed on.
• On smaller devices, such as smartphones or tablets, content is harder
to view and can be annoying for users due to the need to scroll
horizontally to view the rest of the content on a page, or continuously
''pinch and expand'' to zoom into the page's text.
• When the browser on a screen is enlarged or reduced, images and
text may visually fall apart on the screen.
4
24/09/2021
Liquid or Fluid Design

• When resizing the browser, the content on the page spreads itself out
to fill the width of the browser when expanded, hence the term liquid
design, and will look enlarged or as though is has shrunk.
• The columns containing the content on the webpage are built using
percentages, rather than fixed columns used in fixed design, therefore
the columns increase or decrease in size relative to each other.
Responsive Design
• This approach aims to make website viewing easier by displaying
websites on different devices in forms that are easy to read and
navigate.
• This avoids the user from having to resize, pan or scroll through the
webpage to read the website's content.
• Essentially the website is easily viewable and usable on desktop
computers, tablets and smartphones.
• When creating a responsive website design, designers do not need to
design multiple website formats that have been rearranged for
different devices.
10
5
24/09/2021
Two approaches of website design

• Two approaches for designing across the diverse range of devices are
• Responsive website Design
• Adaptive website Design
• Responsive design utilizes one layout and adjusts the content,
navigation, and elements of the page to fit the user’s screen. The
responsive design will reconfigure all design elements whether it’s
viewed on a desktop, laptop, tablet, or mobile phone.
• With adaptive design, different fixed layouts are created that adapt to
the users screen size. As opposed to the more fluid responsive
approach, adaptive design employs multiple sizes of a fixed design.
11
Responsive vs Adaptive Website Design

• With the advent of smartphones, tablets and mobile devices, Internet
access is not limited to desktops. More and more users are accessing
web over mobile devices.
• According to a recent survey in the US sponsored by Google, 81% of
smartphone owners use their phones for web browsing and 79% of
people use their phone for online shopping.
• So it has become paramount for businesses to design and develop
their websites to make those accessible and appropriately visible on
all devices.
• Terms like responsive, fluid, adaptive etc. are being used in this
context quite interchangeably.
12
6
24/09/2021
Responsive Design
• Responsive web design adapts itself to various screen resolutions by
adjusting the height and width of various screen elements.
• The layout template remains the same on all screen sizes.
• Technically speaking, responsive websites use the same codebase and
the same design for all devices with some minor tweaking in CSS for
allowing adjustment in form factor of the screen.
13
Responsive Design
14
7
24/09/2021
Salient features of responsive design

• Single website layout template is used across all devices – this maintains
website uniformity across all devices.
• Because of single codebase, only one version of the website needs to be
maintained – this saves a lot of time and cost
• All the website assets like videos and images are downloaded on all devices
irrespective of whether they are used on that device or not – because of
this, the page loading can be a little slower
• All the images are downloaded in full size and then resized for the device
size – this can compromise the viewing experience for the visitor
• Responsive designs are easy to implement for new websites whereas; for
existing websites, a rebuild is required
15
Adaptive Design
• Unlike responsive design, adaptive design is not fluid design.
• Instead of changing the screen layout to fit to every device size, a
static fixed layout is defined to fit to individual screen size.
• Adaptive sites are optimized for best user experience – these sites
optimally use tap features, they load faster, they use images and
menus optimized for mobile experience.
16
8
24/09/2021
Adaptive Design
17
Salient features of adaptive design

• Website layout is optimized for different mobile devices – this maintains
website uniformity across all devices
• Multiple website codebase need to be maintained – this increases time and
cost
• Only required assets like videos and images are downloaded on the device
which optimizes the page loading performance
• Images are resized and designed as per the device size offering ideal
viewing experience for the website visitor
• Because of the mere complexity in design and code maintenance, adaptive
design requires advanced knowledge of website design (especially
JavaScript and CSS)
18
9
24/09/2021
When to use what (Responsive or Adaptive)

• If our website accepts web ads, then we need to be little careful
because responsive design may not show all the ads properly on
certain devices. Whereas with adaptive design, we have better
opportunities through ad monetization because ad sizes can be
optimally defined for mobile devices
• If our users demonstrate different intent and behavior on desktop
and mobile devices, then having an adaptive design is a better choice
because that can help we capture the user intent more accurately
• If our website is content heavy, then we can go for responsive design
19
When to use what (Responsive or Adaptive)

• For retail businesses or e-commerce websites, where users access
websites with specific intent of purchasing products or browsing
products, adaptive design which offers limited but targeted options is
a better choice
• If we need our users to always have access to all the pages of our
website, responsive design is a better choice
• As we see, both responsive and adaptive designs have their own pros
and cons. The choice really depends on our website visitors, their
requirements and our business goals.
20
10
24/09/2021
Website Design Tools

• There are two main ways to design a website:
• using a desktop app
• using a website builder
• The tool we decide to use will vary greatly based upon our team size,
our budget, the type of site, and its technical requirements.
21
Basic Principles Involved in Developing A Website

• An effective website design should fulfill its intended function by conveying
its particular message simultaneously engaging the visitor.
• Several factors such as consistency, colors, typography, imagery, simplicity
and functionality all 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 our website design is
optimized for usability (form and aesthetics) and how it easy is it to use
(functionality).
22
11
24/09/2021

• The top 9 web design principles that will make our website pleasing,
easy to use, engaging, and effective.
• Website Purpose
• Good web design always caters to
the needs of the user.
• Are our web visitors looking for
information, entertainment,
some type of interaction, or to
transact with our business?
• Each page of our website needs
to have a clear purpose, and to
fulfill a specific need for our
website users in the most
effective way possible.
23

• Simplicity
• Simplicity is the best way to go when considering the user experience and the
usability of our website. Below are ways to achieve simplicity through design.
Color Type Imagery
Color has the power to Typography has an Imagery is every visual
communicate messages important role to play on aspect used within
and evoke emotional our website. communications.
responses. It commands attention and This includes still
Pleasing color works as the visual photography, illustration,
combinations increase interpretation of the video and all forms of
customer engagement and brands voice. graphics.
make the user feel good. Typefaces should be
legible and only use a
maximum of 3 different
fonts on the website. 24
12
24/09/2021

• Navigation
• Navigation is the way finding
system used on websites where
visitors interact and find what they
are looking for.
• Website navigation is key to
retaining visitors.
• If the websites navigation is
confusing visitors will give up and
find what they need elsewhere.
• Keeping navigation simple,
intuitive and consistent on every
page is key.
25

• 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 area of the screen.
• The F-shaped layout mimics our
natural pattern of reading in the West
(left to right and top to bottom).
• An effective designed website will
work with a readers natural pattern
of scanning the page.
26
13
24/09/2021

• Visual Hierarchy
• Visual hierarchy is the
arrangement of elements is order
of importance.
• This is done either by size, color,
imagery, contrast, typographically,
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.
27

• Content
• An effective web design has both
great design and great content.
• Using compelling language great
content can attract and influence
visitors by converting them into
customers.
28
14
24/09/2021

• Grid Based Layout
• Grids help to structure our design
and keep our content organized.
• The grid helps to align elements
on the page and keep it clean. The
grid based layout arranges content
into a clean rigid grid structure
with columns, sections that line up
and feel balanced and impose
order and results in an
aesthetically pleasing website.
29

• 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. Optimizing image sizes
will help load our site faster.
30
15
24/09/2021

• Mobile Friendly
• More people are using their
phones or other devices to browse
the web.
• It is important to consider building
our website with a responsive
layout where our website can
adjust to different screens.
31
Website Development Planning Process

• Before launching a website, the planning process is vital to ensuring
everything goes smoothly down the road.
• In this day and age, there are so many sites out there on the internet.
• It is almost impossible for a business to do well without having a
website that works well for both the company and its clients.
• There are many steps which need to be followed for it to be properly
developed. The purpose of development planning is to make sure
nothing is forgotten.
32
16
24/09/2021
Website Development Planning Process

• There are seven steps that should be followed from start to finish
when developing a website.
Research
1. Research and goal setting and goal
setting
2. Planning the site
Planning the
Maintaining
3. Designing the layout site
4. Writing the content

5. Coding
6. Testing and launching Testing and Designing
launching the layout
7. Maintaining
Writing the
Coding
content
33
Research and Goal Setting

• As with any project, it is important to do proper research and set
goals before beginning.
• By setting goals, it will help the website to have a direction and will
also help our business to achieve specific accomplishments.
• The planning and goal setting process could take about 1-2 weeks to
complete.
• It is a very important first step to creating a website that sells.
34
17
24/09/2021
Planning the Site

• Planning the website involves creating a wireframe and sitemap.
• This is an important step because it is kind of like the skeleton of our
site.
• This process can take about 2-6 weeks to complete.
• The sitemap allows the developer to get an outline of what the site
will look like, what pages there will be and how they will interact with
each other.
• This not only helps with planning but is also beneficial to the user
experience.
35
Designing the Layout

• The details of the layout are what will give our website character.
• This is the step where we get to be creative with pictures, videos and
what kinds of things the customer will notice when they come to our
site.
• This process can take about 4-12 weeks from start to finish.
• The timing depends on experience, time spent on the project, and
how thorough the developer is.
• During this step, it is especially important to keep referring back to
the target audience we wish to focus on.
36
18
24/09/2021
Writing the Content

• This step may be going on simultaneously with the other
development planning steps.
• The written content of a website is so important to its success.
• While this step may be happening during other steps, it is one that is
crucial and deserves a lot of expertise.
• It could take from 5 to 15 weeks.
• The written content on a website is going to help a visitor determine
their next steps.
• It is vital to drawing customers in and keeping them. There is a lot to
consider when working on the content of the website.
37
Coding the Website

• All the aspects of our website have been created, we are ready to
actually begin creating the website itself.
• The coding typically begins with the homepage and gradually
branches out to the other pages included in the site.
• This would be where the sitemap is followed to ensure everything is
coded correctly.
• The coding step could take from 6 to 15 weeks, depending on how
much content and how intricate we would like our website to be.
38
19
24/09/2021
Testing and Launching

• Before the website is launched, it is crucial that it is tested out by real
users.
• All the links and content should be tested to see if it works.
• Not only is it important to test out all the buttons and everything on
the site, but it is also important to test out what users think of it.
• There is user testing that can be completed to make sure the website
is giving users what they need to be successful on the test.
39
Maintenance
• We might think our job is done once the website is launched, but this
is not the case.
• Since technology and products are changing more rapidly than ever
before, it is important to stay up-to-date with what is happening on
the internet.
• Maintaining a website is hard work, but the more effort put into its
maintenance, the better.
40
20
24/09/2021
Domain Name
• Domain name is the address of our website that people type in the
browser’s URL bar to visit our website.
• In other words, if our website was a house, then our domain name
will be its address.
• Internet is basically a giant network of computers connected to each
other through cables. To easily identify them, each computer is
assigned a series of numbers called IP Address.
• This IP address is a combination of numbers separated with dots.
Typically, IP addresses look like this:
66.249.66.1
41
Domain Name
• Computers have no problem identifying and remembering these
numbers. However, it is impossible for humans to remember and use
these numbers to connect to websites on the internet.
• To solve this problem, domain names were invented.
• A domain name can have words which makes it easy to remember
website addresses.
• Now if we wanted to visit a website on the internet, we don’t need to
type a string of numbers. Instead, we can type in an easy to
remember domain name. for example
google.com
42
21
24/09/2021
Web Hosting
• Web hosting is the place where all the files of our website live. It is
like the home of our website where it actually lives.
• A good way to think about this is if the domain name was the address
of our house, then web hosting is the actual house that address
points to. All websites on the internet, need web hosting.
• When someone enters our domain name in a browser, the domain
name is translated into the IP address of our web hosting company’s
computer. This computer contains our website’s files, and it sends
those files back to the users’ browsers.
• Web hosting companies specialize in storing and serving websites.
43

How Domain Names and Web Hosting are
Related?
• Domain names and web hosting are two different services. However,
they work together to make websites possible.
• Basically a domain name system is like a massive address book that is
constantly updated. Behind each domain name, there is an address of
the web hosting service storing the website’s files.
• Without domain names, it will not be possible for people to find our
website and without web hosting we cannot build a website.
44
22
24/09/2021
Web Page
• A web page or webpage is a document, commonly written in HTML,
that is viewed in an Internet browser. A web page can be accessed by
entering a URL address into a browser's address bar. A web page may
contain text, graphics, and hyperlinks to other web pages and files.
• There are two types of web pages
• Static Web page
• Dynamic Web page
45
Static Web page

• Static web pages are also known as flat or stationary web page. They
are loaded on the client’s browser as exactly they are stored on the
web server. Such web pages contain only static information. User can
only read the information but can’t do any modification or interact
with the information.
• Static web pages are created using only HTML. Static web pages are
only used when the information is no more required to be modified.
46
23
24/09/2021
Dynamic Web page

• Dynamic web page shows different information at different point of
time. It is possible to change a portion of a web page without loading
the entire web page. It has been made possible using Ajax technology.
47
What is responsive web Designing?

• Responsive web design describes a web design approach that allows
websites (and its pages) to render (or display) on all devices and
screen sizes by automatically adapting to the screen, whether it’s a
desktop, laptop, tablet, or smartphone.
48
24
24/09/2021
How does responsive web design work?

• Responsive web design works through Cascading Style Sheets (CSS),
using various settings to serve different style properties depending on
the screen size, orientation, resolution, color capability, and other
characteristics of the user’s device. A few examples of CSS properties
related to responsive web design include the viewport and media
queries.
49

Why responsive web design matters to web designers
and business owners?
• Responsive web design relieves web designers, user interface
designers, and web developers from working day and night creating
websites for every single different device in existence. It also makes
the lives of business owners, marketers, and advertisers easier.
• One site for every device
• Whether viewed on a 27-inch iMac with a wireless connection or from the screen of our
Android phone, the website will be configured for the user’s optimal viewing pleasure.
• Optimal design for the device
• With the responsive web design approach, all images, fonts, and other HTML elements
will be scaled appropriately, maximizing whatever screen size the user has.
50
25
24/09/2021

Why responsive web design matters to web designers
and business owners?
• No need for redirects
• Other options towards designing for multiple devices require the use of redirects to send
the user to the appropriate version of a web page. Without the need for redirects, the
user can access the content he wants to look at, as quickly as possible.
• Responsive web design is also effective from a price standpoint. It’s
also easier for us to manage because it’s one site versus two. We
don’t have to make changes twice. Instead, we can work from and
update a single website.
51
Website
• A website is a collection of linked web
pages (plus their associated
resources) that share a unique domain
name. Each web page of a given
website provides explicit links—most
of the time in the form of clickable
portion of text—that allow the user to
move from one page of the website to
another.
• To access a website, type its domain
name in our browser address bar, and
the browser will display the website's
main web page, or homepage
(casually referred as "the home"):
52
26
24/09/2021
Types of Website
• A website can be of two types
• Static Website
• Dynamic Website
53
Static website
• Static website is the basic type
of website that is easy to create.
We don't need the knowledge of
web programming and database
design to create a static website.
Its web pages are coded in
HTML.
• The codes are fixed for each
page so the information
contained in the page does not
change and it looks like a printed
page.
54
27
24/09/2021
Dynamic website
• Dynamic website is a collection of
dynamic web pages whose content
changes dynamically. It accesses content
from a database or Content Management
System (CMS). Therefore, when we alter
or update the content of the database,
the content of the website is also altered
or updated.
• Dynamic website uses client-side scripting
or server-side scripting, or both to
generate dynamic content.
• Client side scripting generates content at
the client computer on the basis of user
input. The web browser downloads the
web page from the server and processes
the code within the page to render
information to the user.
55
Web Standards
• W3C publishes documents that define Web technologies. These
documents follow a process designed to promote consensus, fairness,
public accountability, and quality. At the end of this process, W3C
publishes Recommendations, which are considered Web standards.
• Web standards are rules and guidelines established by the World
Wide Web Consortium ( W3C ) developed to promote consistency in
the design code which makes up a web page. Without getting
technical, simply it's the guideline for the mark-up language which
determines how a web page.
56
28
24/09/2021
Web Standards
• Web standards were introduced to protect the web ecosystem, to
keep it open, free and accessible to all.
57
W3C recommendations
• W3C standards define an Open Web Platform for application
development that has the unprecedented potential to enable
developers to build rich interactive experiences, powered by vast data
stores, that are available on any device.
• Although the boundaries of the platform continue to evolve, industry
leaders speak nearly in unison about how HTML5 will be the
cornerstone for this platform.
58
29
24/09/2021
Web Designing vs. Web Development

Web Designing Web Development
A web designer, typically only does the graphical part A web developer, doesn’t always understand color
of a website, they make the layout, choose the colors, theory or design and things like that, their primary
design the look and feel. role is to write the code that makes everything
happen, for example, when a button is clicked it might
send some data to a server, our web developer would
be responsible for writing the web page code for this
to happen.
Web design involves the process of designing a user Where web development involves backend where
interface (UI), Website layout, Frontend using different they use different programming languages to
designing tools like adobe Photoshop, coda, transform ideas & design into real life.
Dreamweaver, Firefox Developer.
59
Web Designing vs. Web Development

Web Designing Web Development
Web designing mostly contains the following aspects, Backend Developers play a vital role in this, to
• Designs (UI/UX) concrete the foundation of our digital product, and
• Usability this part contains the following aspects.
• Aesthetics • Authentic Database Tech
• Responsive • Power the Frontend
• Color Schemes • Navigation
• Content • Testing Base of Project
After completion of these areas, we are done with the • API Integration
visual appearance of our mobile/web or software • Operating Systems
application or website for the web and then comes
the second phase to leverage.
60
30
24/09/2021
Terminologies
• Web Server
• A computer that hosts a website on the Internet.
• Search Engine
• A web service that helps us find other web pages. Examples are Google, Bing,
Yahoo etc.
• Web Browser
• A web browser (commonly referred to as a browser) is a software application
for accessing information on the World Wide Web.
61
31

1.01. - Introduction To Web Designing

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

1.01. - Introduction To Web Designing

Uploaded by

Copyright:

Available Formats

24/09/2021

Noida Institute of Engineering & Technology, Greater Noida

Introduction to web Designing

Unit: 01 Dr. Pankaj Kumar

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

What is Web Design?

Noida Institute of Engineering & Technology, Greater Noida

Web Design Elements

Noida Institute of Engineering & Technology, Greater Noida

Web Design Elements

Noida Institute of Engineering & Technology, Greater Noida

Different Types of Website Design

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Liquid or Fluid Design

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Two approaches of website design

Noida Institute of Engineering & Technology, Greater Noida

Responsive vs Adaptive Website Design

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Salient features of responsive design

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Noida Institute of Engineering & Technology, Greater Noida

Salient features of adaptive design

Noida Institute of Engineering & Technology, Greater Noida

When to use what (Responsive or Adaptive)

Noida Institute of Engineering & Technology, Greater Noida

When to use what (Responsive or Adaptive)

Noida Institute of Engineering & Technology, Greater Noida

Website Design Tools

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Basic Principles Involved in Developing A Website

Noida Institute of Engineering & Technology, Greater Noida

Website Development Planning Process

Noida Institute of Engineering & Technology, Greater Noida

Website Development Planning Process

4. Writing the content

Noida Institute of Engineering & Technology, Greater Noida