The following outline is provided as an overview of and topical guide to web design and web development, two very related fields:

Web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

– field that encompasses many different skills and disciplines in the production and maintenance of

website A website (also written as a web site) is any web page whose content is identified by a common domain name and is published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, educatio ...

s. The different areas of web design include web graphic design; interface design; authoring, including standardized code and

proprietary software Proprietary software is computer software, software that grants its creator, publisher, or other rightsholder or rightsholder partner a legal monopoly by modern copyright and intellectual property law to exclude the recipient from freely sharing t ...

;

user experience design User experience design (UX design, UXD, UED, or XD), upon which is the centralized requirements for "User Experience Design Research" (also known as UX Design Research), defines the experience a user would go through when interacting with a compa ...

; and

search engine optimization Search engine optimization (SEO) is the process of improving the quality and quantity of Web traffic, website traffic to a website or a web page from web search engine, search engines. SEO targets unpaid search traffic (usually referred to as ...

. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing markup. Web design partially overlaps

web engineering The World Wide Web has become a major delivery platform for a variety of complex and sophisticated enterprise applications in several domains. In addition to their inherent multifaceted functionality, these Web applications exhibit complex behavi ...

in the broader scope of

web development Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, ...

. Web designers are expected to have an awareness of

usability Usability can be described as the capacity of a system to provide a condition for its users to perform the tasks safely, effectively, and efficiently while enjoying the experience. In software engineering, usability is the degree to which a softw ...

and if their role involves creating markup then they are also expected to be up to date with

web accessibility Web accessibility, or eAccessibility,European CommissionCommunication from the Commission to the Council, the European Parliament and the European Economic and Social Committee and the Committee of the Regions: eAccessibility, EC(2005)1095 pu ...

guidelines.

Web development Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, ...

– work involved in developing a

web site A website (also written as a web site) is any web page whose content is identified by a common domain name and is published on at least one web server. Websites are typically dedicated to a particular topic or purpose, such as news, education, ...

for the

Internet The Internet (or internet) is the Global network, global system of interconnected computer networks that uses the Internet protocol suite (TCP/IP) to communicate between networks and devices. It is a internetworking, network of networks ...

(

World Wide Web The World Wide Web (WWW or simply the Web) is an information system that enables Content (media), content sharing over the Internet through user-friendly ways meant to appeal to users beyond Information technology, IT specialists and hobbyis ...

) or an

intranet An intranet is a computer network for sharing information, easier communication, collaboration tools, operational systems, and other computing services within an organization, usually to the exclusion of access by outsiders. The term is used in ...

(a private network). Web development can range from developing a simple single static page of

plain text In computing, plain text is a loose term for data (e.g. file contents) that represent only characters of readable material but not its graphical representation nor other objects ( floating-point numbers, images, etc.). It may also include a lim ...

to complex web-based internet applications (

web apps A web application (or web app) is application software that is created with web technologies and runs via a web browser. Web applications emerged during the late 1990s and allowed for the server to dynamically build a response to the request, ...

electronic business Electronic business (also known as online business or e-business) is any kind of business or commercial activity that includes sharing information across the internet. Commerce constitutes the exchange of products and services between businesses, ...

es, and

social network service A social networking service (SNS), or social networking site, is a type of online social media platform which people use to build social networks or social relationships with other people who share similar personal or career content, interests ...

s. A more comprehensive list of tasks to which web development commonly refers, may include

web design Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; user interface design (UI design); authoring, including standardised code a ...

web content development Web content development is the process of researching, writing, gathering, organizing, and editing information for publication on websites. Website content may consist of prose, graphics, pictures, recordings, movies, or other digital assets th ...

, client liaison, client-side/ server-side scripting,

web server A web server is computer software and underlying Computer hardware, hardware that accepts requests via Hypertext Transfer Protocol, HTTP (the network protocol created to distribute web content) or its secure variant HTTPS. A user agent, co ...

and network security configuration, and

e-commerce E-commerce (electronic commerce) refers to commercial activities including the electronic buying or selling products and services which are conducted on online platforms or over the Internet. E-commerce draws on technologies such as mobile co ...

development. Among web professionals, "web development" usually refers to the main non-design aspects of building web sites: writing markup and coding. Web development may use

content management system A content management system (CMS) is computer software used to manage the creation and modification of digital content ( content management).''Managing Enterprise Content: A Unified Content Strategy''. Ann Rockley, Pamela Kostur, Steve Manning. New ...

s (CMS) to make content changes easier and available with basic technical skills. For larger organizations and businesses, web development teams can consist of hundreds of people (

web developer A web developer is a programmer who develops World Wide Web applications using a client–server model. The applications typically use HTML, CSS, and JavaScript in the client, and any general-purpose programming language in the server. is used ...

s) and follow standard methods like Agile methodologies while developing websites. Smaller organizations may only require a single permanent or contracting developer, or secondary assignment to related job positions such as a

graphic designer A graphic designer is a practitioner who follows the discipline of graphic design, either within companies or organizations or independently. They are professionals in design and visual communication, with their primary focus on transforming ...

information systems An information system (IS) is a formal, sociotechnical, organizational system designed to collect, process, store, and distribute information. From a sociotechnical perspective, information systems comprise four components: task, people, structu ...

technician. Web development may be a collaborative effort between departments rather than the domain of a designated department. There are three kinds of web developer specialization: front-end developer, back-end developer, and full-stack developer. Front-end developers are responsible for behaviour and visuals that run in the user browser, back-end developers deal with the servers and full-stack developers are responsible for both. Currently, the demand for React and Node.JS developers are very high all over the world.

Web design

Graphic design Graphic design is a profession, academic discipline and applied art that involves creating visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdisciplinary branch of ...

Typography Typography is the art and technique of Typesetting, arranging type to make written language legibility, legible, readability, readable and beauty, appealing when displayed. The arrangement of type involves selecting typefaces, Point (typogra ...

Page layout In graphic design, page layout is the arrangement of visual elements on a page. It generally involves organizational principles of composition to achieve specific communication objectives. The high-level page layout involves deciding on the ...

User experience design User experience design (UX design, UXD, UED, or XD), upon which is the centralized requirements for "User Experience Design Research" (also known as UX Design Research), defines the experience a user would go through when interacting with a compa ...

(UX design) *

User interface design User interface (UI) design or user interface engineering is the design of user interfaces for machines and software, such as computers, home appliances, mobile devices, and other electronic devices, with the focus on maximizing usability and the ...

(UI design) * Web Design techniques ** Responsive web design (RWD) ** Adaptive web design (AWD) **

Progressive enhancement Progressive enhancement is a strategy in web design that puts emphasis on web content first, allowing everyone to access the basic content and functionality of a web page, while users with additional browser features or faster Internet access r ...

** Tableless web design *

Software Software consists of computer programs that instruct the Execution (computing), execution of a computer. Software also includes design documents and specifications. The history of software is closely tied to the development of digital comput ...

Adobe Photoshop Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc., Adobe for Microsoft Windows, Windows and macOS. It was created in 1987 by Thomas Knoll, Thomas and John Knoll. It is the most used tool for professional digital ...

Adobe Illustrator Adobe Illustrator is a vector graphics editor and Computer-aided design, design software developed and marketed by Adobe Inc., Adobe. Originally designed for the Apple Inc., Apple Mac (computer), Macintosh, development of Adobe Illustrator began ...

Adobe XD Adobe XD (also known as Adobe Experience Design) is a vector design tool for web and mobile applications, developed and published by Adobe Inc. It is available for macOS and Windows, and there are versions for iOS and Android to help preview ...

Figma Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows. The feature set of Figma focuses on user interface and user experience design, with an empha ...

Sketch (software) Sketch is a vector graphics editor for macOS developed by the Dutch company Sketch B.V. (formerly named Bohemian Coding). It was first released on 7 September 2010 and won an Apple Design Award in 2012. It also has a web application that allo ...

Affinity Designer Affinity Designer is a vector graphics editor developed by Serif for macOS, iPadOS, and Microsoft Windows. It is part of the "Affinity trinity" alongside Affinity Photo and Affinity Publisher. Affinity Designer is available for purchase directl ...

Inkscape Inkscape is a vector graphics editor. It is used for both artistic and technical illustrations such as cartoons, clip art, logos, typography, diagrams, and flowcharts. It uses vector graphics to allow for sharp printouts and renderings at ...

Web development

Front-end web development Front-end web development is the development of the graphical user interface of a website through the use of HTML, CSS, and JavaScript so users can view and interact with that website. Tools used for front-end development There are several tool ...

– the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data. **

HTML Hypertext Markup Language (HTML) is the standard markup language for documents designed to be displayed in a web browser. It defines the content and structure of web content. It is often assisted by technologies such as Cascading Style Sheets ( ...

(HyperText Markup Language) (*.html) ** CSS (Cascading Style Sheets) (*.css) ***

CSS framework A CSS framework is a library allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. Most of these frameworks contain at least a grid (graphic design), grid. More functional frameworks also come with mor ...

JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have ...

(*.js) ***

Package manager A package manager or package management system is a collection of software tools that automates the process of installing, upgrading, configuring, and removing computer programs for a computer in a consistent manner. A package manager deals wi ...

s for JavaScript **** npm (originally short for Node Package Manager) *

Server-side scripting Server-side scripting is a technique used in web development which involves employing scripts on a web server which produces a response customized for each user's (client's) request to the website. Scripts can be written in any of a number of s ...

(also known as "Server-side (web) development" or "Back-end (web) development") ** ASP (*.asp) **

ASP.NET Web Forms ASP.NET Web Forms is a web application framework and one of several programming models supported by the Microsoft ASP.NET technology. Web Forms applications can be written in any programming language which supports the Common Language Runtime, suc ...

(*.aspx) **

ASP.NET Web Pages Razor is an ASP.NET programming syntax used to create dynamic web pages with the C# or VB.NET programming languages. Razor was in development in June 2010 and was released for Microsoft Visual Studio 2010 in January 2011. Razor is a simple-synt ...

(*.cshtml, *.vbhtml) **

ColdFusion Markup Language ColdFusion Markup Language, more commonly known as CFML, is a scripting language for web development that runs on the Java virtual machine (JVM), the .NET framework, and Google App Engine. Several commercial and free and open-source software imp ...

(*.cfm) ** Go (*.go) **

Google Apps Script Google Apps Script is a scripting platform developed by Google for light-weight application development in the Google Workspace platform. Google Apps Script was initially developed by Mike Harm as a side project while working as a developer on Go ...

(*.gs) **

Hack Hack may refer to: Arts, entertainment, and media Games * Hack (Unix video game), ''Hack'' (Unix video game), a 1984 roguelike video game * .hack (video game series), ''.hack'' (video game series), a series of video games by the multimedia fran ...

(*.php) **

Haskell Haskell () is a general-purpose, statically typed, purely functional programming language with type inference and lazy evaluation. Designed for teaching, research, and industrial applications, Haskell pioneered several programming language ...

(*.hs) (example:

Yesod Yesod (Hebrew: יְסוֹד ''Yəsōḏ'', Tiberian: ''Yăsōḏ'', "foundation") is a sephirah or node in the kabbalistic Tree of Life, a system of Jewish philosophy. Yesod, located near the base of the Tree, is the sephirah below Hod and ...

) **

Java Java is one of the Greater Sunda Islands in Indonesia. It is bordered by the Indian Ocean to the south and the Java Sea (a part of Pacific Ocean) to the north. With a population of 156.9 million people (including Madura) in mid 2024, proje ...

(*.jsp) via

JavaServer Pages Jakarta Server Pages (JSP; formerly JavaServer Pages) is a collection of technologies that helps software developers create dynamically generated web pages based on HTML, XML, SOAP, or other document types. Released in 1999 by Sun Microsystems, J ...

TypeScript TypeScript (abbreviated as TS) is a high-level programming language that adds static typing with optional type annotations to JavaScript. It is designed for developing large applications and transpiles to JavaScript. It is developed by Micr ...

using

Server-side JavaScript JavaScript (), often abbreviated as JS, is a programming language and core technology of the World Wide Web, alongside HTML and CSS. Ninety-nine percent of websites use JavaScript on the client side for webpage behavior. Web browsers have a ...

(*.ssjs, *.js, *.ts) (example: Node.js) **

Lasso A lasso or lazo ( or ), also called reata or la reata in Mexico, and in the United States riata or lariat (from Mexican Spanish lasso for roping cattle), is a loop of rope designed as a restraint to be thrown around a target and tightened when ...

(*.lasso) ** Lua (*.lp *.op *.lua) **

NodeJS Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. Node.js lets develope ...

(*.node) **

Parser Parsing, syntax analysis, or syntactic analysis is a process of analyzing a string of symbols, either in natural language, computer languages or data structures, conforming to the rules of a formal grammar by breaking it into parts. The term '' ...

(*.p) **

Perl Perl is a high-level, general-purpose, interpreted, dynamic programming language. Though Perl is not officially an acronym, there are various backronyms in use, including "Practical Extraction and Reporting Language". Perl was developed ...

via the CGI.pm module (*.cgi, *.ipl, *.pl) **

PHP PHP is a general-purpose scripting language geared towards web development. It was originally created by Danish-Canadian programmer Rasmus Lerdorf in 1993 and released in 1995. The PHP reference implementation is now produced by the PHP Group. ...

(*.php, *.php3, *.php4, *.phtml) ** Progress WebSpeed (*.r,*.w) **

Python Python may refer to: Snakes * Pythonidae, a family of nonvenomous snakes found in Africa, Asia, and Australia ** ''Python'' (genus), a genus of Pythonidae found in Africa and Asia * Python (mythology), a mythical serpent Computing * Python (prog ...

(*.py) (examples:

Pyramid A pyramid () is a structure whose visible surfaces are triangular in broad outline and converge toward the top, making the appearance roughly a pyramid in the geometric sense. The base of a pyramid can be of any polygon shape, such as trian ...

Flask Flask may refer to: Container * Hip flask, a small container used to carry liquid * Laboratory flask, laboratory glassware for holding larger volumes than simple test tubes ** Erlenmeyer flask, a common laboratory flask with a flat bottom, a c ...

, Django) ** R (*.rhtml) – (example: rApache) ** React (*.jsx, *.tsx) **

Ruby Ruby is a pinkish-red-to-blood-red-colored gemstone, a variety of the mineral corundum ( aluminium oxide). Ruby is one of the most popular traditional jewelry gems and is very durable. Other varieties of gem-quality corundum are called sapph ...

(*.rb, *.rbw) (example:

Ruby on Rails Ruby on Rails (simplified as Rails) is a server-side web application framework written in Ruby under the MIT License. Rails is a model–view–controller (MVC) framework, providing default structures for a database, a web service, and web pa ...

) ** SMX (*.smx) **

Tcl TCL or Tcl or TCLs may refer to: Business * TCL Technology, a Chinese consumer electronics and appliance company ** TCL Electronics, a subsidiary of TCL Technology * Texas Collegiate League, a collegiate baseball league * Trade Centre Limited ...

(*.tcl) * Full stack web development – involves both front-end and back-end (server-side) development *

Web framework A web framework (WF) or web application framework (WAF) is a software framework that is designed to support the development of web applications including web services, web resources, and web APIs. Web frameworks provide a standard way to build a ...

** Types of framework architectures ***

Model–view–controller Model–view–controller (MVC) is a software architectural pattern commonly used for developing user interfaces that divides the related program logic into three interconnected elements. These elements are: * the model, the internal representat ...

*** Three-tier architecture *

Atom Atoms are the basic particles of the chemical elements. An atom consists of a atomic nucleus, nucleus of protons and generally neutrons, surrounded by an electromagnetically bound swarm of electrons. The chemical elements are distinguished fr ...

IntelliJ IDEA IntelliJ IDEA () is an integrated development environment (IDE) written in Java for developing computer software written in Java, Kotlin, Groovy, and other JVM-based languages. It is developed by JetBrains (formerly known as IntelliJ) and is a ...

Sublime Text Sublime Text is a text and source code editor featuring a minimal interface, syntax highlighting and code folding with native support for numerous programming and markup languages, search and replace with support for regular expressions, an in ...

Visual Studio Code Visual Studio Code, commonly referred to as VS Code, is an integrated development environment developed by Microsoft for Windows, Linux, macOS and web browsers. Features include support for debugging, syntax highlighting, intelligent code comp ...

References

External links

{{Outline footer

Computer programming Computer programming or coding is the composition of sequences of instructions, called computer program, programs, that computers can follow to perform tasks. It involves designing and implementing algorithms, step-by-step specifications of proc ...

Web design

Web development

See also

References

External links