Comprehensive Guide to Website Design, Usability, and Digital Marketing
Explore website design basics, usability, user experience, and their impact on digital marketing and consumer behavior for effective online presence and engagement.
Comprehensive Guide to Website Design, Usability, and Digital Marketing
1.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Prepared by
Mr.Prathamesh A.Patil
Assistant Professor
Department of Information Technology
Department of Information Technology, SRES’s Sanjivani College of Engineering, Kopargaon-423 603
DIGITAL
MARKETING
Search Engine Marketing
2.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Basics of Website Designing/Development,
Usability and User Experience in Website
Digital Marketing – Search Engine Marketing
Department of Information Technology
1
3.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Objectives
• Understand the basic concept of website design and development.
• Identify important elements of an effective website.
• Understand website usability and its importance.
• Explain User Experience (UX) in simple terms.
• Relate website characteristics to online consumer behaviour.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
2
4.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Introduction to a Website
A website is a collection of related web pages available through a domain
name.
It provides information, services, products, communication, or online
transactions.
For digital marketing, a website acts as a major online touchpoint between
an organization and its users.
A good website should be useful, easy to access, easy to navigate, and
suitable for its target audience.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
2
5.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Role of Websites in Digital Marketing
Creates an online presence for a business or organization.
Provides information about products, services, offers, and contact details.
Supports search marketing and online promotional activities.
Helps users compare information and make purchase decisions.
Can support lead generation, sales, customer service, and brand building.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
4
6.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Basics of Website Designing
• Website design focuses on how a website looks and how information is
presented.
• Important design considerations include layout, text, images, navigation,
and consistency.
• The design should match the purpose of the website and expectations of
its target users.
• A clear design helps users understand where they are and what action
they can take next.
5
7.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Important Elements of Website Design
• Layout – organizes information on each page.
• Navigation – helps users move between pages.
• Typography – keeps text clear and readable.
• Images and media – communicate information visually.
• Consistency – maintains similar structure and presentation across pages.
• Responsive presentation – supports viewing on different screen sizes.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
6
8.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Basics of Website Development
• Website development is the process of building and maintaining a website.
• Front-end development creates the part of the website that users see and
interact with.
• Back-end development manages server-side processing, data, and
application logic.
• A website may also use a database to store information.
• Development should support design, functionality, performance, and
security.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
7
9.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Basics of Website Development
<!DOCTYPE html>
<html>
<head>
<title>College Website</title>
</head>
<body>
<h1>Sanjivani College of Engineering</h1>
<h2>Information Technology Department</h2>
<p>Welcome to our department website.</p>
<p>Course: Information Technology</p>
<button>View Details</button>
</body>
</html>
Reference :Online Sources.
7
10.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Front-End and Back-End Development
7
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
11.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Characteristics of an Effective Website
• Clear purpose and relevant information.
• Simple and consistent navigation.
• Readable and well-organized content.
• Fast and reliable page performance.
• Mobile-friendly presentation.
• Useful calls to action such as Buy, Register, Contact, or Learn More.
• Website characteristics can influence a consumer's online purchase decision
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press..
9
12.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Website Navigation and Structure
• A logical structure helps users find information quickly.
• Main menus should contain clear and meaningful labels.
• Related information should be grouped together.
• Important pages should be reachable without unnecessary steps.
• Good structure also helps search engines understand website content.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
10
13.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Website Usability
• Usability means how easily and effectively a user can use a website.
• Users should be able to understand the interface without unnecessary confusion.
• Tasks such as searching, reading, registering, or purchasing should be simple.
• Good usability reduces user effort and supports successful completion of tasks.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
11
14.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Key Factors of Website Usability
• Ease of learning – new users can understand the website quickly.
• Efficiency – users can complete tasks with fewer unnecessary steps.
• Readability – text and information are easy to understand.
• Consistency – similar elements behave in similar ways.
• Accessibility – content should be usable by a wider range of users.
• Error handling – clear messages help users recover from mistakes.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
12
15.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
User Experience (UX)
• User Experience (UX) is the overall experience a person has while interacting with a
website.
• UX includes usefulness, ease of use, accessibility, interaction, and satisfaction.
• A technically working website can still provide poor UX if it is confusing or
frustrating.
• Good UX focuses on user needs as well as business objectives
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
13
16.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Usability vs User Experience
Usability vs User Experience
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
13
17.
Sanjivani Rural EducationSociety’s
Sanjivani College of Engineering, Kopargaon-423 603
Department of Information Technology
Website, Consumer Behaviour & Key Takeaways
Online consumers visit websites to search, compare, evaluate, and make
decisions.
Website characteristics can affect online purchase decisions.
Website visits and consumer decision-making are important areas in online
marketing.
Effective Website = Good Design + Functional Development + Usability +
Positive UX.
These factors support engagement, trust, conversion, and digital marketing
performance.
Reference :Ahuja, Vandana. Digital Marketing. Oxford University Press.
15
Editor's Notes
#3 LayoutIs the page properly organized?
NavigationCan you easily find Admissions, Departments, Placements, etc.?
ReadabilityIs the text easy to read?
ImagesAre images clear and relevant?
Mobile FriendlyDoes it work properly on a phone?
UsabilityCan you quickly find the information you need?
UX
#4 “For example, consider our college website. If a new student wants information about the IT Department, admission, courses or placements, they can visit the website and get that information. So our college website acts as an online source of information and communication between the college and students or parents.”
Useful
Easy to access
Easy to navigate
Suitable for target audience
#5 A website gives a business its own place on the internet.
Example: When someone searches for a company on Google, they can visit its website.
Customers can check products, services, prices, offers, location, and contact details.
Example: On Amazon, we can see a mobile's price, specifications, reviews, and offers.
A website can appear in Google search results and can be promoted through digital ads, social media, and email marketing.
Users can compare price, features, reviews, and other information before purchasing.
Example: Comparing two mobile phones before selecting one.
A website can help a business get customer enquiries, sell products online, provide customer support, and build trust and brand image.
#6 Where is the college logo? Where is the menu? Where are images placed?How is the text displayed? Where are important links?
When we open our college website, we see the logo, menu, text and images. A good design keeps these properly arranged and makes information like admissions, departments and placements easy to find.
#8 Front end:
“When we open the college website, we can see the logo, text, images, menus and buttons. Everything that we can see and interact with is called the front end.”
Back end:
“Now suppose a student fills out an online form and clicks Submit. The processing that happens behind the website is handled by the back end. We normally cannot see this part.”
Database:
“The information submitted through the website may need to be stored somewhere. A database can store information such as student details, course information or application records.”
#10 HTML → Creates webpage structure
Example: headings, paragraphs, images, buttons.
CSS → Controls layout and presentation
Example: colors, fonts, spacing, size, page design.
JavaScript → Adds interaction
Example: menu opening, button clicks, form validation, pop-ups.
Runs mainly in the browser
Example: Chrome, Edge, Firefox.
Server-side processing → Handles requests from users.
Business/Application logic → Performs calculations and decides what should happen.
Database communication → Stores and retrieves information.
Authentication → Checks username, password, and user identity.
Services/APIs → Connect different systems and provide data.
#11 College website should clearly show courses, admissions, departments, and placements.
IT information should be easy to find through Departments → Information Technology.
Use clear headings, readable text, short paragraphs, and relevant images.
A website should load quickly.
It should work properly on mobile, tablet, and computer.
CTA examples: Buy Now, Apply Now, Contact Us, Learn More.
A fast, clear, and easy website can increase customer confidence and purchases.
#12 Home → Departments → Information Technology.
Admissions | Departments | Placements | Contact Us.
Academics → Courses | Syllabus | Academic Calendar.
Admissions and Contact Us are available directly from the main menu.
Google can easily identify pages such as Admissions, Placements, and Departments.
#13 A student can easily find the Admission page.
Clear menus like Home → Departments → Information Technology.
A student can easily search for a course, register, or fill out a form.
A student can find placement information in just a few clicks.
#14 A new student can easily find Admissions from the main menu.
Home → Admissions → Apply Now, with fewer clicks.
Clear headings, simple text, and readable font size.
The same navigation menu appears on every page.
Clear text and readable font sizes make the website easier for more users to use.
If an email field is empty, show “Please enter your email addre
#15 A student visits the college website and can easily find the information they need.
The website is useful, simple to use, and gives the user a good experience.
The website opens properly, but if the menus are confusing and information is difficult to find, it provides a poor experience.
Students can easily get admission information, while the college can encourage them to Apply Now.