SlideShare a Scribd company logo
Web designWeb design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.The intent of web design[1] is to create a web site—a collection of electronic documents and applications that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs) and forms can be placed on the page using HTML/XHTML/XML tags.
Typically web pages are classified as static or dynamic:
Static pages don’t change content and layout with every request unless a human (web master/programmer) manually updates the page. A simple HTML page is an example of static content.
Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.The process of designing web pages, web sites, web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography.
Web pages and web sites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the Webmaster or changes in the computing environment (such as the site's associated database having been modified).
With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development for the overall logistics of all web-based services.Accessible Web design
Main article: Web accessibility
To be accessible, web pages and sites must conform to certain accessibility principles. These accessibility principles are known as the WCAG when talking about content. These can be grouped into the following main areas.
Use semantic markup that provides a meaningful structure to the document (i.e. web page)
Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
Use a valid markup language that conforms to a published DTD or Schema
Provide text equivalents for any non-text components (e.g. images, multimedia)
Use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here")
Don't use frames
Use CSS rather than HTML tables for layout
Author the page so that when the source code is read line-by-line by user agents (such as screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)Website accessibility is also changing as it is impacted by Content Management Systems that allow changes to be made to webpages without the need of obtaining programming language knowledge.
. These components include:

More Related Content

What's hot (20)

PDF
INTRODUCTION TO THE INTERNET
Arvin Dey
 
PPT
Web Design
CubReporters.org
 
KEY
Web Design 101
T.S. Lim
 
PPTX
Google Analytics
ggeminiee
 
PPT
Social Bookmarking
Leby Sassya
 
PDF
Principles of web design
dswebdesign
 
PDF
Introduction to Search Engine.pdf
Praveen Kurup
 
PPTX
SEO Overview
Bridgett Gutierrez
 
PPTX
What is Keyword Research & How to Do it ?
Jam Hassan
 
PPTX
Local Seo Overview and Proposal
Chuck Price
 
PPTX
Different types of blog
p10540735
 
PPTX
Web content management
Smita Chandra
 
PDF
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
PPTX
Meta tags
hapy
 
PPTX
Internet Search Presentation
Steve Guinan
 
PPTX
Internet
Sonika koul
 
PPTX
Keyword Research | Keyword Research For SEO 2019 | SEO Tutorial For Beginners...
Simplilearn
 
PPTX
On Page SEO And Off Page SEO
Reema
 
KEY
LinkedIn Basics
Kirk Pozadzides
 
INTRODUCTION TO THE INTERNET
Arvin Dey
 
Web Design
CubReporters.org
 
Web Design 101
T.S. Lim
 
Google Analytics
ggeminiee
 
Social Bookmarking
Leby Sassya
 
Principles of web design
dswebdesign
 
Introduction to Search Engine.pdf
Praveen Kurup
 
SEO Overview
Bridgett Gutierrez
 
What is Keyword Research & How to Do it ?
Jam Hassan
 
Local Seo Overview and Proposal
Chuck Price
 
Different types of blog
p10540735
 
Web content management
Smita Chandra
 
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
Meta tags
hapy
 
Internet Search Presentation
Steve Guinan
 
Internet
Sonika koul
 
Keyword Research | Keyword Research For SEO 2019 | SEO Tutorial For Beginners...
Simplilearn
 
On Page SEO And Off Page SEO
Reema
 
LinkedIn Basics
Kirk Pozadzides
 

Similar to Web design (20)

PPTX
Web Design & Development !BATRA COMPUTER CENTRE
jatin batra
 
PDF
Web Dev - 1 PPT.pdf
gdsczhcet
 
PPT
Web designing and publishing computer studies theory lesson
Mukalele Rogers
 
PDF
Web designing course in chandigarh
excellence academy
 
DOCX
Affordable and very creative web designs
mensusa1234
 
PDF
Web engineering notes unit 2
inshu1890
 
PDF
Master the Art of Web Design with the Best Web Designing Course in Chandigarh
techedotechnologies0
 
PPTX
ppt of MANOJ KUMAR.pptx
ManojKumar297202
 
PDF
Web Designing Course in Chandigarh
excellence academy
 
PPTX
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
12KritiGaneriwal
 
PDF
Real Blog Writer - Basic Point of Design a Website.pdf
RealBlogWriter
 
PDF
The Art and Science of Website Design and Development | Madeesy
Passing Grades
 
PDF
web desigining and publishing and easy level
animefun210
 
DOCX
Web designing course in chandigarh
excellence acadmey
 
PDF
Webdesign and Development.pdf
SellerRocket
 
PPT
Webdesign and Development.ppt
SellerRocket
 
PPTX
Web Design Lecture1.pptx
MohammedNoor74
 
PPTX
User Centered Design and SharePoint Publishing Portals
Tom Pham
 
PPTX
Website Architecture
Megha yadav
 
PDF
Essential Guide to Web Design & Development - Key Trends and Tips.pdf
nathaniel838729
 
Web Design & Development !BATRA COMPUTER CENTRE
jatin batra
 
Web Dev - 1 PPT.pdf
gdsczhcet
 
Web designing and publishing computer studies theory lesson
Mukalele Rogers
 
Web designing course in chandigarh
excellence academy
 
Affordable and very creative web designs
mensusa1234
 
Web engineering notes unit 2
inshu1890
 
Master the Art of Web Design with the Best Web Designing Course in Chandigarh
techedotechnologies0
 
ppt of MANOJ KUMAR.pptx
ManojKumar297202
 
Web Designing Course in Chandigarh
excellence academy
 
INDUSTRIAL TRAINING Presentation on Web Development. (2).pptx
12KritiGaneriwal
 
Real Blog Writer - Basic Point of Design a Website.pdf
RealBlogWriter
 
The Art and Science of Website Design and Development | Madeesy
Passing Grades
 
web desigining and publishing and easy level
animefun210
 
Web designing course in chandigarh
excellence acadmey
 
Webdesign and Development.pdf
SellerRocket
 
Webdesign and Development.ppt
SellerRocket
 
Web Design Lecture1.pptx
MohammedNoor74
 
User Centered Design and SharePoint Publishing Portals
Tom Pham
 
Website Architecture
Megha yadav
 
Essential Guide to Web Design & Development - Key Trends and Tips.pdf
nathaniel838729
 
Ad

Recently uploaded (20)

PDF
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
PDF
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
PPTX
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
PDF
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
PDF
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
PPTX
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
PDF
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
PPTX
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
PDF
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
PDF
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
PPTX
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
PPTX
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
PDF
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
PDF
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
PDF
introduction to computer hardware and sofeware
chauhanshraddha2007
 
PPTX
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
PDF
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
PPTX
Simple and concise overview about Quantum computing..pptx
mughal641
 
PDF
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
PDF
State-Dependent Conformal Perception Bounds for Neuro-Symbolic Verification
Ivan Ruchkin
 
Generative AI vs Predictive AI-The Ultimate Comparison Guide
Lily Clark
 
Tea4chat - another LLM Project by Kerem Atam
a0m0rajab1
 
Agile Chennai 18-19 July 2025 | Emerging patterns in Agentic AI by Bharani Su...
AgileNetwork
 
Build with AI and GDG Cloud Bydgoszcz- ADK .pdf
jaroslawgajewski1
 
How Open Source Changed My Career by abdelrahman ismail
a0m0rajab1
 
Agile Chennai 18-19 July 2025 Ideathon | AI Powered Microfinance Literacy Gui...
AgileNetwork
 
A Strategic Analysis of the MVNO Wave in Emerging Markets.pdf
IPLOOK Networks
 
AI Code Generation Risks (Ramkumar Dilli, CIO, Myridius)
Priyanka Aash
 
Structs to JSON: How Go Powers REST APIs
Emily Achieng
 
Economic Impact of Data Centres to the Malaysian Economy
flintglobalapac
 
Applied-Statistics-Mastering-Data-Driven-Decisions.pptx
parmaryashparmaryash
 
Farrell_Programming Logic and Design slides_10e_ch02_PowerPoint.pptx
bashnahara11
 
GDG Cloud Munich - Intro - Luiz Carneiro - #BuildWithAI - July - Abdel.pdf
Luiz Carneiro
 
Presentation about Hardware and Software in Computer
snehamodhawadiya
 
introduction to computer hardware and sofeware
chauhanshraddha2007
 
Agile Chennai 18-19 July 2025 | Workshop - Enhancing Agile Collaboration with...
AgileNetwork
 
Researching The Best Chat SDK Providers in 2025
Ray Fields
 
Simple and concise overview about Quantum computing..pptx
mughal641
 
MASTERDECK GRAPHSUMMIT SYDNEY (Public).pdf
Neo4j
 
State-Dependent Conformal Perception Bounds for Neuro-Symbolic Verification
Ivan Ruchkin
 
Ad

Web design

  • 1. Web designWeb design is the skill of creating presentations of content (usually hypertext or hypermedia) that is delivered to an end-user through the World Wide Web, by way of a Web browser or other Web-enabled software like Internet television clients, microblogging clients and RSS readers.The intent of web design[1] is to create a web site—a collection of electronic documents and applications that reside on a web server/servers and present content and interactive features/interfaces to the end user in form of Web pages once requested. Such elements as text, bit-mapped images (GIFs, JPEGs) and forms can be placed on the page using HTML/XHTML/XML tags.
  • 2. Typically web pages are classified as static or dynamic:
  • 3. Static pages don’t change content and layout with every request unless a human (web master/programmer) manually updates the page. A simple HTML page is an example of static content.
  • 4. Dynamic pages adapt their content and/or appearance depending on end-user’s input/interaction or changes in the computing environment (user, time, database modifications, etc.) Content can be changed on the client side (end-user's computer) by using client-side scripting languages (JavaScript, JScript, Actionscript, etc.) to alter DOM elements (DHTML). Dynamic content is often compiled on the server utilizing server-side scripting languages (Perl, PHP, ASP, JSP, ColdFusion, etc.). Both approaches are usually used in complex applications.The process of designing web pages, web sites, web applications or multimedia for the Web may utilize multiple disciplines, such as animation, authoring, communication design, corporate identity, graphic design, human-computer interaction, information architecture, interaction design, marketing, photography, search engine optimization and typography.
  • 5. Web pages and web sites can be static pages, or can be programmed to be dynamic pages that automatically adapt content or visual appearance depending on a variety of factors, such as input from the end-user, input from the Webmaster or changes in the computing environment (such as the site's associated database having been modified).
  • 6. With growing specialization within communication design and information technology fields, there is a strong tendency to draw a clear line between web design specifically for web pages and web development for the overall logistics of all web-based services.Accessible Web design
  • 7. Main article: Web accessibility
  • 8. To be accessible, web pages and sites must conform to certain accessibility principles. These accessibility principles are known as the WCAG when talking about content. These can be grouped into the following main areas.
  • 9. Use semantic markup that provides a meaningful structure to the document (i.e. web page)
  • 10. Semantic markup also refers to semantically organizing the web page structure and publishing web services description accordingly so that they can be recognized by other web services on different web pages. Standards for semantic web are set by IEEE
  • 11. Use a valid markup language that conforms to a published DTD or Schema
  • 12. Provide text equivalents for any non-text components (e.g. images, multimedia)
  • 13. Use hyperlinks that make sense when read out of context. (e.g. avoid "Click Here")
  • 15. Use CSS rather than HTML tables for layout
  • 16. Author the page so that when the source code is read line-by-line by user agents (such as screen readers) it remains intelligible. (Using tables for design will often result in information that is not.)Website accessibility is also changing as it is impacted by Content Management Systems that allow changes to be made to webpages without the need of obtaining programming language knowledge.
  • 18. content - the information in a Web page or Web application, including:
  • 19. natural information such as text, images, and sounds
  • 20. code or markup that defines structure, presentation, etc.
  • 21. Web browsers, media players, and other "user agents"
  • 22. assistive technology, in some cases - screen readers, alternative keyboards, switches, scanning software, etc.
  • 23. users' knowledge, experiences, and in some cases, adaptive strategies using the Web
  • 24. developers - designers, coders, authors, etc., including developers with disabilities and users who contribute content
  • 25. authoring tools - software that creates Web sites
  • 26. evaluation tools - Web accessibility evaluation tools, HTML validators, CSS validators, etc.HistoryTim Berners-Lee published what is considered to be the first website in August 1991.[4] Berners-Lee was the first to combine Internet communication (which had been carrying email and the Usenet for decades) with hypertext (which had also been around for decades, but limited to browsing information stored on a single computer, such as interactive CD-ROM design). Websites are written in a markup language called HTML, and early versions of HTML were very basic, only giving a website's basic structure (headings and paragraphs), and the ability to link using hypertext. This was new and different from existing forms of communication - users could easily navigate to other pages by following hyperlinks from page to page.As the Web and web design progressed, the markup language changed to become more complex and flexible, giving the ability to add objects like images and tables to a page. Features like tables, which were originally intended to be used to display tabular information, were soon subverted for use as invisible layout devices. With the advent of Cascading Style Sheets (CSS), table-based layout is commonly regarded as outdated. Database integration technologies such as server-side scripting and design standards like W3C further changed and enhanced the way the Web is made. As times change, websites are changing the code on the inside and visual design on the outside with ever-evolving programs and utilities.Website planning
  • 27. Purposing web design is a complex, but essential ongoing activity. Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed, are extremely important.
  • 29. Web design is similar (in a very simplistic way) to traditional print publishing. Every website is an information display container, just as a book; and every web page is like the page in a book. However, web design uses a framework based on digital code and display technology to construct and maintain an environment to distribute information in multiple formats. Taken to its fullest potential, web design is undoubtedly the most sophisticated and increasingly complex method to support communication in today's world..[edit] Purpose
  • 30. It is essential to define the purpose of the website as one of the first steps in the planning process. A purpose statement should show focus based on what the website will accomplish and what the users will get from it. A clearly defined purpose will help the rest of the planning process as the audience is identified and the content of the site is developed. Setting short and long term goals for the website will help make the purpose clear and plan for the future when expansion, modification, and improvement will take place. Setting a goal practices and measurable objectives should be identified to track the progress of the site and determine success.[edit] Audience
  • 31. Defining the audience is a key step in the website planning process. The audience is the group of people who are expected to visit your website – the market being targeted. These people will be viewing the website for a specific reason and it is important to know exactly what they are looking for when they visit the site. A clearly defined purpose or goal of the site as well as an understanding of what visitors want to do or feel when they come to your site will help to identify the target audience. Upon considering who is most likely to need or use the content, a list of characteristics common to the users such as:
  • 36. Taking into account the characteristics of the audience will allow an effective website to be created that will deliver the desired content to the target audience.[edit] Content
  • 37. Content evaluation and organization requires that the purpose of the website be clearly defined. Collecting a list of the necessary content then organizing it according to the audience's needs is a key step in website planning. In the process of gathering the content being offered, any items that do not support the defined purpose or accomplish target audience objectives should be removed. It is a good idea to test the content and purpose on a focus group and compare the offerings to the audience needs. The next step is to organize the basic information structure by categorizing the content and organizing it according to user needs. Each category should be named with a concise and descriptive title that will become a link on the website. Planning for the site's content ensures that the wants or needs of the target audience and the purpose of the site will be fulfilled.[edit] Planning documentation
  • 38. Documentation is used to visually plan the site while taking into account the purpose, audience and content, to design the site structure, content and interactions that are most suitable for the website. Documentation may be considered a prototype for the website – a model which allows the website layout to be reviewed, resulting in suggested changes, improvements and/or enhancements. This review process increases the likelihood of success of the website.
  • 39. In addition to planning the structure, the layout and interface of individual pages may be planned using a storyboard. In the process of storyboarding, a record is made of the description, purpose and title of each page in the site, and they are linked together according to the most effective and logical diagram type. Depending on the number of pages required for the website, documentation methods may include using pieces of paper and drawing lines to connect them, or creating the storyboard using computer software.
  • 40. Some or all of the individual pages may be designed in greater detail as a website wireframe, a mock up model or comprehensive layout of what the page will actually look like. This is often done in a graphic program, or layout design program. The wireframe has no working functionality, only planning, though it can be used for selling ideas to other web design companies.Website designWeb design is similar (in a very simplistic way) to traditional print publishing. Every website is an information display container, just as a book is a container; and every web page is like the page in a book. However, web design uses a framework based on digital code and display technology to construct and maintain an environment to distribute information in multiple formats. Taken to its fullest potential, web design is undoubtedly the most sophisticated and increasingly complex method to support communication in today's world.[5]
  • 41. For the typical web sites, the basic aspects of design are:
  • 42. A web site typically consists of text and images. The first page of a web site is known as the Home page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might include a welcome message, language or region selection, or disclaimer. Each web page within a web site is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial web sites are concerned[citation needed].
  • 43. Once a web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the web master may use a variety of techniques to increase the traffic, or hits, that the web site receives. This may include submitting the web site to a search engine such as Google, Yahoo or Bing, exchanging links with other web sites, creating affiliations with similar web sites, etc.A web site typically consists of text and images. The first page of a web site is known as the Home page or Index. Some web sites use what is commonly called a Splash Page. Splash pages might include a welcome message, language or region selection, or disclaimer. Each web page within a web site is an HTML file which has its own URL. After each web page is created, they are typically linked together using a navigation menu composed of hyperlinks. Faster browsing speeds have led to shorter attention spans and more demanding online visitors and this has resulted in less use of Splash Pages, particularly where commercial web sites are concerned[citation needed].
  • 44. Once a web site is completed, it must be published or uploaded in order to be viewable to the public over the internet. This may be done using an FTP client. Once published, the web master may use a variety of techniques to increase the traffic, or hits, that the web site receives. This may include submitting the web site to a search engine such as Google, Yahoo or Bing, exchanging links with other web sites, creating affiliations with similar web sites, etc.Multidisciplinary requirements
  • 45. Web site design crosses multiple disciplines of multiple information systems, information technology and communication design. The web site is an information system whose components are sometimes classified as front-end and back-end. The observable content (e.g. page layout, user interface, graphics, text, audio) is known as the front-end. The back-end comprises the organization and efficiency of the source code, invisible scripted functions, and the server-side components that process the output from the front-end. Depending on the size of a Web development project, it may be carried out by a multi-skilled individual (sometimes called a web master), or a project manager may oversee collaborative design between group members with specialized skills.[edit] Environment
  • 46. Layout is a double edged sword: on the one hand, it is the expression of a framework that actively shapes the web designer. On the other hand, as the designer adapts that framework to projects, layout is the means of content delivery. Publishing a web engages communicationthroughout the production process as well as within the product created. Publication implies adaptation of culture and content standards. Web design incorporates multiple intersections between many layers of technical and social understanding, demanding creative direction, design element structure, and some form of socialorganization. Differing goals and methods resolve effectively in successful deployment of education, software and team management during the design process. However, many competing and evolving platforms and environments challenge acceptance, completion and continuity of every design product.Collaboration
  • 47. Early Web design was less integrated with companies’ advertising campaigns, customer transactions, extranets, intranets and social networking. Web sites were seen largely as static onlinebrochures or database connection points, disconnected from the broader scopes of a business or project. Many Web sites are still disconnected from the broader project scope. As a result, many Web sites are needlessly difficult to use, indirect in their way of communicating, and suffer from a 'disconnected' or ineffective bureaucratic information architecture.