Das Webdesign umfasst viele verschiedene Bereiche in Produktion und Wartung von Webseiten. Zum Oberbegriff Webdesign gehören das Web-Grafik-Design, das Interface-Design, das Erstellen standardisierter Codes und Nutzung unfreier (proprietärer) Software, die Nutzerführung und die Suchmaschinen-Optimierung.
Der Webdesigner hat dabei die Aufgabe, die Kommunikationsziele des Auftraggebers mit Hilfe der technischen Gegebenheiten umzusetzen.
Die Entstehungsgeschichte des Webdesign ist ziemlich jung. Es kann mit anderen Bereichen des Designs wie zb. dem grafisches Design verbunden werden. Jedoch wird Webdesign auch als eine technologische Einstellung gesehen. Es ist ein großer Teil des täglichen Lebens von Menschen geworden. Es ist fast unmöglich, sich das Internet ohne belebte Grafik, verschiedene Stile`s, verschieden Typografien und Musik vorzustellen.
DER START
1989: Während der Arbeiten am European Organization for Nuclear Research (CERN) hatte Tim Berners-Lee vor, ein globales Hypertext-Projekt zu schaffen, das später bekannt wurde als das World Wide Web.
1991 bis 1993: Das World Wide Web wurde geboren. Anfänglich konnten nur Textseiten mit Hilfe eines einfachen Linienweise-Browser ausgelesen werden.1993: Marc Andressen und Eric Bina erschufen den Mosaikbrowser. Zu dieser Zeit gab es vielfache Browser, deren Mehrheit jedoch auf Unix basierte. Diese Unix Browser erschwerten jedoch das lesen eines Textes. Auch gab es keine einheitlichen, grafischen Designelemente wie Images oder Töne.
1994: Das World Wide Web Consortium (W3C) wurde geschaffen, um das volle Potential des World Wide Web zu nutzen. Ebenso wurden allgemeine Protokolle entwickelnd, die zum Fortbestand des W3C führten und dessen Zwischenfunktionsfähigkeit sichern. Durch diese Entwicklung jedoch wurden weitere Organisationen davon abgehalten, neue Browser und Programmiersprachen zu entwickeln, die das World Wide Web als Ganzes verändern hätten können.
1994: Andressen gründet eine Kommunikationshandelsgesellschaft. Diese wurde später bekannt als Netscape Kommunikationen und entwickelte den Netscape 0.9 Browser. Netscape schuf seine eigenen HTML-Anhängsel ohne Rücksicht auf den traditionellen Standardprozess. Zum Beispiel beinhaltete Netscape 1.1 eigene HTML-Programmierungen um selbstständig Hintergrundfarben zu ändern und Texte auf Webseiten zu formatieren.
1996 bis 1999: Die sogenannten „Browser-Kriege“ beginnen. Im Zuge dieser Browser-Kriege begannen Microsoft und Netscape um die jeweilige Browser-Überlegenheit zu kämpfen. Während dieser Zeit wurden viele neue Technologien entwickelt, wie zb. Formatvorlagen, JavaScripte und das dynamische HTML. Im Allgemeinen führte diese Browser-Konkurrenz zu vielen positiven Entwicklungen und half ebenso dem Webdesign, sich mit schnellen Schritten zu entwickeln.
EVOLUTION DES WEBDESIGN
1996 veröffentlichte Microsoft seinen ersten wettbewerbsfähigen Browser, der über eigene Eigenschaften und Anhängsel verfügte. Das war auch der erste Browser, welcher Formatvorlagen unterstützte, die zu dieser Zeit als dunkle authoring Technik gesehen wurden. Man begriff sehr schnell, das Potenzial der HTML-Programmierung um damit komplexe Mehrsäulenlayouts zu schaffen, die sonst nicht möglich waren. In dieser Zeit, hatten Design und gute Ästhetik den Vortritt weswegen nur sehr wenig Aufmerksamkeit auf Shematik und Webzugänglichkeit gelegt wurde. HTML-Seiten wurden durch ihre Designoptionen noch mehr mit früheren Versionen des HTML beschränkt. Um komplizierte Designs zu schaffen, mussten viele Webentwerfer komplizierte Tabellenstrukturen verwenden. Teilweise sogar eigene GIF Images verwenden, um leere Tabellenzellen daran zu hindern, dass diese zusammenzubrechen.
Auch wurde von W3C CSS im Dezember 1996 eingeführt, um Präsentation und Lay-Outs zu unterstützen. Das erlaubte dem HTML-Code, schematisch zu sein und verbesserte die Webzugänglichkeit. Ebenso wurde Flash (ursprünglich bekannt als FutureSplash) entwickelt. Anfänglich bestand ein sehr einfaches Lay-Out, das nur grundlegende Werkzeuge beinhaltete, aber es ermöglichte den Webentwerfern, HTML zu übertreffen. Mittlerweile ist Flash sehr fortgeschritten und ermöglicht es dem Anwender komplette Seiten zu entwickeln.
ENDE DER ERSTEN BROWSERKRIEGE
1998 veröffentliche Netscape seinen Netscape Communicator Code unter einer Open Source Lizenz, so dass sich nun tausende von Entwicklern bei der Verbesserung der Software beteiligen konnten. Netscape beschloss jedoch diese Veröffentlichung zu stoppen um von Anfang an, die Entwicklung des Open-Source-Browsers zu führen und um eine vollständige Applikationsplattform zu erweitern.Das Web Standards Project wurde gebildet. Dieses förderte die Browser Einhaltung auf HTML / CSS Standards durch die Schaffung von Acid1, Acid2 und Acid3.2000 war ein großes Jahr für Microsoft. Der Internet Explorer für Mac wurde freigegeben. Es war der erste Browser der vollständig HTML 4.01 und CSS 1 unterstützte. Der Internet Explorer setzte eine neue Messlatte im Bezug auf die Einhaltung von Standards. Es war auch der erste Browser der das PNG-Format unterstützte. Während dieser Zeit wurde Netscape verkauft und gab offiziell die Führung in den Browser-Kriegen an Microsoft ab.
JAHR 2001 BIS 2012
Seit dem Beginn des 21. Jahrhunderts begann sich die Nutzung des Web mehr und mehr in das Leben der Menschen zu integrieren. Auch die Technologie veränderte sich. Es gab signifikante Veränderungen in der Art, wie Menschen das Web nutzten, auf dieses zugriffen und wie Seiten ausgelegt wurden.
DIE MODERNEN BROWSER
Das moderne Browser-Zeitalter leitete das Ende der Browser Kriegen ein. Neue Open Source Browser kommen auf den Markt was bedeutet, dass sie zu schnelleren Entwicklungszyklen neigen und mehr Standards unterstützen als je zuvor. Zukünftig werden diese neuen Optionen in vielem besser sein als der Microsoft Internet Explorer.
NEUE STANDARDS
Das W3C hat neue Standards für HTML (HTML5) und CSS (CSS3), sowie neue JavaScript API freigegeben. Während jedoch der Begriff HTML5 nur verwendet wird, um die neue Version von HTML zu bezeichnen, bezieht sich JavaScript-API auf die Gesamtheit von HTML5, CSS3 und JavaScripten.
Web-Designer verwenden eine Vielzahl von verschiedenen Werkzeugen je nachdem, welche die Designer zum Produktionsprozess benötigen. Im Laufe der Zeit wurden für diese Werkzeuge immer wieder neue Standards festgesetzt bzw. wurde diese durch neue Software aktualisiert. Die Grundprinzipien dahinter bleiben aber immer gleich. Web-Designer verwenden Vektor-und Rastergrafikpakete um web-formatierte Bildern oder Design-Prototypen zu erstellen.
Die Technologien für die Erstellung von Websites umfassen standardisierte Prozesse bis hin zur Codierung per Hand mit Hilfe einer WYSIWYG Editor-Software. Auch werden unfreie (proprietäre) Software Plug-Ins auf verschiedenen Client-Browser-Versionen genutzt. Dabei handelt es sich ebenso oft um WYSIWYG, jedoch mit der Möglichkeit die eigene Software Skriptsprache zu verwenden.
Basis Suchmaschinen-Optimierungs-Tools können verwendet werden, um das Suchmaschinen-Ranking der jeweiligen Webseiten zu überprüfen und Verbesserungsvorschläge zu erhalten und umzusetzen. Andere Web-Designer Tools sind zum Beispiel Validatoren sowie andere Test-Tools um Zugangsrichtlinien für Webseiten gerecht zu werden.
TYPOGRAFIE
Gewöhnlich verfügt eine erfolgreiche Webseite nur über wenige Schriftbilder, die alle einem ähnlichen Stil folgen, anstatt mehrere unterschiedliche Schriftbilder zu verwenden. Vorzugsweise sollte eine Webseite zum Beispiel entweder das Schriftbild „Serife“ oder das Schriftbild „Verdana“ verwenden, nicht jedoch eine Kombination der Beiden. Die meisten üblichen Browser erkennen eine spezifische Zahl von diversen Schriftarten an, die von den Designern hauptsächlich verwenden werden, um Komplikationen zu vermeiden.
SEITENLAYOUT
Die Navigation auf Webseiten sollte gut strukturiert angelegt werden, um eine Navigation für den Benutzer zu erleichtern. Um eine solche benutzerfreundliche Navigation zu gewehrleisten sollte das Navigationsseiten-Layout auch konsequent auf nachfolgenden Seiten immer an derselben Stelle auffindbar sein. Beim Seitenaufbau ist es wichtig die Seitenbreite zu beachten, da diese unbedingt notwendig ist, um weitere Inhalte im festgelegten Layout-Design auszurichten. Die populärsten Webseiten haben im Allgemeinen eine Breite im Bereich von 1024 Pixeln. Die meisten Seiten sind zentriert ausgerichtet um Inhalte ästhetischer und auch angenehmer für Betrachter auf den jeweiligen Bildschirmen erscheinen zu lassen.Anpassende Lay-Outs wurden ab dem Jahr 2000 entwickelt, als Ersatz für auf HTML basierende Webseiten. Diese „flüssigen“ Lay-Outs stellten eine komplette Verwerfung des bisherigen Designgrundsatzes dar, waren aber aufgrund der damit verbundenen Codier-Technik zu langsam im Seitenaufbau um von den Usern angenommen zu werden.Die allgemeine Problematik war, dass die auf den unterschiedlichen Bildschirmen der User geöffneten Webseiten unterschiedliche Größen aufwiesen und das es keine Möglichkeit seitens des Webdesigners gab, dass zu ändern. Dementsprechend sollte ein Design in Einzelheiten aufgeteilt werden (Sidebars, Blöcke, Ankündigungen, Navigationselemente), die jeweils einzeln an den Browser gesandt werden und die Darstellung einer Website in deren eigenem, anpassbaren Sichtfenster zu ermöglichen.Der Browser legt nun die eigentliche Größe fest und nicht der Webdesigner. Obwohl eine solche Anzeige häufig die Verhältnispositionen der eingebauten Elemente ändert, können hingegen Sidebars nicht versetzt werden. Dies bedeutet eine gewöhnlich bessere Ansicht, als einen Kompromiss dahingehend zu schließen, dass einfach die Größe mancher Webseiten nicht zusammenstimmt.
CODE-QUALITÄT
Bei der Erstellung einer Webseite werden praxisbezogenen Standards verwendet. Das erfolgt gewöhnlich über eine Beschreibung, die die Eigenschaft jedes einzelnen Elements angibt. Nicht angepasste Standards können eine Webseite unbrauchbar oder anfällig für Fehler machen. Diese praxisbezogenen Standards können sich unter anderem auf die Lesbarkeit von Seiten beziehen, ebenso stellen diese sicher, dass codierte Elemente richtig genutzt werden. Dadurch werden Fehler im Code ausgeschlossen und richtig identifiziert. Schlecht codierte Seiten werden umgangssprachlich auch als „Anhängsel (engl. Tag) -Suppe“ bezeichnet. Das System DOCTYPE identifiziert Fehler die nicht den Webdesignstandards entsprechen. Diese Fehlerinformation kann dann vom Benutzer korrigiert werden.
VISUELLE GESTALTUNG
Gute visuelle Gestaltung einer Website spricht die betreffende Zielgruppe an. Dies kann eine bestimmte Altersgruppe oder eine bestimmte Kundenschicht sein. Auch sollte der Designer die bevorzugten Trends des Publikums verstehen. Designer sollten auch wissen, welche Art von Webseiten sie entwerfen. Eine Business-Webseite sollte nicht die gleiche Gestaltung aufweisen wie eine Social-Media-Webseite. Die Ästhetik des gesamten Designs einer Webseite sollte nicht mit dem Inhalt kollidieren, so dass für den Benutzer eine einfache Navigation besteht, durch welche er die gewünschten Informationen oder Produkte leicht finden kann.
NUTZERFÜHRUNG
Damit Benutzer eine Webseite auch tatsächlich nutzen können, müssen diese in der Lage sein, die Funktion der Seite einfach zu verstehen. Es müssen klare Anweisungen und Kennzeichnungen ersichtlich sein. Damit der Benutzer die Seite auch wieder aufruft, muss diesem der Nutz der Webseite klar und deutlich erkennbar sein. Erfahrene User im Umgang mit Webseiten hingegen setzen den Schwerpunkt auf visuelle Wahrnehmung. Deshalb sollte Wert auf universelle Gestaltung gelegt werden, um die Seite für alle Benutzergruppen ansprechbar zu machen.
W3C consortium for web standards (englisch)
Chapman, Cameron. "The Evolution of Web Design". (2012-03-17)
und Eigene