Web design
Web design (also web design ) as a discipline of media design includes the visual, functional and structural design of websites for the Internet . The technical implementation of websites, on the other hand, is called web development .
History of web design
According to the medium , web design is a relatively young discipline. As a combination of classic graphic design and other areas such as interaction design or motion design, it shapes the appearance of the Internet today .
The start of the web and web design
1989: While working at CERN , Tim Berners-Lee planned to create a global hypertext project that would later become known as the World Wide Web .
1991 to 1993: The World Wide Web was born. Initially, only text pages could be read using a simple line web browser .
1993: Marc Andreessen and Eric Bina created the Mosaic web browser . At the time there were multiple browsers , but the majority were based on Unix . However, these Unix browsers made it difficult to read a text. There were also no uniform, graphic design elements such as images or sounds.
1994: The World Wide Web Consortium (W3C) was created to utilize the full potential of the World Wide Web. General protocols were also developed, which led to the continued existence of the W3C and ensure its interim functionality. This development, however, has prevented other organizations from developing new browsers and programming languages that could have changed the World Wide Web as a whole.
1994: Andreesen founds a communications trading company. This later became known as Netscape Communications and developed the Netscape Navigator browser . Netscape created its own HTML elements without regard to the traditional standard process. For example, Netscape 1.1 included its own HTML programming to independently change background colors and format text on websites.
1996 to 1999: The so-called " browser wars " begin. In the course of these browser wars, Microsoft and Netscape began to fight for browser superiority. During this time, many new technologies were developed, such as: B. Format templates, JavaScript and the dynamic HTML. In general, this browser competition led to many positive developments and also helped web design to develop at a rapid pace.
Web design development
In 1996 Microsoft released its first competitive browser, which had its own features and elements. It was also the first browser to support styles that were not popular at the time. One quickly understood the potential of HTML programming to create complex multi-column layouts that were otherwise not possible. During this time, design and good aesthetics prevailed , which is why very little attention was paid to schematics and web accessibility . HTML pages were even more limited by their design options than earlier versions of the HTML. In order to create intricate designs, many web designers have had to use intricate table structures. Sometimes even use your own GIF images to prevent empty table cells from collapsing.
Also, CSS was introduced by W3C in December 1996 to support presentation and layout. This allowed the HTML to be schematic and improved web accessibility.
It was also Flash (originally known as Future Splash) developed. Initially there was a very simple layout that included only basic tools, but it allowed web designers to surpass HTML. Flash is now very advanced and enables the user to develop complete pages.
End of the first browser wars
In 1998, Netscape released its Netscape Communicator Code under an open source license so that thousands of developers could participate in improving the software . However, Netscape decided to stop this publication in order to coordinate the development of the open source browser and to expand it to include a complete application platform.
The Web Standards Project was formed. This promoted the development of browsers based on HTML and CSS standards through the creation of Acid1, Acid2 and Acid3.
2000 was a big year for Microsoft. The Internet Explorer for Mac OS Classic was released. It was the first browser to fully support HTML 4.01 and CSS 1. Internet Explorer set a new bar for standards compliance. It was the first browser to support the PNG format. During this time, Netscape was sold and officially gave leadership in the browser wars to Microsoft.
The 21st century
Since the beginning of the 21st century, the use of the web began to integrate more and more into people's lives. The technology was changing. There have been significant changes in the way people used and accessed the web, and how pages were laid out.
The modern browser
The modern age of browsers ushered in the end of browser wars. New open source browsers are emerging, which means that they tend to have faster development cycles and support more standards than ever before.
The new standards
The W3C has released new standards for HTML ( HTML5 ) and CSS (CSS3), as well as new JavaScript API . However, while the term HTML5 is only used to refer to the new version of HTML, JavaScript API refers to the entirety of HTML5, CSS3, and JavaScript.
HTML5 replaced HTML4 as the official core language of the Internet in October 2014. The new web standard is a joint project of the Web Hypertext Application Technology Working Group (WHATWG) and the W3C. The publication of the new markup language for the World Wide Web was an important milestone on the way to a contemporary and standardized web design.
Modern web design today mostly includes the possibility of interaction between website and user as well as the integration of multimedia content. Modern websites therefore often have integrated social media plugins, interactive contact forms and audiovisual content. In addition, they are often optimized for mobile devices. With the help of HTML5, these functionalities can be implemented natively, i.e. without the integration of additional software from private operators. This makes websites safer and more accessible because programming does not require the use of external providers.
The use of HTML5 also has advantages when it comes to finding websites using search engines . For example, Google marks websites as "mobile-friendly" if they avoid the integration of external software. This mobile suitability in turn affects the placement of a website in the search results when the search is carried out from a mobile device.
Programming HTML5 websites, like earlier versions of this markup language, requires the use of so-called HTML tags. These give the browser information about the design and structure of a website. With the advent of HTML5, new ones have been added to the existing tags and attributes. Older tags are sometimes no longer supported. In addition to HTML5, CSS3 is another important standard in modern web design. CSS3 is used as the style sheet language to determine the graphic design of websites. CSS3 extends the functionality of its predecessor language CSS2.1. New features such as rounded corners or shadows are now possible
Certain effects also result in shorter loading times because the browser is spared the need to query external graphics. The implementation of transitions ("transition") and animations ("animation") opens up possibilities that were previously reserved for JavaScript and can now be implemented natively. In addition, CSS3 supplements the classic RGB colors with transparency.
layout
The visual perception of websites on the Internet is fundamentally dependent on the general principles of visual communication . The process of information acquisition by the user / visitor is significantly influenced by the graphic design of the website.
Besides the professional transportation of information and corporate identity is what the design of websites about the ease of use ( usability ). The content offered should be accessible to as many people as possible in the interests of accessibility . This includes both the support of various web browsers and z. B. mobile devices (smartphones, tablets, etc.) , the offer of alternatives to media content and the support of users with special input methods. The practical implementation of these principles can often require more technical and creative effort. The regulation for the creation of barrier-free information technology according to the Disability Equality Act as well as international guidelines (e.g. the WCAG or Design for All ) apply .
An important aspect of web design is correct text markup and knowledge of web typography . Due to the fact that the resolutions of screens are currently much lower than in print media, special fonts optimized for display on the screen are often used.
While web pages for browser generations 4 (Netscape 4 and Internet Explorer 4) were still written very differently and browser switches were required, the web developer in the current versions ( Mozilla Firefox , Internet Explorer , Opera , Konqueror , etc.) can do a more or less Expect extensive support for the standards of the W3C .
Client and server side development
A general distinction is made between content and form when developing websites. Text, images and other content are marked up using the HTML markup language . The graphic design is specified in the form of a style sheet .
Extended functionality and interactivity are achieved through the use of additional technologies. A distinction is made between server-side scripting languages such as PHP , Python , Perl , ASP.NET , ColdFusion or JavaServer Pages and largely client-side extensions such as Flash , Silverlight , Java and JavaScript .
It is possible to combine client and server-side technologies, such as PHP and Flash, to take advantage of both. Client-side technologies always bear the risk of not being supported by the end device. The required plug-ins may not be available or technologies may be switched off for security reasons.
Tendencies and trends
In web design, too, there are always tendencies towards special technologies to be observed, or trends that are being increasingly followed by web designers. Both proprietary and open source and free technologies find enthusiastic supporters. In recent years, however, open-source and free technologies, which are monitored and approved by both the W3C and the WHATWG , have been increasingly pursued and increasingly implemented.
However, trends can not only be found in the technologies used; clear preferences can also be identified in the way websites and the corresponding logos look. The popular made-up word Web 2.0 has played an important role to date.
In addition, trends in web design are also measured in terms of the devices and bandwidths available. In this way, the design basis for implementation as responsive web design is already created in the design process in order to be able to cover the steadily increasing number of users with mobile devices such as tablets or smartphones as well as classic users who access a website via PC or notebook.
Web design and print layout
The differences in the design process between web design and print design increase with the technologies available. Animations in web design are a new design tool that does not appear in print design.
The biggest difference between print and web is certainly the diversity of the display devices. While absolute units (e.g. metric units ) and a clearly defined paper format are used in the print sector , the size and nature of the output medium is not known in web design.
Correspondingly, in addition to absolute, relative units of measurement are available on the web. Many web designers are required to use only relative information in order to take into account the diversity of the end devices. In practice, however, problems can arise, for example due to different interpretations of units of measurement, which make the use of absolute units such as pixels necessary.
"Hardliners repeatedly recommend that only relative information should be used [...] In practice, it is not advisable to completely dispense with absolute information, but to handle them carefully."
The color representation proves to be a further problem , the appearance of color images - the color fidelity - depends on both the monitor gamma and the color space used . In addition, the different panel types of the TFT monitors in use today have widely varying color qualities. Good monitors are usually in high price ranges and are therefore not very widespread, a fact that has not yet been so important in CRT monitors .
See also
- Ease of use (usability)
- Barrier-free internet (accessibility)
- Internet agency
- Universal design
- Web design layout type
literature
- Jason Beaird: Well done web design. The principles of website design. A guide for web programmers. 2nd, revised and expanded edition. dpunkt, Heidelberg 2011, ISBN 978-3-89864-759-5 .
- Manuela Hoffmann: Modern web design: design principles, web standards, practice . Galileo Press, Bonn 2008, ISBN 978-3-8362-1109-3 .
- Stefan Wünschmann, Uta Schwarz, Stefan Müller: Website design: success factors and control . Mitp-Verlag, Bonn 2008, ISBN 978-3-8266-5912-6 .
- Stefan Münz: Create websites professionally . Addison-Wesley Verlag, Munich 2008, ISBN 978-3-8273-2678-2 .
- Michael Jendryschik: Introduction to XHTML, CSS and web design . Addison-Wesley Verlag, Munich 2008, ISBN 978-3-8273-2739-0 ( jendryschik.de [accessed on January 4, 2010]).
Web links
- Plan web projects in the SELFHTML wiki
- Web design / history - technology and skills (dimaweb.at-deutsch)
Individual evidence
- ↑ HTML 5 is now the official core language of the Internet , November 12, 2014, accessed on March 17, 2019.
- ↑ Helping users find mobile-friendly pages , November 18, 2014, accessed on March 17, 2019.
- ↑ Specifications for the new CSS3 language , September 18, 2016, accessed on March 17, 2019.
- ↑ Volker Zota: Free video codec Ogg Theora is H.264 on the heels. In: heise online. Heise Zeitschriften Verlag, May 8, 2009, accessed January 4, 2010 .
- ↑ Volker Zota: Dailymotion tests Flash-free video portal. In: heise Open Source. Heise Zeitschriften Verlag, May 29, 2009, accessed on January 4, 2010 .
- ^ Vitaly Friedman: Web Design Trends For 2009. In: Smashing Magazine. Smashing Media, January 14, 2009, accessed January 4, 2010 .
- ↑ Logo Design Trends 2008. LogoOrange Design Group, February 1, 2008, accessed on January 4, 2010 (English).
- ↑ Logo Design & Branding Trends 2009. LogoOrange Design Group, April 1, 2009, accessed on January 4, 2010 (English).
- ↑ CSS value types. In: SELFHTML -Wiki. Retrieved March 15, 2015 .
- ↑ Stefan Münz : Create websites professionally . S., Chapter 4.6.4 Dimensions in CSS