25/10/2023

Outline
• What is Web Design?
Introduction to web • Web Design Elements
Designing • Types of website design
• Website Design Tools
Dr. Pankaj Kumar
• Basic principles involved in developing a website
• Website Development Planning Process
• Domain Name
• Web Hosting

1 2

Outline What is Web Design?

• Web Page • Web design is the process of planning, conceptualizing, and arranging
• What is responsive web Designing? content intended for the Internet.
• Website • Modern web design goes beyond how things look (aesthetics) to
include how things work (functionality).
• Web Standards
• Web design is not limited to websites as it includes other uses such as
• W3C recommendations web apps, mobile apps, and user interface design.

3 4

Web Design Elements Web Design Elements

• When designing a website, it’s imperative to consider both the look • There are Two type of Elements in Web Design:
and the functionality of the site. • Visual Elements • Functional Elements
• Integrating these elements into the design will help maximize the • Written Content or Design • Navigation
performance of the site, regardless of how performance is measured. • Fonts • Speed
• For example, because of search engine optimization, web design can • Colors • Animations
have a huge impact on our performance in search engines like • Layout • User interactions
Google. • Shapes • Site structure
• Spacing • Cross-browser & cross-device
• Images & Icons compatibility
• Videos

5 6

1
 25/10/2023

Different Types of Website Design Fixed Design

• There are three types of Website Design: • Fixed web pages have a set width that won't alter when the browser
• Fixed design is resized, no matter what device the website is being viewed on.
• Liquid or Fluid design • On smaller devices, such as smartphones or tablets, content is harder
• Responsive design 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.

7 8

Liquid or Fluid Design Responsive Design

• When resizing the browser, the content on the page spreads itself out • This approach aims to make website viewing easier by displaying
to fill the width of the browser when expanded, hence the term liquid websites on different devices in forms that are easy to read and
design, and will look enlarged or as though is has shrunk. navigate.
• The columns containing the content on the webpage are built using • This avoids the user from having to resize, pan or scroll through the
percentages, rather than fixed columns used in fixed design, therefore webpage to read the website's content.
the columns increase or decrease in size relative to each other. • 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.
9 10

Two approaches of website design Responsive vs Adaptive Website Design

• Two approaches for designing across the diverse range of devices are • With the advent of smartphones, tablets and mobile devices, Internet
access is not limited to desktops. More and more users are accessing
• Responsive website Design web over mobile devices.
• Adaptive website Design • According to a recent survey in the US sponsored by Google, 81% of
• Responsive design utilizes one layout and adjusts the content, smartphone owners use their phones for web browsing and 79% of
navigation, and elements of the page to fit the user’s screen. The people use their phone for online shopping.
responsive design will reconfigure all design elements whether it’s • So it has become paramount for businesses to design and develop
viewed on a desktop, laptop, tablet, or mobile phone. their websites to make those accessible and appropriately visible on
all devices.
• With adaptive design, different fixed layouts are created that adapt to
the users screen size. As opposed to the more fluid responsive • Terms like responsive, fluid, adaptive etc. are being used in this
approach, adaptive design employs multiple sizes of a fixed design. context quite interchangeably.
11 12

2
 25/10/2023

Responsive Design 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 14

Salient features of responsive design Adaptive Design

• Single website layout template is used across all devices – this maintains • Unlike responsive design, adaptive design is not fluid design.
website uniformity across all devices.
• Instead of changing the screen layout to fit to every device size, a
• Because of single codebase, only one version of the website needs to be
maintained – this saves a lot of time and cost static fixed layout is defined to fit to individual screen size.
• All the website assets like videos and images are downloaded on all devices • Adaptive sites are optimized for best user experience – these sites
irrespective of whether they are used on that device or not – because of optimally use tap features, they load faster, they use images and
this, the page loading can be a little slower menus optimized for mobile experience.
• 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 16

Adaptive Design 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)

17 18

3
 25/10/2023

When to use what (Responsive or Adaptive) When to use what (Responsive or Adaptive)
• If our website accepts web ads, then we need to be little careful • For retail businesses or e-commerce websites, where users access
because responsive design may not show all the ads properly on websites with specific intent of purchasing products or browsing
certain devices. Whereas with adaptive design, we have better products, adaptive design which offers limited but targeted options is
opportunities through ad monetization because ad sizes can be a better choice
optimally defined for mobile devices • If we need our users to always have access to all the pages of our
• If our users demonstrate different intent and behavior on desktop website, responsive design is a better choice
and mobile devices, then having an adaptive design is a better choice • Both responsive and adaptive designs have their own pros and cons.
because that can help we capture the user intent more accurately The choice really depends on our website visitors, their requirements
• If our website is content heavy, then we can go for responsive design and our business goals.

19 20

Basic Principles Involved in Developing A

Website Design Tools
Website
• There are two main ways to design a website: • An effective website design should fulfill its intended function by conveying
• using a desktop app its particular message simultaneously engaging the visitor.
• using a website builder • Several factors such as consistency, colors, typography, imagery, simplicity
and functionality all contribute to good website design.
• The tool we decide to use will vary greatly based upon our team size, • When designing a website there are many key factors that will contribute
our budget, the type of site, and its technical requirements. 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).

21 22

Basic Principles Involved in Developing A Basic Principles Involved in Developing A

Website Website
• The top 9 web design principles that will make our website pleasing, • Simplicity
easy to use, engaging, and effective. • 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.
• Website Purpose
• Good web design always caters to Color Type Imagery
the needs of the user.
Color has the power to Typography has an important role Imagery is every visual aspect used
• Are our web visitors looking for communicate messages and evoke to play on our website. within communications.
information, entertainment,
some type of interaction, or to emotional responses. It commands attention and works This includes still photography,
transact with our business? Pleasing color combinations as the visual interpretation of the illustration, video and all forms of
• Each page of our website needs increase customer engagement and brands voice. graphics.
to have a clear purpose, and to make the user feel good. Typefaces should be legible and
fulfill a specific need for our only use a maximum of 3 different
website users in the most fonts on the website.
effective way possible.

23 24

4
 25/10/2023

Basic Principles Involved in Developing A Basic Principles Involved in Developing A

Website Website
• Navigation • F-shaped Pattern Reading
• Navigation is the way finding • The F- based pattern is the most
system used on websites where common way visitors scan text on a
visitors interact and find what they website.
are looking for. • Eye tracking studies have found that
• Website navigation is key to most of what people see is in the top
retaining visitors. and left area of the screen.
• If the websites navigation is • The F-shaped layout mimics our
confusing visitors will give up and natural pattern of reading in the West
find what they need elsewhere. (left to right and top to bottom).
• Keeping navigation simple, • An effective designed website will
intuitive and consistent on every work with a readers natural pattern
page is key. of scanning the page.
25 26

Basic Principles Involved in Developing A Basic Principles Involved in Developing A

Website Website
• Visual Hierarchy • Content
• Visual hierarchy is the • An effective web design has both
arrangement of elements is order great design and great content.
of importance. • Using compelling language great
• This is done either by size, color, content can attract and influence
imagery, contrast, typographically, visitors by converting them into
whitespace, texture and style. customers.
• 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 28

Basic Principles Involved in Developing A Basic Principles Involved in Developing A

Website Website
• Grid Based Layout • Load Time
• Grids help to structure our design • Waiting for a website to load will
and keep our content organized. lose visitors.
• The grid helps to align elements • Nearly half of web visitors expect
on the page and keep it clean. The a site to load in 2 seconds or less
grid based layout arranges content and they will potentially leave a
into a clean rigid grid structure site that isn’t loaded within 3
with columns, sections that line up seconds. Optimizing image sizes
and feel balanced and impose will help load our site faster.
order and results in an
aesthetically pleasing website.

29 30

5
 25/10/2023

Basic Principles Involved in Developing A

What is Web Development?
Website
• Mobile Friendly • Web development is the process of building websites and web
• More people are using their applications that work on the internet. From creating a simple static
phones or other devices to browse one-page website to coding a full-blown robust web application and a
the web. content management system.
• It is important to consider building
our website with a responsive • Website development includes
layout where our website can • the coding of the application logic
adjust to different screens. • incorporating databases and managing user queries
• designing user interfaces
• hosting the website on servers
• maintaining and updating

31 32

Layers of Web Development Server Side

• Each activity involved in the web development process can be • Backend or server-side development incorporates all the processes
classified into server-side, client-side, and full-stack development. that go behind the scene in a website. The management of databases,
servers, and logical components are the main components of the
backend.
• These are not tangible for the users, but without a strong backend
development team, your website will be an empty page that can not
do any tasks.

33 34

Client-Side Full Stack

• This layer, also referred to as the frontend, mainly deals with the • Full-Stack development combines the frontend and backend,
visual presentation and designing of the site. Frontend developers encapsulating the whole web development process. In this layer, we
work on creating a seamless user experience through responsive web deal with the entire stack of tasks and technologies involved in the
pages using CSS, HTML, and JavaScript. Without a good user interface, website development life cycle.
your website will not be able to attract customers. • This means a full-stack engineer is adept at UI-UX designing, database
manipulation, server hosting, and coding the browsers.
• These three layers together encompass the web development life
cycle. It remains the same for both website and web application
development.

35 36

6
 25/10/2023

Full Stack Burger What is the Web Development Cycle?

• A web development life cycle concerns all the stages that go into
building the website from formulating the idea to coding and
designing to deploying and maintaining. It is the standard or
methodical step to follow to achieve a well-functioning website.
• It gives a basic outline for developers or project managers to follow to
ensure minimum errors and optimal results.

37 38

The 7 Phases of Web Development Life Cycle Research and Analysis

• Most people ignore this critical
step in the web development
process. To ensure that our design
and development is on the right
path, gathering information about
the project and the client is crucial.
• Unless our developers have a clear
idea of what they are working for
and what the requirements are,
they will not be able to provide the
right solution.

39 40

Research and Analysis Research and Analysis

• Some of the common questions to ask our clients in the information • Requirements
gathering stage are • Is there adequate demand in the market?
• Purpose • Why do users need your website?
• What is the purpose of the website? • What requirements of the consumers are we trying to fulfill?
• What type of website/web app will it be – informational, commercial, • What are the non-negotiable requirements for the website?
product, or service-based? • Expectations
• What is your target audience? • What do we expect the look and feel to be?
• How and what will the website generate for our business?
• What features will the user expect from such an application?
• What are some features we wish to include?

41 42

7
 25/10/2023

Research and Analysis Planning and Strategy

• During this phase, it is important to visualize what type of people our • The Planning stage involves
strategizing all the aspects of the
website is going to be catering to. Taking into consideration their age, website including design,
gender, preferences, and needs, set goals and generate requirement technology, content, and
elicitation documents. marketing. Based on the
information gathered and analyzed
• If this step is ignored, all the remaining web development stages in the last stage, informed
decisions are made about the
become irrelevant and cannot produce the desired outputs. structure and features of the
website.
• In the Planning phase, a dedicated
team is formed with each member
having a defined role and
delegated with clear tasks.

43 44

Planning and Strategy Designing and Wireframing

• Deciding on the content structure, wireframe (schematics and rough • The web design stage involves
designs), choosing the technology stack and software development designing website layout and
brings in the creative UI-UX
methodology are important decisions to take before website creation. designers to the forefront.
• Technology stack is a set of programming languages, frameworks, and • The layout involves designing a
software that are used to build any web app. rough sketch, which may be
graphical, to get a feel of the
• Creating a sitemap, estimating timelines, defining deliverables, and design of the website. The purpose
allocation of resources are also essential parts of the Planning phase. of the layout is to present an
Finally, we have to decide on the branding of our website before information structure, enabling a
moving on to the Design phase. visual tour of the content and base
features for our clients.

45 46

Designing and Wireframing Content Creation

• The wireframe designed in the last stage is transformed into buttons, • Eventually, content is king. If we
tabs, menus, dashboards, color themes, typography, and graphics to are unable to communicate with
create a base layout of the website. our customers and readers, no
• Keeping in mind the audience research, design an interactive website amount of fancy design can help
that caters to their preferences and demands. Make sure our website us.
or application does not become mundane. Include graphics, colors, • Creating a communication
and other media to attract users without deviating from the branding channel through the user
and purpose of our website. interface is the main aim of the
content creation stage.

47 48

8
 25/10/2023

Content Creation Code and Development

• Content writing involves providing relevant information about our • The development phase involves
company in an easy-to-understand, attractive manner. Adding calls- the actual building of the
to-action, creative headlines, formatting, line editing, writing, and website. Developing the client-
updating texts go on throughout the web development lifecycle. side and server-side of the
• This phase develops the branding and marketing of our site or web website is accomplished in this
app and lets we define our website purposes through content writing. stage. It is the most time-
Content is the only way to interact with end-users and convert them consuming part of the website
into customers, so make sure to pay due attention and focus on user’s development process.
problems and what solutions we can offer.

49 50

Frontend Development Backend Development

• The designs made in the early stages are transformed into interactive elements • This phase involves developing the actual features of the web app.
on the web page. Web designers integrate components and functions to the While the frontend designs the visual elements, dealing with the user
website skeleton, using frameworks and development tools. side, the backend codes instructions to make each element perform
• HTML, CSS, and a scripting language, generally JavaScript, are used by the web the necessary functions.
designer to create a user-friendly site. For a majority of web applications,
Bootstrap and Foundation are preferred for HTML and CSS. • Server-side encompasses the process of developing the server-side
• For JavaScript, several frontend frameworks are available in the market. (Read app, creating databases, writing the application logic, and integrating
our blog on the best frontend frameworks for web development for more server and client-side functions. Developers use several technologies
information.) and programming languages in this stage.
• If we want to keep up with the latest market trends, a mobile-based counterpart • Recently, Search Engine Optimization(SEO) is also added to the list of
of our website is also recommended. Using mobile-friendly elements in our tasks of backend developers. Including these features can attain
website design or developing a mobile application is a good option. higher rankings for our site in search engines like Google.

51 52

Testing and Quality Assurance Testing and Quality Assurance

• After the website is developed, a set • Apart from this, making small additions such as plugins and SEO-
of rigorous tests are conducted to
eliminate any bugs in the system. The optimization to ensure a smooth deployment. Testing Engineers and
Quality Assurance team performs developers work together in a loop till the QA team ensures the final
repeated testing methods such as Unit
testing, Stress testing, and Load website is ready to be deployed to users.
testing meticulously, checking the
functionality, usability, compatibility, • We recommend starting with the testing process as early as possible
and performance of the web app. to avoid loss of money and time in the later stages. Let the QA team
• Project consistency is important to develop tests simultaneously while doing wireframing. This way we
have a well-functioning site that
provides a seamless user experience. won’t require multiple iterations of testing and developing and also
Testing the working of all features on prevent any major design changes.
all devices and platforms is also
crucial.

53 54

9
 25/10/2023

Deployment and Maintenance Deployment and Maintenance

• Once we receive the stamp of • Apart from this, regular maintenance and updates are absolutely
approval from the QA team, the
website or app is finally ready for crucial to keep the site functioning perfectly and engage new users.
deployment. Using File Transfer • Every phase of the life cycle of web development is significant, no
Protocol, the app is hosted on the web
servers and is available to the viewers. matter how small or big the project is. Although coding is a very
• But the work is not over. Continuous
important aspect of any software development project, it is also
feedback from user interaction lets we imperative to not neglect other steps such as web design, content
know the scopes of improvement. generation or security checklists, or quality assurance team tests.
Accordingly, the web application
development life cycle is executed to • Website development lifecycle is a constant journey that can be made
make the necessary modifications. better every day.

55 56

Domain Name Web Hosting

• Computers have no problem identifying and remembering these • Web hosting is the place where all the files of our website live. It is
numbers. However, it is impossible for humans to remember and use like the home of our website where it actually lives.
these numbers to connect to websites on the internet.
• A good way to think about this is if the domain name was the address
• To solve this problem, domain names were invented. of our house, then web hosting is the actual house that address
• A domain name can have words which makes it easy to remember points to. All websites on the internet, need web hosting.
website addresses.
• When someone enters our domain name in a browser, the domain
• Now if we wanted to visit a website on the internet, we don’t need to name is translated into the IP address of our web hosting company’s
type a string of numbers. Instead, we can type in an easy to
remember domain name. for example computer. This computer contains our website’s files, and it sends
those files back to the users’ browsers.
[Link]
• Web hosting companies specialize in storing and serving websites.
57 58

How Domain Names and Web Hosting are

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

59 60

10
 25/10/2023

Static Web page Dynamic Web page

• Static web pages are also known as flat or stationary web page. They • Dynamic web page shows different information at different point of
are loaded on the client’s browser as exactly they are stored on the time. It is possible to change a portion of a web page without loading
web server. Such web pages contain only static information. User can the entire web page. It has been made possible using Ajax technology.
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.

61 62

What is responsive web Designing? How does responsive web design work?
• Responsive web design describes a web design approach that allows • Responsive web design works through Cascading Style Sheets (CSS),
websites (and its pages) to render (or display) on all devices and using various settings to serve different style properties depending on
screen sizes by automatically adapting to the screen, whether it’s a the screen size, orientation, resolution, color capability, and other
desktop, laptop, tablet, or smartphone. characteristics of the user’s device. A few examples of CSS properties
related to responsive web design include the viewport and media
queries.

63 64

Why responsive web design matters to web designers Why responsive web design matters to web designers
and business owners? and business owners?
• Responsive web design relieves web designers, user interface • No need for redirects
designers, and web developers from working day and night creating • 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
websites for every single different device in existence. It also makes user can access the content he wants to look at, as quickly as possible.
the lives of business owners, marketers, and advertisers easier.
• Responsive web design is also effective from a price standpoint. It’s
• One site for every device
also easier for us to manage because it’s one site versus two. We
• 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. don’t have to make changes twice. Instead, we can work from and
• Optimal design for the device update a single website.
• With the responsive web design approach, all images, fonts, and other HTML elements
will be scaled appropriately, maximizing whatever screen size the user has.

65 66

11
 25/10/2023

Website Types of Website

• A website is a collection of linked web • A website can be of two types
pages (plus their associated
resources) that share a unique domain • Static Website
name. Each web page of a given • Dynamic Website
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"):
67 68

Static website Dynamic website

• Static website is the basic type • Dynamic website is a collection of
dynamic web pages whose content
of website that is easy to create. changes dynamically. It accesses content
We don't need the knowledge of from a database or Content Management
System (CMS). Therefore, when we alter
web programming and database or update the content of the database,
design to create a static website. the content of the website is also altered
or updated.
Its web pages are coded in
• Dynamic website uses client-side scripting
HTML. or server-side scripting, or both to
generate dynamic content.
• The codes are fixed for each
page so the information • Client side scripting generates content at
the client computer on the basis of user
contained in the page does not input. The web browser downloads the
change and it looks like a printed web page from the server and processes
the code within the page to render
page. information to the user.
69 70

Web Standards Web Standards

• W3C publishes documents that define Web technologies. These • Web standards were introduced to protect the web ecosystem, to
documents follow a process designed to promote consensus, fairness, keep it open, free and accessible to all.
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.

71 72

12
 25/10/2023

W3C recommendations Web Designing vs. Web Development

• W3C standards define an Open Web Platform for application Web Designing Web Development

development that has the unprecedented potential to enable 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
developers to build rich interactive experiences, powered by vast data design the look and feel. role is to write the code that makes everything
stores, that are available on any device. happen, for example, when a button is clicked it might
send some data to a server, our web developer would
• Although the boundaries of the platform continue to evolve, industry be responsible for writing the web page code for this
leaders speak nearly in unison about how HTML5 will be the to happen.
Web design involves the process of designing a user Where web development involves backend where
cornerstone for this platform. 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.

73 74

Web Designing vs. Web Development Terminologies

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

75 76

13