Web design is primarily the design of websites in the internet, but the term is often used in a broader sense, including the technical development of websites as part of it. Because these two parts are often not carried out by the same person, a division can also be made between web design, which mainly focuses on the front-end of websites, and web development (web development), which focuses on the backend, or technical realization thereof. Web design has similarities with the graphic design of traditional printing, but there are striking differences. For example, video and audio can be part of web design and the interaction with visitors is different.

Web design guidelines are laid down in w3c and WCAG. Accessibility and usability are the starting points in this.

Technical aspects

In contrast to the traditional structure of books, with a table of contents, different indexes, a chapter division and the like, websites are generally designed in a less linear way. It uses various menus, search functions and sometimes login functions to shield parts of the content from the general public. One way to provide orientation options in a website is the so-called breadcrumb navigation, where the path chosen by the user is indicated in the tree structure of the website on each page.

Format

The substantive coherence of the message of a website is indicated by computer commands in the text. Usually HTML codes are specified for this. In addition, a style sheet can be used. It provides guidance on how to display certain HTML elements such as fonts, colors, and background images, as well as the positioning of and spacing between elements on the site. By linking multiple web pages to the same style sheet, it is easier to present the entire site in a uniform format. However, the final display cannot be completely controlled by the designer, because different readers will use different devices to consult his websites.

Dynamic and interactive web pages

In addition to static layout elements, dynamic elements such as mouseovers, web videos and the like can also be added, as well as separate interactive parts, for example a map of which each part can be clicked separately. There are many techniques for adding dynamic and interactive elements: JavaScript, Dynamic HTML, Adobe Flash. However, these sites often cause problems for people with text browsers such as Lynx and, for example, blind people who surf with a speech browser or Braille display, because no alternative content is offered.

UX Web design

Display

Websites do not look identical on every computer and in every browser. HTML is interpreted and displayed separately by each computer / browser. A web designer should therefore take this pluralistic view into account, and will therefore strive for a cross browser layout in order to keep this in hand as much as possible.

  • The resolution is the size of the screen, measured in pixels. The resolution may vary per user. A large resolution mainly offers more space in width, the length is generally less important because it is absorbed by scrolling. A design that is not based on fixed screen dimensions is called liquid design, the content “flows” here, as it were, in the available space.
  • The color depth indicates how many colors the screen can display. In the past, 256 colors were common and had to be taken into account. In that time, the web colors were created. Today, however, high color depths are normal.
  • The color reproduction may differ per screen. Some computers have a program installed that performs gamma correction, which adjusts colors. It also makes a difference whether a CRT or TFT display is used.
  • The type of web browser is also important. Browsers each have their own interpretation of the code of a web page. Standards have been developed by W3C on how the code should be interpreted. The browsers do not always fully adhere to that, especially Internet Explorer is often a concern for developers.

Apart from such technical display elements, (color) blind, visually impaired or deaf users also expect a website to be available to them.

The influence of web design on findability

The web design of a website influences the findability of a website. In order to increase the findability in websites such as Google and Bing, a number of structural elements for a web design can be taken into account during the development of a web design. For example, it is important to take into account the placement of an H1 and H2 title in a web design. Adding a breadcrumb path also increases findability, because search engines better understand the site structure in this way.

Method

The creation of a website takes several steps. Each step can usually be performed by another person specialized in the field. Often when creating a new website, after it is clear what the desired objectives are, a schematic design is first made, a so-called wireframe, about how the accessibility should function and which elements should be included. Based on this wireframe, a graphic layout of the entire web page is then created, which can be presented in the form of, for example, a single JPEG file, accompanied by a number of separate images that will be used as separate graphic elements, or as complete clickable model that gives a good impression of the final display. The textual content is given a place, but the drafting of the texts is an isolated process. ‘Lorem ipsum’ is often used to temporarily fill the space intended for texts.

The graphic design is then converted into HTML, called bases, in which the included graphic elements are used. Even now, the textual content is still a side issue. The ‘Lorem ipsum’ is often used as text. Currently it can be tested how the code looks in different circumstances. Finally, the interactivity is added and the final texts are placed in the different pages of the website. It is possible that this is a dynamic website, where the content can be adjusted using a CMS. However, the coding of this server side part does not fall under web design, but is left to the web developer. The interactivity and final finish on the web page itself can be further refined by a so-called fronteer.

Accessibility

With the rise of smartphones, PDAs and other (personal) devices that have access to the internet, the demands on a website are also changing. It does not seem easy to keep an eye on the various forms of use that are now possible during design and construction. With the help of the web standards developed by the W3C, among other things, it can be ensured that a site can be used under all those user conditions. For example, HTML is intended to structure the content of a web page, CSS to capture the (graphic) style and the combination ECMAScript / DOM to add interactivity to a page. An advantage is that all those components can be developed and managed independently. In fact, if things like content, style and / or scripting are mixed, it will immediately have a negative impact on the usability of a web page for applications other than a PC with screen and Internet Explorer. As the use of other browsers, operating systems and web devices is steadily increasing, it is becoming increasingly important for web designers to consider such uses.

Resources:
Web design