Farbportal: Webdesign für Maler

Die Arbeit beginnt mit der Klärung des Begriffs "Portal" im Kontext des Projekts. Es wird zwischen horizontalen und vertikalen Portalen unterschieden. Horizontale Portale bieten eine breite Themenabdeckung auf Kosten der Informationstiefe und zielen auf ein Massenpublikum ab. Vertikale Portale hingegen fokussieren sich auf einen spezifischen Bereich und bieten detailliertere Informationen für eine ausgewählte Zielgruppe. Die Entscheidung fällt auf ein vertikales Farbportal, da das Thema "Farbe" sehr umfangreich ist und eine horizontale Struktur zu oberflächlichen Informationen und Verwirrung beim Nutzer führen würde. Die Zielgruppe wird auf kleine und mittelständische Unternehmen (KMU) aus der Maler- und Lackiererszene und eine an der Thematik interessierte Öffentlichkeit eingegrenzt. Die Großindustrie wird explizit ausgeschlossen. Der thematische Schwerpunkt liegt auf dem deutschen Raum. Die Berücksichtigung gedruckter Informationsmittel neben Online-Ressourcen wird betont, da inhaltliche Relevanz über die physische Form des Materials gestellt wird. Die Aufnahme und Annotation von Informationsquellen soll Nutzern die Auswahl erleichtern und ihnen ein Kriterium für die Entscheidung zur Weiterinformation bieten. Das Portal wird exemplarisch mit Inhalten gefüllt, um die Konzeption zu veranschaulichen.

Die Auswahl der Themen und die Festlegung der Portalstruktur erfolgen im Anschluss an die Definition der Zielgruppe. Um die Informationsverarbeitung des Nutzers zu optimieren, wird die Anzahl der Hauptkategorien auf maximal sieben begrenzt, basierend auf wissenschaftlichen Erkenntnissen zum menschlichen Kurzzeitgedächtnis. Das Themenspektrum des Maler- und Lackiererbereichs wird in diese sieben logischen Kategorien untergliedert, wobei mehrere Organisationsmöglichkeiten in Betracht gezogen werden. Der Fokus liegt dabei auf einer benutzerfreundlichen und einprägsamen Struktur, die dem Nutzer schnelles Auffinden der gewünschten Informationen ermöglicht. Es wird nicht primär eine wissenschaftlich einwandfreie, sondern eine praxisorientierte und nutzerzentrierte Gliederung angestrebt. Die Arbeit beschreibt die Auswahl der Hauptkategorien und deren inhaltliche Untergliederung, einschließlich der geplanten Informationen. Die Auswahl der Informationsquellen umfasst Institutionen, Ausbildungseinrichtungen, Studiengänge, und Fachliteratur. Die einzelnen Rubriken werden detailliert beschrieben, z.B. die Auflistung von Institutionen mit Verlinkung zu deren Websites oder die Untergliederung der Kategorie "Ausbildungseinrichtungen" in Universitäten, Fachhochschulen und sonstige Fachschulen. Auch Fachverlage, Fachzeitschriften, elektronische Volltexte und bibliographische Informationsmittel werden in separaten Rubriken aufgeführt. Die Nutzer sollen über Verweise auf Bibliotheks- und Buchhandelskataloge sowie direkte Links zu Volltexten unterstützt werden, um die Beschaffung der jeweiligen Informationsquellen zu erleichtern.

Dieser Abschnitt befasst sich mit dem Layout und Design des Portals. Es wird betont, dass ein gutes Layout zwar wichtig ist, aber fehlende Inhalte nicht kompensieren kann. Das Design soll den User zum Verweilen einladen und die Grundlage für Inhalt und Navigation bilden. Ein Gestaltungsraster definiert die Position der Elemente auf dem Bildschirm, um einen harmonischen Gesamteindruck zu schaffen. Die Navigation wird mit "passenden und lebendigen Farbkombinationen" gestaltet, um Monotonie zu vermeiden. Die Farben werden konsistent in der horizontalen und vertikalen Navigation sowie im Contentbereich eingesetzt, um die visuelle Zuordnung der Seiten zu erleichtern und die Orientierung zu verbessern. Die Farbauswahl orientiert sich am Farbkreis, wobei die Farbsättigung in der vertikalen Navigation reduziert wird, um einen nicht zu dominanten oder aggressiven Eindruck zu erzeugen. Die Typografie wird ebenfalls betrachtet, mit dem Fokus auf Browser-Kompatibilität und Lesbarkeit. Es wird empfohlen, nicht mehr als drei Schriftarten und -größen zu verwenden und einen Zeilenabstand von 1,5 bis 2,5 zu wählen, um das Bildschirmlesen zu erleichtern. Die Zeilenlänge sollte nicht mehr als 70 Zeichen umfassen. Die Startseite wird als besonders wichtig hervorgehoben, da sie den ersten Eindruck beim Nutzer bestimmt und ihn zum weiteren Entdecken des Portals animieren soll. Die Startseite zeigt den Namen des Portals, die Hauptkategorien (mit farbigen Markierungen) und bietet einen Link zur Hilfeseite an. Die Navigation auf den Unterseiten unterscheidet sich von der Startseite, um Platz zu sparen und die Ladezeiten zu optimieren, indem auf textbasierte Navigation gesetzt wird. Die Verwendung von Ankern innerhalb der einzelnen Kategorien beschleunigt das Auffinden spezifischer Informationen und vermeidet unnötiges Scrollen. Die Sitemap und die Suchfunktion sind von jeder Seite aus erreichbar, um die Benutzerfreundlichkeit zu gewährleisten. Hyperlinks werden verwendet, um die lineare Struktur zu durchbrechen, wobei die Gefahr des Orientierungsverlustes durch eine konsistente Navigation und Farbgebung minimiert werden soll. Die optische Gestaltung der Links wird mittels CSS Stylesheets differenziert, um den Linkstatus (aktiv, besucht) visuell anzuzeigen.

Die Gestaltung des Portals basiert auf dem Prinzip der optimalen Informationsverarbeitung durch den Nutzer. Aus diesem Grund wird die Anzahl der Hauptkategorien auf maximal sieben begrenzt, da dies laut wissenschaftlichen Erkenntnissen die Kapazität des menschlichen Kurzzeitgedächtnisses für die Erfassung einer Einheit als Ganzes darstellt. Das Themenspektrum des Maler- und Lackiererbereichs soll in diese sieben Kategorien unterteilt werden. Es wird betont, dass es nicht nur eine richtige Struktur gibt, sondern mehrere Möglichkeiten bestehen. Der Fokus liegt auf der Benutzerfreundlichkeit. Die Strukturierung darf nicht rein wissenschaftlich korrekt sein, wenn dies zu Lasten der Benutzerfreundlichkeit geht. Die Struktur muss vielmehr so gestaltet sein, dass der Nutzer sie schnell durchschaut und die gewünschten Informationen einfach findet. Diese Überlegung bestimmt die finale Strukturierung des Portals. Eine klare und intuitive Navigation ist das wichtigste Kriterium. Die genaue Anordnung der Kategorien und ihre inhaltliche Ausgestaltung wird detaillierter in den folgenden Unterpunkten beschrieben.

Das Portal gliedert sich in verschiedene Hauptkategorien, die relevante Informationen für Maler und Lackierer bereitstellen. Eine wichtige Kategorie beinhaltet Informationen zu "Institutionen", darunter staatliche und private Einrichtungen, Organisationen und Verbände aus der Branche. Jedes Eintrag enthält den Namen der Institution und eine kurze Beschreibung, sowie einen Link zur jeweiligen Website oder alternative Kontaktinformationen, falls keine Website vorhanden ist. Eine weitere Hauptkategorie konzentriert sich auf "Ausbildungseinrichtungen", welche in Universitäten, Fachhochschulen und sonstige Fachschulen unterteilt ist. Hier finden Nutzer Informationen zu verschiedenen Ausbildungsgängen und Studiengängen, inklusive kurzer Beschreibungen der jeweiligen Bildungseinrichtungen. Die Kategorie "Studiengänge" listet Studiengänge alphabetisch auf, inklusive grundlegender Angaben zum Studium, dem Studienabschluss und Verweisen auf die entsprechenden Studieninformationen der jeweiligen Hochschulen. Ein weiterer wichtiger Teil des Portals ist die Kategorie "Fachliteratur", die thematisch in Fachverlage, Fachzeitschriften, elektronische Volltexte, bibliographische Informationsmittel und Sachinformationsmittel untergliedert ist. Die Rubrik "Fachverlage" listet nicht die Publikationen selbst auf, sondern die Verlage, da deren Websites eine gute Recherchequelle für Fachzeitschriften und Bücher sind. Das Portal verzeichnet Fachpublikationen, sowohl elektronische als auch gedruckte, und bietet Informationen zur Beschaffung der Titel, inklusive Verweisen auf Bibliotheks- und Buchhandelskataloge sowie direkte Links zu elektronisch verfügbaren Volltexten. Gedruckte Fachbibliographien werden mit Titel, bibliographischen Daten und Fachgebiet dokumentiert und mit dem Karlsruher Virtuellen Katalog (KVK) und dem Verzeichnis lieferbarer Bücher (VLB) verknüpft.

Die Gestaltung des Screen-Layouts beginnt mit der Definition eines Gestaltungsrasters. Dieses Raster legt die Positionierung der einzelnen Elemente auf dem Bildschirm fest und dient als Grundlage für die Anordnung der Inhalte. Es dient der Strukturierung und nicht der finalen visuellen Gestaltung. Die Umsetzung orientiert sich an den im Raster definierten Hilfslinien, um einen harmonischen Gesamteindruck zu gewährleisten. Um Monotonie zu vermeiden und eine ansprechende Navigation zu schaffen, wird auf lebendige Farbkombinationen gesetzt. Jede Hauptkategorie wird in der horizontalen Navigation durch einen farbigen Klecks repräsentiert. Diese Farbe wird in der vertikalen Navigation als Hintergrundfarbe der Kategorienbezeichnung wieder aufgegriffen. Die Überschriften im Contentbereich erhalten eine Outline in der entsprechenden Farbe. Diese durchgängige Farbgestaltung dient der besseren Orientierung und verdeutlicht die Zugehörigkeit der Seiten zueinander. Die Farbwahl erfolgt nach der Abfolge im Farbkreis, wobei die Farbsättigung in der vertikalen Navigation reduziert wird, um einen dominanten oder aggressiven Eindruck zu vermeiden. Das Design zielt auf eine optisch ansprechende und gleichzeitig übersichtliche Darstellung ab, die die Benutzerfreundlichkeit erhöht.

Ein wichtiger Aspekt des Screen-Layouts ist die Typografie. Die Gestaltung von Texten im Internet stellt eine Herausforderung dar, da Schriftart und -größe browserabhängig sind und sich die Bildschirmauflösung und Monitorgröße unterscheiden. Trotz dieser Variabilität soll ein gelungener Internetauftritt gestaltet werden. Es wird empfohlen, maximal drei Schriftarten und -größen zu verwenden, um einen stimmigen Gesamteindruck zu gewährleisten. Die Schriftgrößen sollten im Vorfeld für alle Textbestandteile festgelegt werden und weder zu klein noch zu groß ausfallen. Ein Richtwert zwischen 10 und 14 Punktgröße wird genannt, wobei die Darstellung in verschiedenen Browsern überprüft werden muss. Ein weiterer wichtiger Punkt ist die Zeilenlänge und Zeilenhöhe. Als Faustregel gilt eine Zeilenlänge von maximal 70 Zeichen (ca. 8-12 Wörter), um das Bildschirmlesen zu erleichtern. Ein Zeilenabstand von 1,5 bis 2,5 erleichtert das Lesen längerer Texte am Bildschirm zusätzlich. Diese typografischen Überlegungen tragen maßgeblich zur Benutzerfreundlichkeit bei, da sie die Lesbarkeit und damit die Informationsaufnahme verbessern.

Die Startseite des Portals ist als erster Kontaktpunkt für den Benutzer besonders wichtig. Sie muss das Thema und den Informationsgehalt der Website vermitteln und den Benutzer zum Verweilen animieren. Der Name des Portals und die Hauptkategorien werden auf der Startseite angezeigt. Jede Kategorie wird durch einen farbigen Klecks und die jeweilige Rubrikbezeichnung repräsentiert. Durch Mouseover über einen Farbklecks wird die Bezeichnung der Kategorie nochmals angezeigt. Ein Klick auf eine Hauptkategorie führt direkt zur entsprechenden Seite, ein Klick auf den Portalnamen zur Hilfeseite. Die Navigation auf den Unterseiten unterscheidet sich von der Startseite, um Platz zu sparen und die Ladezeiten zu optimieren. Die Navigation erfolgt hier textbasiert mit einem kleinen Farbklecks, was platzsparender und barrierefreier ist. Bei Kategorien mit mehreren Unterpunkten (z.B. Termine, Innungen, Weiterbildung, Fachzeitschriften) werden Anker im Contentbereich eingefügt, um den Zugriff auf einzelne Abschnitte zu beschleunigen und unnötiges Scrollen zu vermeiden. Die Hilfeseite bietet Informationen zu Technik, Downloads und zum Entstehungshintergrund des Portals. Sitemap und Suchfunktion sind von jeder Seite erreichbar. Ein Kontaktlink öffnet ein E-Mail-Programm mit voreingetragener Adresse; alternativ ist die Adresse im Impressum zu finden.

Hyperlinks ermöglichen es Nutzern, die lineare Struktur des Portals zu verlassen. Um den Überblick zu behalten, wird innerhalb des Portals auf Pfadangaben verzichtet, da die vertikale Navigation und die Farbgestaltung bereits eine gute Orientierung bieten. Externe Links öffnen in einem neuen Browserfenster. Die visuelle Gestaltung der Links unterscheidet sich je nach Status (besucht, aktiv) und wird über CSS Stylesheets geregelt, wobei die Links dennoch ohne Mausbewegung als solche erkennbar bleiben. Die Sitemap bietet einen schnellen Überblick über die Struktur des Portals und sollte bei Websites mit mehr als zehn Seiten ein Pflichtelement sein. Die Sitemap des Portals ist als strukturiertes Inhaltsverzeichnis angelegt, in dem alle Hauptkategorien mit ihren Unterpunkten verlinkt sind. Die Link-Darstellung in der Sitemap unterscheidet sich leicht von der Darstellung im Hauptteil des Portals, um eine Überladung mit Unterstreichungen zu vermeiden. Die Farben für die einzelnen Linkzustände (aktiv, besucht, etc.) bleiben jedoch erhalten. Die Suchfunktion wird extern eingebunden (Anbieter crawl-it), da die Zeit für eine eigenständige Implementierung fehlte. Die Suchergebnisse beinhalten farbige Markierungen der Suchbegriffe.

Der Entwurf berücksichtigt Aspekte des barrierefreien Webdesigns, um die Nutzung des Portals für Menschen mit Behinderungen zu ermöglichen. Der Fokus liegt auf der Einhaltung der Richtlinien für Blinde und Sehbehinderte. Grafiken werden mit aussagekräftigen Alternativtexten versehen, um den Inhalt und die Funktion der Grafik für Screenreader-Benutzer zugänglich zu machen. Der Einsatz von Frames wird aufgrund von Kompatibilitätsproblemen mit älterer Hardware vermieden. Das Layout wird stattdessen mit Layouttabellen realisiert. Die Gestaltung der Tabellen berücksichtigt die Bedürfnisse von Screenreader-Benutzern, indem die Zellen logisch von links nach rechts und zeilenweise angeordnet sind. Diese Maßnahmen zur Barrierefreiheit zielen auf eine möglichst umfassende Inklusion aller Nutzergruppen ab, im Einklang mit dem Bundesbehindertengleichstellungsgesetz (BBGG) und der Barrierefreien Informationstechnik-Verordnung (BITV).

Das Maler- und Lackiererportal wird mit HTML 4.0, CSS Stylesheets und JavaScript programmiert, um eine breite Browserkompatibilität zu gewährleisten. Die Autorin hatte vor Beginn der Arbeit nur grundlegende HTML-Kenntnisse und eignete sich im Laufe des Projekts weitere Kenntnisse in JavaScript und Photoshop an. Das Design wurde mit dem Ziel der Kompatibilität zu den gängigsten Browsern in Deutschland entwickelt. Die Optimierung erfolgte für den Internet Explorer ab Version 5.0, den Netscape Navigator ab Version 7.0 und Mozilla ab Version 1.4. Diese Informationen werden auf der Hilfeseite des Portals zusammen mit Hinweisen zur Bildschirmauflösung und weiteren technischen Details bereitgestellt. Zusätzlich werden Links zum Download der genannten Browserversionen bereitgestellt. Die Wahl von HTML 4.0 und die Verwendung von CSS Stylesheets ermöglicht eine zentrale Formatierung und reduziert den Entwicklungsaufwand. Die Einbindung von JavaScript wird ebenfalls erwähnt. Zur Erstellung der Dateien wird der Texteditor von Microsoft verwendet. Die Bildschirmauflösung wird auf den Standard von 1024x768 Pixeln ausgelegt, wobei darauf geachtet wird, dass das Portal auch auf anderen Auflösungen ein ansprechendes Aussehen behält. Die Anordnung der Inhalte soll es ermöglichen, diese ohne Bildschirmbereichverschiebung (Scrollen) zu erfassen.

Die Siteoptimierung ist ein wichtiger Aspekt der technischen Umsetzung. Es wird darauf hingewiesen, dass verschiedene Browserversionen HTML-Tags und CSS-Stylesheetbefehle unterschiedlich interpretieren können. Daher muss sichergestellt werden, dass das Portal in den gewählten Browsern fehlerfrei dargestellt wird. Die Hilfeseite enthält einen Hinweis auf die Siteoptimierung. Um schnelle Ladezeiten zu gewährleisten, wird empfohlen, die Dateigröße von Bildern und Grafiken zu optimieren. Eine Seite mit Bildern und Grafiken sollte nicht größer als 50-75 KB sein. Die Verwendung von HTML-Attributen und Stylesheetbefehlen zur Festlegung von Breite und Höhe der Grafiken erlaubt es dem Browser, den benötigten Platz bereits beim Laden zu reservieren und den umliegenden Text anzuzeigen, bevor die Grafik vollständig geladen ist. Ohne diese Angaben wird die gesamte Seite erst angezeigt, wenn alle Daten übertragen wurden, was zu längeren Ladezeiten führt. Weitere Empfehlungen zur Siteoptimierung beinhalten die Vermeidung von Umlauten, Bindestrichen und unklaren Abkürzungen oder URL-Bestandteilen. Ähnliche Schreibweisen des Portalnamens sollten reserviert werden, um die Auffindbarkeit zu verbessern und Konkurrenzseiten zu vermeiden. Die Bereitstellung von Support (E-Mail oder Telefon) wird als wünschenswert erwähnt. Der Webspace wird über einen Server der Hochschule bereitgestellt, somit ist kein separater Webspace-Erwerb notwendig.

Zur Verbesserung der Sichtbarkeit des Portals in Suchmaschinen wird eine Anmeldung bei Google und Yahoo empfohlen. Obwohl Suchmaschinen Webseiten automatisch erfassen, kann dieser Prozess mehrere Wochen dauern. Eine manuelle Anmeldung beschleunigt diesen Prozess, bietet aber keine Garantie für die Aufnahme. Um die Auffindbarkeit durch Suchmaschinen zu verbessern, werden die HTML-Dateien mit Meta-Tags versehen. Diese Meta-Tags enthalten zum einen Schlagwörter (Keywords), die den Inhalt der Seite präzise beschreiben und gängige Suchbegriffe widerspiegeln sollen. Zum anderen enthalten sie eine Beschreibung der Seite mit einer Länge von etwa 150 Zeichen. Diese Beschreibung wird von den meisten Suchmaschinen zusammen mit der URL angezeigt. Die Wahl der Keywords ist entscheidend für den Erfolg der Suchmaschinenoptimierung. Die Verwendung von relevanten und präzisen Keywords, die die Inhalte der einzelnen Seiten gut widerspiegeln, ist daher unerlässlich für die Sichtbarkeit in den Suchergebnissen. Der Text betont, dass die Suchmaschinenoptimierung ein wichtiger Faktor ist, um das Portal für potenzielle Nutzer erreichbar zu machen.