CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available" lang="en" dir="ltr"> <head> <meta charset="UTF-8"> <title>Web design - Wikipedia</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-enabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )enwikimwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":["",""],"wgDigitTransformTable":["",""],"wgDefaultDateFormat":"dmy", "wgMonthNames":["","January","February","March","April","May","June","July","August","September","October","November","December"],"wgRequestId":"18049859-4f2b-47a7-a226-bce9b474436e","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Web_design","wgTitle":"Web design","wgCurRevisionId":1259134159,"wgRevisionId":1259134159,"wgArticleId":34035,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["CS1 maint: numeric names: authors list","Articles with short description","Short description matches Wikidata","Wikipedia indefinitely semi-protected pages","Use British English from July 2016","All articles with vague or ambiguous time","Vague or ambiguous time from May 2016","All articles with specifically marked weasel-worded phrases","Articles with specifically marked weasel-worded phrases from May 2016","Pages using Sister project links with hidden wikidata","Web design", "Computer-related introductions in 1989","Communication design"],"wgPageViewLanguage":"en","wgPageContentLanguage":"en","wgPageContentModel":"wikitext","wgRelevantPageName":"Web_design","wgRelevantArticleId":34035,"wgIsProbablyEditable":false,"wgRelevantPageIsProbablyEditable":false,"wgRestrictionEdit":["autoconfirmed"],"wgRestrictionMove":["autoconfirmed"],"wgNoticeProject":"wikipedia","wgCiteReferencePreviewsActive":false,"wgFlaggedRevsParams":{"tags":{"status":{"levels":1}}},"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgPopupsFlags":0,"wgVisualEditor":{"pageLanguageCode":"en","pageLanguageDir":"ltr","pageVariantFallbacks":"en"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":40000,"wgRelatedArticlesCompat":[],"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false, "wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgWikibaseItemId":"Q190637","wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"],"GEHomepageSuggestedEditsEnableTopics":true,"wgGETopicsMatchModeEnabled":false,"wgGEStructuredTaskRejectionReasonTextInputEnabled":false,"wgGELevelingUpEnabledForUser":false};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading","ext.cite.styles":"ready","skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","jquery.makeCollapsible.styles":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["ext.cite.ux-enhancements","mediawiki.page.media", "site","mediawiki.page.ready","jquery.makeCollapsible","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.gadget.ReferenceTooltips","ext.gadget.switcher","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.popups","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.cx.eventlogging.campaigns","ext.cx.uls.quick.actions","wikibase.client.vector-2022","ext.checkUser.clientHints","ext.growthExperiments.SuggestedEditSession","wikibase.sidebar.tracking"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=en&modules=ext.cite.styles%7Cext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cjquery.makeCollapsible.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=en&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=en&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Web design - Wikipedia"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//en.m.wikipedia.org/wiki/Web_design"> <link rel="apple-touch-icon" href="/static/apple-touch/wikipedia.png"> <link rel="icon" href="/static/favicon/wikipedia.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Wikipedia (en)"> <link rel="EditURI" type="application/rsd+xml" href="//en.wikipedia.org/w/api.php?action=rsd"> <link rel="canonical" href="https://en.wikipedia.org/wiki/Web_design"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.en"> <link rel="alternate" type="application/atom+xml" title="Wikipedia Atom feed" href="/w/index.php?title=Special:RecentChanges&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-Web_design rootpage-Web_design skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Jump to content</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Main menu" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Main menu</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Main menu</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">hide</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Navigation </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage-description" class="mw-list-item"><a href="/wiki/Main_Page" title="Visit the main page [z]" accesskey="z"><span>Main page</span></a></li><li id="n-contents" class="mw-list-item"><a href="/wiki/Wikipedia:Contents" title="Guides to browsing Wikipedia"><span>Contents</span></a></li><li id="n-currentevents" class="mw-list-item"><a href="/wiki/Portal:Current_events" title="Articles related to current events"><span>Current events</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/Special:Random" title="Visit a randomly selected article [x]" accesskey="x"><span>Random article</span></a></li><li id="n-aboutsite" class="mw-list-item"><a href="/wiki/Wikipedia:About" title="Learn about Wikipedia and how it works"><span>About Wikipedia</span></a></li><li id="n-contactpage" class="mw-list-item"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us" title="How to contact Wikipedia"><span>Contact us</span></a></li> </ul> </div> </div> <div id="p-interaction" class="vector-menu mw-portlet mw-portlet-interaction" > <div class="vector-menu-heading"> Contribute </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-help" class="mw-list-item"><a href="/wiki/Help:Contents" title="Guidance on how to use and edit Wikipedia"><span>Help</span></a></li><li id="n-introduction" class="mw-list-item"><a href="/wiki/Help:Introduction" title="Learn how to edit Wikipedia"><span>Learn to edit</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/Wikipedia:Community_portal" title="The hub for editors"><span>Community portal</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/Special:RecentChanges" title="A list of recent changes to Wikipedia [r]" accesskey="r"><span>Recent changes</span></a></li><li id="n-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_upload_wizard" title="Add images or other media for use on Wikipedia"><span>Upload file</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/Main_Page" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikipedia.png" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Wikipedia" src="/static/images/mobile/copyright/wikipedia-wordmark-en.svg" style="width: 7.5em; height: 1.125em;"> <img class="mw-logo-tagline" alt="The Free Encyclopedia" src="/static/images/mobile/copyright/wikipedia-tagline-en.svg" width="117" height="13" style="width: 7.3125em; height: 0.8125em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/Special:Search" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Search Wikipedia [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Search</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Search Wikipedia" aria-label="Search Wikipedia" autocapitalize="sentences" title="Search Wikipedia [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Special:Search"> </div> <button class="cdx-button cdx-search-input__end-button">Search</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Personal tools"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Appearance" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Appearance</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en" class=""><span>Donate</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:CreateAccount&returnto=Web+design" title="You are encouraged to create an account and log in; however, it is not mandatory" class=""><span>Create account</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=Special:UserLogin&returnto=Web+design" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o" class=""><span>Log in</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Log in and more options" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Personal tools" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Personal tools</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="User menu" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="https://donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_en.wikipedia.org&uselang=en"><span>Donate</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:CreateAccount&returnto=Web+design" title="You are encouraged to create an account and log in; however, it is not mandatory"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Create account</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=Special:UserLogin&returnto=Web+design" title="You're encouraged to log in; however, it's not mandatory. [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Log in</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Pages for logged out editors <a href="/wiki/Help:Introduction" aria-label="Learn more about editing"><span>learn more</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/Special:MyContributions" title="A list of edits made from this IP address [y]" accesskey="y"><span>Contributions</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/Special:MyTalk" title="Discussion about edits from this IP address [n]" accesskey="n"><span>Talk</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Site"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Contents" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Contents</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">hide</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">(Top)</div> </a> </li> <li id="toc-History" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#History"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>History</span> </div> </a> <button aria-controls="toc-History-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle History subsection</span> </button> <ul id="toc-History-sublist" class="vector-toc-list"> <li id="toc-1988–2001" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#1988–2001"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1</span> <span>1988–2001</span> </div> </a> <ul id="toc-1988–2001-sublist" class="vector-toc-list"> <li id="toc-The_start_of_the_web_and_web_design" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#The_start_of_the_web_and_web_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.1</span> <span>The start of the web and web design</span> </div> </a> <ul id="toc-The_start_of_the_web_and_web_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Evolution_of_web_design" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Evolution_of_web_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.2</span> <span>Evolution of web design</span> </div> </a> <ul id="toc-Evolution_of_web_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-End_of_the_first_browser_wars" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#End_of_the_first_browser_wars"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.1.3</span> <span>End of the first browser wars</span> </div> </a> <ul id="toc-End_of_the_first_browser_wars-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-2001–2012" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#2001–2012"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.2</span> <span>2001–2012</span> </div> </a> <ul id="toc-2001–2012-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-2012_and_later" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#2012_and_later"> <div class="vector-toc-text"> <span class="vector-toc-numb">1.3</span> <span>2012 and later</span> </div> </a> <ul id="toc-2012_and_later-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Tools_and_technologies" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Tools_and_technologies"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Tools and technologies</span> </div> </a> <button aria-controls="toc-Tools_and_technologies-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Tools and technologies subsection</span> </button> <ul id="toc-Tools_and_technologies-sublist" class="vector-toc-list"> <li id="toc-UX_Design" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#UX_Design"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>UX Design</span> </div> </a> <ul id="toc-UX_Design-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Skills_and_techniques" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Skills_and_techniques"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Skills and techniques</span> </div> </a> <button aria-controls="toc-Skills_and_techniques-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle Skills and techniques subsection</span> </button> <ul id="toc-Skills_and_techniques-sublist" class="vector-toc-list"> <li id="toc-Marketing_and_communication_design" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Marketing_and_communication_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Marketing and communication design</span> </div> </a> <ul id="toc-Marketing_and_communication_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-User_experience_design_and_interactive_design" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#User_experience_design_and_interactive_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>User experience design and interactive design</span> </div> </a> <ul id="toc-User_experience_design_and_interactive_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Progressive_enhancement" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Progressive_enhancement"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.3</span> <span>Progressive enhancement</span> </div> </a> <ul id="toc-Progressive_enhancement-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Page_layout" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Page_layout"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.4</span> <span>Page layout</span> </div> </a> <ul id="toc-Page_layout-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Typography" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Typography"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.5</span> <span>Typography</span> </div> </a> <ul id="toc-Typography-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Motion_graphics" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Motion_graphics"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.6</span> <span>Motion graphics</span> </div> </a> <ul id="toc-Motion_graphics-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Quality_of_code" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Quality_of_code"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.7</span> <span>Quality of code</span> </div> </a> <ul id="toc-Quality_of_code-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Generated_content" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Generated_content"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.8</span> <span>Generated content</span> </div> </a> <ul id="toc-Generated_content-sublist" class="vector-toc-list"> <li id="toc-Static_websites" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Static_websites"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.8.1</span> <span>Static websites</span> </div> </a> <ul id="toc-Static_websites-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Dynamic_websites" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Dynamic_websites"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.8.2</span> <span>Dynamic websites</span> </div> </a> <ul id="toc-Dynamic_websites-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> </ul> </li> <li id="toc-Homepage_design" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Homepage_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Homepage design</span> </div> </a> <ul id="toc-Homepage_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Occupations" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Occupations"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Occupations</span> </div> </a> <ul id="toc-Occupations-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Artificial_intelligence_and_web_design" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Artificial_intelligence_and_web_design"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Artificial intelligence and web design</span> </div> </a> <ul id="toc-Artificial_intelligence_and_web_design-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-See_also" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#See_also"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>See also</span> </div> </a> <button aria-controls="toc-See_also-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Toggle See also subsection</span> </button> <ul id="toc-See_also-sublist" class="vector-toc-list"> <li id="toc-Related_disciplines" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Related_disciplines"> <div class="vector-toc-text"> <span class="vector-toc-numb">7.1</span> <span>Related disciplines</span> </div> </a> <ul id="toc-Related_disciplines-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Notes" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Notes"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>Notes</span> </div> </a> <ul id="toc-Notes-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-References" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#References"> <div class="vector-toc-text"> <span class="vector-toc-numb">9</span> <span>References</span> </div> </a> <ul id="toc-References-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-External_links" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#External_links"> <div class="vector-toc-text"> <span class="vector-toc-numb">10</span> <span>External links</span> </div> </a> <ul id="toc-External_links-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Contents" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Toggle the table of contents" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Toggle the table of contents</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Web design</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Go to an article in another language. Available in 58 languages" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-58" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">58 languages</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="interlanguage-link interwiki-ar mw-list-item"><a href="https://ar.wikipedia.org/wiki/%D8%AA%D8%B5%D9%85%D9%8A%D9%85_%D9%85%D9%88%D8%A7%D9%82%D8%B9_%D8%A7%D9%84%D9%88%D9%8A%D8%A8" title="تصميم مواقع الويب – Arabic" lang="ar" hreflang="ar" data-title="تصميم مواقع الويب" data-language-autonym="العربية" data-language-local-name="Arabic" class="interlanguage-link-target"><span>العربية</span></a></li><li class="interlanguage-link interwiki-ast mw-list-item"><a href="https://ast.wikipedia.org/wiki/Dise%C3%B1u_web" title="Diseñu web – Asturian" lang="ast" hreflang="ast" data-title="Diseñu web" data-language-autonym="Asturianu" data-language-local-name="Asturian" class="interlanguage-link-target"><span>Asturianu</span></a></li><li class="interlanguage-link interwiki-az mw-list-item"><a href="https://az.wikipedia.org/wiki/Veb-dizayn" title="Veb-dizayn – Azerbaijani" lang="az" hreflang="az" data-title="Veb-dizayn" data-language-autonym="Azərbaycanca" data-language-local-name="Azerbaijani" class="interlanguage-link-target"><span>Azərbaycanca</span></a></li><li class="interlanguage-link interwiki-bn mw-list-item"><a href="https://bn.wikipedia.org/wiki/%E0%A6%93%E0%A6%AF%E0%A6%BC%E0%A7%87%E0%A6%AC_%E0%A6%A1%E0%A6%BF%E0%A6%9C%E0%A6%BE%E0%A6%87%E0%A6%A8" title="ওয়েব ডিজাইন – Bangla" lang="bn" hreflang="bn" data-title="ওয়েব ডিজাইন" data-language-autonym="বাংলা" data-language-local-name="Bangla" class="interlanguage-link-target"><span>বাংলা</span></a></li><li class="interlanguage-link interwiki-be mw-list-item"><a href="https://be.wikipedia.org/wiki/%D0%92%D1%8D%D0%B1-%D0%B4%D1%8B%D0%B7%D0%B0%D0%B9%D0%BD" title="Вэб-дызайн – Belarusian" lang="be" hreflang="be" data-title="Вэб-дызайн" data-language-autonym="Беларуская" data-language-local-name="Belarusian" class="interlanguage-link-target"><span>Беларуская</span></a></li><li class="interlanguage-link interwiki-be-x-old mw-list-item"><a href="https://be-tarask.wikipedia.org/wiki/%D0%92%D1%8D%D0%B1-%D0%B4%D1%8B%D0%B7%D0%B0%D0%B9%D0%BD" title="Вэб-дызайн – Belarusian (Taraškievica orthography)" lang="be-tarask" hreflang="be-tarask" data-title="Вэб-дызайн" data-language-autonym="Беларуская (тарашкевіца)" data-language-local-name="Belarusian (Taraškievica orthography)" class="interlanguage-link-target"><span>Беларуская (тарашкевіца)</span></a></li><li class="interlanguage-link interwiki-bg mw-list-item"><a href="https://bg.wikipedia.org/wiki/%D0%A3%D0%B5%D0%B1_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Уеб дизайн – Bulgarian" lang="bg" hreflang="bg" data-title="Уеб дизайн" data-language-autonym="Български" data-language-local-name="Bulgarian" class="interlanguage-link-target"><span>Български</span></a></li><li class="interlanguage-link interwiki-bs mw-list-item"><a href="https://bs.wikipedia.org/wiki/Veb-dizajn" title="Veb-dizajn – Bosnian" lang="bs" hreflang="bs" data-title="Veb-dizajn" data-language-autonym="Bosanski" data-language-local-name="Bosnian" class="interlanguage-link-target"><span>Bosanski</span></a></li><li class="interlanguage-link interwiki-ca mw-list-item"><a href="https://ca.wikipedia.org/wiki/Disseny_web" title="Disseny web – Catalan" lang="ca" hreflang="ca" data-title="Disseny web" data-language-autonym="Català" data-language-local-name="Catalan" class="interlanguage-link-target"><span>Català</span></a></li><li class="interlanguage-link interwiki-cs mw-list-item"><a href="https://cs.wikipedia.org/wiki/Webdesign" title="Webdesign – Czech" lang="cs" hreflang="cs" data-title="Webdesign" data-language-autonym="Čeština" data-language-local-name="Czech" class="interlanguage-link-target"><span>Čeština</span></a></li><li class="interlanguage-link interwiki-de mw-list-item"><a href="https://de.wikipedia.org/wiki/Webdesign" title="Webdesign – German" lang="de" hreflang="de" data-title="Webdesign" data-language-autonym="Deutsch" data-language-local-name="German" class="interlanguage-link-target"><span>Deutsch</span></a></li><li class="interlanguage-link interwiki-et mw-list-item"><a href="https://et.wikipedia.org/wiki/Veebidisain" title="Veebidisain – Estonian" lang="et" hreflang="et" data-title="Veebidisain" data-language-autonym="Eesti" data-language-local-name="Estonian" class="interlanguage-link-target"><span>Eesti</span></a></li><li class="interlanguage-link interwiki-el mw-list-item"><a href="https://el.wikipedia.org/wiki/%CE%9A%CE%B1%CF%84%CE%B1%CF%83%CE%BA%CE%B5%CF%85%CE%AE_%CE%B9%CF%83%CF%84%CE%BF%CF%83%CE%B5%CE%BB%CE%AF%CE%B4%CF%89%CE%BD" title="Κατασκευή ιστοσελίδων – Greek" lang="el" hreflang="el" data-title="Κατασκευή ιστοσελίδων" data-language-autonym="Ελληνικά" data-language-local-name="Greek" class="interlanguage-link-target"><span>Ελληνικά</span></a></li><li class="interlanguage-link interwiki-es mw-list-item"><a href="https://es.wikipedia.org/wiki/Dise%C3%B1o_web" title="Diseño web – Spanish" lang="es" hreflang="es" data-title="Diseño web" data-language-autonym="Español" data-language-local-name="Spanish" class="interlanguage-link-target"><span>Español</span></a></li><li class="interlanguage-link interwiki-eu mw-list-item"><a href="https://eu.wikipedia.org/wiki/Web_diseinu" title="Web diseinu – Basque" lang="eu" hreflang="eu" data-title="Web diseinu" data-language-autonym="Euskara" data-language-local-name="Basque" class="interlanguage-link-target"><span>Euskara</span></a></li><li class="interlanguage-link interwiki-fa mw-list-item"><a href="https://fa.wikipedia.org/wiki/%D8%B7%D8%B1%D8%A7%D8%AD%DB%8C_%D9%88%D8%A8" title="طراحی وب – Persian" lang="fa" hreflang="fa" data-title="طراحی وب" data-language-autonym="فارسی" data-language-local-name="Persian" class="interlanguage-link-target"><span>فارسی</span></a></li><li class="interlanguage-link interwiki-fr mw-list-item"><a href="https://fr.wikipedia.org/wiki/Conception_de_site_web" title="Conception de site web – French" lang="fr" hreflang="fr" data-title="Conception de site web" data-language-autonym="Français" data-language-local-name="French" class="interlanguage-link-target"><span>Français</span></a></li><li class="interlanguage-link interwiki-gl mw-list-item"><a href="https://gl.wikipedia.org/wiki/Dese%C3%B1o_web" title="Deseño web – Galician" lang="gl" hreflang="gl" data-title="Deseño web" data-language-autonym="Galego" data-language-local-name="Galician" class="interlanguage-link-target"><span>Galego</span></a></li><li class="interlanguage-link interwiki-gu mw-list-item"><a href="https://gu.wikipedia.org/wiki/%E0%AA%B5%E0%AB%87%E0%AA%AC_%E0%AA%A1%E0%AA%BF%E0%AA%9D%E0%AA%BE%E0%AA%88%E0%AA%A8" title="વેબ ડિઝાઈન – Gujarati" lang="gu" hreflang="gu" data-title="વેબ ડિઝાઈન" data-language-autonym="ગુજરાતી" data-language-local-name="Gujarati" class="interlanguage-link-target"><span>ગુજરાતી</span></a></li><li class="interlanguage-link interwiki-ko mw-list-item"><a href="https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%94%94%EC%9E%90%EC%9D%B8" title="웹 디자인 – Korean" lang="ko" hreflang="ko" data-title="웹 디자인" data-language-autonym="한국어" data-language-local-name="Korean" class="interlanguage-link-target"><span>한국어</span></a></li><li class="interlanguage-link interwiki-hy mw-list-item"><a href="https://hy.wikipedia.org/wiki/%D5%8E%D5%A5%D5%A2_%D5%A4%D5%AB%D5%A6%D5%A1%D5%B5%D5%B6" title="Վեբ դիզայն – Armenian" lang="hy" hreflang="hy" data-title="Վեբ դիզայն" data-language-autonym="Հայերեն" data-language-local-name="Armenian" class="interlanguage-link-target"><span>Հայերեն</span></a></li><li class="interlanguage-link interwiki-hi mw-list-item"><a href="https://hi.wikipedia.org/wiki/%E0%A4%B5%E0%A5%87%E0%A4%AC_%E0%A4%A1%E0%A4%BF%E0%A4%9C%E0%A4%BE%E0%A4%87%E0%A4%A8" title="वेब डिजाइन – Hindi" lang="hi" hreflang="hi" data-title="वेब डिजाइन" data-language-autonym="हिन्दी" data-language-local-name="Hindi" class="interlanguage-link-target"><span>हिन्दी</span></a></li><li class="interlanguage-link interwiki-hr mw-list-item"><a href="https://hr.wikipedia.org/wiki/Web-dizajn" title="Web-dizajn – Croatian" lang="hr" hreflang="hr" data-title="Web-dizajn" data-language-autonym="Hrvatski" data-language-local-name="Croatian" class="interlanguage-link-target"><span>Hrvatski</span></a></li><li class="interlanguage-link interwiki-id mw-list-item"><a href="https://id.wikipedia.org/wiki/Perancangan_web" title="Perancangan web – Indonesian" lang="id" hreflang="id" data-title="Perancangan web" data-language-autonym="Bahasa Indonesia" data-language-local-name="Indonesian" class="interlanguage-link-target"><span>Bahasa Indonesia</span></a></li><li class="interlanguage-link interwiki-it mw-list-item"><a href="https://it.wikipedia.org/wiki/Web_design" title="Web design – Italian" lang="it" hreflang="it" data-title="Web design" data-language-autonym="Italiano" data-language-local-name="Italian" class="interlanguage-link-target"><span>Italiano</span></a></li><li class="interlanguage-link interwiki-he mw-list-item"><a href="https://he.wikipedia.org/wiki/%D7%A2%D7%99%D7%A6%D7%95%D7%91_%D7%90%D7%AA%D7%A8_%D7%90%D7%99%D7%A0%D7%98%D7%A8%D7%A0%D7%98" title="עיצוב אתר אינטרנט – Hebrew" lang="he" hreflang="he" data-title="עיצוב אתר אינטרנט" data-language-autonym="עברית" data-language-local-name="Hebrew" class="interlanguage-link-target"><span>עברית</span></a></li><li class="interlanguage-link interwiki-ka mw-list-item"><a href="https://ka.wikipedia.org/wiki/%E1%83%95%E1%83%94%E1%83%91%E1%83%93%E1%83%98%E1%83%96%E1%83%90%E1%83%98%E1%83%9C%E1%83%98" title="ვებდიზაინი – Georgian" lang="ka" hreflang="ka" data-title="ვებდიზაინი" data-language-autonym="ქართული" data-language-local-name="Georgian" class="interlanguage-link-target"><span>ქართული</span></a></li><li class="interlanguage-link interwiki-kk mw-list-item"><a href="https://kk.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Веб-дизайн – Kazakh" lang="kk" hreflang="kk" data-title="Веб-дизайн" data-language-autonym="Қазақша" data-language-local-name="Kazakh" class="interlanguage-link-target"><span>Қазақша</span></a></li><li class="interlanguage-link interwiki-ku mw-list-item"><a href="https://ku.wikipedia.org/wiki/Malpersaz%C3%AE" title="Malpersazî – Kurdish" lang="ku" hreflang="ku" data-title="Malpersazî" data-language-autonym="Kurdî" data-language-local-name="Kurdish" class="interlanguage-link-target"><span>Kurdî</span></a></li><li class="interlanguage-link interwiki-hu mw-list-item"><a href="https://hu.wikipedia.org/wiki/Webdiz%C3%A1jn" title="Webdizájn – Hungarian" lang="hu" hreflang="hu" data-title="Webdizájn" data-language-autonym="Magyar" data-language-local-name="Hungarian" class="interlanguage-link-target"><span>Magyar</span></a></li><li class="interlanguage-link interwiki-mk mw-list-item"><a href="https://mk.wikipedia.org/wiki/%D0%A3%D1%80%D0%B5%D0%B4%D1%83%D0%B2%D0%B0%D1%9A%D0%B5_%D0%BD%D0%B0_%D0%BC%D1%80%D0%B5%D0%B6%D0%BD%D0%B8_%D0%BC%D0%B5%D1%81%D1%82%D0%B0" title="Уредување на мрежни места – Macedonian" lang="mk" hreflang="mk" data-title="Уредување на мрежни места" data-language-autonym="Македонски" data-language-local-name="Macedonian" class="interlanguage-link-target"><span>Македонски</span></a></li><li class="interlanguage-link interwiki-xmf mw-list-item"><a href="https://xmf.wikipedia.org/wiki/%E1%83%95%E1%83%94%E1%83%91%E1%83%93%E1%83%98%E1%83%96%E1%83%90%E1%83%98%E1%83%9C%E1%83%98" title="ვებდიზაინი – Mingrelian" lang="xmf" hreflang="xmf" data-title="ვებდიზაინი" data-language-autonym="მარგალური" data-language-local-name="Mingrelian" class="interlanguage-link-target"><span>მარგალური</span></a></li><li class="interlanguage-link interwiki-mn mw-list-item"><a href="https://mn.wikipedia.org/wiki/%D0%92%D1%8D%D0%B1_%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Вэб дизайн – Mongolian" lang="mn" hreflang="mn" data-title="Вэб дизайн" data-language-autonym="Монгол" data-language-local-name="Mongolian" class="interlanguage-link-target"><span>Монгол</span></a></li><li class="interlanguage-link interwiki-nl mw-list-item"><a href="https://nl.wikipedia.org/wiki/Webdesign" title="Webdesign – Dutch" lang="nl" hreflang="nl" data-title="Webdesign" data-language-autonym="Nederlands" data-language-local-name="Dutch" class="interlanguage-link-target"><span>Nederlands</span></a></li><li class="interlanguage-link interwiki-ja mw-list-item"><a href="https://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%A7%E3%83%96%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3" title="ウェブデザイン – Japanese" lang="ja" hreflang="ja" data-title="ウェブデザイン" data-language-autonym="日本語" data-language-local-name="Japanese" class="interlanguage-link-target"><span>日本語</span></a></li><li class="interlanguage-link interwiki-no mw-list-item"><a href="https://no.wikipedia.org/wiki/Webdesign" title="Webdesign – Norwegian Bokmål" lang="nb" hreflang="nb" data-title="Webdesign" data-language-autonym="Norsk bokmål" data-language-local-name="Norwegian Bokmål" class="interlanguage-link-target"><span>Norsk bokmål</span></a></li><li class="interlanguage-link interwiki-nn mw-list-item"><a href="https://nn.wikipedia.org/wiki/Vevdesign" title="Vevdesign – Norwegian Nynorsk" lang="nn" hreflang="nn" data-title="Vevdesign" data-language-autonym="Norsk nynorsk" data-language-local-name="Norwegian Nynorsk" class="interlanguage-link-target"><span>Norsk nynorsk</span></a></li><li class="interlanguage-link interwiki-uz mw-list-item"><a href="https://uz.wikipedia.org/wiki/Web_dizayn" title="Web dizayn – Uzbek" lang="uz" hreflang="uz" data-title="Web dizayn" data-language-autonym="Oʻzbekcha / ўзбекча" data-language-local-name="Uzbek" class="interlanguage-link-target"><span>Oʻzbekcha / ўзбекча</span></a></li><li class="interlanguage-link interwiki-pl mw-list-item"><a href="https://pl.wikipedia.org/wiki/Web_design" title="Web design – Polish" lang="pl" hreflang="pl" data-title="Web design" data-language-autonym="Polski" data-language-local-name="Polish" class="interlanguage-link-target"><span>Polski</span></a></li><li class="interlanguage-link interwiki-pt mw-list-item"><a href="https://pt.wikipedia.org/wiki/Web_design" title="Web design – Portuguese" lang="pt" hreflang="pt" data-title="Web design" data-language-autonym="Português" data-language-local-name="Portuguese" class="interlanguage-link-target"><span>Português</span></a></li><li class="interlanguage-link interwiki-ro mw-list-item"><a href="https://ro.wikipedia.org/wiki/Design_web" title="Design web – Romanian" lang="ro" hreflang="ro" data-title="Design web" data-language-autonym="Română" data-language-local-name="Romanian" class="interlanguage-link-target"><span>Română</span></a></li><li class="interlanguage-link interwiki-ru mw-list-item"><a href="https://ru.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Веб-дизайн – Russian" lang="ru" hreflang="ru" data-title="Веб-дизайн" data-language-autonym="Русский" data-language-local-name="Russian" class="interlanguage-link-target"><span>Русский</span></a></li><li class="interlanguage-link interwiki-simple mw-list-item"><a href="https://simple.wikipedia.org/wiki/Web_design" title="Web design – Simple English" lang="en-simple" hreflang="en-simple" data-title="Web design" data-language-autonym="Simple English" data-language-local-name="Simple English" class="interlanguage-link-target"><span>Simple English</span></a></li><li class="interlanguage-link interwiki-sk mw-list-item"><a href="https://sk.wikipedia.org/wiki/Webov%C3%BD_dizajn" title="Webový dizajn – Slovak" lang="sk" hreflang="sk" data-title="Webový dizajn" data-language-autonym="Slovenčina" data-language-local-name="Slovak" class="interlanguage-link-target"><span>Slovenčina</span></a></li><li class="interlanguage-link interwiki-sl mw-list-item"><a href="https://sl.wikipedia.org/wiki/Izdelava_spletnih_strani" title="Izdelava spletnih strani – Slovenian" lang="sl" hreflang="sl" data-title="Izdelava spletnih strani" data-language-autonym="Slovenščina" data-language-local-name="Slovenian" class="interlanguage-link-target"><span>Slovenščina</span></a></li><li class="interlanguage-link interwiki-so mw-list-item"><a href="https://so.wikipedia.org/wiki/Dhismaha_websiteka" title="Dhismaha websiteka – Somali" lang="so" hreflang="so" data-title="Dhismaha websiteka" data-language-autonym="Soomaaliga" data-language-local-name="Somali" class="interlanguage-link-target"><span>Soomaaliga</span></a></li><li class="interlanguage-link interwiki-sr mw-list-item"><a href="https://sr.wikipedia.org/wiki/Veb-dizajn" title="Veb-dizajn – Serbian" lang="sr" hreflang="sr" data-title="Veb-dizajn" data-language-autonym="Српски / srpski" data-language-local-name="Serbian" class="interlanguage-link-target"><span>Српски / srpski</span></a></li><li class="interlanguage-link interwiki-sh mw-list-item"><a href="https://sh.wikipedia.org/wiki/Veb-dizajn" title="Veb-dizajn – Serbo-Croatian" lang="sh" hreflang="sh" data-title="Veb-dizajn" data-language-autonym="Srpskohrvatski / српскохрватски" data-language-local-name="Serbo-Croatian" class="interlanguage-link-target"><span>Srpskohrvatski / српскохрватски</span></a></li><li class="interlanguage-link interwiki-fi mw-list-item"><a href="https://fi.wikipedia.org/wiki/Verkkosivujen_suunnittelu" title="Verkkosivujen suunnittelu – Finnish" lang="fi" hreflang="fi" data-title="Verkkosivujen suunnittelu" data-language-autonym="Suomi" data-language-local-name="Finnish" class="interlanguage-link-target"><span>Suomi</span></a></li><li class="interlanguage-link interwiki-sv mw-list-item"><a href="https://sv.wikipedia.org/wiki/Webbdesign" title="Webbdesign – Swedish" lang="sv" hreflang="sv" data-title="Webbdesign" data-language-autonym="Svenska" data-language-local-name="Swedish" class="interlanguage-link-target"><span>Svenska</span></a></li><li class="interlanguage-link interwiki-ta mw-list-item"><a href="https://ta.wikipedia.org/wiki/%E0%AE%87%E0%AE%A3%E0%AF%88%E0%AE%AF%E0%AE%A4%E0%AF%8D%E0%AE%A4%E0%AE%B3_%E0%AE%B5%E0%AE%9F%E0%AE%BF%E0%AE%B5%E0%AE%AE%E0%AF%88%E0%AE%AA%E0%AF%8D%E0%AE%AA%E0%AF%81" title="இணையத்தள வடிவமைப்பு – Tamil" lang="ta" hreflang="ta" data-title="இணையத்தள வடிவமைப்பு" data-language-autonym="தமிழ்" data-language-local-name="Tamil" class="interlanguage-link-target"><span>தமிழ்</span></a></li><li class="interlanguage-link interwiki-te mw-list-item"><a href="https://te.wikipedia.org/wiki/%E0%B0%B5%E0%B1%86%E0%B0%AC%E0%B1%8D_%E0%B0%A1%E0%B0%BF%E0%B0%9C%E0%B1%88%E0%B0%A8%E0%B1%8D" title="వెబ్ డిజైన్ – Telugu" lang="te" hreflang="te" data-title="వెబ్ డిజైన్" data-language-autonym="తెలుగు" data-language-local-name="Telugu" class="interlanguage-link-target"><span>తెలుగు</span></a></li><li class="interlanguage-link interwiki-tr mw-list-item"><a href="https://tr.wikipedia.org/wiki/Web_grafik_tasar%C4%B1m%C4%B1" title="Web grafik tasarımı – Turkish" lang="tr" hreflang="tr" data-title="Web grafik tasarımı" data-language-autonym="Türkçe" data-language-local-name="Turkish" class="interlanguage-link-target"><span>Türkçe</span></a></li><li class="interlanguage-link interwiki-uk mw-list-item"><a href="https://uk.wikipedia.org/wiki/%D0%92%D0%B5%D0%B1%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD" title="Вебдизайн – Ukrainian" lang="uk" hreflang="uk" data-title="Вебдизайн" data-language-autonym="Українська" data-language-local-name="Ukrainian" class="interlanguage-link-target"><span>Українська</span></a></li><li class="interlanguage-link interwiki-vi mw-list-item"><a href="https://vi.wikipedia.org/wiki/Thi%E1%BA%BFt_k%E1%BA%BF_web" title="Thiết kế web – Vietnamese" lang="vi" hreflang="vi" data-title="Thiết kế web" data-language-autonym="Tiếng Việt" data-language-local-name="Vietnamese" class="interlanguage-link-target"><span>Tiếng Việt</span></a></li><li class="interlanguage-link interwiki-wuu mw-list-item"><a href="https://wuu.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" title="网页设计 – Wu" lang="wuu" hreflang="wuu" data-title="网页设计" data-language-autonym="吴语" data-language-local-name="Wu" class="interlanguage-link-target"><span>吴语</span></a></li><li class="interlanguage-link interwiki-zh-yue mw-list-item"><a href="https://zh-yue.wikipedia.org/wiki/%E7%B6%B2%E9%A0%81%E8%A8%AD%E8%A8%88" title="網頁設計 – Cantonese" lang="yue" hreflang="yue" data-title="網頁設計" data-language-autonym="粵語" data-language-local-name="Cantonese" class="interlanguage-link-target"><span>粵語</span></a></li><li class="interlanguage-link interwiki-zh mw-list-item"><a href="https://zh.wikipedia.org/wiki/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1" title="网页设计 – Chinese" lang="zh" hreflang="zh" data-title="网页设计" data-language-autonym="中文" data-language-local-name="Chinese" class="interlanguage-link-target"><span>中文</span></a></li> </ul> <div class="after-portlet after-portlet-lang"><span class="wb-langlinks-edit wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q190637#sitelinks-wikipedia" title="Edit interlanguage links" class="wbc-editpage">Edit links</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Namespaces"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Web_design" title="View the content page [c]" accesskey="c"><span>Article</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/Talk:Web_design" rel="discussion" title="Discuss improvements to the content page [t]" accesskey="t"><span>Talk</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Change language variant" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">English</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Views"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/Web_design"><span>Read</span></a></li><li id="ca-viewsource" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Web_design&action=edit" title="This page is protected.
You can view its source [e]" accesskey="e"><span>View source</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=Web_design&action=history" title="Past revisions of this page [h]" accesskey="h"><span>View history</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Tools" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Tools</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Tools</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">hide</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="More options" > <div class="vector-menu-heading"> Actions </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/Web_design"><span>Read</span></a></li><li id="ca-more-viewsource" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Web_design&action=edit"><span>View source</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=Web_design&action=history"><span>View history</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> General </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/Special:WhatLinksHere/Web_design" title="List of all English Wikipedia pages containing links to this page [j]" accesskey="j"><span>What links here</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/Special:RecentChangesLinked/Web_design" rel="nofollow" title="Recent changes in pages linked from this page [k]" accesskey="k"><span>Related changes</span></a></li><li id="t-upload" class="mw-list-item"><a href="/wiki/Wikipedia:File_Upload_Wizard" title="Upload files [u]" accesskey="u"><span>Upload file</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/Special:SpecialPages" title="A list of all special pages [q]" accesskey="q"><span>Special pages</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=Web_design&oldid=1259134159" title="Permanent link to this revision of this page"><span>Permanent link</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=Web_design&action=info" title="More information about this page"><span>Page information</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=Special:CiteThisPage&page=Web_design&id=1259134159&wpFormIdentifier=titleform" title="Information on how to cite this page"><span>Cite this page</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=Special:UrlShortener&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWeb_design"><span>Get shortened URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=Special:QrCode&url=https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FWeb_design"><span>Download QR code</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Print/export </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=Special:DownloadAsPdf&page=Web_design&action=show-download-screen" title="Download this page as a PDF file"><span>Download as PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=Web_design&printable=yes" title="Printable version of this page [p]" accesskey="p"><span>Printable version</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects" > <div class="vector-menu-heading"> In other projects </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li class="wb-otherproject-link wb-otherproject-commons mw-list-item"><a href="https://commons.wikimedia.org/wiki/Category:Web_design" hreflang="en"><span>Wikimedia Commons</span></a></li><li class="wb-otherproject-link wb-otherproject-wikiversity mw-list-item"><a href="https://en.wikiversity.org/wiki/Web_design" hreflang="en"><span>Wikiversity</span></a></li><li id="t-wikibase" class="wb-otherproject-link wb-otherproject-wikibase-dataitem mw-list-item"><a href="https://www.wikidata.org/wiki/Special:EntityPage/Q190637" title="Structured data on this page hosted by Wikidata [g]" accesskey="g"><span>Wikidata item</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Page tools"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Appearance"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Appearance</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">move to sidebar</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">hide</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> <div id="mw-indicator-pp-default" class="mw-indicator"><div class="mw-parser-output"><span typeof="mw:File"><a href="/wiki/Wikipedia:Protection_policy#semi" title="This article is semi-protected."><img alt="Page semi-protected" src="//upload.wikimedia.org/wikipedia/en/thumb/1/1b/Semi-protection-shackle.svg/20px-Semi-protection-shackle.svg.png" decoding="async" width="20" height="20" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/1/1b/Semi-protection-shackle.svg/30px-Semi-protection-shackle.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/1/1b/Semi-protection-shackle.svg/40px-Semi-protection-shackle.svg.png 2x" data-file-width="512" data-file-height="512" /></a></span></div></div> </div> <div id="siteSub" class="noprint">From Wikipedia, the free encyclopedia</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="en" dir="ltr"><div class="shortdescription nomobile noexcerpt noprint searchaux" style="display:none">Creation and maintenance of websites</div> <p> <b>Web design</b> encompasses many different skills and disciplines in the production and maintenance of <a href="/wiki/Website" title="Website">websites</a>. The different areas of web design include web graphic design; <a href="/wiki/User_interface_design" title="User interface design">user interface design</a> (UI design); authoring, including standardised code and <a href="/wiki/Proprietary_software" title="Proprietary software">proprietary software</a>; <a href="/wiki/User_experience_design" title="User experience design">user experience design</a> (UX design); and <a href="/wiki/Search_engine_optimization" title="Search engine optimization">search engine optimization</a>. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all.<sup id="cite_ref-different_jobs_1-0" class="reference"><a href="#cite_note-different_jobs-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup> 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 <a href="/wiki/Markup_language" title="Markup language">markup</a>. Web design partially overlaps <a href="/wiki/Web_engineering" title="Web engineering">web engineering</a> in the broader scope of <a href="/wiki/Web_development" title="Web development">web development</a>. Web designers are expected to have an awareness of <a href="/wiki/Web_usability" title="Web usability">usability</a> and be up to date with <a href="/wiki/Web_accessibility" title="Web accessibility">web accessibility</a> guidelines. </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="History">History</h2></div> <style data-mw-deduplicate="TemplateStyles:r1236090951">.mw-parser-output .hatnote{font-style:italic}.mw-parser-output div.hatnote{padding-left:1.6em;margin-bottom:0.5em}.mw-parser-output .hatnote i{font-style:normal}.mw-parser-output .hatnote+link+.hatnote{margin-top:-0.5em}@media print{body.ns-0 .mw-parser-output .hatnote{display:none!important}}</style><div role="note" class="hatnote navigation-not-searchable">See also: <a href="/wiki/History_of_the_World_Wide_Web" title="History of the World Wide Web">History of the World Wide Web</a></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:WebDesignBooks.JPG" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/3/32/WebDesignBooks.JPG/220px-WebDesignBooks.JPG" decoding="async" width="220" height="146" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/3/32/WebDesignBooks.JPG/330px-WebDesignBooks.JPG 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/3/32/WebDesignBooks.JPG/440px-WebDesignBooks.JPG 2x" data-file-width="4928" data-file-height="3264" /></a><figcaption>Web design books in a store</figcaption></figure> <div class="mw-heading mw-heading3"><h3 id="1988–2001"><span id="1988.E2.80.932001"></span>1988–2001</h3></div> <p>Although web design has a fairly recent history, it can be linked to other areas such as graphic design, user experience, and multimedia arts, but is more aptly seen from a technological standpoint. It has become a large part of people's everyday lives. It is hard to imagine the Internet without animated graphics, different styles of <a href="/wiki/Typography" title="Typography">typography</a>, backgrounds, videos and music. The web was announced on August 6, 1991; in November 1992, <a href="/wiki/CERN" title="CERN">CERN</a> was the first website to go live on the World Wide Web. During this period, websites were structured by using the <table> tag which created numbers on the website. Eventually, web designers were able to find their way around it to create more structures and formats. In early history, the structure of the websites was fragile and hard to contain, so it became very difficult to use them. In November 1993, <a href="/wiki/ALIWEB" title="ALIWEB">ALIWEB</a> was the first ever search engine to be created (Archie Like Indexing for the WEB).<sup id="cite_ref-2" class="reference"><a href="#cite_note-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="The_start_of_the_web_and_web_design">The start of the web and web design</h4></div> <p>In 1989, whilst working at <a href="/wiki/CERN" title="CERN">CERN</a>, <a href="/wiki/Tim_Berners-Lee" title="Tim Berners-Lee">Tim Berners-Lee</a> proposed to create a global <a href="/wiki/Hypertext" title="Hypertext">hypertext</a> project, which later became known as the <a href="/wiki/World_Wide_Web" title="World Wide Web">World Wide Web</a>. From 1991 to 1993 the World Wide Web was born. <a href="/wiki/Text-based_web_browser" title="Text-based web browser">Text-only</a> <a href="/wiki/HTML" title="HTML">HTML</a> pages could be viewed using a simple line-mode <a href="/wiki/Web_browser" title="Web browser">web browser</a>.<sup id="cite_ref-World_Wide_Web_3-0" class="reference"><a href="#cite_note-World_Wide_Web-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup> In 1993 <a href="/wiki/Marc_Andreessen" title="Marc Andreessen">Marc Andreessen</a> and <a href="/wiki/Eric_Bina" title="Eric Bina">Eric Bina</a>, created the <a href="/wiki/Mosaic_browser" class="mw-redirect" title="Mosaic browser">Mosaic browser</a>. At the time there were multiple browsers, however the majority of them were Unix-based and naturally text-heavy. There had been no integrated approach to <a href="/wiki/Graphic_design" title="Graphic design">graphic design</a> elements such as <a href="/wiki/Digital_image" title="Digital image">images</a> or <a href="/wiki/Digital_audio" title="Digital audio">sounds</a>. The <a href="/wiki/Mosaic_(web_browser)" class="mw-redirect" title="Mosaic (web browser)">Mosaic browser</a> broke this mould.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> The <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> was created in October 1994 to "lead the World Wide Web to its full potential by developing common <a href="/wiki/HTTP" title="HTTP">protocols</a> that promote its evolution and ensure its <a href="/wiki/Interoperability#Software" title="Interoperability">interoperability</a>."<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup> This discouraged any one company from monopolizing a proprietary browser and <a href="/wiki/Programming_language" title="Programming language">programming language</a>, which could have altered the effect of the World Wide Web as a whole. The W3C continues to set standards, which can today be seen with <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> and other languages. In 1994 Andreessen formed Mosaic Communications Corp. that later became known as <a href="/wiki/Netscape_Communications" class="mw-redirect" title="Netscape Communications">Netscape Communications</a>, the <a href="/wiki/Netscape_(web_browser)" title="Netscape (web browser)">Netscape 0.9 browser</a>. Netscape created its HTML tags without regard to the traditional standards process. For example, Netscape 1.1 included tags for changing background colours and formatting text with <a href="/wiki/HTML_element#Tables" title="HTML element">tables</a> on web pages. From 1996 to 1999 the <a href="/wiki/Browser_wars" title="Browser wars">browser wars</a> began, as <a href="/wiki/Microsoft" title="Microsoft">Microsoft</a> and <a href="/wiki/Netscape" title="Netscape">Netscape</a> fought for ultimate browser dominance. During this time there were many new technologies in the field, notably <a href="/wiki/Cascading_Style_Sheets" class="mw-redirect" title="Cascading Style Sheets">Cascading Style Sheets</a>, <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>, and <a href="/wiki/Dynamic_HTML" title="Dynamic HTML">Dynamic HTML</a>. On the whole, the browser competition did lead to many positive creations and helped web design evolve at a rapid pace.<sup id="cite_ref-Browsers_6-0" class="reference"><a href="#cite_note-Browsers-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="Evolution_of_web_design">Evolution of web design</h4></div> <p>In 1996, Microsoft released its first competitive browser, which was complete with its features and HTML tags. It was also the first browser to support style sheets, which at the time was seen as an obscure authoring technique and is today an important aspect of web design.<sup id="cite_ref-Browsers_6-1" class="reference"><a href="#cite_note-Browsers-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> The <a href="/wiki/HTML_markup" class="mw-redirect" title="HTML markup">HTML markup</a> for <a href="/wiki/HTML_element#Tables" title="HTML element">tables</a> was originally intended for displaying tabular data. However, designers quickly realized the potential of using HTML tables for creating complex, multi-column layouts that were otherwise not possible. At this time, as design and good aesthetics seemed to take precedence over good markup structure, little attention was paid to semantics and <a href="/wiki/Web_accessibility" title="Web accessibility">web accessibility</a>. HTML sites were limited in their design options, even more so with earlier versions of HTML. To create complex designs, many web designers had to use complicated table structures or even use blank <a href="/wiki/Spacer_.GIF" class="mw-redirect" title="Spacer .GIF">spacer .GIF</a> images to stop empty table cells from collapsing.<sup id="cite_ref-Chapman,_Evolution_7-0" class="reference"><a href="#cite_note-Chapman,_Evolution-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> <a href="/wiki/CSS" title="CSS">CSS</a> was introduced in December 1996 by the <a href="/wiki/W3C" class="mw-redirect" title="W3C">W3C</a> to support presentation and layout. This allowed <a href="/wiki/HTML" title="HTML">HTML</a> code to be semantic rather than both semantic and presentational and improved web accessibility, see <a href="/wiki/Tableless_web_design" title="Tableless web design">tableless web design</a>. </p><p>In 1996, <a href="/wiki/Adobe_Flash" title="Adobe Flash">Flash</a> (originally known as FutureSplash) was developed. At the time, the Flash content development tool was relatively simple compared to now, using basic layout and drawing tools, a limited precursor to <a href="/wiki/ActionScript" title="ActionScript">ActionScript</a>, and a timeline, but it enabled web designers to go beyond the point of HTML, <a href="/wiki/Graphics_Interchange_Format#Animated_GIF" class="mw-redirect" title="Graphics Interchange Format">animated GIFs</a> and <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>. However, because Flash required a <a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plug-in</a>, many web developers avoided using it for fear of limiting their market share due to lack of compatibility. Instead, designers reverted to <a href="/wiki/GIF" title="GIF">GIF</a> animations (if they did not forego using <a href="/wiki/Motion_graphics" title="Motion graphics">motion graphics</a> altogether) and JavaScript for <a href="/wiki/Software_widget" title="Software widget">widgets</a>. But the benefits of Flash made it popular enough among specific target markets to eventually work its way to the vast majority of browsers, and powerful enough to be used to develop entire sites.<sup id="cite_ref-Chapman,_Evolution_7-1" class="reference"><a href="#cite_note-Chapman,_Evolution-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading4"><h4 id="End_of_the_first_browser_wars">End of the first browser wars</h4></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Further information: <a href="/wiki/Browser_wars#First_Browser_War_(1995–2001)" title="Browser wars">Browser wars § First Browser War (1995–2001)</a></div> <p>In 1998, Netscape released Netscape Communicator code under an <a href="/wiki/Open-source_license" title="Open-source license">open-source licence</a>, enabling thousands of developers to participate in improving the software. However, these developers decided to start a standard for the web from scratch, which guided the development of the open-source browser and soon expanded to a complete application platform.<sup id="cite_ref-Browsers_6-2" class="reference"><a href="#cite_note-Browsers-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> The <a href="/wiki/Web_Standards_Project" title="Web Standards Project">Web Standards Project</a> was formed and promoted browser compliance with <a href="/wiki/HTML" title="HTML">HTML</a> and <a href="/wiki/CSS" title="CSS">CSS</a> standards. Programs like <a href="/wiki/Acid1" title="Acid1">Acid1</a>, <a href="/wiki/Acid2" title="Acid2">Acid2</a>, and <a href="/wiki/Acid3" title="Acid3">Acid3</a> were created in order to test browsers for compliance with web standards. In 2000, Internet Explorer was released for Mac, which was the first browser that fully supported HTML 4.01 and CSS 1. It was also the first browser to fully support the <a href="/wiki/Portable_Network_Graphics" class="mw-redirect" title="Portable Network Graphics">PNG</a> image format.<sup id="cite_ref-Browsers_6-3" class="reference"><a href="#cite_note-Browsers-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup> By 2001, after a campaign by Microsoft to popularize Internet Explorer, Internet Explorer had reached 96% of <a href="/wiki/Usage_share_of_web_browsers" title="Usage share of web browsers">web browser usage share</a>, which signified the end of the first browser wars as Internet Explorer had no real competition.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="2001–2012"><span id="2001.E2.80.932012"></span>2001–2012</h3></div> <p>Since the start of the 21st century, the web has become more and more integrated into people's lives. As this has happened the technology of the web has also moved on. There have also been significant changes in the way people use and access the web, and this has changed how sites are designed. </p><p>Since the end of the <a href="/wiki/Browser_wars" title="Browser wars">browsers wars</a><sup class="noprint Inline-Template" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers#Chronological_items" title="Wikipedia:Manual of Style/Dates and numbers"><span title="The time period mentioned near this tag is ambiguous. (May 2016)">when?</span></a></i>]</sup> new browsers have been released. Many of these are <a href="/wiki/Open-source_software" title="Open-source software">open source</a> meaning that they tend to have faster development and are more supportive of new standards. The new options are considered by many<sup class="noprint Inline-Template" style="margin-left:0.1em; white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Avoid_weasel_words" class="mw-redirect" title="Wikipedia:Avoid weasel words"><span title="Who says this? (May 2016)">weasel words</span></a></i>]</sup> to be better than Microsoft's <a href="/wiki/Internet_Explorer" title="Internet Explorer">Internet Explorer</a>. </p><p>The <a href="/wiki/World_Wide_Web_Consortium" title="World Wide Web Consortium">W3C</a> has released new standards for HTML (<a href="/wiki/HTML5" title="HTML5">HTML5</a>) and CSS (<a href="/wiki/CSS3" class="mw-redirect" title="CSS3">CSS3</a>), as well as new <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a> <a href="/wiki/Application_programming_interface" class="mw-redirect" title="Application programming interface">API's</a>, each as a new but individual standard.<sup class="noprint Inline-Template" style="white-space:nowrap;">[<i><a href="/wiki/Wikipedia:Manual_of_Style/Dates_and_numbers#Chronological_items" title="Wikipedia:Manual of Style/Dates and numbers"><span title="The time period mentioned near this tag is ambiguous. (May 2016)">when?</span></a></i>]</sup> While the term HTML5 is only used to refer to the new version of HTML and <i>some</i> of the JavaScript APIs, it has become common to use it to refer to the entire suite of new standards (HTML5, CSS3 and JavaScript). </p> <div class="mw-heading mw-heading3"><h3 id="2012_and_later">2012 and later</h3></div> <p>With the advancements in <a href="/wiki/3G" title="3G">3G</a> and <a href="/wiki/LTE_(telecommunication)" title="LTE (telecommunication)">LTE</a> internet coverage, a significant portion of website traffic shifted to mobile devices. This shift influenced the web design industry, steering it towards a minimalist, lighter, and more simplistic style. The "mobile first" approach emerged as a result, emphasizing the creation of website designs that prioritize mobile-oriented layouts first, before adapting them to larger screen dimensions. </p> <div class="mw-heading mw-heading2"><h2 id="Tools_and_technologies">Tools and technologies</h2></div> <p>Web designers use a variety of different tools depending on what part of the production process they are involved in. These tools are updated over time by newer standards and software but the principles behind them remain the same. Web designers use both <a href="/wiki/Vector_graphics_editor" title="Vector graphics editor">vector</a> and <a href="/wiki/Raster_graphics_editor" title="Raster graphics editor">raster</a> graphics editors to create web-formatted imagery or design prototypes. A website can be created using <a href="/wiki/WYSIWYG" title="WYSIWYG">WYSIWYG</a> <a href="/wiki/Website_builder" title="Website builder">website builder</a> software or <a href="/wiki/Content_management_system" title="Content management system">content management system</a>, or the individual web pages can be <a href="/wiki/Markup_language" title="Markup language">hand-coded</a> in just the same manner as the first web pages were created. Other tools web designers might use include markup <a href="/wiki/HTML_validator" class="mw-redirect" title="HTML validator">validators</a><sup id="cite_ref-W3C_validator_9-0" class="reference"><a href="#cite_note-W3C_validator-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> and other testing tools for usability and accessibility to ensure their websites meet web accessibility guidelines.<sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="UX_Design">UX Design</h3></div> <p>One popular tool in web design is UX Design, it is a type of art that designs products to perform an accurate user background. UX design is very deep. UX is more than the web, it is very independent, and its fundamentals can be applied to many other browsers or apps. Web design is mostly based on web-based things. UX can overlap both web design and design. UX design mostly focuses on products that are less web-based.<sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Skills_and_techniques">Skills and techniques</h2></div> <div class="mw-heading mw-heading3"><h3 id="Marketing_and_communication_design">Marketing and communication design</h3></div> <p>Marketing and communication design on a website may identify what works for its target market. This can be an age group or particular strand of culture; thus the designer may understand the trends of its audience. Designers may also understand the type of website they are designing, meaning, for example, that (B2B) <a href="/wiki/Business-to-business" title="Business-to-business">business-to-business</a> website design considerations might differ greatly from a consumer-targeted website such as a <a href="/wiki/Retail" title="Retail">retail</a> or entertainment website. Careful consideration might be made to ensure that the aesthetics or overall design of a site do not clash with the clarity and accuracy of the content or the ease of <a href="/wiki/Web_navigation" title="Web navigation">web navigation</a>,<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup> especially on a B2B website. Designers may also consider the reputation of the owner or business the site is representing to make sure they are portrayed favorably. Web designers normally oversee all the websites that are made on how they work or operate on things. They constantly are updating and changing everything on websites behind the scenes. All the elements they do are text, photos, graphics, and layout of the web. Before beginning work on a website, web designers normally set an appointment with their clients to discuss layout, colour, graphics, and design. Web designers spend the majority of their time designing websites and making sure the speed is right. Web designers typically engage in testing and working, marketing, and communicating with other designers about laying out the websites and finding the right elements for the websites.<sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="User_experience_design_and_interactive_design">User experience design and interactive design</h3></div> <p>User understanding of the content of a website often depends on user understanding of how the website works. This is part of the <a href="/wiki/User_experience_design" title="User experience design">user experience design</a>. User experience is related to layout, clear instructions, and labeling on a website. How well a user understands how they can interact on a site may also depend on the <a href="/wiki/Interactive_design" title="Interactive design">interactive design</a> of the site. If a user perceives the usefulness of the website, they are more likely to continue using it. Users who are skilled and well versed in website use may find a more distinctive, yet less intuitive or less <a href="/wiki/Usability" title="Usability">user-friendly</a> website interface useful nonetheless. However, users with less experience are less likely to see the advantages or usefulness of a less intuitive website interface. This drives the trend for a more universal user experience and ease of access to accommodate as many users as possible regardless of user skill.<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> Much of the user experience design and interactive design are considered in the <a href="/wiki/User_interface_design" title="User interface design">user interface design</a>. </p><p>Advanced interactive functions may require <a href="/wiki/Plug-in_(computing)" title="Plug-in (computing)">plug-ins</a> if not advanced coding language skills. Choosing whether or not to use interactivity that requires plug-ins is a critical decision in user experience design. If the plug-in doesn't come pre-installed with most browsers, there's a risk that the user will have neither the know-how nor the patience to install a plug-in just to access the content. If the function requires advanced coding language skills, it may be too costly in either time or money to code compared to the amount of enhancement the function will add to the user experience. There's also a risk that advanced interactivity may be incompatible with older browsers or hardware configurations. Publishing a function that doesn't work reliably is potentially worse for the user experience than making no attempt. It depends on the target audience if it's likely to be needed or worth any risks. </p> <div class="mw-heading mw-heading3"><h3 id="Progressive_enhancement">Progressive enhancement</h3></div> <figure class="mw-default-size" typeof="mw:File/Thumb"><a href="/wiki/File:Progressive_enhancement_web_design_pyramid_(HTML,_CSS,_JS).svg" class="mw-file-description"><img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg/220px-Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg.png" decoding="async" width="220" height="191" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg/330px-Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg/440px-Progressive_enhancement_web_design_pyramid_%28HTML%2C_CSS%2C_JS%29.svg.png 2x" data-file-width="346" data-file-height="300" /></a><figcaption>The order of progressive enhancement</figcaption></figure> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="/wiki/Progressive_enhancement" title="Progressive enhancement">Progressive enhancement</a></div> <p><b>Progressive enhancement</b> is a strategy in web design that puts emphasis on <a href="/wiki/Web_content" title="Web content">web content</a> first, allowing <a href="/wiki/Universal_design" title="Universal design">everyone to access</a> the basic content and functionality of a web page, whilst <a href="/wiki/User_(computing)" title="User (computing)">users</a> with additional browser features or faster Internet access receive the enhanced version instead. </p><p>In practice, this means serving content through <a href="/wiki/HTML" title="HTML">HTML</a> and applying styling and animation through <a href="/wiki/CSS" title="CSS">CSS</a> to the technically possible extent, then applying further enhancements through <a href="/wiki/JavaScript" title="JavaScript">JavaScript</a>. Pages' text is loaded immediately through the HTML source code rather than having to wait for JavaScript to initiate and load the content subsequently, which allows content to be readable with minimum loading time and bandwidth, and through <a href="/wiki/Text-based_browser" class="mw-redirect" title="Text-based browser">text-based browsers</a>, and maximizes <a href="/wiki/Backwards_compatibility" class="mw-redirect" title="Backwards compatibility">backwards compatibility</a>.<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup> </p><p>As an example, <a href="/wiki/MediaWiki" title="MediaWiki">MediaWiki</a>-based sites including Wikipedia use progressive enhancement, as they remain usable while JavaScript and even CSS is deactivated, as pages' content is included in the page's HTML source code, whereas counter-example <a href="/wiki/Everipedia" title="Everipedia">Everipedia</a> relies on JavaScript to load pages' content subsequently; a blank page appears with JavaScript deactivated. </p> <div class="mw-heading mw-heading3"><h3 id="Page_layout">Page layout</h3></div> <p>Part of the user interface design is affected by the quality of the <a href="/wiki/Page_layout" title="Page layout">page layout</a>. For example, a designer may consider whether the site's page layout should remain consistent on different pages when designing the layout. Page pixel width may also be considered vital for aligning objects in the layout design. The most popular fixed-width websites generally have the same set width to match the current most popular browser window, at the current most popular screen resolution, on the current most popular monitor size. Most pages are also center-aligned for concerns of <a href="/wiki/Aesthetics" title="Aesthetics">aesthetics</a> on larger screens. </p><p><b>Fluid layouts</b> increased in popularity around 2000 to allow the browser to make user-specific layout adjustments to fluid layouts based on the details of the reader's screen (window size, font size relative to window, etc.). They grew as an alternative to HTML-table-based layouts and <a href="/wiki/Grid_(page_layout)" class="mw-redirect" title="Grid (page layout)">grid-based design</a> in both page layout design principles and in coding technique but were very slow to be adopted.<sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>note 1<span class="cite-bracket">]</span></a></sup> This was due to considerations of <a href="/wiki/Screen_reader" title="Screen reader">screen reading devices</a> and varying windows sizes which designers have no control over. Accordingly, a design may be broken down into units (sidebars, content blocks, <a href="/wiki/Web_banner" title="Web banner">embedded advertising</a> areas, navigation areas) that are sent to the browser and which will be fitted into the display window by the browser, as best it can. Although such a display may often change the relative position of major content units, sidebars may be displaced below <a href="/wiki/Body_text" title="Body text">body text</a> rather than to the side of it. This is a more flexible display than a hard-coded grid-based layout that doesn't fit the device window. In particular, the relative position of content blocks may change while leaving the content within the block unaffected. This also minimizes the user's need to horizontally scroll the page. </p><p><a href="/wiki/Responsive_web_design" title="Responsive web design">Responsive web design</a> is a newer approach, based on CSS3, and a deeper level of per-device specification within the page's style sheet through an enhanced use of the CSS <code>@media</code> rule. In March 2018 Google announced they would be rolling out mobile-first indexing.<sup id="cite_ref-17" class="reference"><a href="#cite_note-17"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup> Sites using responsive design are well placed to ensure they meet this new approach. </p> <div class="mw-heading mw-heading3"><h3 id="Typography">Typography</h3></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="/wiki/Typography" title="Typography">typography</a></div> <p>Web designers may choose to limit the variety of website typefaces to only a few which are of a similar style, instead of using a wide range of <a href="/wiki/Typeface" title="Typeface">typefaces</a> or <a href="/wiki/Typeface#Style_of_typefaces" title="Typeface">type styles</a>. Most browsers recognize a specific number of safe fonts, which designers mainly use in order to avoid complications. </p><p>Font downloading was later included in the CSS3 fonts module and has since been implemented in Safari 3.1, <a href="/wiki/Opera_10" class="mw-redirect" title="Opera 10">Opera 10</a>, and <a href="/wiki/Mozilla_Firefox_3.5" class="mw-redirect" title="Mozilla Firefox 3.5">Mozilla Firefox 3.5</a>. This has subsequently increased interest in <a href="/wiki/Web_typography" title="Web typography">web typography</a>, as well as the usage of font downloading. </p><p>Most site layouts incorporate negative space to break the text up into paragraphs and also avoid center-aligned text.<sup id="cite_ref-18" class="reference"><a href="#cite_note-18"><span class="cite-bracket">[</span>17<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Motion_graphics">Motion graphics</h3></div> <p>The page layout and user interface may also be affected by the use of motion graphics. The choice of whether or not to use motion graphics may depend on the target market for the website. Motion graphics may be expected or at least better received with an entertainment-oriented website. However, a website target audience with a more serious or formal interest (such as business, community, or government) might find animations unnecessary and distracting if only for entertainment or decoration purposes. This doesn't mean that more serious content couldn't be enhanced with animated or video presentations that is relevant to the content. In either case, <a href="/wiki/Motion_graphic_design" title="Motion graphic design">motion graphic design</a> may make the difference between more effective visuals or distracting visuals. </p><p>Motion graphics that are not initiated by the site visitor can produce accessibility issues. The World Wide Web consortium accessibility standards require that site visitors be able to disable the animations.<sup id="cite_ref-19" class="reference"><a href="#cite_note-19"><span class="cite-bracket">[</span>18<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Quality_of_code">Quality of code</h3></div> <p>Website designers may consider it to be good practice to conform to standards. This is usually done via a description specifying what the element is doing. Failure to conform to standards may not make a website unusable or error-prone, but standards can relate to the correct layout of pages for readability as well as making sure coded elements are closed appropriately. This includes errors in code, a more organized layout for code, and making sure IDs and classes are identified properly. Poorly coded pages are sometimes colloquially called <a href="/wiki/Tag_soup" title="Tag soup">tag soup</a>. <a href="/wiki/W3C_Markup_Validation_Service" title="W3C Markup Validation Service">Validating via W3C</a><sup id="cite_ref-W3C_validator_9-1" class="reference"><a href="#cite_note-W3C_validator-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup> can only be done when a correct DOCTYPE declaration is made, which is used to highlight errors in code. The system identifies the errors and areas that do not conform to web design standards. This information can then be corrected by the user.<sup id="cite_ref-20" class="reference"><a href="#cite_note-20"><span class="cite-bracket">[</span>19<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading3"><h3 id="Generated_content">Generated content</h3></div> <p>There are two ways websites are generated: statically or dynamically. </p> <div class="mw-heading mw-heading4"><h4 id="Static_websites">Static websites</h4></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="/wiki/Static_web_page" title="Static web page">Static web page</a></div> <p>A static website stores a unique file for every page of a static website. Each time that page is requested, the same content is returned. This content is created once, during the design of the website. It is usually manually authored, although some sites use an automated creation process, similar to a dynamic website, whose results are stored long-term as completed pages. These automatically created static sites became more popular around 2015, with generators such as <a href="/wiki/Jekyll_(software)" title="Jekyll (software)">Jekyll</a> and <a href="/wiki/Adobe_Muse" title="Adobe Muse">Adobe Muse</a>.<sup id="cite_ref-21" class="reference"><a href="#cite_note-21"><span class="cite-bracket">[</span>20<span class="cite-bracket">]</span></a></sup> </p><p>The benefits of a static website are that they were simpler to host, as their server only needed to serve static content, not execute server-side scripts. This required less server administration and had less chance of exposing security holes. They could also serve pages more quickly, on low-cost server hardware. This advantage became less important as cheap web hosting expanded to also offer dynamic features, and <a href="/wiki/Virtual_machine" title="Virtual machine">virtual servers</a> offered high performance for short intervals at low cost. </p><p>Almost all websites have some static content, as supporting assets such as images and style sheets are usually static, even on a website with highly dynamic pages. </p> <div class="mw-heading mw-heading4"><h4 id="Dynamic_websites">Dynamic websites</h4></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236090951"><div role="note" class="hatnote navigation-not-searchable">Main article: <a href="/wiki/Dynamic_web_page" title="Dynamic web page">Dynamic web page</a></div> <p>Dynamic websites are generated on the fly and use server-side technology to generate web pages. They typically extract their content from one or more back-end databases: some are database queries across a relational database to query a catalog or to summarise numeric information, and others may use a <a href="/wiki/Document_database" class="mw-redirect" title="Document database">document database</a> such as <a href="/wiki/MongoDB" title="MongoDB">MongoDB</a> or <a href="/wiki/NoSQL" title="NoSQL">NoSQL</a> to store larger units of content, such as blog posts or wiki articles. </p><p>In the design process, dynamic pages are often mocked-up or <a href="/wiki/Website_wireframe" title="Website wireframe">wireframed</a> using static pages. The skillset needed to develop dynamic web pages is much broader than for a static page, involving server-side and database coding as well as client-side interface design. Even medium-sized dynamic projects are thus almost always a team effort. </p><p>When dynamic web pages first developed, they were typically coded directly in languages such as <a href="/wiki/Perl" title="Perl">Perl</a>, <a href="/wiki/PHP" title="PHP">PHP</a> or <a href="/wiki/Active_Server_Pages" title="Active Server Pages">ASP</a>. Some of these, notably PHP and ASP, used a 'template' approach where a server-side page resembled the structure of the completed client-side page, and data was inserted into places defined by 'tags'. This was a quicker means of development than coding in a purely procedural coding language such as Perl. </p><p>Both of these approaches have now been supplanted for many websites by higher-level application-focused tools such as <a href="/wiki/Content_management_system" title="Content management system">content management systems</a>. These build on top of general-purpose coding platforms and assume that a website exists to offer content according to one of several well-recognised models, such as a time-sequenced <a href="/wiki/Blog" title="Blog">blog</a>, a thematic magazine or news site, a wiki, or a user forum. These tools make the implementation of such a site very easy, and a purely organizational and design-based task, without requiring any coding. </p><p>Editing the content itself (as well as the template page) can be done both by means of the site itself and with the use of third-party software. The ability to edit all pages is provided only to a specific category of users (for example, administrators, or registered users). In some cases, anonymous users are allowed to edit certain web content, which is less frequent (for example, on forums - adding messages). An example of a site with an anonymous change is <a href="/wiki/Wikipedia" title="Wikipedia">Wikipedia</a>. </p> <div class="mw-heading mw-heading2"><h2 id="Homepage_design">Homepage design</h2></div> <p>Usability experts, including <a href="/wiki/Jakob_Nielsen_(usability_consultant)" title="Jakob Nielsen (usability consultant)">Jakob Nielsen</a> and Kyle Soucy, have often emphasised homepage design for website success and asserted that the homepage is the most important page on a website.<sup id="cite_ref-22" class="reference"><a href="#cite_note-22"><span class="cite-bracket">[</span>21<span class="cite-bracket">]</span></a></sup><style data-mw-deduplicate="TemplateStyles:r1238218222">.mw-parser-output cite.citation{font-style:inherit;word-wrap:break-word}.mw-parser-output .citation q{quotes:"\"""\"""'""'"}.mw-parser-output .citation:target{background-color:rgba(0,127,255,0.133)}.mw-parser-output .id-lock-free.id-lock-free a{background:url("//upload.wikimedia.org/wikipedia/commons/6/65/Lock-green.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-limited.id-lock-limited a,.mw-parser-output .id-lock-registration.id-lock-registration a{background:url("//upload.wikimedia.org/wikipedia/commons/d/d6/Lock-gray-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .id-lock-subscription.id-lock-subscription a{background:url("//upload.wikimedia.org/wikipedia/commons/a/aa/Lock-red-alt-2.svg")right 0.1em center/9px no-repeat}.mw-parser-output .cs1-ws-icon a{background:url("//upload.wikimedia.org/wikipedia/commons/4/4c/Wikisource-logo.svg")right 0.1em center/12px no-repeat}body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-free a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-limited a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-registration a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .id-lock-subscription a,body:not(.skin-timeless):not(.skin-minerva) .mw-parser-output .cs1-ws-icon a{background-size:contain;padding:0 1em 0 0}.mw-parser-output .cs1-code{color:inherit;background:inherit;border:none;padding:inherit}.mw-parser-output .cs1-hidden-error{display:none;color:var(--color-error,#d33)}.mw-parser-output .cs1-visible-error{color:var(--color-error,#d33)}.mw-parser-output .cs1-maint{display:none;color:#085;margin-left:0.3em}.mw-parser-output .cs1-kern-left{padding-left:0.2em}.mw-parser-output .cs1-kern-right{padding-right:0.2em}.mw-parser-output .citation .mw-selflink{font-weight:inherit}@media screen{.mw-parser-output .cs1-format{font-size:95%}html.skin-theme-clientpref-night .mw-parser-output .cs1-maint{color:#18911f}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .cs1-maint{color:#18911f}}</style><cite id="CITEREFNielsenTahir2001" class="citation cs2">Nielsen, Jakob; Tahir, Marie (October 2001), <a rel="nofollow" class="external text" href="https://archive.org/details/homepageusabilit00jako_0"><i>Homepage Usability: 50 Websites Deconstructed</i></a>, New Riders Publishing, <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-7357-1102-0" title="Special:BookSources/978-0-7357-1102-0"><bdi>978-0-7357-1102-0</bdi></a></cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Homepage+Usability%3A+50+Websites+Deconstructed&rft.pub=New+Riders+Publishing&rft.date=2001-10&rft.isbn=978-0-7357-1102-0&rft.aulast=Nielsen&rft.aufirst=Jakob&rft.au=Tahir%2C+Marie&rft_id=https%3A%2F%2Farchive.org%2Fdetails%2Fhomepageusabilit00jako_0&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span><sup id="cite_ref-23" class="reference"><a href="#cite_note-23"><span class="cite-bracket">[</span>22<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-24" class="reference"><a href="#cite_note-24"><span class="cite-bracket">[</span>23<span class="cite-bracket">]</span></a></sup> However practitioners into the 2000s were starting to find that a growing number of website traffic was bypassing the homepage, going directly to internal content pages through search engines, e-newsletters and RSS feeds.<sup id="cite_ref-25" class="reference"><a href="#cite_note-25"><span class="cite-bracket">[</span>24<span class="cite-bracket">]</span></a></sup> This led many practitioners to argue that homepages are less important than most people think.<sup id="cite_ref-26" class="reference"><a href="#cite_note-26"><span class="cite-bracket">[</span>25<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-27" class="reference"><a href="#cite_note-27"><span class="cite-bracket">[</span>26<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-28" class="reference"><a href="#cite_note-28"><span class="cite-bracket">[</span>27<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-29" class="reference"><a href="#cite_note-29"><span class="cite-bracket">[</span>28<span class="cite-bracket">]</span></a></sup> Jared Spool argued in 2007 that a site's homepage was actually the least important page on a website.<sup id="cite_ref-30" class="reference"><a href="#cite_note-30"><span class="cite-bracket">[</span>29<span class="cite-bracket">]</span></a></sup> </p><p>In 2012 and 2013, carousels (also called 'sliders' and 'rotating banners') have become an extremely popular design element on homepages, often used to showcase featured or recent content in a confined space.<sup id="cite_ref-Messner2013_31-0" class="reference"><a href="#cite_note-Messner2013-31"><span class="cite-bracket">[</span>30<span class="cite-bracket">]</span></a></sup> Many practitioners argue that carousels are an ineffective design element and hurt a website's search engine optimisation and usability.<sup id="cite_ref-Messner2013_31-1" class="reference"><a href="#cite_note-Messner2013-31"><span class="cite-bracket">[</span>30<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-32" class="reference"><a href="#cite_note-32"><span class="cite-bracket">[</span>31<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-33" class="reference"><a href="#cite_note-33"><span class="cite-bracket">[</span>32<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="Occupations">Occupations</h2></div> <p>There are two primary jobs involved in creating a website: the web designer and <a href="/wiki/Web_developer" title="Web developer">web developer</a>, who often work closely together on a website.<sup id="cite_ref-careersinwebdesign_34-0" class="reference"><a href="#cite_note-careersinwebdesign-34"><span class="cite-bracket">[</span>33<span class="cite-bracket">]</span></a></sup> The web designers are responsible for the visual aspect, which includes the layout, colouring, and typography of a web page. Web designers will also have a working knowledge of <a href="/wiki/Markup_language" title="Markup language">markup languages</a> such as HTML and CSS, although the extent of their knowledge will differ from one web designer to another. Particularly in smaller organizations, one person will need the necessary skills for designing and programming the full web page, while larger organizations may have a web designer responsible for the visual aspect alone. </p><p>Further jobs which may become involved in the creation of a website include: </p> <ul><li><a href="/wiki/Graphic_designers" class="mw-redirect" title="Graphic designers">Graphic designers</a> to create visuals for the site such as logos, layouts, and buttons</li> <li>Internet marketing specialists to help maintain web presence through strategic solutions on targeting viewers to the site, by using marketing and promotional techniques on the internet</li> <li>SEO writers to research and recommend the correct words to be incorporated into a particular website and make the website more accessible and found on numerous search engines</li> <li>Internet copywriter to create the written content of the page to appeal to the targeted viewers of the site<sup id="cite_ref-different_jobs_1-1" class="reference"><a href="#cite_note-different_jobs-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup></li> <li>User experience <a href="/wiki/User_experience_design" title="User experience design">(UX) designer</a> incorporates aspects of user-focused design considerations which include information architecture, user-centred design, user testing, interaction design, and occasionally visual design.</li></ul> <div class="mw-heading mw-heading2"><h2 id="Artificial_intelligence_and_web_design">Artificial intelligence and web design</h2></div> <p>Chat GPT and other AI models are being used to write and code websites making it faster and easier to create websites. There are still ethical debates on using artificial intelligence for design as the world becomes more familiar with using AI for tedious tasks used in design processes.<sup id="cite_ref-35" class="reference"><a href="#cite_note-35"><span class="cite-bracket">[</span>34<span class="cite-bracket">]</span></a></sup> </p> <div class="mw-heading mw-heading2"><h2 id="See_also">See also</h2></div> <style data-mw-deduplicate="TemplateStyles:r1239009302">.mw-parser-output .portalbox{padding:0;margin:0.5em 0;display:table;box-sizing:border-box;max-width:175px;list-style:none}.mw-parser-output .portalborder{border:1px solid var(--border-color-base,#a2a9b1);padding:0.1em;background:var(--background-color-neutral-subtle,#f8f9fa)}.mw-parser-output .portalbox-entry{display:table-row;font-size:85%;line-height:110%;height:1.9em;font-style:italic;font-weight:bold}.mw-parser-output .portalbox-image{display:table-cell;padding:0.2em;vertical-align:middle;text-align:center}.mw-parser-output .portalbox-link{display:table-cell;padding:0.2em 0.2em 0.2em 0.3em;vertical-align:middle}@media(min-width:720px){.mw-parser-output .portalleft{clear:left;float:left;margin:0.5em 1em 0.5em 0}.mw-parser-output .portalright{clear:right;float:right;margin:0.5em 0 0.5em 1em}}</style><ul role="navigation" aria-label="Portals" class="noprint portalbox portalborder portalright"> <li class="portalbox-entry"><span class="portalbox-image"><span class="noviewer" typeof="mw:File"><a href="/wiki/File:Crystal_Clear_app_linneighborhood.svg" class="mw-file-description"><img alt="icon" src="//upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crystal_Clear_app_linneighborhood.svg/28px-Crystal_Clear_app_linneighborhood.svg.png" decoding="async" width="28" height="28" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crystal_Clear_app_linneighborhood.svg/42px-Crystal_Clear_app_linneighborhood.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/f/f9/Crystal_Clear_app_linneighborhood.svg/56px-Crystal_Clear_app_linneighborhood.svg.png 2x" data-file-width="407" data-file-height="407" /></a></span></span><span class="portalbox-link"><a href="/wiki/Portal:Internet" title="Portal:Internet">Internet portal</a></span></li></ul> <table style="width:100%;"> <tbody><tr valign="top"> <td style="width:33%;"> <ul><li><a href="/wiki/Aesthetics" title="Aesthetics">Aesthetics</a></li> <li><a href="/wiki/Color_theory" title="Color theory">Color theory</a></li> <li><a href="/wiki/Composition_(visual_arts)" title="Composition (visual arts)">Composition (visual arts)</a></li> <li><a href="/wiki/Cross-browser" class="mw-redirect" title="Cross-browser">Cross-browser</a></li> <li><a href="/wiki/Design_education" title="Design education">Design education</a></li> <li><a href="/wiki/Drawing" title="Drawing">Drawing</a></li> <li><a href="/wiki/Dark_pattern" title="Dark pattern">Dark pattern</a></li> <li><a href="/wiki/European_Design_Awards" title="European Design Awards">European Design Awards</a></li> <li><a href="/wiki/First_Things_First_2000_manifesto" title="First Things First 2000 manifesto">First Things First 2000 manifesto</a></li></ul> </td> <td style="width:33%;"> <ul><li><a href="/wiki/Graphic_art_software" title="Graphic art software">Graphic art software</a></li> <li><a href="/wiki/Graphic_design_occupations" title="Graphic design occupations">Graphic design occupations</a></li> <li><a href="/wiki/Graphics" title="Graphics">Graphics</a></li> <li><a href="/wiki/Information_graphics" class="mw-redirect" title="Information graphics">Information graphics</a></li> <li><a href="/wiki/Category:Graphic_design_schools" title="Category:Graphic design schools">List of graphic design institutions</a></li> <li><a href="/wiki/List_of_graphic_designers" title="List of graphic designers">List of notable graphic designers</a></li> <li><a href="/wiki/Logotype" class="mw-redirect" title="Logotype">Logotype</a></li> <li><a href="/wiki/Outline_of_web_design_and_web_development" title="Outline of web design and web development">Outline of web design and web development</a></li> <li><a href="/wiki/Progressive_Enhancement" class="mw-redirect" title="Progressive Enhancement">Progressive Enhancement</a></li></ul> </td> <td style="width:33%;"> <ul><li><a href="/wiki/Style_guide" title="Style guide">Style guide</a></li> <li><a href="/wiki/Web_2.0" title="Web 2.0">Web 2.0</a></li> <li><a href="/wiki/Web_colors" title="Web colors">Web colors</a></li> <li><a href="/wiki/Web_safe_fonts" class="mw-redirect" title="Web safe fonts">Web safe fonts</a></li> <li><a href="/wiki/Web_usability" title="Web usability">Web usability</a></li> <li><a href="/wiki/Web_application_framework" class="mw-redirect" title="Web application framework">Web application framework</a></li> <li><a href="/wiki/Website_builder" title="Website builder">Website builder</a></li> <li><a href="/wiki/Website_wireframe" title="Website wireframe">Website wireframe</a></li></ul> </td></tr></tbody></table> <div class="mw-heading mw-heading3"><h3 id="Related_disciplines">Related disciplines</h3></div> <table style="width:100%;"> <tbody><tr valign="top"> <td style="width:33%;"> <ul><li><a href="/wiki/Communication_design" title="Communication design">Communication design</a></li> <li><a href="/wiki/Copywriting" title="Copywriting">Copywriting</a></li> <li><a href="/wiki/Desktop_publishing" title="Desktop publishing">Desktop publishing</a></li> <li><a href="/wiki/Digital_illustration" title="Digital illustration">Digital illustration</a></li> <li><a href="/wiki/Graphic_design" title="Graphic design">Graphic design</a></li> <li><a href="/wiki/Interaction_design" title="Interaction design">Interaction design</a></li></ul> </td> <td style="width:33%;"> <ul><li><a href="/wiki/Information_design" title="Information design">Information design</a></li> <li><a href="/wiki/Light-on-dark_color_scheme" title="Light-on-dark color scheme">Light-on-dark color scheme</a></li> <li><a href="/wiki/Marketing_communications" title="Marketing communications">Marketing communications</a></li> <li><a href="/wiki/Motion_graphic_design" title="Motion graphic design">Motion graphic design</a></li> <li><a href="/wiki/New_media" title="New media">New media</a></li> <li><a href="/wiki/Search_engine_optimization" title="Search engine optimization">Search engine optimization</a> (SEO)</li></ul> </td> <td style="width:33%;"> <ul><li><a href="/wiki/Technical_Writer" class="mw-redirect" title="Technical Writer">Technical Writer</a></li> <li><a href="/wiki/Typography" title="Typography">Typography</a></li> <li><a href="/wiki/User_experience" title="User experience">User experience</a></li> <li><a href="/wiki/User_interface_design" title="User interface design">User interface design</a></li> <li><a href="/wiki/Web_development" title="Web development">Web development</a></li> <li><a href="/wiki/Computer_animation#Web_animations" title="Computer animation">Web animations</a></li></ul> </td></tr></tbody></table> <div class="mw-heading mw-heading2"><h2 id="Notes">Notes</h2></div> <style data-mw-deduplicate="TemplateStyles:r1239543626">.mw-parser-output .reflist{margin-bottom:0.5em;list-style-type:decimal}@media screen{.mw-parser-output .reflist{font-size:90%}}.mw-parser-output .reflist .references{font-size:100%;margin-bottom:0;list-style-type:inherit}.mw-parser-output .reflist-columns-2{column-width:30em}.mw-parser-output .reflist-columns-3{column-width:25em}.mw-parser-output .reflist-columns{margin-top:0.3em}.mw-parser-output .reflist-columns ol{margin-top:0}.mw-parser-output .reflist-columns li{page-break-inside:avoid;break-inside:avoid-column}.mw-parser-output .reflist-upper-alpha{list-style-type:upper-alpha}.mw-parser-output .reflist-upper-roman{list-style-type:upper-roman}.mw-parser-output .reflist-lower-alpha{list-style-type:lower-alpha}.mw-parser-output .reflist-lower-greek{list-style-type:lower-greek}.mw-parser-output .reflist-lower-roman{list-style-type:lower-roman}</style><div class="reflist reflist-lower-roman"> <div class="mw-references-wrap"><ol class="references"> <li id="cite_note-16"><span class="mw-cite-backlink"><b><a href="#cite_ref-16">^</a></b></span> <span class="reference-text"><code><table></code>-based markup and <a href="/wiki/Spacer_.GIF" class="mw-redirect" title="Spacer .GIF">spacer .GIF</a> images</span> </li> </ol></div></div> <div class="mw-heading mw-heading2"><h2 id="References">References</h2></div> <link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239543626"><div class="reflist reflist-columns references-column-width" style="column-width: 30em;"> <ol class="references"> <li id="cite_note-different_jobs-1"><span class="mw-cite-backlink">^ <a href="#cite_ref-different_jobs_1-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-different_jobs_1-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFLester" class="citation web cs1">Lester, Georgina. <a rel="nofollow" class="external text" href="https://www.arts-wales.co.uk/different-jobs-and-responsibilities-of-various-people-involved-in-creating-a-website/">"Different jobs and responsibilities of various people involved in creating a website"</a>. Arts Wales UK<span class="reference-accessdate">. Retrieved <span class="nowrap">2012-03-17</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Different+jobs+and+responsibilities+of+various+people+involved+in+creating+a+website&rft.pub=Arts+Wales+UK&rft.aulast=Lester&rft.aufirst=Georgina&rft_id=https%3A%2F%2Fwww.arts-wales.co.uk%2Fdifferent-jobs-and-responsibilities-of-various-people-involved-in-creating-a-website%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-2"><span class="mw-cite-backlink"><b><a href="#cite_ref-2">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFCPBI" class="citation web cs1">CPBI, Ryan Shelley. <a rel="nofollow" class="external text" href="https://www.smamarketing.net/blog/the-history-of-website-design">"The History of Website Design: 30 Years of Building the Web [2022 Update]"</a>. <i>www.smamarketing.net</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2022-10-12</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=www.smamarketing.net&rft.atitle=The+History+of+Website+Design%3A+30+Years+of+Building+the+Web+%5B2022+Update%5D&rft.aulast=CPBI&rft.aufirst=Ryan+Shelley&rft_id=https%3A%2F%2Fwww.smamarketing.net%2Fblog%2Fthe-history-of-website-design&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-World_Wide_Web-3"><span class="mw-cite-backlink"><b><a href="#cite_ref-World_Wide_Web_3-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://www.w3.org/People/Berners-Lee/Longer.html">"Longer Biography"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2012-03-16</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Longer+Biography&rft_id=http%3A%2F%2Fwww.w3.org%2FPeople%2FBerners-Lee%2FLonger.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-4"><span class="mw-cite-backlink"><b><a href="#cite_ref-4">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20130902095803/http://www.techopedia.com/images/pdfs/history-of-the-internet.pdf">"Mosaic Browser"</a> <span class="cs1-format">(PDF)</span>. Archived from <a rel="nofollow" class="external text" href="http://www.techopedia.com/images/pdfs/history-of-the-internet.pdf">the original</a> <span class="cs1-format">(PDF)</span> on 2013-09-02<span class="reference-accessdate">. Retrieved <span class="nowrap">2012-03-16</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Mosaic+Browser&rft_id=http%3A%2F%2Fwww.techopedia.com%2Fimages%2Fpdfs%2Fhistory-of-the-internet.pdf&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-5"><span class="mw-cite-backlink"><b><a href="#cite_ref-5">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFZwicky,_E.DCooper,_SChapman,_D.B.2000" class="citation book cs1">Zwicky, E.D; Cooper, S; Chapman, D.B. (2000). <a rel="nofollow" class="external text" href="https://archive.org/details/buildinginternet00zwic/page/804"><i>Building Internet Firewalls</i></a>. United States: O'Reily & Associates. p. <a rel="nofollow" class="external text" href="https://archive.org/details/buildinginternet00zwic/page/804">804</a>. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/1-56592-871-7" title="Special:BookSources/1-56592-871-7"><bdi>1-56592-871-7</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Building+Internet+Firewalls&rft.place=United+States&rft.pages=804&rft.pub=O%27Reily+%26+Associates&rft.date=2000&rft.isbn=1-56592-871-7&rft.au=Zwicky%2C+E.D&rft.au=Cooper%2C+S&rft.au=Chapman%2C+D.B.&rft_id=https%3A%2F%2Farchive.org%2Fdetails%2Fbuildinginternet00zwic%2Fpage%2F804&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-Browsers-6"><span class="mw-cite-backlink">^ <a href="#cite_ref-Browsers_6-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Browsers_6-1"><sup><i><b>b</b></i></sup></a> <a href="#cite_ref-Browsers_6-2"><sup><i><b>c</b></i></sup></a> <a href="#cite_ref-Browsers_6-3"><sup><i><b>d</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFNiederst2006" class="citation book cs1">Niederst, Jennifer (2006). <a rel="nofollow" class="external text" href="https://books.google.com/books?id=bdf4vS2n7N8C&q=history+of+web+design&pg=PT42"><i>Web Design In a Nutshell</i></a>. United States of America: O'Reilly Media. pp. 12–14. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/0-596-00987-9" title="Special:BookSources/0-596-00987-9"><bdi>0-596-00987-9</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Web+Design+In+a+Nutshell&rft.place=United+States+of+America&rft.pages=12-14&rft.pub=O%27Reilly+Media&rft.date=2006&rft.isbn=0-596-00987-9&rft.aulast=Niederst&rft.aufirst=Jennifer&rft_id=https%3A%2F%2Fbooks.google.com%2Fbooks%3Fid%3Dbdf4vS2n7N8C%26q%3Dhistory%2Bof%2Bweb%2Bdesign%26pg%3DPT42&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-Chapman,_Evolution-7"><span class="mw-cite-backlink">^ <a href="#cite_ref-Chapman,_Evolution_7-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Chapman,_Evolution_7-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFChapman" class="citation cs2">Chapman, Cameron, <a rel="nofollow" class="external text" href="https://web.archive.org/web/20131030030802/http://sixrevisions.com/web_design/the-evolution-of-web-design/"><i>The Evolution of Web Design</i></a>, Six Revisions, archived from <a rel="nofollow" class="external text" href="http://sixrevisions.com/web_design/the-evolution-of-web-design/">the original</a> on 30 October 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=The+Evolution+of+Web+Design&rft.pub=Six+Revisions&rft.aulast=Chapman&rft.aufirst=Cameron&rft_id=http%3A%2F%2Fsixrevisions.com%2Fweb_design%2Fthe-evolution-of-web-design%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-8"><span class="mw-cite-backlink"><b><a href="#cite_ref-8">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://amo.net/NT/01-30-01MSFTIE6.html">"AMO.NET America's Multimedia Online (Internet Explorer 6 PREVIEW)"</a>. <i>amo.net</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2020-05-27</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=amo.net&rft.atitle=AMO.NET+America%27s+Multimedia+Online+%28Internet+Explorer+6+PREVIEW%29&rft_id=http%3A%2F%2Famo.net%2FNT%2F01-30-01MSFTIE6.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-W3C_validator-9"><span class="mw-cite-backlink">^ <a href="#cite_ref-W3C_validator_9-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-W3C_validator_9-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="http://validator.w3.org/">"W3C Markup Validation Service"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=W3C+Markup+Validation+Service&rft_id=http%3A%2F%2Fvalidator.w3.org%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-10"><span class="mw-cite-backlink"><b><a href="#cite_ref-10">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFW3C" class="citation web cs1">W3C. <a rel="nofollow" class="external text" href="http://www.w3.org/WAI/">"Web Accessibility Initiative (WAI)"</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=Web+Accessibility+Initiative+%28WAI%29&rft.au=W3C&rft_id=http%3A%2F%2Fwww.w3.org%2FWAI%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span><span class="cs1-maint citation-comment"><code class="cs1-code">{{<a href="/wiki/Template:Cite_web" title="Template:Cite web">cite web</a>}}</code>: CS1 maint: numeric names: authors list (<a href="/wiki/Category:CS1_maint:_numeric_names:_authors_list" title="Category:CS1 maint: numeric names: authors list">link</a>)</span></span> </li> <li id="cite_note-11"><span class="mw-cite-backlink"><b><a href="#cite_ref-11">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.interaction-design.org/literature/topics/web-design">"What is Web Design?"</a>. <i>The Interaction Design Foundation</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2022-10-12</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=The+Interaction+Design+Foundation&rft.atitle=What+is+Web+Design%3F&rft_id=https%3A%2F%2Fwww.interaction-design.org%2Fliterature%2Ftopics%2Fweb-design&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-12"><span class="mw-cite-backlink"><b><a href="#cite_ref-12">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFTHORLACIUS2007" class="citation journal cs1">THORLACIUS, LISBETH (2007). <a rel="nofollow" class="external text" href="https://doi.org/10.1515%2Fnor-2017-0201">"The Role of Aesthetics in Web Design"</a>. <i>Nordicom Review</i>. <b>28</b> (28): 63–76. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<span class="id-lock-free" title="Freely accessible"><a rel="nofollow" class="external text" href="https://doi.org/10.1515%2Fnor-2017-0201">10.1515/nor-2017-0201</a></span>. <a href="/wiki/S2CID_(identifier)" class="mw-redirect" title="S2CID (identifier)">S2CID</a> <a rel="nofollow" class="external text" href="https://api.semanticscholar.org/CorpusID:146649056">146649056</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Nordicom+Review&rft.atitle=The+Role+of+Aesthetics+in+Web+Design&rft.volume=28&rft.issue=28&rft.pages=63-76&rft.date=2007&rft_id=info%3Adoi%2F10.1515%2Fnor-2017-0201&rft_id=https%3A%2F%2Fapi.semanticscholar.org%2FCorpusID%3A146649056%23id-name%3DS2CID&rft.aulast=THORLACIUS&rft.aufirst=LISBETH&rft_id=https%3A%2F%2Fdoi.org%2F10.1515%252Fnor-2017-0201&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-13"><span class="mw-cite-backlink"><b><a href="#cite_ref-13">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://brainstation.io/career-guides/what-is-a-web-designer">"What is a Web Designer? (2022 Guide)"</a>. <i>BrainStation®</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2022-10-28</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=BrainStation%C2%AE&rft.atitle=What+is+a+Web+Designer%3F+%282022+Guide%29&rft_id=https%3A%2F%2Fbrainstation.io%2Fcareer-guides%2Fwhat-is-a-web-designer&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-14"><span class="mw-cite-backlink"><b><a href="#cite_ref-14">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFCastañedaMuñoz-Leiva2007" class="citation journal cs1">Castañeda, J.A Francisco; Muñoz-Leiva, Teodoro Luque (2007). "Web Acceptance Model (WAM): Moderating effects of user experience". <i>Information & Management</i>. <b>44</b> (4): 384–396. <a href="/wiki/Doi_(identifier)" class="mw-redirect" title="Doi (identifier)">doi</a>:<a rel="nofollow" class="external text" href="https://doi.org/10.1016%2Fj.im.2007.02.003">10.1016/j.im.2007.02.003</a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Information+%26+Management&rft.atitle=Web+Acceptance+Model+%28WAM%29%3A+Moderating+effects+of+user+experience&rft.volume=44&rft.issue=4&rft.pages=384-396&rft.date=2007&rft_id=info%3Adoi%2F10.1016%2Fj.im.2007.02.003&rft.aulast=Casta%C3%B1eda&rft.aufirst=J.A+Francisco&rft.au=Mu%C3%B1oz-Leiva%2C+Teodoro+Luque&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-15"><span class="mw-cite-backlink"><b><a href="#cite_ref-15">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation web cs1"><a rel="nofollow" class="external text" href="https://www.gov.uk/service-manual/technology/using-progressive-enhancement">"Building a resilient frontend using progressive enhancement"</a>. <i>GOV.UK</i><span class="reference-accessdate">. Retrieved <span class="nowrap">27 October</span> 2021</span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=GOV.UK&rft.atitle=Building+a+resilient+frontend+using+progressive+enhancement&rft_id=https%3A%2F%2Fwww.gov.uk%2Fservice-manual%2Ftechnology%2Fusing-progressive-enhancement&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-17"><span class="mw-cite-backlink"><b><a href="#cite_ref-17">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite class="citation news cs1"><a rel="nofollow" class="external text" href="https://webmasters.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html">"Rolling out mobile-first indexing"</a>. <i>Official Google Webmaster Central Blog</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2018-06-09</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=article&rft.jtitle=Official+Google+Webmaster+Central+Blog&rft.atitle=Rolling+out+mobile-first+indexing&rft_id=https%3A%2F%2Fwebmasters.googleblog.com%2F2018%2F03%2Frolling-out-mobile-first-indexing.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-18"><span class="mw-cite-backlink"><b><a href="#cite_ref-18">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFStone2009" class="citation web cs1">Stone, John (2009-11-16). <a rel="nofollow" class="external text" href="http://webdesignledger.com/tips/20-dos-and-donts-of-effective-web-typography">"20 Do's and Don'ts of Effective Web Typography"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2012-03-19</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=20+Do%27s+and+Don%27ts+of+Effective+Web+Typography&rft.date=2009-11-16&rft.aulast=Stone&rft.aufirst=John&rft_id=http%3A%2F%2Fwebdesignledger.com%2Ftips%2F20-dos-and-donts-of-effective-web-typography&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-19"><span class="mw-cite-backlink"><b><a href="#cite_ref-19">^</a></b></span> <span class="reference-text"><a rel="nofollow" class="external text" href="http://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits-pause.html">World Wide Web Consortium: Understanding Web Content Accessibility Guidelines 2.2.2: Pause, Stop, Hide</a></span> </li> <li id="cite_note-20"><span class="mw-cite-backlink"><b><a href="#cite_ref-20">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFW3C_QA" class="citation web cs1">W3C QA. <a rel="nofollow" class="external text" href="http://www.w3.org/QA/2002/04/Web-Quality">"My Web site is standard! And yours?"</a><span class="reference-accessdate">. Retrieved <span class="nowrap">2012-03-21</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=unknown&rft.btitle=My+Web+site+is+standard%21+And+yours%3F&rft.au=W3C+QA&rft_id=http%3A%2F%2Fwww.w3.org%2FQA%2F2002%2F04%2FWeb-Quality&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span><span class="cs1-maint citation-comment"><code class="cs1-code">{{<a href="/wiki/Template:Cite_web" title="Template:Cite web">cite web</a>}}</code>: CS1 maint: numeric names: authors list (<a href="/wiki/Category:CS1_maint:_numeric_names:_authors_list" title="Category:CS1 maint: numeric names: authors list">link</a>)</span></span> </li> <li id="cite_note-21"><span class="mw-cite-backlink"><b><a href="#cite_ref-21">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFChristensen2015" class="citation web cs1">Christensen, Mathias Biilmann (2015-11-16). <a rel="nofollow" class="external text" href="https://www.smashingmagazine.com/2015/11/static-website-generators-jekyll-middleman-roots-hugo-review/">"Static Website Generators Reviewed: Jekyll, Middleman, Roots, Hugo"</a>. <i>Smashing Magazine</i><span class="reference-accessdate">. Retrieved <span class="nowrap">2016-10-26</span></span>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Ajournal&rft.genre=unknown&rft.jtitle=Smashing+Magazine&rft.atitle=Static+Website+Generators+Reviewed%3A+Jekyll%2C+Middleman%2C+Roots%2C+Hugo&rft.date=2015-11-16&rft.aulast=Christensen&rft.aufirst=Mathias+Biilmann&rft_id=https%3A%2F%2Fwww.smashingmagazine.com%2F2015%2F11%2Fstatic-website-generators-jekyll-middleman-roots-hugo-review%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-22"><span class="mw-cite-backlink"><b><a href="#cite_ref-22">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSoucy" class="citation cs2">Soucy, Kyle, <a rel="nofollow" class="external text" href="https://web.archive.org/web/20120608071219/http://www.usableinterface.com/articles/homepage.php"><i>Is Your Homepage Doing What It Should?</i></a>, Usable Interface, archived from <a rel="nofollow" class="external text" href="http://www.usableinterface.com/articles/homepage.php">the original</a> on 8 June 2012</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Is+Your+Homepage+Doing+What+It+Should%3F&rft.pub=Usable+Interface&rft.aulast=Soucy&rft.aufirst=Kyle&rft_id=http%3A%2F%2Fwww.usableinterface.com%2Farticles%2Fhomepage.php&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-23"><span class="mw-cite-backlink"><b><a href="#cite_ref-23">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFNielsen2003" class="citation cs2">Nielsen, Jakob (10 November 2003), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20131005150112/http://www.nngroup.com/articles/most-violated-homepage-guidelines/"><i>The Ten Most Violated Homepage Design Guidelines</i></a>, Nielsen Norman Group, archived from <a rel="nofollow" class="external text" href="http://www.nngroup.com/articles/most-violated-homepage-guidelines/">the original</a> on 5 October 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=The+Ten+Most+Violated+Homepage+Design+Guidelines&rft.pub=Nielsen+Norman+Group&rft.date=2003-11-10&rft.aulast=Nielsen&rft.aufirst=Jakob&rft_id=http%3A%2F%2Fwww.nngroup.com%2Farticles%2Fmost-violated-homepage-guidelines%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-24"><span class="mw-cite-backlink"><b><a href="#cite_ref-24">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFKnight2009" class="citation cs2">Knight, Kayla (20 August 2009), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130821151637/http://sixrevisions.com/web_design/essential-tips-for-designing-an-effective-homepage/"><i>Essential Tips for Designing an Effective Homepage</i></a>, Six Revisions, archived from <a rel="nofollow" class="external text" href="http://sixrevisions.com/web_design/essential-tips-for-designing-an-effective-homepage/">the original</a> on 21 August 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Essential+Tips+for+Designing+an+Effective+Homepage&rft.pub=Six+Revisions&rft.date=2009-08-20&rft.aulast=Knight&rft.aufirst=Kayla&rft_id=http%3A%2F%2Fsixrevisions.com%2Fweb_design%2Fessential-tips-for-designing-an-effective-homepage%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-25"><span class="mw-cite-backlink"><b><a href="#cite_ref-25">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSpool2005" class="citation cs2">Spool, Jared (29 September 2005), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130916092857/http://www.uie.com/brainsparks/2005/09/29/is-home-page-design-relevant-anymore/"><i>Is Home Page Design Relevant Anymore?</i></a>, User Interface Engineering, archived from <a rel="nofollow" class="external text" href="http://www.uie.com/brainsparks/2005/09/29/is-home-page-design-relevant-anymore/">the original</a> on 16 September 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Is+Home+Page+Design+Relevant+Anymore%3F&rft.pub=User+Interface+Engineering&rft.date=2005-09-29&rft.aulast=Spool&rft.aufirst=Jared&rft_id=http%3A%2F%2Fwww.uie.com%2Fbrainsparks%2F2005%2F09%2F29%2Fis-home-page-design-relevant-anymore%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-26"><span class="mw-cite-backlink"><b><a href="#cite_ref-26">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFChapman2010" class="citation cs2">Chapman, Cameron (15 September 2010), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130902031226/http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/"><i>10 Usability Tips Based on Research Studies</i></a>, Six Revisions, archived from <a rel="nofollow" class="external text" href="http://sixrevisions.com/usabilityaccessibility/10-usability-tips-based-on-research-studies/">the original</a> on 2 September 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=10+Usability+Tips+Based+on+Research+Studies&rft.pub=Six+Revisions&rft.date=2010-09-15&rft.aulast=Chapman&rft.aufirst=Cameron&rft_id=http%3A%2F%2Fsixrevisions.com%2Fusabilityaccessibility%2F10-usability-tips-based-on-research-studies%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-27"><span class="mw-cite-backlink"><b><a href="#cite_ref-27">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFGócza" class="citation cs2">Gócza, Zoltán, <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130602172028/http://uxmyths.com/post/717779908/myth-the-homepage-is-your-most-important-page"><i>Myth #17: The homepage is your most important page</i></a>, archived from <a rel="nofollow" class="external text" href="http://uxmyths.com/post/717779908/myth-the-homepage-is-your-most-important-page">the original</a> on 2 June 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Myth+%2317%3A+The+homepage+is+your+most+important+page&rft.aulast=G%C3%B3cza&rft.aufirst=Zolt%C3%A1n&rft_id=http%3A%2F%2Fuxmyths.com%2Fpost%2F717779908%2Fmyth-the-homepage-is-your-most-important-page&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-28"><span class="mw-cite-backlink"><b><a href="#cite_ref-28">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFMcGovern2010" class="citation cs2">McGovern, Gerry (18 April 2010), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130524221238/http://giraffeforum.com/wordpress/2010/04/18/the-decline-of-the-homepage/"><i>The decline of the homepage</i></a>, archived from <a rel="nofollow" class="external text" href="http://giraffeforum.com/wordpress/2010/04/18/the-decline-of-the-homepage/">the original</a> on 24 May 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=The+decline+of+the+homepage&rft.date=2010-04-18&rft.aulast=McGovern&rft.aufirst=Gerry&rft_id=http%3A%2F%2Fgiraffeforum.com%2Fwordpress%2F2010%2F04%2F18%2Fthe-decline-of-the-homepage%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-29"><span class="mw-cite-backlink"><b><a href="#cite_ref-29">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFPorter2006" class="citation cs2">Porter, Joshua (24 April 2006), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130514075119/http://www.uie.com/articles/prioritizing_design_time/"><i>Prioritizing Design Time: A Long Tail Approach</i></a>, User Interface Engineering, archived from <a rel="nofollow" class="external text" href="http://www.uie.com/articles/prioritizing_design_time/">the original</a> on 14 May 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Prioritizing+Design+Time%3A+A+Long+Tail+Approach&rft.pub=User+Interface+Engineering&rft.date=2006-04-24&rft.aulast=Porter&rft.aufirst=Joshua&rft_id=http%3A%2F%2Fwww.uie.com%2Farticles%2Fprioritizing_design_time%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-30"><span class="mw-cite-backlink"><b><a href="#cite_ref-30">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFSpool2007" class="citation cs2">Spool, Jared (6 August 2007), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20130429113949/http://www.uie.com/brainsparks/2007/08/06/usability-tools-podcast-home-page-design/"><i>Usability Tools Podcast: Home Page Design</i></a>, archived from <a rel="nofollow" class="external text" href="http://www.uie.com/brainsparks/2007/08/06/usability-tools-podcast-home-page-design/">the original</a> on 29 April 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Usability+Tools+Podcast%3A+Home+Page+Design&rft.date=2007-08-06&rft.aulast=Spool&rft.aufirst=Jared&rft_id=http%3A%2F%2Fwww.uie.com%2Fbrainsparks%2F2007%2F08%2F06%2Fusability-tools-podcast-home-page-design%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-Messner2013-31"><span class="mw-cite-backlink">^ <a href="#cite_ref-Messner2013_31-0"><sup><i><b>a</b></i></sup></a> <a href="#cite_ref-Messner2013_31-1"><sup><i><b>b</b></i></sup></a></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFMessner2013" class="citation cs2">Messner, Katie (22 April 2013), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20131010094459/http://www.usability.gov/get-involved/blog/2013/04/image-carousels.html"><i>Image Carousels: Getting Control of the Merry-Go-Round</i></a>, Usability.gov, archived from <a rel="nofollow" class="external text" href="https://www.usability.gov/get-involved/blog/2013/04/image-carousels.html">the original</a> on 10 October 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Image+Carousels%3A+Getting+Control+of+the+Merry-Go-Round&rft.pub=Usability.gov&rft.date=2013-04-22&rft.aulast=Messner&rft.aufirst=Katie&rft_id=http%3A%2F%2Fwww.usability.gov%2Fget-involved%2Fblog%2F2013%2F04%2Fimage-carousels.html&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-32"><span class="mw-cite-backlink"><b><a href="#cite_ref-32">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFJones2013" class="citation cs2">Jones, Harrison (19 June 2013), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20131122031942/http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496"><i>Homepage Sliders: Bad For SEO, Bad For Usability</i></a>, archived from <a rel="nofollow" class="external text" href="http://searchengineland.com/homepage-sliders-are-bad-for-seo-usability-163496">the original</a> on 22 November 2013</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Homepage+Sliders%3A+Bad+For+SEO%2C+Bad+For+Usability&rft.date=2013-06-19&rft.aulast=Jones&rft.aufirst=Harrison&rft_id=http%3A%2F%2Fsearchengineland.com%2Fhomepage-sliders-are-bad-for-seo-usability-163496&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-33"><span class="mw-cite-backlink"><b><a href="#cite_ref-33">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFLaja2019" class="citation cs2">Laja, Peep (8 June 2019), <a rel="nofollow" class="external text" href="https://web.archive.org/web/20191210184941/https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/"><i>Image Carousels and Sliders? Don't Use Them. (Here's why.)</i></a>, CXL, archived from <a rel="nofollow" class="external text" href="https://cxl.com/blog/dont-use-automatic-image-sliders-or-carousels/">the original</a> on 10 December 2019</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Image+Carousels+and+Sliders%3F+Don%27t+Use+Them.+%28Here%27s+why.%29&rft.pub=CXL&rft.date=2019-06-08&rft.aulast=Laja&rft.aufirst=Peep&rft_id=https%3A%2F%2Fcxl.com%2Fblog%2Fdont-use-automatic-image-sliders-or-carousels%2F&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-careersinwebdesign-34"><span class="mw-cite-backlink"><b><a href="#cite_ref-careersinwebdesign_34-0">^</a></b></span> <span class="reference-text"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1238218222"><cite id="CITEREFOleksy2001" class="citation book cs1">Oleksy, Walter (2001). <span class="id-lock-registration" title="Free registration required"><a rel="nofollow" class="external text" href="https://archive.org/details/careersinwebdesi0000olek"><i>Careers in Web Design</i></a></span>. New York: The Rosen Publishing Group, Inc. pp. <a rel="nofollow" class="external text" href="https://archive.org/details/careersinwebdesi0000olek/page/9">9</a>–11. <a href="/wiki/ISBN_(identifier)" class="mw-redirect" title="ISBN (identifier)">ISBN</a> <a href="/wiki/Special:BookSources/978-0-8239-3191-0" title="Special:BookSources/978-0-8239-3191-0"><bdi>978-0-8239-3191-0</bdi></a>.</cite><span title="ctx_ver=Z39.88-2004&rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&rft.genre=book&rft.btitle=Careers+in+Web+Design&rft.place=New+York&rft.pages=9-11&rft.pub=The+Rosen+Publishing+Group%2C+Inc.&rft.date=2001&rft.isbn=978-0-8239-3191-0&rft.aulast=Oleksy&rft.aufirst=Walter&rft_id=https%3A%2F%2Farchive.org%2Fdetails%2Fcareersinwebdesi0000olek&rfr_id=info%3Asid%2Fen.wikipedia.org%3AWeb+design" class="Z3988"></span></span> </li> <li id="cite_note-35"><span class="mw-cite-backlink"><b><a href="#cite_ref-35">^</a></b></span> <span class="reference-text">Visser, Larno, et al. <i>ChatGPT for Web Design : Create Amazing Websites</i>. [First edition]., PACKT Publishing, 2023.</span> </li> </ol></div> <div class="mw-heading mw-heading2"><h2 id="External_links">External links</h2></div> <ul><li><a rel="nofollow" class="external text" href="http://www.w3.org/standards/webdesign/">W3C consortium for web standards</a></li></ul> <style data-mw-deduplicate="TemplateStyles:r1236088147">.mw-parser-output .sister-bar{display:flex;justify-content:center;align-items:baseline;font-size:88%;background-color:#fdfdfd;border:1px solid #a2a9b1;clear:both;margin:1em 0 0;padding:0 2em}.mw-parser-output .sister-bar-header{margin:0 1em 0 0.5em;padding:0.2em 0;flex:0 0 auto;min-height:24px;line-height:22px}.mw-parser-output .sister-bar-content{display:flex;flex-flow:row wrap;flex:0 1 auto;align-items:baseline;padding:0.2em 0;column-gap:1em;margin:0;list-style:none}.mw-parser-output .sister-bar-item{display:flex;align-items:baseline;margin:0.15em 0;min-height:24px;text-align:left}.mw-parser-output .sister-bar-logo{width:22px;line-height:22px;margin:0 0.2em;text-align:right}.mw-parser-output .sister-bar-link{margin:0 0.2em;text-align:left}@media screen and (max-width:960px){.mw-parser-output .sister-bar{flex-flow:column wrap;margin:1em auto 0}.mw-parser-output .sister-bar-header{flex:0 1}.mw-parser-output .sister-bar-content{flex:1;border-top:1px solid #a2a9b1;margin:0;list-style:none}.mw-parser-output .sister-bar-item{flex:0 0 20em;min-width:20em}}.mw-parser-output .navbox+link+.sister-bar,.mw-parser-output .navbox+style+.sister-bar,.mw-parser-output .portal-bar+link+.sister-bar,.mw-parser-output .portal-bar+style+.sister-bar,.mw-parser-output .sister-bar+.navbox-styles+.navbox,.mw-parser-output .sister-bar+.navbox-styles+.portal-bar{margin-top:-1px}@media print{body.ns-0 .mw-parser-output .sister-bar{display:none!important}}</style><div class="noprint metadata sister-bar" role="navigation" aria-label="sister-projects"><div class="sister-bar-header"><b>Web design</b> at Wikipedia's <a href="/wiki/Wikipedia:Wikimedia_sister_projects" title="Wikipedia:Wikimedia sister projects"><span id="sister-projects" style="white-space:nowrap;">sister projects</span></a>:</div><ul class="sister-bar-content"><li class="sister-bar-item"><span class="sister-bar-logo"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/14px-Commons-logo.svg.png" decoding="async" width="14" height="19" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/21px-Commons-logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/4/4a/Commons-logo.svg/28px-Commons-logo.svg.png 2x" data-file-width="1024" data-file-height="1376" /></span></span></span><span class="sister-bar-link"><b><a href="https://commons.wikimedia.org/wiki/Category:Web_design" class="extiw" title="c:Category:Web design">Media</a></b> from Commons</span></li><li class="sister-bar-item"><span class="sister-bar-logo"><span typeof="mw:File"><span><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/21px-Wikiversity_logo_2017.svg.png" decoding="async" width="21" height="17" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/32px-Wikiversity_logo_2017.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/0b/Wikiversity_logo_2017.svg/42px-Wikiversity_logo_2017.svg.png 2x" data-file-width="626" data-file-height="512" /></span></span></span><span class="sister-bar-link"><b><a href="https://en.wikiversity.org/wiki/Web_design" class="extiw" title="v:Web design">Resources</a></b> from Wikiversity</span></li></ul></div> <div class="navbox-styles"><style data-mw-deduplicate="TemplateStyles:r1129693374">.mw-parser-output .hlist dl,.mw-parser-output .hlist ol,.mw-parser-output .hlist ul{margin:0;padding:0}.mw-parser-output .hlist dd,.mw-parser-output .hlist dt,.mw-parser-output .hlist li{margin:0;display:inline}.mw-parser-output .hlist.inline,.mw-parser-output .hlist.inline dl,.mw-parser-output .hlist.inline ol,.mw-parser-output .hlist.inline ul,.mw-parser-output .hlist dl dl,.mw-parser-output .hlist dl ol,.mw-parser-output .hlist dl ul,.mw-parser-output .hlist ol dl,.mw-parser-output .hlist ol ol,.mw-parser-output .hlist ol ul,.mw-parser-output .hlist ul dl,.mw-parser-output .hlist ul ol,.mw-parser-output .hlist ul ul{display:inline}.mw-parser-output .hlist .mw-empty-li{display:none}.mw-parser-output .hlist dt::after{content:": "}.mw-parser-output .hlist dd::after,.mw-parser-output .hlist li::after{content:" · ";font-weight:bold}.mw-parser-output .hlist dd:last-child::after,.mw-parser-output .hlist dt:last-child::after,.mw-parser-output .hlist li:last-child::after{content:none}.mw-parser-output .hlist dd dd:first-child::before,.mw-parser-output .hlist dd dt:first-child::before,.mw-parser-output .hlist dd li:first-child::before,.mw-parser-output .hlist dt dd:first-child::before,.mw-parser-output .hlist dt dt:first-child::before,.mw-parser-output .hlist dt li:first-child::before,.mw-parser-output .hlist li dd:first-child::before,.mw-parser-output .hlist li dt:first-child::before,.mw-parser-output .hlist li li:first-child::before{content:" (";font-weight:normal}.mw-parser-output .hlist dd dd:last-child::after,.mw-parser-output .hlist dd dt:last-child::after,.mw-parser-output .hlist dd li:last-child::after,.mw-parser-output .hlist dt dd:last-child::after,.mw-parser-output .hlist dt dt:last-child::after,.mw-parser-output .hlist dt li:last-child::after,.mw-parser-output .hlist li dd:last-child::after,.mw-parser-output .hlist li dt:last-child::after,.mw-parser-output .hlist li li:last-child::after{content:")";font-weight:normal}.mw-parser-output .hlist ol{counter-reset:listitem}.mw-parser-output .hlist ol>li{counter-increment:listitem}.mw-parser-output .hlist ol>li::before{content:" "counter(listitem)"\a0 "}.mw-parser-output .hlist dd ol>li:first-child::before,.mw-parser-output .hlist dt ol>li:first-child::before,.mw-parser-output .hlist li ol>li:first-child::before{content:" ("counter(listitem)"\a0 "}</style><style data-mw-deduplicate="TemplateStyles:r1236075235">.mw-parser-output .navbox{box-sizing:border-box;border:1px solid #a2a9b1;width:100%;clear:both;font-size:88%;text-align:center;padding:1px;margin:1em auto 0}.mw-parser-output .navbox .navbox{margin-top:0}.mw-parser-output .navbox+.navbox,.mw-parser-output .navbox+.navbox-styles+.navbox{margin-top:-1px}.mw-parser-output .navbox-inner,.mw-parser-output .navbox-subgroup{width:100%}.mw-parser-output .navbox-group,.mw-parser-output .navbox-title,.mw-parser-output .navbox-abovebelow{padding:0.25em 1em;line-height:1.5em;text-align:center}.mw-parser-output .navbox-group{white-space:nowrap;text-align:right}.mw-parser-output .navbox,.mw-parser-output .navbox-subgroup{background-color:#fdfdfd}.mw-parser-output .navbox-list{line-height:1.5em;border-color:#fdfdfd}.mw-parser-output .navbox-list-with-group{text-align:left;border-left-width:2px;border-left-style:solid}.mw-parser-output tr+tr>.navbox-abovebelow,.mw-parser-output tr+tr>.navbox-group,.mw-parser-output tr+tr>.navbox-image,.mw-parser-output tr+tr>.navbox-list{border-top:2px solid #fdfdfd}.mw-parser-output .navbox-title{background-color:#ccf}.mw-parser-output .navbox-abovebelow,.mw-parser-output .navbox-group,.mw-parser-output .navbox-subgroup .navbox-title{background-color:#ddf}.mw-parser-output .navbox-subgroup .navbox-group,.mw-parser-output .navbox-subgroup .navbox-abovebelow{background-color:#e6e6ff}.mw-parser-output .navbox-even{background-color:#f7f7f7}.mw-parser-output .navbox-odd{background-color:transparent}.mw-parser-output .navbox .hlist td dl,.mw-parser-output .navbox .hlist td ol,.mw-parser-output .navbox .hlist td ul,.mw-parser-output .navbox td.hlist dl,.mw-parser-output .navbox td.hlist ol,.mw-parser-output .navbox td.hlist ul{padding:0.125em 0}.mw-parser-output .navbox .navbar{display:block;font-size:100%}.mw-parser-output .navbox-title .navbar{float:left;text-align:left;margin-right:0.5em}body.skin--responsive .mw-parser-output .navbox-image img{max-width:none!important}@media print{body.ns-0 .mw-parser-output .navbox{display:none!important}}</style><style data-mw-deduplicate="TemplateStyles:r1038841319">.mw-parser-output .tooltip-dotted{border-bottom:1px dotted;cursor:help}</style><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1038841319"></div><div role="navigation" class="navbox authority-control" aria-label="Navbox" style="padding:3px"><table class="nowraplinks hlist navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Help:Authority_control" title="Help:Authority control">Authority control databases</a>: National <span class="mw-valign-text-top noprint" typeof="mw:File/Frameless"><a href="https://www.wikidata.org/wiki/Q190637#identifiers" title="Edit this at Wikidata"><img alt="Edit this at Wikidata" src="//upload.wikimedia.org/wikipedia/en/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/10px-OOjs_UI_icon_edit-ltr-progressive.svg.png" decoding="async" width="10" height="10" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/en/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/15px-OOjs_UI_icon_edit-ltr-progressive.svg.png 1.5x, //upload.wikimedia.org/wikipedia/en/thumb/8/8a/OOjs_UI_icon_edit-ltr-progressive.svg/20px-OOjs_UI_icon_edit-ltr-progressive.svg.png 2x" data-file-width="20" data-file-height="20" /></a></span></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"><ul><li><span class="uid"><a rel="nofollow" class="external text" href="https://id.loc.gov/authorities/sh98000035">United States</a></span></li><li><span class="uid"><a rel="nofollow" class="external text" href="https://catalogue.bnf.fr/ark:/12148/cb13179036c">France</a></span></li><li><span class="uid"><a rel="nofollow" class="external text" href="https://data.bnf.fr/ark:/12148/cb13179036c">BnF data</a></span></li><li><span class="uid"><span class="rt-commentedText tooltip tooltip-dotted" title="ウェブデザイン"><a rel="nofollow" class="external text" href="https://id.ndl.go.jp/auth/ndlna/01187564">Japan</a></span></span></li><li><span class="uid"><span class="rt-commentedText tooltip tooltip-dotted" title="WWW design"><a rel="nofollow" class="external text" href="https://aleph.nkp.cz/F/?func=find-c&local_base=aut&ccl_term=ica=ph249420&CON_LNG=ENG">Czech Republic</a></span></span></li><li><span class="uid"><a rel="nofollow" class="external text" href="http://olduli.nli.org.il/F/?func=find-b&local_base=NLX10&find_code=UID&request=987007554135605171">Israel</a></span></li></ul></div></td></tr></tbody></table></div> <div class="navbox-styles"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1236075235"><style data-mw-deduplicate="TemplateStyles:r1239334494">@media screen{html.skin-theme-clientpref-night .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-night .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}@media screen and (prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output div:not(.notheme)>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output p>.tmp-color,html.skin-theme-clientpref-os .mw-parser-output table:not(.notheme) .tmp-color{color:inherit!important}}</style><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239334494"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239334494"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239334494"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239334494"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1239334494"></div><div role="navigation" class="navbox" aria-labelledby="Design" style="padding:3px"><table class="nowraplinks hlist mw-collapsible mw-collapsed navbox-inner" style="border-spacing:0;background:transparent;color:inherit"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><link rel="mw-deduplicated-inline-style" href="mw-data:TemplateStyles:r1129693374"><style data-mw-deduplicate="TemplateStyles:r1239400231">.mw-parser-output .navbar{display:inline;font-size:88%;font-weight:normal}.mw-parser-output .navbar-collapse{float:left;text-align:left}.mw-parser-output .navbar-boxtext{word-spacing:0}.mw-parser-output .navbar ul{display:inline-block;white-space:nowrap;line-height:inherit}.mw-parser-output .navbar-brackets::before{margin-right:-0.125em;content:"[ "}.mw-parser-output .navbar-brackets::after{margin-left:-0.125em;content:" ]"}.mw-parser-output .navbar li{word-spacing:-0.125em}.mw-parser-output .navbar a>span,.mw-parser-output .navbar a>abbr{text-decoration:inherit}.mw-parser-output .navbar-mini abbr{font-variant:small-caps;border-bottom:none;text-decoration:none;cursor:inherit}.mw-parser-output .navbar-ct-full{font-size:114%;margin:0 7em}.mw-parser-output .navbar-ct-mini{font-size:114%;margin:0 4em}html.skin-theme-clientpref-night .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}@media(prefers-color-scheme:dark){html.skin-theme-clientpref-os .mw-parser-output .navbar li a abbr{color:var(--color-base)!important}}@media print{.mw-parser-output .navbar{display:none!important}}</style><div class="navbar plainlinks hlist navbar-mini"><ul><li class="nv-view"><a href="/wiki/Template:Design" title="Template:Design"><abbr title="View this template">v</abbr></a></li><li class="nv-talk"><a href="/wiki/Template_talk:Design" title="Template talk:Design"><abbr title="Discuss this template">t</abbr></a></li><li class="nv-edit"><a href="/wiki/Special:EditPage/Template:Design" title="Special:EditPage/Template:Design"><abbr title="Edit this template">e</abbr></a></li></ul></div><div id="Design" style="font-size:114%;margin:0 4em"><a href="/wiki/Design" title="Design">Design</a></div></th></tr><tr><td class="navbox-abovebelow hlist" colspan="2"><div> <ul><li><a href="/wiki/Outline_of_design" title="Outline of design">Outline</a></li> <li><a href="/wiki/Designer" title="Designer">Designer</a></li></ul> </div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Disciplines" style="font-size:114%;margin:0 4em">Disciplines</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Communication_design" title="Communication design">Communication<br />design</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Advertising" title="Advertising">Advertising</a></li> <li><a href="/wiki/Book_design" title="Book design">Book design</a></li> <li><a href="/wiki/Brand" title="Brand">Brand design</a></li> <li><a href="/wiki/Exhibit_design" title="Exhibit design">Exhibit design</a></li> <li><a href="/wiki/Film_title_design" title="Film title design">Film title design</a></li> <li><a href="/wiki/Graphic_design" title="Graphic design">Graphic design</a> <ul><li><a href="/wiki/Motion_graphic_design" title="Motion graphic design">Motion</a></li> <li><a href="/wiki/Postage_stamp_design" title="Postage stamp design">Postage stamp design</a></li> <li><a href="/wiki/Print_design" title="Print design">Print design</a></li></ul></li> <li><a href="/wiki/Illustration" title="Illustration">Illustration</a></li> <li><a href="/wiki/Information_design" title="Information design">Information design</a></li> <li><a href="/wiki/Instructional_design" title="Instructional design">Instructional design</a></li> <li><a href="/wiki/News_design" title="News design">News design</a></li> <li><a href="/wiki/Photography" title="Photography">Photography</a></li> <li><a href="/wiki/Retail_design" title="Retail design">Retail design</a></li> <li><a href="/wiki/Signage" title="Signage">Signage</a> / <a href="/wiki/Traffic_sign_design" title="Traffic sign design">Traffic sign design</a></li> <li><a href="/wiki/Typography" title="Typography">Typography</a> / <a href="/wiki/Type_design" title="Type design">Type design</a></li> <li><a href="/wiki/Video_design" title="Video design">Video design</a></li> <li><a href="/wiki/Visual_merchandising" title="Visual merchandising">Visual merchandising</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Environmental_design" title="Environmental design">Environmental<br />design</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Architecture" title="Architecture">Architecture</a></li> <li><a href="/wiki/Architectural_lighting_design" title="Architectural lighting design">Architectural lighting design</a></li> <li><a href="/wiki/Building_design" title="Building design">Building design</a> <ul><li><a href="/wiki/Passive_solar_building_design" title="Passive solar building design">Passive solar</a></li></ul></li> <li><a href="/wiki/Ecological_design" title="Ecological design">Ecological design</a></li> <li><a href="/wiki/Environmental_impact_design" title="Environmental impact design">Environmental impact design</a></li> <li><a href="/wiki/Garden_design" title="Garden design">Garden design</a> <ul><li><a href="/wiki/Computer-aided_garden_design" title="Computer-aided garden design">Computer-aided</a></li></ul></li> <li><a href="/wiki/Healthy_community_design" title="Healthy community design">Healthy community design</a></li> <li><a href="/wiki/Hotel_design" title="Hotel design">Hotel design</a></li> <li><a href="/wiki/Interior_architecture" title="Interior architecture">Interior architecture</a></li> <li><a href="/wiki/Interior_design" title="Interior design">Interior design</a> <ul><li><a href="/wiki/Experiential_interior_design" title="Experiential interior design">EID</a></li></ul></li> <li><a href="/wiki/Keyline_design" title="Keyline design">Keyline design</a></li> <li><a href="/wiki/Landscape_architecture" title="Landscape architecture">Landscape architecture</a> <ul><li><a href="/wiki/Sustainable_landscape_architecture" title="Sustainable landscape architecture">Sustainable</a></li></ul></li> <li><a href="/wiki/Landscape_design" title="Landscape design">Landscape design</a></li> <li><a href="/wiki/Spatial_design" title="Spatial design">Spatial design</a></li> <li><a href="/wiki/Urban_design" title="Urban design">Urban design</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Industrial_design" title="Industrial design">Industrial<br />design</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Automotive_design" title="Automotive design">Automotive design</a></li> <li><a href="/wiki/Automotive_suspension_design_process" title="Automotive suspension design process">Automotive suspension design</a></li> <li><a href="/wiki/CMF_design" title="CMF design">CMF design</a></li> <li><a href="/wiki/Corrugated_box_design" title="Corrugated box design">Corrugated box design</a></li> <li><a href="/wiki/Electric_guitar_design" title="Electric guitar design">Electric guitar design</a></li> <li><a href="/wiki/Furniture" title="Furniture">Furniture design</a> <ul><li><a href="/wiki/Sustainable_furniture_design" title="Sustainable furniture design">Sustainable</a></li></ul></li> <li><a href="/wiki/Hardware_interface_design" title="Hardware interface design">Hardware interface design</a></li> <li><a href="/wiki/Motorcycle_design" title="Motorcycle design">Motorcycle design</a></li> <li><a href="/wiki/Packaging_and_labeling" class="mw-redirect" title="Packaging and labeling">Packaging and labeling</a></li> <li><a href="/wiki/Photographic_lens_design" title="Photographic lens design">Photographic lens design</a></li> <li><a href="/wiki/Product_design" title="Product design">Product design</a></li> <li><a href="/wiki/Production_designer" title="Production designer">Production design</a></li> <li><a href="/wiki/Sensory_design" title="Sensory design">Sensory design</a></li> <li><a href="/wiki/Service_design" title="Service design">Service design</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Interaction_design" title="Interaction design">Interaction<br />design</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Experience_design" class="mw-redirect" title="Experience design">Experience design</a> <ul><li><a href="/wiki/Employee_experience_design" title="Employee experience design">EED</a></li></ul></li> <li><a href="/wiki/Game_design" title="Game design">Game design</a> <ul><li><a href="/wiki/Level_(video_games)" title="Level (video games)">Level design</a></li> <li><a href="/wiki/Video_game_design" title="Video game design">Video game design</a></li></ul></li> <li><a href="/wiki/Hardware_interface_design" title="Hardware interface design">Hardware interface design</a></li> <li><a href="/wiki/Icon_design" title="Icon design">Icon design</a></li> <li><a href="/wiki/Immersive_design" title="Immersive design">Immersive design</a></li> <li><a href="/wiki/Information_design" title="Information design">Information design</a></li> <li><a href="/wiki/Sonic_interaction_design" title="Sonic interaction design">Sonic interaction design</a></li> <li><a href="/wiki/User_experience_design" title="User experience design">User experience design</a></li> <li><a href="/wiki/User_interface_design" title="User interface design">User interface design</a></li> <li><a class="mw-selflink selflink">Web design</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other<br /><a href="/wiki/Applied_arts" title="Applied arts">applied arts</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Public_art" title="Public art">Public art design</a></li> <li><a href="/wiki/Ceramic_art" title="Ceramic art">Ceramic</a> / <a href="/wiki/Glass_art" title="Glass art">glass design</a></li> <li><a href="/wiki/Fashion_design" title="Fashion design">Fashion design</a> <ul><li><a href="/wiki/Costume_design" title="Costume design">Costume design</a></li> <li><a href="/wiki/Jewellery_design" title="Jewellery design">Jewellery design</a></li></ul></li> <li><a href="/wiki/Floral_design" title="Floral design">Floral design</a></li> <li><a href="/wiki/Game_art_design" title="Game art design">Game art design</a></li> <li><a href="/wiki/Property_designer" class="mw-redirect" title="Property designer">Property design</a></li> <li><a href="/wiki/Scenic_design" title="Scenic design">Scenic design</a></li> <li><a href="/wiki/Sound_design" title="Sound design">Sound design</a></li> <li><a href="/wiki/Lighting_design" title="Lighting design">Stage/set lighting design</a></li> <li><a href="/wiki/Textile_design" title="Textile design">Textile design</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Other<br />design<br />& <a href="/wiki/Engineering" title="Engineering">engineering</a></th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Algorithm_design" class="mw-redirect" title="Algorithm design">Algorithm design</a></li> <li><a href="/wiki/Behavioural_design" title="Behavioural design">Behavioural design</a></li> <li><a href="/wiki/Boiler_design" title="Boiler design">Boiler design</a></li> <li><a href="/wiki/Database_design" title="Database design">Database design</a></li> <li><a href="/wiki/Drug_design" title="Drug design">Drug design</a></li> <li><a href="/wiki/Electrical_system_design" title="Electrical system design">Electrical system design</a></li> <li><a href="/wiki/Design_of_experiments" title="Design of experiments">Experimental design</a></li> <li><a href="/wiki/Filter_design" title="Filter design">Filter design</a></li> <li><a href="/wiki/Geometric_design" title="Geometric design">Geometric design</a></li> <li><a href="/wiki/Work_design" title="Work design">Work design</a></li> <li><a href="/wiki/Integrated_circuit_design" title="Integrated circuit design">Integrated circuit design</a> <ul><li><a href="/wiki/Circuit_design" title="Circuit design">Circuit design</a></li> <li><a href="/wiki/Physical_design_(electronics)" title="Physical design (electronics)">Physical design</a></li> <li><a href="/wiki/Power_network_design_(IC)" title="Power network design (IC)">Power network design</a></li></ul></li> <li><a href="/wiki/Mechanism_design" title="Mechanism design">Mechanism design</a></li> <li><a href="/wiki/Nuclear_weapon_design" title="Nuclear weapon design">Nuclear weapon design</a></li> <li><a href="/wiki/Nucleic_acid_design" title="Nucleic acid design">Nucleic acid design</a></li> <li><a href="/wiki/Organizational_architecture" title="Organizational architecture">Organization design</a></li> <li><a href="/wiki/Process_design" title="Process design">Process design</a></li> <li><a href="/wiki/Processor_design" title="Processor design">Processor design</a></li> <li><a href="/wiki/Protein_design" title="Protein design">Protein design</a></li> <li><a href="/wiki/Research_design" title="Research design">Research design</a></li> <li><a href="/wiki/Social_design" title="Social design">Social design</a></li> <li><a href="/wiki/Software_design" title="Software design">Software design</a></li> <li><a href="/wiki/Spacecraft_design" title="Spacecraft design">Spacecraft design</a></li> <li><a href="/wiki/Strategic_design" title="Strategic design">Strategic design</a></li> <li><a href="/wiki/Systems_design" title="Systems design">Systems design</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Approaches" style="font-size:114%;margin:0 4em">Approaches</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Activity-centered_design" title="Activity-centered design">Activity-centered</a></li> <li><a href="/wiki/Adaptive_web_design" title="Adaptive web design">Adaptive web</a></li> <li><a href="/wiki/Affective_design" title="Affective design">Affective</a></li> <li><a href="/wiki/Brainstorming" title="Brainstorming">Brainstorming</a></li> <li><a href="/wiki/Design_by_committee" title="Design by committee">By committee</a></li> <li><a href="/wiki/Design_by_contract" title="Design by contract">By contract</a></li> <li><a href="/wiki/C-K_theory" title="C-K theory">C-K theory</a></li> <li><a href="/wiki/Design_closure" title="Design closure">Closure</a></li> <li><a href="/wiki/Participatory_design" title="Participatory design">Co-design</a></li> <li><a href="/w/index.php?title=Concept-oriented_design&action=edit&redlink=1" class="new" title="Concept-oriented design (page does not exist)">Concept-oriented</a></li> <li><a href="/wiki/Configuration_design" title="Configuration design">Configuration</a></li> <li><a href="/wiki/Contextual_design" title="Contextual design">Contextual</a></li> <li><a href="/wiki/Continuous_design" title="Continuous design">Continuous</a></li> <li><a href="/wiki/Cradle-to-cradle_design" title="Cradle-to-cradle design">Cradle-to-cradle</a></li> <li><a href="/wiki/Creative_problem-solving" title="Creative problem-solving">Creative problem-solving</a></li> <li><a href="/wiki/Creativity_techniques" title="Creativity techniques">Creativity techniques</a></li> <li><a href="/wiki/Critical_design" title="Critical design">Critical</a> <ul><li><a href="/wiki/Design_fiction" title="Design fiction">Design fiction</a></li></ul></li> <li><a href="/wiki/Defensive_design" title="Defensive design">Defensive</a></li> <li><a href="/wiki/Design%E2%80%93bid%E2%80%93build" title="Design–bid–build">Design–bid–build</a></li> <li><a href="/wiki/Design%E2%80%93build" title="Design–build">Design–build</a> <ul><li><a href="/wiki/Architect-led_design%E2%80%93build" class="mw-redirect" title="Architect-led design–build">architect-led</a></li></ul></li> <li><a href="/wiki/Diffuse_design" title="Diffuse design">Diffuse</a></li> <li><a href="/wiki/Domain-driven_design" title="Domain-driven design">Domain-driven</a></li> <li><a href="/wiki/Ecological_design" title="Ecological design">Ecological design</a></li> <li><a href="/wiki/Energy_neutral_design" title="Energy neutral design">Energy neutral</a></li> <li><a href="/wiki/Engineering_design_process" title="Engineering design process">Engineering design process</a> <ul><li><a href="/wiki/Probabilistic_design" title="Probabilistic design">Probabilistic design</a></li></ul></li> <li><a href="/wiki/Error-tolerant_design" title="Error-tolerant design">Error-tolerant</a></li> <li><a href="/wiki/Fault-tolerant_design" class="mw-redirect" title="Fault-tolerant design">Fault-tolerant</a></li> <li><a href="/wiki/Framework-oriented_design" title="Framework-oriented design">Framework-oriented</a></li> <li><a href="/wiki/Design_for_assembly" title="Design for assembly">For assembly</a></li> <li><a href="/wiki/Behavioural_design" title="Behavioural design">For behaviour change</a></li> <li><a href="/wiki/Design_for_manufacturability" title="Design for manufacturability">For manufacturability</a></li> <li><a href="/wiki/Design_for_Six_Sigma" title="Design for Six Sigma">For Six Sigma</a></li> <li><a href="/wiki/Design_for_testing" title="Design for testing">For testing</a></li> <li><a href="/wiki/Design_for_X" title="Design for X">For X</a></li> <li><a href="/wiki/Functional_design" title="Functional design">Functional</a></li> <li><a href="/wiki/Generative_design" title="Generative design">Generative</a></li> <li><a href="/wiki/Geodesign" title="Geodesign">Geodesign</a></li> <li><a href="/wiki/Human-centered_design" title="Human-centered design">HCD</a></li> <li><a href="/wiki/High-level_design" title="High-level design">High-level</a></li> <li><a href="/wiki/Inclusive_design" title="Inclusive design">Inclusive</a></li> <li><a href="/wiki/Integrated_design" title="Integrated design">Integrated</a></li> <li><a href="/wiki/Integrated_topside_design" title="Integrated topside design">Integrated topside</a></li> <li><a href="/wiki/Intelligence-based_design" title="Intelligence-based design">Intelligence-based</a></li> <li><a href="/wiki/Iterative_design" title="Iterative design">Iterative</a></li> <li><a href="/wiki/KISS_principle" title="KISS principle">KISS principle</a></li> <li><a href="/wiki/Low-level_design" title="Low-level design">Low-level</a></li> <li><a href="/wiki/Metadesign" title="Metadesign">Metadesign</a></li> <li><a href="/wiki/Mind_map" title="Mind map">Mind mapping</a></li> <li><a href="/wiki/Modular_design" title="Modular design">Modular</a></li> <li><a href="/wiki/New_Wave_(design)" title="New Wave (design)">New Wave</a></li> <li><a href="/wiki/Object-oriented_design" class="mw-redirect" title="Object-oriented design">Object-oriented</a></li> <li><a href="/wiki/Open-design_movement" title="Open-design movement">Open</a></li> <li><a href="/wiki/Parametric_design" title="Parametric design">Parametric</a></li> <li><a href="/wiki/Participatory_design" title="Participatory design">Participatory</a></li> <li><a href="/wiki/Platform-based_design" title="Platform-based design">Platform-based</a></li> <li><a href="/wiki/Policy-based_design" class="mw-redirect" title="Policy-based design">Policy-based</a></li> <li><a href="/wiki/Process-centered_design" title="Process-centered design">Process-centered</a></li> <li><a href="/wiki/Public_interest_design" title="Public interest design">Public interest</a></li> <li><a href="/wiki/Rational_design" title="Rational design">Rational</a></li> <li><a href="/wiki/Regenerative_design" title="Regenerative design">Regenerative</a></li> <li><a href="/wiki/Reliability_engineering" title="Reliability engineering">Reliability engineering</a></li> <li><a href="/wiki/Research-based_design" title="Research-based design">Research-based</a></li> <li><a href="/wiki/Responsibility-driven_design" title="Responsibility-driven design">Responsibility-driven</a></li> <li><a href="/wiki/Responsive_web_design" title="Responsive web design">RWD</a></li> <li><a href="/wiki/Safe-life_design" title="Safe-life design">Safe-life</a></li> <li><a href="/wiki/Sustainable_design" title="Sustainable design">Sustainable</a></li> <li><a href="/wiki/Systemic_design" title="Systemic design">Systemic</a> <ul><li><a href="/wiki/Systems-oriented_design" title="Systems-oriented design">SOD</a></li></ul></li> <li><a href="/wiki/Tableless_web_design" title="Tableless web design">Tableless web</a></li> <li><a href="/wiki/Theory_of_constraints" title="Theory of constraints">Theory of constraints</a></li> <li><a href="/wiki/Top-down_and_bottom-up_design" class="mw-redirect" title="Top-down and bottom-up design">Top-down and bottom-up</a></li> <li><a href="/wiki/Transformation_design" title="Transformation design">Transformation</a></li> <li><a href="/wiki/Transgenerational_design" title="Transgenerational design">Transgenerational</a></li> <li><a href="/wiki/TRIZ" title="TRIZ">TRIZ</a></li> <li><a href="/wiki/Universal_design" title="Universal design">Universal</a> <ul><li><a href="/wiki/Design_for_All_(in_ICT)" title="Design for All (in ICT)">Design for All</a></li></ul></li> <li><a href="/wiki/Usage-centered_design" title="Usage-centered design">Usage-centered</a></li> <li><a href="/wiki/Use-centered_design" title="Use-centered design">Use-centered</a></li> <li><a href="/wiki/User-centered_design" title="User-centered design">User-centered</a> <ul><li><a href="/wiki/Empathic_design" title="Empathic design">Empathic</a></li></ul></li> <li><a href="/wiki/User_innovation" title="User innovation">User innovation</a></li> <li><a href="/wiki/Value-driven_design" title="Value-driven design">Value-driven</a></li> <li><a href="/wiki/Value_sensitive_design" title="Value sensitive design">Value sensitive</a> <ul><li><a href="/wiki/Privacy_by_design" title="Privacy by design">Privacy by</a></li></ul></li></ul> <ul><li>Design <a href="/wiki/Design_choice" title="Design choice">choice</a></li> <li><a href="/wiki/Design_computing" title="Design computing">computing</a></li> <li><a href="/wiki/Design_controls" title="Design controls">controls</a></li> <li><a href="/wiki/Design_culture" title="Design culture">culture</a></li> <li><a href="/wiki/Design_flow_(EDA)" title="Design flow (EDA)">flow</a></li> <li><a href="/wiki/Design_leadership" title="Design leadership">leadership</a></li> <li><a href="/wiki/Design_management" title="Design management">management</a></li> <li><a href="/wiki/Design_marker" title="Design marker">marker</a></li> <li><a href="/wiki/Design_methods" title="Design methods">methods</a></li> <li><a href="/wiki/Design_pattern" title="Design pattern">pattern</a></li> <li><a href="/wiki/Design_research" title="Design research">research</a></li> <li><a href="/wiki/Design_science" title="Design science">science</a></li> <li><a href="/wiki/Design_sprint" title="Design sprint">sprint</a></li> <li><a href="/wiki/Design_strategy" class="mw-redirect" title="Design strategy">strategy</a></li> <li><a href="/wiki/Design_theory" title="Design theory">theory</a></li> <li><a href="/wiki/Design_thinking" title="Design thinking">thinking</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="ToolsIntellectual_propertyOrganizationsAwards" style="font-size:114%;margin:0 4em"><div class="hlist"><ul><li>Tools</li><li>Intellectual property</li><li>Organizations</li><li>Awards</li></ul></div></div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="row" class="navbox-group" style="width:1%"><a href="/wiki/Design_tool" title="Design tool">Tools</a></th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Algorithms-Aided_Design" title="Algorithms-Aided Design">AAD</a></li> <li><a href="/wiki/Architectural_model" title="Architectural model">Architectural model</a></li> <li><a href="/wiki/Blueprint" title="Blueprint">Blueprint</a></li> <li><a href="/wiki/Comprehensive_layout" title="Comprehensive layout">Comprehensive layout</a></li> <li><a href="/wiki/Computer-aided_design" title="Computer-aided design">CAD</a> <ul><li><a href="/wiki/Computer-aided_industrial_design" title="Computer-aided industrial design">CAID</a></li> <li><a href="/wiki/Virtual_home_design_software" title="Virtual home design software">Virtual home design software</a></li></ul></li> <li><a href="/wiki/Computer-automated_design" title="Computer-automated design">CAutoD</a></li> <li><a href="/wiki/Design_quality_indicator" title="Design quality indicator">Design quality indicator</a></li> <li><a href="/wiki/Electronic_design_automation" title="Electronic design automation">Electronic design automation</a></li> <li><a href="/wiki/Flowchart" title="Flowchart">Flowchart</a></li> <li><a href="/wiki/Mockup" title="Mockup">Mockup</a></li> <li><a href="/wiki/Design_specification" title="Design specification">Design specification</a></li> <li><a href="/wiki/Prototype" title="Prototype">Prototype</a></li> <li><a href="/wiki/Sketch_(drawing)" title="Sketch (drawing)">Sketch</a></li> <li><a href="/wiki/Storyboard" title="Storyboard">Storyboard</a></li> <li><a href="/wiki/Technical_drawing" title="Technical drawing">Technical drawing</a></li> <li><a href="/wiki/HTML_editor" title="HTML editor">HTML editor</a></li> <li><a href="/wiki/Website_wireframe" title="Website wireframe">Website wireframe</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Intellectual<br />property</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Community_design" title="Community design">Community design</a></li> <li><a href="/wiki/Design_around" title="Design around">Design around</a></li> <li><a href="/wiki/Design_infringement" title="Design infringement">Design infringement</a></li> <li><a href="/wiki/Design_patent" title="Design patent">Design patent</a></li> <li><a href="/wiki/Fashion_design_copyright" title="Fashion design copyright">Fashion design copyright</a></li> <li><i><a href="/wiki/Geschmacksmuster" title="Geschmacksmuster">Geschmacksmuster</a></i></li> <li><a href="/wiki/Industrial_design_right" title="Industrial design right">Industrial design rights</a> <ul><li><a href="/wiki/Industrial_design_rights_in_the_European_Union" title="Industrial design rights in the European Union">European Union</a></li></ul></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Organizations</th><td class="navbox-list-with-group navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/American_Institute_of_Graphic_Arts" title="American Institute of Graphic Arts">American Institute of Graphic Arts</a></li> <li><a href="/wiki/Chartered_Society_of_Designers" title="Chartered Society of Designers">Chartered Society of Designers</a></li> <li><a href="/wiki/Design_and_Industries_Association" title="Design and Industries Association">Design and Industries Association</a></li> <li><a href="/wiki/Design_Council" title="Design Council">Design Council</a></li> <li><a href="/wiki/International_Forum_Design" title="International Forum Design">International Forum Design</a></li> <li><a href="/wiki/Design_Research_Society" title="Design Research Society">Design Research Society</a></li></ul> </div></td></tr><tr><th scope="row" class="navbox-group" style="width:1%">Awards</th><td class="navbox-list-with-group navbox-list navbox-even" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/European_Design_Award" class="mw-redirect" title="European Design Award">European Design Award</a></li> <li><a href="/wiki/German_Design_Award" title="German Design Award">German Design Award</a></li> <li><a href="/wiki/Good_Design_Award_(Museum_of_Modern_Art)" title="Good Design Award (Museum of Modern Art)">Good Design Award (Museum of Modern Art)</a></li> <li><a href="/wiki/Good_Design_Award_(Chicago_Athenaeum)" class="mw-redirect" title="Good Design Award (Chicago Athenaeum)">Good Design Award (Chicago Athenaeum)</a></li> <li><a href="/wiki/Graphex" class="mw-redirect" title="Graphex">Graphex</a></li> <li><a href="/wiki/IF_Product_Design_Award" title="IF Product Design Award">IF Product Design Award</a></li> <li><a href="/wiki/James_Dyson_Award" title="James Dyson Award">James Dyson Award</a></li> <li><a href="/wiki/Prince_Philip_Designers_Prize" title="Prince Philip Designers Prize">Prince Philip Designers Prize</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr></tbody></table><div></div></td></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"></div><table class="nowraplinks mw-collapsible mw-collapsed navbox-subgroup" style="border-spacing:0"><tbody><tr><th scope="col" class="navbox-title" colspan="2"><div id="Related_topics" style="font-size:114%;margin:0 4em">Related topics</div></th></tr><tr><td colspan="2" class="navbox-list navbox-odd" style="width:100%;padding:0"><div style="padding:0 0.25em"> <ul><li><a href="/wiki/Agile_software_development" title="Agile software development">Agile</a></li> <li><a href="/wiki/Concept_art" title="Concept art">Concept art</a></li> <li><a href="/wiki/Conceptual_design" title="Conceptual design">Conceptual design</a></li> <li><a href="/wiki/Creative_industries" title="Creative industries">Creative industries</a></li> <li><a href="/wiki/Cultural_icon" title="Cultural icon">Cultural icon</a></li> <li><a href="/wiki/.design" title=".design">.design</a></li> <li><a href="/wiki/Enterprise_architecture" title="Enterprise architecture">Enterprise architecture</a></li> <li><a href="/wiki/Form_factor_(design)" title="Form factor (design)">Form factor</a></li> <li><a href="/wiki/Futures_studies" title="Futures studies">Futures studies</a></li> <li><a href="/wiki/Indie_design" title="Indie design">Indie design</a></li> <li><a href="/wiki/Innovation_management" title="Innovation management">Innovation management</a></li> <li><a href="/wiki/Intelligent_design" title="Intelligent design">Intelligent design</a></li> <li><a href="/wiki/Lean_startup" title="Lean startup">Lean startup</a></li> <li><a href="/wiki/New_product_development" title="New product development">New product development</a></li> <li><a href="/wiki/OODA_loop" title="OODA loop">OODA loop</a></li> <li><a href="/wiki/Philosophy_of_design" title="Philosophy of design">Philosophy of design</a></li> <li><a href="/wiki/Process_simulation" title="Process simulation">Process simulation</a></li> <li><a href="/wiki/Slow_design" class="mw-redirect" title="Slow design">Slow design</a></li> <li><a href="/wiki/STEAM_fields" class="mw-redirect" title="STEAM fields">STEAM fields</a></li> <li><a href="/wiki/Argument_from_poor_design" title="Argument from poor design">Unintelligent design</a></li> <li><a href="/wiki/Visualization_(graphics)" title="Visualization (graphics)">Visualization</a></li> <li><a href="/wiki/Wicked_problem" title="Wicked problem">Wicked problem</a></li></ul> <ul><li>Design <a href="/wiki/Design_brief" title="Design brief">brief</a></li> <li><a href="/wiki/Design_change" title="Design change">change</a></li> <li><a href="/wiki/Design_classic" title="Design classic">classic</a></li> <li><a href="/wiki/Design_competition" title="Design competition">competition</a> <ul><li><a href="/wiki/Architectural_design_competition" title="Architectural design competition">architectural</a></li> <li><a href="/wiki/Student_design_competition" title="Student design competition">student</a></li></ul></li> <li><a href="/wiki/Design_director" title="Design director">director</a></li> <li><a href="/wiki/Design_education" title="Design education">education</a></li> <li><a href="/wiki/Design_elements" title="Design elements">elements</a></li> <li><a href="/wiki/Design_engineer" title="Design engineer">engineer</a></li> <li><a href="/wiki/Design_firm" class="mw-redirect" title="Design firm">firm</a></li> <li><a href="/wiki/Design_history" title="Design history">history</a></li> <li><a href="/wiki/Design_knowledge" title="Design knowledge">knowledge</a></li> <li><a href="/wiki/Design_language" title="Design language">language</a></li> <li><a href="/wiki/Design_life" title="Design life">life</a></li> <li><a href="/wiki/Design_load" title="Design load">load</a></li> <li><a href="/wiki/Design_museum" title="Design museum">museum</a></li> <li><a href="/wiki/Design_paradigm" title="Design paradigm">paradigm</a></li> <li><a href="/wiki/Design_principles" title="Design principles">principles</a></li> <li><a href="/wiki/Design_rationale" title="Design rationale">rationale</a></li> <li><a href="/wiki/Design_review" title="Design review">review</a></li> <li><a href="/wiki/Design_specification" title="Design specification">specification</a></li> <li><a href="/wiki/Design_studies" title="Design studies">studies</a></li> <li><a href="/wiki/Design_studio" class="mw-redirect" title="Design studio">studio</a></li> <li><a href="/wiki/Design_technology" title="Design technology">technology</a></li></ul> </div></td></tr></tbody></table><div></div></td></tr><tr><td class="navbox-abovebelow" colspan="2"><div> <ul><li><a href="https://commons.wikimedia.org/wiki/category:Design" class="extiw" title="commons:category:Design"> <span class="tmp-color" style="color:#002bb8">Commons</span> </a></li> <li><a href="https://en.wikibooks.org/wiki/Design" class="extiw" title="wikibooks:Design"> <span class="tmp-color" style="color:#002bb8">Wikibooks</span> </a></li> <li><a href="https://en.wikinews.org/wiki/Special:Search/Design" class="extiw" title="wikinews:Special:Search/Design"> <span class="tmp-color" style="color:#002bb8">Wikinews</span> </a></li> <li><a href="https://en.wikiquote.org/wiki/Design" class="extiw" title="wikiquote:Design"> <span class="tmp-color" style="color:#002bb8">Wikiquote</span> </a></li> <li><a href="https://en.wikisource.org/wiki/Category:Design" class="extiw" title="wikisource:Category:Design"> <span class="tmp-color" style="color:#002bb8">Wikisource</span> </a></li> <li><a href="https://en.wiktionary.org/wiki/Design" class="extiw" title="wiktionary:Design"> <span class="tmp-color" style="color:#002bb8">Wiktionary</span> </a></li></ul> </div></td></tr></tbody></table></div>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Retrieved from "<a dir="ltr" href="https://en.wikipedia.org/w/index.php?title=Web_design&oldid=1259134159">https://en.wikipedia.org/w/index.php?title=Web_design&oldid=1259134159</a>"</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/Help:Category" title="Help:Category">Categories</a>: <ul><li><a href="/wiki/Category:Web_design" title="Category:Web design">Web design</a></li><li><a href="/wiki/Category:Computer-related_introductions_in_1989" title="Category:Computer-related introductions in 1989">Computer-related introductions in 1989</a></li><li><a href="/wiki/Category:Communication_design" title="Category:Communication design">Communication design</a></li></ul></div><div id="mw-hidden-catlinks" class="mw-hidden-catlinks mw-hidden-cats-hidden">Hidden categories: <ul><li><a href="/wiki/Category:CS1_maint:_numeric_names:_authors_list" title="Category:CS1 maint: numeric names: authors list">CS1 maint: numeric names: authors list</a></li><li><a href="/wiki/Category:Articles_with_short_description" title="Category:Articles with short description">Articles with short description</a></li><li><a href="/wiki/Category:Short_description_matches_Wikidata" title="Category:Short description matches Wikidata">Short description matches Wikidata</a></li><li><a href="/wiki/Category:Wikipedia_indefinitely_semi-protected_pages" title="Category:Wikipedia indefinitely semi-protected pages">Wikipedia indefinitely semi-protected pages</a></li><li><a href="/wiki/Category:Use_British_English_from_July_2016" title="Category:Use British English from July 2016">Use British English from July 2016</a></li><li><a href="/wiki/Category:All_articles_with_vague_or_ambiguous_time" title="Category:All articles with vague or ambiguous time">All articles with vague or ambiguous time</a></li><li><a href="/wiki/Category:Vague_or_ambiguous_time_from_May_2016" title="Category:Vague or ambiguous time from May 2016">Vague or ambiguous time from May 2016</a></li><li><a href="/wiki/Category:All_articles_with_specifically_marked_weasel-worded_phrases" title="Category:All articles with specifically marked weasel-worded phrases">All articles with specifically marked weasel-worded phrases</a></li><li><a href="/wiki/Category:Articles_with_specifically_marked_weasel-worded_phrases_from_May_2016" title="Category:Articles with specifically marked weasel-worded phrases from May 2016">Articles with specifically marked weasel-worded phrases from May 2016</a></li><li><a href="/wiki/Category:Pages_using_Sister_project_links_with_hidden_wikidata" title="Category:Pages using Sister project links with hidden wikidata">Pages using Sister project links with hidden wikidata</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> This page was last edited on 23 November 2024, at 15:26<span class="anonymous-show"> (UTC)</span>.</li> <li id="footer-info-copyright">Text is available under the <a href="/wiki/Wikipedia:Text_of_the_Creative_Commons_Attribution-ShareAlike_4.0_International_License" title="Wikipedia:Text of the Creative Commons Attribution-ShareAlike 4.0 International License">Creative Commons Attribution-ShareAlike 4.0 License</a>; additional terms may apply. By using this site, you agree to the <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Terms_of_Use" class="extiw" title="foundation:Special:MyLanguage/Policy:Terms of Use">Terms of Use</a> and <a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy" class="extiw" title="foundation:Special:MyLanguage/Policy:Privacy policy">Privacy Policy</a>. Wikipedia® is a registered trademark of the <a rel="nofollow" class="external text" href="https://wikimediafoundation.org/">Wikimedia Foundation, Inc.</a>, a non-profit organization.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Privacy policy</a></li> <li id="footer-places-about"><a href="/wiki/Wikipedia:About">About Wikipedia</a></li> <li id="footer-places-disclaimers"><a href="/wiki/Wikipedia:General_disclaimer">Disclaimers</a></li> <li id="footer-places-contact"><a href="//en.wikipedia.org/wiki/Wikipedia:Contact_us">Contact Wikipedia</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Code of Conduct</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Developers</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/en.wikipedia.org">Statistics</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Cookie statement</a></li> <li id="footer-places-mobileview"><a href="//en.m.wikipedia.org/w/index.php?title=Web_design&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Mobile view</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-rjnn6","wgBackendResponseTime":259,"wgPageParseReport":{"limitreport":{"cputime":"0.675","walltime":"0.995","ppvisitednodes":{"value":3203,"limit":1000000},"postexpandincludesize":{"value":131951,"limit":2097152},"templateargumentsize":{"value":3045,"limit":2097152},"expansiondepth":{"value":12,"limit":100},"expensivefunctioncount":{"value":13,"limit":500},"unstrip-depth":{"value":1,"limit":20},"unstrip-size":{"value":138493,"limit":5000000},"entityaccesscount":{"value":1,"limit":400},"timingprofile":["100.00% 768.180 1 -total"," 19.99% 153.530 2 Template:Reflist"," 17.95% 137.922 14 Template:Citation"," 12.44% 95.547 1 Template:Authority_control"," 11.35% 87.183 1 Template:Short_description"," 10.34% 79.414 1 Template:Subject_bar"," 8.17% 62.738 1 Template:Design"," 7.83% 60.152 1 Template:Navbox_with_collapsible_groups"," 7.15% 54.949 1 Template:Pp-semi-indef"," 5.94% 45.649 13 Template:Cite_web"]},"scribunto":{"limitreport-timeusage":{"value":"0.407","limit":"10.000"},"limitreport-memusage":{"value":6859759,"limit":52428800}},"cachereport":{"origin":"mw-web.codfw.main-f69cdc8f6-vrhlg","timestamp":"20241123152643","ttl":2592000,"transientcontent":false}}});});</script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"Article","name":"Web design","url":"https:\/\/en.wikipedia.org\/wiki\/Web_design","sameAs":"http:\/\/www.wikidata.org\/entity\/Q190637","mainEntity":"http:\/\/www.wikidata.org\/entity\/Q190637","author":{"@type":"Organization","name":"Contributors to Wikimedia projects"},"publisher":{"@type":"Organization","name":"Wikimedia Foundation, Inc.","logo":{"@type":"ImageObject","url":"https:\/\/www.wikimedia.org\/static\/images\/wmf-hor-googpub.png"}},"datePublished":"2002-02-25T15:51:15Z","dateModified":"2024-11-23T15:26:41Z","headline":"creation and maintenance of websites"}</script> </body> </html>