Webdesign Blog

Aktualität und Interaktion

2009-05-14T15:41:00.001+02:00

Kennzeichnend für das Medium Internet ist neben der Möglichkeit, aktuelle Inhalte einer sehr hohen Nutzerzahl zur Verfügung zu stellen, einen interaktiven Dialog mit denm Nutzer eingehen zu können.

Während die Aktualität von Inhalten ein wichtiger Anreiz für wiederholte Besuche der Webseite ist, fördert der Dialog mit dem Besucher Erkenntnisse über seine Wünsche (Marktforschung). Je besser man die Besucher kennt, umso besser wird das Angebot auf der Seite.

Formulare sind im Internet eines der wichtigsten Dialogelemente. Daher sollte bei der Gestaltung folgende Regeln beachtet werden...

Abgeschlossene Dialoge (Die Informationen sollte alle zusammengehörig sein)
Klare Abgrenzung (Der Dialog sollte optische vom eigentlichen Inhalt getrennt werden)
Reduzierung der Belastung des Kurzzeitgedächtnisses (Der Dialog sollte den Benutzer nicht überfordern)
Sprache des Benutzers verwenden (Dialogtexte sollten klar, höflich und verständlich ausgedrückt werden)
Formulareingabefelder sollten nicht zu kurz sein
Reale Vorbilder (Computerbasierte Formulare lehnen sich stark an ihre realweltlichen Vorbilder an)
Hinweise fördern das Verständnis (z.B. welche Felder unbedingt ausgefüllt werden müssen. Platzierung am Anfang des Formulars)
Einfache Fehlerbehandlung
Rücksetzmöglichkeiten (Änderungen in den Dialogen sollte rückgängig zu machen sein)

Ende !

Das Webdesign Layout

2009-05-12T16:20:00.001+02:00

Eine Webseite kann man mit einem Gebäude vergleichen. Es hat einen Eingangsbereich, mehrere Stockwerke und verschiedene Abteilungen und Räume. Wie der Architekt hat der Webdesigner nicht nur die Aufgabe, die Webseite (das Gebäude) so zu entwerfen, dass sie funktioniert und außergewöhnlich gestaltet ist sondern dass die Menschen, die sie (es) benutzen, sich darin zurechtfinden und wohlfühlen.

1. Die Startseite (Eingangsbereich)
Sie sollte sofort erkennen lassen, worum es auf der Webseite geht. Sie dient nicht primär der Begrüssung sondern der Orientierung. Man sollte daher auf der Startseite folgende Informationen den Nutzern anbieten...

Absender (Von wem kommen die Informationen ?)
Adressat (Für wen sind die Informationen gedacht ?)
Thema (Worum geht es ?)
Aktualität (Von wann sind die Informationen ?)

Anhand dieser Angaben kann der Nutzer schnell erkennen, ob es sich für ihn lohnt, sich weiter mit der Webseite zu beschäftigen. Ebenso sollte man ein Impressum und Copyright Hinweis in das Hypertextsystem einfügen. Die Startseite sollte sich außerdem schnell aufbauen. Daher sollte der Gebrauch von aufwendigen Grafiken, externen Diensten (z.B. Counter) und Plugins vermieden werden.

2. Abmessungen des Bildschirms festlegen
Als nächster Schritt sollte festgelegt werden, in welcher Größe die Webseite gestaltet werden soll. Dadurch soll vermieden werden, dass etwa Seitenränder abgeschnitten werden oder das Bild zu klein auf dem Bildschirm erscheint. Da es unmöglich ist, eine Webseite in allen Browsern und auf allen System gleich aussehen zu lassen, sollte darauf geachtet werden, dass die Seiten auf ein und demselben System gut und konsistent wirken.

2.1 Breite von Webseiten
Besonders wichtig ist es, dass die Seiten nicht zu breit angelegt werden, da Scrollen nach rechts besonders unbeliebt ist und die Übersichtlichkeit darunter leidet. Wenn man die notwendigen Bedienelemente des Browsers /Betriebssystems berücksichtigt, kann man von folgenden Abmessungen ausgehen...

Auflösung 800x600 Pixel (Nutzbare Fläche 750x400 Pixel)
Auflösung 1024x768 Pixel (Nutzbare Fläche 980x570 Pixel)

2.2 Länge von Webseiten
Informationen, die ohne Scrollen sofort zu sehen sind, werden vom Benutzer am häufigsten betrachtet. Deshalb sollten wichtige Links und Text- bzw. Bildinformationen ohne Scrollen erreichbar sein. Es empfiehlt sich daher, eine kürzere, zusammengefasste Version der Informationen auf der erste Seite zu präsentieren und einen Link hinzuzufügen, der den interessierten Anwender zu einem auführlichen Text zum Thema führt.

Bei besonders textlastigen Seiten sollte man zusätzlich eine Download Version anbieten oder einen "Drucken"-Button integrieren, da viele Anwender es bevorzugen, sich längere Texte auszudrucken.

2.3 Auflösungsabhängiges oder - unabhängiges Webseiten Layout ?
Zu Beginn der Bildschirmgestaltung sollten auch Überlegungen angestellt werden, ob das Layout der Webseite sich der Browserfenstergröße anpassen soll oder nicht. Bei einer festen Breite muss man mit Pixelwerten arbeiten, ansonsten mit Prozentangaben.

Ein flexibles Layout hat den Vorteil, dass Benutzer mit einem großen Bildschirm nicht das Gefühl haben, sich diesen umsonst angeschafft zu haben, weil das Bild in der linken oberen Ecke verschwindet. Flexible Seiten kommen außerdem im Druck besser heraus. Ein Nachteil ist, dass die Textspalten auf großen Monitoren zu breit geraten können.

3. Die Navigation
Eine einfache Struktur und kurze Wege zu den Inhalten sind auch das A und O für eine benutzerfreundliche Seite im Webdesign. Der Benutzer muss zu jedem Zeitpunkt wissen, wo er sich gerade befindet, wohin er gehen kann und wie er wieder zurückkommt.

Daher sollte man eine Site-Struktur entwerfen. Softwareprogramme wie Dreamweaver bieten hier die Möglichkeit, eine Art Dummie-Webseite mit allen Verlinkungen und Unterseiten anzulegen, bevor man dazu übergeht, Seiten mit Inhalten zu füllen. So behält auch der Webdesigner den Überblick.

Grundsätzlich sollte die Navigation so gestaltet werden, dass die eigentlichen Inhalte nicht zu sehr in den Hintergrund treten. Man sollte auch an Alternativen in Sachen Navigation denken. (z.B. interne Suchfunktion, "Pull-Down-Menüs")

4. Gestaltungsraster
Dies ist Grundlage für die Erstellung eines konsistenten Bildschirmlayouts über mehrere Seiten hinweg und muss vor der eigentlichen Gestaltung der Bildschirmseite gut überlegt und skizziert werden. Je konsistenter das Layout und die Navigation sind, desto einfacher wird der Benutzer mit der Seite zurechtkommen, da er die Position der gewünschten Informationen und der Navigation intuitiv erfassen kann.

Grundsätzlich gibt es vier Möglichkeiten, optisch Konsistenz in zusammengehörigen Seiten zu erreichen...

Über eine Grundform, die sich auf allen Seiten wiederholt (Form-Layout)
Über einen Rahmen, der sich auf allen Seiten wiederholt (Rahmenlayout)
Über verschiedene Farben, die einzelnen Themenbereichen entsprechen (Farbgesteuerte Themengliederung)
Über eine freie Komposition, die in sich geordnet ist (Das freie Layout)

Ende !

Generelle Vorgehensweise beim Webdesign

2009-05-04T19:10:00.001+02:00

Ohne Vorüberlegungen kann Webdesign nicht praktiziert werden. Fast keine Webseite ensteht auf dem Monitor sondern meist vorerst als Konzept auf dem Papier. Wenn ein Projekt inhaltlich und formell mit dem Auftraggeber geplant worden ist arbeitet im Anschluss oft ein Team von Designern und Redakteuren an dem Projekt, um dem Auftritt ein Gesicht zu geben.

Strukturierung der "Stoffsammlung" und Ziele eines Projekts
Die Verantwortung des Webdesigners liegt darin, das Ziel mittels Gestaltung zu verfolgen. Dazu gehören folgende Punkte...

Inhalt und Form in Einklang bringen
Erinnerungswert einer Webseite maximieren
Navigation und Erfassung der Informationen so einfach wie möglich zu gestalten

Es ist unabdingbar die Entwicklung immer wieder auf bestimmte Fragen zu kontrollieren. Dazu gehören u.a.

Welcher Kundennutzen wird beabsichtigt ?
Was sind die Kernaussagen des Unternehmens, dass sich präsentiert ?
Welchen Nutzen hat der Besucher auf der Webseite ?
Stimmt die Gestaltung mit der Aussage des Projekts überein ?
Dient die Gestaltung der Zielsetzung und dem spontanen Erfassen der Struktur ?
Besitzt der Entwurf ein Alleinstellungsmerkmal ? Erinnerungswert ?

Geeignetes Equipment
Nachdem der Umfang der Webseite festgelegt wurde und über welche Funktionalitäten diese verfügen soll kann das Erscheinungsbild der Seite skizziert werden. Im Normalfall scribbelt man auf Papier. Sollten die Ideen für das Layout bereits gefestigt sein kann ein grobes Layout bereits am Rechner erstellt werden.

Man kann hierzu ein einfaches Malprogramm verwenden. Zu beachten gilt hier, das die Bildformate in anderen Anwendungen verarbeitet werden können. Empfehlenswert ist hier der Adobe Photoshop, der zahlreiche Funktionen bietet und außerdem ein vektororientiertes Zeichenprogramm (Adobe Illustrator) beinhaltet.

Ebenfalls empfehlenswert ist das Grafikprogramm Fireworks von Macromedia. Es arbeitet eng mit dem Webeditor Dreamweaver zusammen und ermöglicht es, sowohl vektor- als auch bitmapbasierte Bilder zu erstellen und zu bearbeiten.

Wenn der Seiten Entwurf steht und man die Navigation und den Bereich für die Inhalte untergebracht hat kann die Seite in HTML umgesetzt werden. Hierfür ist der Dreamweaver das richtige Werkzeug, da man mit ihm sehr schnell eine grobe Struktur erstellen kann. Der Vorteil des Editors ist auch, dass man prompt eine Seitenansicht hat (WYSIWYG-Editor !). Das Einbinden von Sounds und Filmen stellt für den Editor kein Problem dar. Außerdem wird der HTML-Code browserübergreifend und versionsunabhängig erzeugt.

Übersicht Grafikprogramme und HTML-Editoren
>> Bild- und Grafikprogramme
>> Text- und HTML Editoren

Webstandards IV: Video

2009-04-26T21:54:00.001+02:00

Videos sind schon seit langem eine Herausforderung für Programierer und Entwickler im Internet. Die Bandbreitenproblematik und das Engagement diverser Unternehmen haben unterschiedliche Videoformate hervorgebracht. Dazu gehören u.a. ...

WMF (Windows Meta File) von Microsoft
RM (Real Media File) von Real Networks
MOV (Move File) von Apple

Der Kern jedes Videoformats ist der Codec. Er leitet sich aus dem eingesetzten Komprimierungsverfahren (enCOden/DECoden) ab. Standard für den Codec sind die Richtlinien der MPEG (Moving Pictures Experts Group). Neben der MPEG Kompression gibt es auch sogenannte Container-Formate, welche einen Spielraum für die Kompression bieten. Audio- und Videodaten in komprimierter Version können hier in verschiendenen Codecs vorliegen. Zu den bekanntesten Formaten dieser Art zählt der AVI Container (Audio Video Interleave). Audio- und Videodateien werden hier ineinander "verzahnt" (interleaved) abgespeichert. Der Codec DIVX baut zum Beispiel auf AVI auf.

Bei der Übertragung von Videos wird wie bei Audio Dateien zwischen Stream und Download-Technik unterschieden. Filme, die man downloaden muss, benötigen je nach Länge und Qualität mehr oder weniger Festplattenspeicher. Die Downloadzeit, die wiederrum von der Bandbreite abhängt, entscheidet hier, ob der User den Film betrachten will oder nicht. Das Download-Verfahren eignet sich daher besonders für kleine Dateien.

Bei der Stream-Technik kann das Video nur so lange betrachtet werden wie eine Verbindung zum Internet besteht. Streams werden kodiert übermittelt und am Endgerät sofort dekodiert. Die Kodierung ist hierbei notwendig, da die Datei sonst zu gross für eine Übertragung wäre. Dekodiert wird die Videodatei durch ein spezielles "Plug-in". Als Standard Programme haben sich hier der Real Player, Windows Media Player sowie Quicktime durchgesetzt.

Da die Wiedergabe beim Streamverfahren von der Bandbreite abhängig ist, sollte man die Filme in verschiendenen Qualitäten bereitstellen, damit auch User mit einer kleinen Bandbreite die Videos ansehen können.

Für welche Zwecke Videos im Internet eingesetzt werden zeigt folgende Aufstellung:

Werbung (Vorstellung von Produkten und Dienstleistungen)
Multimediale Bedienungsanleitungen (Wie funktioniert ein Produkt ?)
Bildung/Weiterbildung
Filme (Fernsehsendungen werden zusätzlich im Internet angeboten)
Zweitverwertung (z.b. von bestehenden Videomaterial, virtueller Rundgang ...)
Trailer (Zusammenfassung von Kinofilmen)
Firmenportrait
Firmen-TV (Verwendung für PR-Zwecke
Unterhaltung
Video E-Mails (interessante Marketingmöglichkeit)

Ende !

Webstandards III: Audio

2009-04-25T21:58:00.001+02:00

Wie bei den Bildern gilt auch bei der Verwendung von Audio Dateien, dass die Dateigrösse drastisch gesenkt werden muss. Bei den Übertragungsarten kann man nach Download und Stream unterscheiden. Beide Arten unterscheiden sich dadurch, das beim Download die Datei auf die Festplatte gespeichert wird und erst nach dem kompletten Download gestartet werden kann während sich das "Streaming" durch einen kontinuierlicher Datenstrom auszeichnet. Dadurch kann das Audiosignal bereits nach kurzer Zeit gestartet werden.

Das wichtigste Audioformat beim Download ist bekanntlich MP3, beim Stream sind es RAM (Real Audio Media) und WMA (Windows Media Audio). Diese Formate möchte ich kurz näher erläutern.

MP3
Dieses Format steht für "MPEG1 Audio Layer 3" und ist Teil der MPEG Standards zur digitalen Kompression von Audio- und Videosignalen. Entwickelt wurden die Standards am Fraunhofer Institut.

Der grösste Vorteil dieses Formats ist die geringe Dateigrösse. Sie beträgt etwa nur 10 % der Originalgrösse der Audiodatei. Die Komprimierung erfolgt aber verlustbehaftet. Zusätzlich zu den Audioinformationen können noch weitere Informationen in "Tags" aufgenommen werden (z.B. Liedname, Interpret etc.). Der entscheidende Vorteil von MP3 ist, dass es Plattformunabhängig ist.

Real Player
Dieses Programm kann spezielle Audio- und Videodateien (RAM Dateien) abspielen und wurde von Real Networks entwickelt. RAM-Dateien zeichnen sich durch ihre geringe Grösse aus und sind deshalb besonders für das "Streaming" geeignet. Die zur Verfügung stehende Bandbreite hat dabei einen grossen Einfluss auf die Abspielqualität, da der Datenstrom während der Übertragung automatisch an die Bandbreite angepasst wird.

Neben dem RAM-Format kann der Real Player auch Formate wie MP3, WAV, AVI und MIDI abspielen.

Windows Media Player
Dieser Player nutzt das WMA-Format. Dieses eignet sich sehr gut für das "Streaming", weil es eine bessere Komprimierung als andere Formate hat und deshalb weniger Bandbreite benötigt. Der Windows Media Player ist auch in der Lage, Sounddateien mit einer Tiefe von 24bit und einer Abtastrate von 96 kHz abzuspielen, was Dolby Digital Qualität entspricht. Neben dem WMA-Format kann der Player auch alle anderen gängigen Audio- und Videoformate abspielen.

Bei der Verwendung von Audiodateien auf Webseiten gelten ansonsten die aus dem Screendesign bekannten Regeln. Es sollten kurze, kleine Sequenzen verwendet werden, die der Benutzer jederzeit anhalten und steuern kann. Dabei sollte er erstens eine Kurzinformation über Länge und Inhalt erhalten und zweitens sollte er wissen, mit welchem Player er die Informationen abspielen kann.

Webstandards II: Bilder

2009-04-24T15:39:00.000+02:00

Bilder sollten im Internet nur sparsam und in angemessener Größe eingesetzt werden, da zu viele oder zu grosse Bilder lange Ladezeiten hervorrufen. Sie sollte daher entsprechend komprimiert werden. Für die Darstellung von Bildern und Grafiken gibt es 3 wichtige Grafikformate: JPEG, GIF und PNG. Nähere Infos zu den jeweiligen Formaten gibt es hier: Grafikformate für das Internet.

Wie bereits erwähnt sollte die Speichergröße einer Grafiken immer so gering wie möglich sein um die Ladezeit zu verkürzen. Daher sollte man auch wissen, welche Attribute die Größe beeinflussen...

die Dimension der Grafik (Höhe und Breite)
die Farbtiefe

Mit Grafikprogrammen lassen sich Grafikdateien gut für das Internet optimieren. Das Ziel sollte dabei immer sein, ein ausgewogenes Verhältnis zwischen Ladezeit und Qualität zu erreichen.

Folgende Punkte sollten beim Einbinden von Grafiken beachtet werden:

Bilder sollten maximal 30 KB (Kilobyte) gross sein. Bei grossen Bildern sollten Vorschaubilder (Thumbnails) erstellt werden um die Ladezeit gering zu halten
Beim Einbinden von Grafiken in den Quellcode sollte die Höhe und Breite des Bildes angegeben werden. Die Ladezeit wird dadurch etwas verringert.
Grosse Bilder bzw. Bilder auf der nächste Seite können durch ein Javascript "vorgeladen" werden. Dies ist vorallem bei Fotogalerien empfehlenswert
Grafiken können mehrfach verwendet werden. Dadurch wird neben der Reduzierung der Antwortzeit auch eine einheitliches Design erreicht
Im ALT-Tag sollte eine kurze und sinnvolle Beschreibung angegeben werden
Als Alternative zu aufwendigen Grafiken können auch Icons verwendet werden. Dies sind symbolhafte Zeichen, die der Vereinfachung einer Webseite dienen und sprachunabhängig sind
Grafiken "interlaced" abspeichern. Sie werden dann beim Laden schichtweise und nicht zeilenweise eingelesen und aufgebaut

Ende !

Webstandards I: Schrift

2009-04-23T19:50:00.003+02:00

Kommen wir nun zum ersten Webstandard, der der Informationsaufbereitung dient - die Schrift. Um mit den meisten Betriebssystem kompatibel zu bleiben gibt es derzeit nur folgende Schriftvarianten im Web:

Courier New, Courier, Monospace
MS Serif, New York, Serif
Times New Roman, Times, Serif
MS Sans Serif, Geneva, Sans Serif
Verdana, Geneva, Arial, Helvetica, Sans Serif
Arial, Helvetica, Sans Serif

Es gibt allerdings auch Außnahmen. Anwendungen wie Flash oder der Acrobat Reader binden die verwendeten Schriften direkt in die Dateien ein und sind daher von dieser Regel nicht betroffen.

1. Empfehlung für die Gestaltung
Bislang erfolgte die Einbettung einer Schriftart über den HTML Tag FONT. Da dieser im "HTML 4 Strict"-Standard aber nicht mehr zulässig ist sollte zukünftig auf die Verwendung des Tags verzichtet werden. Alternativ können alle Schriftangaben mittels CSS definiert und eingefügt werden.

Dabei ist allerdings zu beachten, dass der User im Browser einige Schriftattribute verändern oder auschalten kann, was Folgen für Gestaltungsraster, Umbrüche, Lesbarkeit und Spaltenbreite haben kann. Außerdem hängt das Schriftbild von der Bildschirmauflösung und - größe ab. Man weiss also nie, wie der Text im Browser des Nutzers letztendlich aussehen wird.

Um eine genaue Kontrolle über das Layout zu haben sollte man Tabellen verwenden. Auch hier gilt: Es sollten keine langen Zeilen verwendet werden und die Tabellenbreite sollte maximal 400 Pixel betragen. Mit dem CELLSPACING und CELLPADDING-Tag kann man für Zwischenräume im Text sorgen.

Alternativ werden auch häufig transparente Grafiken in Tabellen verwendet, um Text einzurücken oder zu positionieren. Damit ein standardkonformes Design gewährleistet ist sollte bei der Gestaltung außerdem Boxen/Ebenen (DIVs) verwendet werden.

Um das Lesen von einem langen Text zu erleichtern sollte man diesen durch Überschriften, Abschnitte etc. auflockern und einige Schlüsselwörter hervorheben (z.B. Fett oder Kursiv). Eine Unterstreichung sollte als Hervorhebung aber nicht verwendet werden, da diese in der Regel einen Hyperlink signalisiert.

1.1 Scrollen
Lange Seiten, auf denen viel gescrollt werden muss, wirken abschreckend. Deshalb ist es beim Webdesign wichtig, das die Texte kurz gehalten werden. Man sollte gegebenenfalls die Texte in sinnvolle Informationseinheiten unterteilen und diese auf mehreren Seiten präsentieren. Außerdem sollte sie untereinander verlinkt werden.

Bei langen Seiten gilt die Regel der "umgekehrten Pyramide" (wichtigsten Informationen stehen am Anfang). Diese Art des Schreibens ist im Internet generell von Vorteil. Bei längeren Seiten sollten dem Besucher im Text außerdem Links zum Startpunkt angeboten werden.

1.2 CSS-Formatierungen
Durch den Einsatz von CSS ergeben sich mehr gestalterische Freiheiten. CSS ist eine Standardformatierungssprache für Schriften in HTML-Dokumenten. Durch sie können z.b die Farbe, Schriftart, Schriftgröße, Wortabstände uvm. definiert werden. CSS bietet außerdem in vielen Bereichen weitaus größere Flexibilität und Eingriffsmöglichkeiten.

SEO Tips für Blogger Templates

2009-04-23T17:32:00.025+02:00

Hi zusammen ! Ich wollte abseits vom eigentlichen Webdesign Content ein paar Seo Tips, die speziell für Blogger Templates gedacht sind, geben. Da ich selber Blogs bei Blogger.com besitze (u.a. dieses Blog) habe ich diese Seo Tips heute direkt angewendet.

Mal schauen was für Auswirkungen diese kleine Veränderungen haben werden.

Seiten Titel
Der Standard Seiten Titel im XML Template sieht wie folgt aus

<title><data:blog.pageTitle/></title>

Der Titel sagt aus, dass zuerst der Blog Name und dann der Titel des Blog Posts im Titel angezeigt wird. Dies ist wiederum nicht gut, da die wichtigen Keywords generell immer an erster Stelle stehen sollten. Daher sollte man den obengenannten Code durch diesen ersetzen.

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>

Dadurch wird zuerst der Post Titel und danach der Blog Name angezeigt (z.B. "SEO Tips für Blogger Templates | Webdesign Blog"). Dies ist natürlich aus SEO Sicht optimal. Alternativ können noch weitere relevante Keywords angegeben werden...

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/> | SEO Services | SEO News</title>
</b:if>

Meta Keywords and Description
Wichtig für ein gutes Ranking sind außerdem Meta Keywords und die Meta Description. Diese werden in der Regel durch folgenden Code hinzugefügt...

<meta name="description" content="......" />
<meta name="keywords" content="......" />

Das Problem bei Blogger Templates ist aber, das auf jeder Seite die selben Keywords und Beschreibung angezeigt wird wenn man diesen Code benutzt. Suchmaschinen mögen das gar nicht. Daher sollte man folgenden Code einfügen...

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<meta name="description" content="......." />
<meta name="keywords" content="......." />
</b:if>

Dieser Code zeigt die Meta Tags dann nur auf der Startseite an.

Heading Tags
Überschriften Tags (H1,H2,H3,H4,H5) sind für das SEO auch von großer Bedeutung. Speziell für Artikel Titel sollte generell der H2-Tag verwendet werden. Da die meisten Blogger Templates aber standardmäßig einen H3-Tag für die Überschrift verwenden sollte dies nachträglich im XML Template manuell geändert werden.

Um den HTML Code bearbeiten zu können muss im Layout unter "HTML bearbeiten" die Option "Vorlagen zum Erweitern von Widgets" aktiviert sein sonst werdet ihr den folgenden Code nicht finden ....

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

Wie ihr seht wird hier ein H3-Tag für den Titel verwendet. Man sollte diesen ausstauschen...

<b:if cond='data:post.title'>
<h2 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h2>
</b:if>

Außerdem muss noch eine kleine Änderung im CSS vorgenommen werden, damit der Titel auch korrekt dargestellt wird. Unter der Kategorie /* Posts sollten folgende Einträge geändert werden.

.post h3 und .post h3 a, .post h3 a:visited

Hier wird einfach die 3 durch die 2 ersetzt. Bei einigen Templates kann das auch abweichen aber ich denke es ist klar wie vorzugehen ist. Wenn ihr Fragen oder Anregungen habe könnt ihr diese gerne als Kommentar hinterlassen. Viel Spass beim optimieren !

Nachtrag vom 27.04.2009
Bei den "Heading Tags" gabs eine kleine Änderung. Da H1-Tags von Google schlechter bewertet werden (siehe Ranking-Faktoren: H1 bis H6 im Detail) sollte man H2-Tags für den Artikel Titel benutzen. Ich werde dies auch gleich bei meinen Blogs wie folgt ändern ...

Blog Titel: H1-Tag
Artikel Titel: H2-Tag
Sidebar Widget Titel: H3-Tag
Artikel Datum: H4-Tag
"Kommentar Bereich": H5-Tag

Webdesign vs Screendesign

2009-04-21T21:36:00.010+02:00

In den letzten Wochen habe ich mich ja näher mit dem Screendesign beschäftigt. Jetzt stellt man sich natürlich die Frage was Webdesign ist. Ganz einfach ! Es ist Screendesign, genauer gesagt ein Teilbereich davon, der sich speziell mit dem Internet beschäftigt.

Generell sind die Grundsätze der Gestaltung und Ergonomie (siehe Grundlagen des Screendesigns) auf jede Webseite übertragbar, aber beim Webdesign kommen noch folgende Punkte ergänzend hinzu...

Zeit (spielt eine wesentliche Rolle im Internet)
Webstandards (gewährleisten eine einheitliche Darstellung)
Konkurrenz Druck (Das eigene Angebot muss stets besser, schöner etc. sein als das der Mitbewerber)
Hauptaugenmerk liegt auf der Dialoggestaltung (z.B. in Formularen)
Benutzer stimmt mit (durch das OS oder den Browser kann er das Design beeinflussen)

Daher ist die Aufgabe eines Webdesigners, die spezifischen Vor- und Nachteile des Mediums Internet bei der Gestaltung von Webseiten zu berücksichtigen und zu nutzen.

In den folgenden Artikeln werde ich mich näher mit dem Aufbau eines Webprojekts und einigen Grundregeln, die speziell für die Informationsaufbereitung im Internet relevant sind, beschäftigen. Dazu gehören u.a. die Webstandards für Schrift, Bilder, Audio und Video.

Screenlayoutelemente (Screendesign)

2009-04-14T19:45:00.001+02:00

Beim Screenlayout geht es um die Gestaltung des Bildschirms, damit sein Inhalt als Einheit wahrgenommen werden kann. Dabei sind folgende Fragen relevant...

Wie sollen die einzelnen Elemente platziert werden ?
Worauf sollte man dabei achten ?
Wie nehmen Menschen visuelle Ordnungen wahr ?
Wie kann man Mithilfe der Strukturen Zusammenhänge verdeutlichen ?

Vor der Entwicklung eines Produkts ist es daher sinnvoll ein Konzept für die Gestaltung der Seiten auszuarbeiten. Nach der Feststellung, welche Elemente gebraucht werden muss deren Anordnung unter Berücksichtigung von Formen, Flächen und Linienverläufen geplant werden.

Man sollte dabei auf folgende Punkte achten...

Der Bildschirminhalt sollte bei der Gestaltung auf Harmonie und Gesamteindruck überprüft werden. Der Screen sollte als Einheit wahrgenommen werden, daher sollten die dargestellten Elemente in Bezug und Ergänzung zueinander gesetzt werden.
Konsistente Gestaltung der Seiten (Harmonische Ganzheit)
Je nach Zielgruppe sollte man entscheiden ob die Bildschirmkomposition eher strukturiert oder verspielt sein soll. Man sollte die Präsentation an die Aufnahmefähigkeit des Benutzers anpassen. Weniger ist oft mehr !

Eine implizite Struktur
Es ist empfehlenswert, sich für die Erstellung von Bildschirmseiten grundsätzlich Muster zu entwerfen. Zuerst sollte man festlegen welche Elemente benötigt werden. Danach sollte man die Anordnung definieren. Dabei sollte man in Formen, Flächen und Linienverläufen denken bevor man an die Details geht.

Merke: Eine implizite Struktur setzt den Bildschirminhalt und die einzelnen Elemente in Beziehung zueinander und lässt sie zu einer Gesamtheit werden.

Vorder- und Hintergrund-Beziehung
Der Hintergrund, auf dem die verschiedenen Elemente liegen, dient als Rahmen und optischer Halt. Er zieht sich meist durch das ganze Multimediaprodukt hindurch und verleiht ihm eine Konsistenz. Er visualisiert außerdem oft das Thema und baut eine passende Atmosphäre auf. Die Bedeutung der Informationselemente wird dadurch verstärkt und sie werden außerdem optisch hervorgehoben.

Regeln zum guten Hintergrunddesign
Der Hintergrund darf auf keinem Fall die eigentlichen Bildschirminhalte und seine Elemente dominieren. Je mehr Elemente verwendet werden desto unaufälliger muss der Hintergrund sein. Es sollte daher wenige aufgehellte, großflächige Farben oder Bilder mit einer Unschärfe verwendet werden.

Man sollte immer versuchen, einen möglichst hohen Kontrast von Vorder- und Hintergrund zu erreichen. Das gilt sowohl für Farben als auch für Formen. Außerdem sollte nicht zu viele Hintergrundfarben verwendet werden. Das Auge des Betrachters wird dadurch nur abgelenkt.

Gestaltgesetze
Die Gestaltgesetze helfen die Elemente am Bildschirm so anzuordnen, dass sie der menschlichen Wahrnehmung entgegenkommen. Folgende Regeln und Prinzipien bilden eine Grundlage für die Gestaltung von ansprechendem Design...

Gesetz der Nähe: Zusammengehörendes räumliche nahe beieinander anordnen
Gesetz der Ähnlichkeit: Zusammengehörendes optisch ähnlich gestalten
Gesetz der Prägnanz: Einfache Strukturen anbieten
Gesetz der Geschlossenheit: Muss bei angeschnittenen oder überdeckten Formen beachtet werden
Gesetz der Symmetrie: Schaffung von starken Strukturen durch symmetrische Anordnung
Gesetz der Erfahrung: Es erlaubt, nicht alles zeigen zu müssen, da man Vorkenntnisse der Zielgruppe voraussetzt
Gesetz der guten Fortsetzung: Lässt zusammengehörende Elemente entlang einer Linie anordnen

Linktip: Übersicht Gestaltgesetze

Blicksteuerung durch optische Signale
Für das Screendesign ist es besonders wichtig, bestimmte Dinge auf dem Bildschirm hervorzuheben und die Aufmerksamkeit des Benutzers darauf zu lenken. Hierfür können optische Elemente wie z.B. ein schrittweiser Aufbau einzelner Abschnitte oder Bilder verwendet werden.

Farben und ihr Einsatz
Der Einsatz von Farben ermöglicht es, Informationen eine weitere Dimension hinzuzufügen. Farben suggerieren unterschwellig eine eigene Botschaft, lösen Gefühle aus und wirken suggestiv. Häufig werden sie von Menschen unbewusst wahrgenommen.

Die Aufgabe von Farbe ist, Inhalte zu visualisieren und Ziele zu unterstützen wie z.b.

Wiedererkennbarkeit des Erscheinungsbildes
Gute Lesbarkeit von Text und Bild
Navigation und Benutzerführung durch systematischen Farbeinsatz
Animation und Zielgruppenansprache

Aufgrund von verschiedenen Enflussfaktoren werden Farben subjektiv wahrgenommen...

Biologische Ursachen
Kulturelle Ursachen
Individuelle Vorlieben
Psychologische Ursachen

Bildschirm versus Papier (RGB und CMYK)
Bildschirmfarben setzen sich grundsätzlich anders zusammen als Farbpigmente für den Druck. Papierausdrucke sind daher nur in CMYK Farben möglich. Für die Wiedergabe einer Grafik auf einem Monitor ist der RGB Farbraum zuständig. Er beinhaltet die 3 Grundfarben, die von allen Grafikprogrammen unterstützt werden. Mehr Infos dazu: Allgemeines zur Farbenlehre

Merke: Durch den unterschiedlichen Farbraum sind Bilfschirmdarstellung und Druckergebnis in keinem Fall identisch.

Folgende Richtlinien sollten beim Einsatz von Farbe am Screen berücksichtigt werden...

Augenfreundlich gestalten (Hintergrundflächen in strahlungsarmen Farben anlegen)
Distanz erzeugen mit kalten Farben (z.B. für Hintergründe, warme Farben eignen sich für Schriften und Linien da sie Nähe signalisieren)
Hell-Dunkel-Kontrast Text/Hintergrund (Optimierung der Textlesbarkeit)
Aufmerksamkeit erzeugen (z.B. durch Farben wie Rot, Orange oder Gelb. Sollte nur gezielt angewendet werden !)
Sparsamer Einsatz von Farben (Zu viel Farben lenken vom Inhalt ab)
Orientierungshilfe (Gleiche Sachverhalte sollte durchgängig in der gleichen Farbe dargestellt werden)
Farben derselben Wellenlänge meiden (Betrifft die Lesbarkeit. Es wird für das Auge dadurch schwierig, Dinge zu fokussieren)
Begrenzte Anzahl von Farben verwenden (max. 4-5 Farben, die zueinander passen und für Harmonie sorgen)

Hiermit wäre das Kapitel Planung und Elemente des Screendesigns abgeschlossen.

Motivationselemente (Screendesign)

2009-04-10T19:17:00.000+02:00

Motivation ist die zentrale Triebfeder des Gehirns. Dabei spielen Emotionen eine wichtige Rolle, denn wenn bestimmte Handlungen ein positives Gefühl erzeugen werde diese wiederholt. Diese Erkenntnisse sind auch auf das Screendesign anwendbar und sollten daher berücksichtigt werden. Eine Webseite, die beachtet werden will, hat kaum eine Chance, wahrgenommen zu werden, wenn sie ihre Besucher nicht motiviert, sich weiter mit ihr zu beschäftigen.

Motivierend wirkt grundsätzlich ein Produkt, das sich an der Zielgruppe orientiert, die Sprache des Benutzers spricht und einfach zu bedienen ist. Zusätzlich erleichtern motivierende Elemente die Benutzung des Produkts und machen seinen Gebrauch effektiver. Zu diesen Elementen zählen...

1. Der erste Eindruck
Er ist ausschlaggebend, ob ein bleibender Eindruck hinterlassen wird. Bietet man dem User eine Startseite, die ihn überzeugt, so ist dies die "halbe Miete". Innerhalb der ersten 12 Sekunden entscheidet sich, ob der Besucher auf der Seite bleibt oder zu einem anderen Anbieter wechselt.

2. Neugier
Menschen sind von Natur aus neugierig, daher kann diese Eigenschaft zur Motivierung eingesetzt werden, z.B. eine Seite begrüßt den Besucher und fordert ihn auf etwas zu tun. Interessant ist dies allerdings nur, wenn hinter der Aufforderung auch brauchbare Informationen stehen.

3. Aufmerksamkeit erregen
Eine bewährte Werbestrategie aus der Werbepsychologie bildet die so genannte AIDA-Formel (Wikipedia). Diese Formel versucht eine Stütze zu bieten, um Werbebotschaften angemessen zu vermitteln. Sie besteht aus 4 Schritten, wobei jeder Schritt auf den vorigen aufbaut.

A = Attention: Aufmerksamkeit einer Zielgruppe durch einen optischen Schlüsselreiz erregen
I = Interest: Interesse für die Sache erwecken und verstärken durch Bereitstellung von relevanten und interessanten Informationen
D = Desire: Sehnsucht bzw. Wunsch erwecken, bestimmte Informationen zu bekommen oder bestimmte Dinge zu tun
A = Action: Der Nutzer soll zum Handeln (z.B. Kauf) motiviert werden

Beispiel für eine AIDA Webseite: Geschenkomat.de

4. Nutzen und Klarkeit
Ein hoher Motivationsfaktor ist, wenn der Benutzer ohne Umschweife (Bruchteil einer Sekunde) erkennt, welchen Nutzen er aus seiner Handlung hat und warum er auf die nächste Seite gehen soll. Wichtig ist, das man ihn auffordert etwas zu tun, z.B. durch einen Button, auf dem "Drück mich" oder "Eingang" steht.

Viele Webseitenbereiber locken auf der Startseite mit gewinnversprechenden Spielen, die die Besucher zum nächsten Klick auffordern. (siehe Fanta.de)

5. Humor
Die Wirkung von Humor sollte bei der Motivation nicht unterschätzt werden. Humor kann die Motivation steigern und damit die Nutzung eines Produkts wesentlich erleichtern. Man sollte hierbei aber beachten, das man den Humor der Zielgruppe trifft. Er sollte immer einen Bezug zum Thema haben. Außerdem sollte er positive und keine negativen Gefühle ausdrücken.

Interaktionselemente (Screendesign)

2009-04-09T10:46:00.001+02:00

Interaktionselemente zeigen dem Benutzer, dass das System seine Eingabe verstanden hat und auf die Aktivitäten des Benutzers reagiert.

Zu unterscheiden gibt es vier Interaktionsarten:

Das System erwartet eine Aktion des Benutzers (z.B. durch Anklicken eines Seitenelements)
Das System hat die Aktion des Benutzers verstanden und zeigt ihm dies an (z.B. Akustisches Signal)
Das System ist mit einem internen Prozess beschäftigt (z.B. Laden von größeren Bilddateien -> Veränderung des Cursors zu einer Sanduhr)
Das System meldet dem Benutzer etwas (z.B. Fehler, Hinweis oder Ähnliches)

Für den Nutzer ist es wichtig, dass folgende Fragen beantwortet werden

Was kann ich hier tun ?
Was kann der Computer für mich tun ?
Was habe ich bereits getan ?
Hat der Computer meine Aktion verstanden ?
Was macht der Computer zur Zeit ?

Entscheidend ist auch die Zeit, die das System für eine Interaktion benötigt. 1 Sekunde ist die Grenze für das Gefühl des Benutzers, dass das System unverzüglich auf ihn reagiert. 10 Sekunden sind in der Regel die Grenze, um die Aufmerksamkeit des Benutzers zu halten. Längere Ladezeiten nehmen die Benutzer zwar in Kauf, empfinden die Wartezeit allerdings als unangenehm.

Folgende Regeln gelten für die Gestaltung der Interaktionselemente:

Konsistentes Feedback (Elemente sollte immer auf die selbe Art und Weise reagieren)
Konsequentes Design (Interaktive Elemente in der Darstellung nicht mit statischen Elementen vermischen)
Informatives Feedback anbieten (Bearbeitung sollte Zustandsinformationen in Form einer Fortschrittsanzeige anzeigen)
Der Zielgruppe anpassen (Das System sollte die Sprache des Benutzers sprechen und für ihn eindeutig sein)

Ende !

Inhaltselement V: Video (Screendesign)

2009-04-08T16:39:00.001+02:00

Videos sind Bilder in Bewegung. Sie dienen, wie Animationen und Audios als ergänzende, abwechlungsreiche Informationsquelle. Videos zählen neben Animationen, gesprochenem Text oder Musik zu den zeitabhängigen Medien, d.h. der Benutzer ist an den Ablauf gebunden und muss sich das Video in einer bestimmten Reihenfolge ansehen.

Ein Video kann daher als Unterstützung von Text und Grafiken verwendet werden, sollte aber nicht den Haupteil einer Screenseite darstellen. Es bietet dem Screendesigner außerdem die Möglichkeit, die Aufmerksamkeit der Benutzer durch bewegte Bilder zu erhöhen und erzeugt im Gegensatz zum Text eine kontinuierliche visuelle Abwechslung. Daher ist der Einsatz dieses Medium ziemlich reizvoll, sollte aber nicht überreizt werden !

Bei der Gestaltung eines Videoclips sollte darauf geachtet werden, dass das bewegte Bild mit dem Interfacedesign sowie den formalen Aspekten des Bildschirmlayouts korrespondieren muss. Dabei kann auf folgende Einsatzmöglichkeiten der Videointegration zurückgegriffen werden...

Video im Fenster mit variabler Größe
Bildschirmfüllendes Video
Freigestelltes Video

Das Videofenster in beliebiger Größe ist dabei immer nur ein Teil des Gesamtkonzepts neben anderen Elementen. Der bildschirmfüllende Einsatz von Videos erleichert dem Benutzer das Hineinversetzen in das Video oder das Screendesign, kann aber auch abschreckend wirken. Man sollte dem Benutzer letztendlich immer die Wahl lassen, ob er sich das Video ansehen möchte.

Es ist bewiesen, dass beim Betrachten von Videos am PC die Konzentration sehr schnell nachlässt. Daher sollte das Video kurz gehalten werden (sollte nicht länger als 30 Sekunden dauern). Außerdem sollte dem Benutzer die Gelegenheit gegeben werden, das Video zu steuern z.b durch pausieren, stoppen oder neu abspielen.

Es sollte auch bedacht werden, dass der User zum Abspielen des Videos über eine bestimmte technische Hard- und Softwareausstattung (z.B. Real Player, Quick Time) verfügen muss. Diese sollte dem Anwender notfalls mit zur Verfügung gestellt werden.

Inhaltselement IV: Audio (Screendesign)

2009-04-08T15:39:00.001+02:00

Audio sind Informationen in Form von Musik, Tönen, Sprache und Geräuschen. Ist der visuelle Kanal durch die Informationen am Bildschirm bereits ausgelastet, so kann der auditive Kanal zusätzlich Informationen aufnehmen und verarbeiten.

Für den Sound gilt allerdings, dass er nur im sinvollen Zusammenhang angewendet werden sollte, da dieser sonst auch störend und abschreckend wirken kann.

Der Screendesigner sollte bei Audio-Informationen auf folgendes achten...

Sparsamer Einsatz ! Sie sollten den User nicht stören
Audio sollte Inhalte ergänzen und nicht mit ihnen konkurrieren (Einsatz nur wenn es der Inhalt erfordert)
Wahlmöglichkeit für den User, ob er den Audio-Inhalt hören will. Dazu gehört auch eine Kurzinformation (Textform) über den Inhalt der Audiodatei
Lautstärke sollte regulierbar sein
Der User sollte über Steuerungsmöglichkeiten (siehe Windows Media Player) verfügen um den gezielten direkten Zugang zu bestimmenten Informationen zu gewährleisten.
Ein Fortschrittsbalken ist sehr hilfreich. Er informiert darüber, an welcher Stelle man sich gerade befindet und wieviel Inhalt noch zu erwarten ist
Längere Audiodateien sollten in mehrere Einheiten aufgespalten werden, damit die Konzentration des Zuhörers nicht verloren geht und die Bandbreite nicht überlastet wird.

Ende !

Inhaltselement III: Animationen (Screendesign)

2009-04-08T14:22:00.002+02:00

Ein Großteil der Animationen im Screendesign sind hintereinander geschaltete einzelne GIF-Bilder. Diese Technik wird häufig eingesetzt, da sie einfach ist und auf nahezu allen Plattformen läuft.

Eins ist klar. Animierte Bilder und alles, was sich bewegt, zieht Aufmerksamkeit auf sich. Bei übermäßigen Einsatz kann das ganze aber auch nach hinten losgehen.

Daher sollten Animationen nur sehr gezielt und bewusst eingesetzt werden damit sich der Nutzer auch auf die restlichen Elemente der Seite konzentrieren kann.

Inhaltselement II: Bilder (Screendesign)

2009-04-08T14:10:00.000+02:00

Bilder gehören neben Texten zu den wichtigsten Inhaltselementen bei Multimediaprodukten. Bilder haben den Vorteil, dass sie sofort ins Auge springen und so schneller wahrgenommen werden (höheren Erinnerungswert) wie Texte.

Die Bilder haben 3 wesentliche Funktionen

Sie veranschaulichen, indem sie Texte ergänzen (inhaltlicher Bezug)
Sie strukturieren, indem sie die Ordnung eines Themas anzeigen
Sie dekorieren die eigentlichen Inhalte und wirken motivierend auf den Anwender

Diese Funktionen lassen sich schwer vermischen. Daher sollte bewusst entschieden werden wann und wo welche Funktion eingesetzt wird.

Für den effektiven Einsatz von Bildern sind folgende Dinge wichtig...

Grafiken sollten nicht als Verzierung eingesetzt werden. Sie sollten stets eine konkrete Funktion oder Informationsgehalt haben
Auf den Einsatz von großflächigen Bildern sollte verzichtet werden. Alternativ sollten relevante Bildausschnitte verwendet werden, die sich auf das Wesentliche konzentrieren
Sparsamer Einsatz von Bildmaterial, da sonst die Wirkung verloren geht
Standard Dateiformate: GIF für Grafiken mit größeren farbigen Flächen und JPG für Fotos
Bilder sollte nicht bunt sondern farbig sein, d.h. sie setzen Farben gezielt, konzentriert und zueinander passend ein.
Bilder sollten Emotionen auslösen

Ende !

Inhaltselement I: Text (Screendesign)

2009-04-06T19:51:00.000+02:00

Heute will ich mich mit dem wohl wichtigsten Inhaltselement beschäftigen, dem Text ! Im Screendesign gibt es einige Textelemente, die die Lesbarkeit am Bildschirm erheblich beeinflussen. Dazu gehören u.a.

die Wahl des richtigen Fonts (Schrifttyps)
die Schriftgröße
der Zeilenabstand und die Laufweite der Schrift (Raumverbrauch in der Waagerechten)
die Zeilenlänge und die Satzform (Mittig, Block, links- oder rechtsbündig)
die Farbwahl von Schrift und Hintergrund

Es sollte auch nicht verschwiegen werden, dass die Wiedergabetechnik (Bildschirmauflösung) die Schärfe des Schriftbildes definiert.

Typografie am Monitor
Text kann entweder direkt in den HTML Code eingebunden sein oder als Bild in einem Grafikprogramm aufbereitet sein. Der Nachteil bei der Schrift auf Bildbasis ist, dass Suchmaschinen den enthaltenen Text nicht auslesen können (wenn man den "Alt Tag" mal ignoriert) und die Datei grösser ist als normale Bilddateien, was den Seitenaufbau verlangsamt.

Da die meisten Anwender nur Standardschriftarten (siehe Typografie) auf ihrem Rechner installiert haben gilt folgende Faustregel:

Fließtext sollte immer in einer Standardschriftart erstellt werden
Für Grafiken können spezielle Schriftschnitte verwendet werden

Dies hat den entscheidenden Vorteil das der User die Schrift nicht installiert haben muss, um sie so angezeigt zu bekommen, wie der Designer es vorgesehen hat.

Lesbarkeit am Monitor
Hier gilt die Faustregel das Texte am Monitor kurz, prägnant und schnell erfassbar sein müssen da lange, umfangreiche Texte am Bildschirm äußerst selten gelesen werden. Dazu sollte man wissen, das das Lesen auf einem Monitor anstrengender und unangenehmer ist als von Papier. (Lesegeschwindigkeit ist 25-30% langsamer als normal).

Als Hilfsmittel zur besseren Lesbarkeit können z.B. aussagekräftige Überschriften, fett markierte Schlüsselwörter und kurze Absätze verwendet werden.

Schrifttypen & Schriftgröße
Aufgrund der niedrigeren Auflösung und Bildwiederholungsfrequenz des Bildschirms sind Bildschirmschriften im Allgemeinen schlechter zu lesen als z.B. im Printbereich. Generell gilt daher das Serifen die Lesbarkeit im Printbereich erhöhen, am Bildschirm wiederrum reduzieren.

Dadurch lassen sich Serifenschriften wie z.B. Times erst ab einer Größe von 16 Punkt problemlos darstellen lassen. Serifenlose Schriften wie Arial oder Helvetica hingegen schon ab 12 Punkt. Bei kleineren Größen empfielt sich der Einsatz des Fonts Verdana.

Für die Lesbarkeit am Bildschirm sollte daher immer mit einer größeren Schriftgröße (12 Punkt) gearbeitet werden bzw. eine relative Schriftgröße definiert werden, die dann vom Benutzer individuell vergrößert oder verkleinert werden kann. Außerdem sollte auf den Einsatz von Fetter und kursiver Schrift fast gänzlich verzichtet werden. Außnahme: Hervorhebungen im Text !

Textlänge
Bildschirmtexte müssen wesentlich kürzer sein und stärker gegliedert werden als Texte im Printbereich. Der Grund hierfür ist, dass der Benutzer bei längeren Seiten oft den Zusammenhang verliert und sich zu viele nicht sichtbare Informationen merken muss. Lange Texte sollte daher alternativ als Download oder in einer Druckversion angeboten werden.

Faustregel für die Textlänge: Lange Texte müssen visuell und gestalterisch klar voneinander abgegrenzt werden.

Zeilenlänge & Zeilenabstand
Die Zeilenlänge wie auch der Zeilenabstand beeinflussen die Lesbarkeit entscheidend. Pro Zeile sollten daher nie mehr wie 8-10 Wörter bzw. 60-80 Buchstaben verwendet werden. Für eine optimale Lesbarkeit sollte der Fließtext ein eineinhalb bis zweizeiliger Abstand haben.

Außerdem ist es ratsam, einen zusätzlichen Raum zwischen einzelnen Absätzen zu lassen, um sie deutlich voneinander zu trennen.

Textausrichtung
Für die Ausrichtung des Textes sollte generell immer ein linksbündiger Flattersatz verwendet werden, da die Wortabstände hier stets gleich bleiben. Vom Blocksatz, rechtsbündiger Flattersatz wie auch dem zentrierten Text ist abzuraten, da diese Formen die Lesbarkeit erheblich einschränken.

Schriftfarbe
Farbige Schrift ist ein wirksames Mittel zur Steuerung der Aufmerksamkeit. Falls diese zum Einsatz kommt sollte man folgende Prinzipien beachten, damit eine optimale Lesbarkeit gewährleistet ist.

Der Kontrast zwischen Hintergrund- und Schriftfarbe darf nicht zu gering sein
Farbige Schrift und farbiger Hintergrund sollte vermieden werden
Weniger ist mehr ! Optimal ist die Verwendung von 2 Grundfarben
Keine Hintergrundbilder mit großer oder hoher Kontraststruktur verwenden
Blaue bzw. rote Schrift auf schwarzem Hintergrund & gelbe Schrift auf weißem Hintergrund sollte keinesfalls verwendet werden. Sehr schwer lesbar !

Außerdem sollten folgende Farbkombinationen vermieden werden...

Rot auf Grün
Rot auf Blau
Blau auf Rot
Blau auf Grün
Grün auf Blau
Grün auf Rot

Diese können vom Auge nicht scharf wahrgenommen werden und erzeugen daher ein irritierendes Flimmern.

Inhaltselemente (Screendesign)

2009-03-30T16:09:00.003+02:00

Inhaltselemente sind aufbereitenden Daten, also Informationen in Form von Texten, Bildern, Tönen, Videos oder Animationen.

Diesbezüglich sollte sich der Designer folgende Fragen stellen...

Wie sollten Informationen aufbereitet sein, damit sie am Monitor entsprechend eingesetzt werden können ?
Wie lesen Menschen am Bildschirm ?
Wie sollten geeignete und verständliche Texte erstellt werden ?
Worauf muss man beim Einsatz von Bildern, Videos und Animationen achten ?

Als Designer sollte man sich immer darüber im klaren sein, welche Informationen man über welches Medium vermitteln will. Im Bezug auf die Typographie müssen Überlegungen gemacht werden welchen Stellenwert die Komponente Text inhaltlich und funktional innerhalb des Arrangements von Bild, Video und Sound einnehmen soll. Außerdem muss immer an die Darstellbarkeit auf dem Monitor gedacht werden.

Navigationselemente (Screendesign)

2009-03-30T15:51:00.000+02:00

Navigationselemente sollen dem User ermöglichen, sich auf einer Webseite zu bewegen und gezielt bestimmte Orte zu besuchen. Auch hier braucht der Benutzer eine Antwort auf folgende Fragen.

Wo befinde ich mich ?
Wo kann ich hingehen ?
Wie gelange ich dort hin ?
Wie komme ich dorthin zurück, wo ich schon war ?

Können alle diese Fragen vom Nutzer beanwortet werden kann er intuitiv navigieren, kurz gesagt es besteht eine Orientierungsstruktur, die ihn dorthin führt, wo er hin möchte. Falls diese nicht oder nur ausreichend vorhanden ist kann der Benutzer die Webseite im schlimmsten Fall vorzeitig verlassen, ohne sich mit dem eigentlichen Inhalten zu befassen. Ein Navigationsschema kann sich aus folgenden Navigationseinheiten zusammensetzen...

1. Primäre Navigation
Sie zeigt die Hauptgebiete und -kategorien des Angebots in Form von Textlinks oder Buttons und ist meistens links oben auf der Seite positioniert, da das menschliche Auge intuitiv von oben nach unten und von links nach rechts wandert. Für die Anordnung der Navigationsleisten hat sich das "kopfstehende L" weitestgehend durchgesetzt.

2. Sekundäre Navigation
Öffnet ein Button oder Textlink ein Untermenü, muss die Obergruppe für eine gemeinsame Aktion klar (z.B. farblich abgesetzt) erkennbar sein.

3. Home Button
Ein bekanntes Navigationselement ist der Home Button. Jede Seite sollte grundsätzlich einen deutlich platzierten Link zurück zur Startseite haben. Sehr oft wird das Logo, da es auf jeder Seite erscheinen soll mit dem Home-Link versehen. Es empfielt sich aber eine Schaltfläche mit dem Text Home zu versehen um den Home Button eindeutig zu machen.

4. Suchfunktion
Bei umfangreichen Webseiten ist eine Suchfunktion empfehlenswert um Nutzern, die eine genaue Zielvorstellung haben, schnell an ihr Ziel zu führen. Um Irritationen zu vermeiden muss das Suchelemente immer an der gleiche Stelle auf allen Seiten zu finden sein.

5. "Vor- und Zurück-Buttons"
Damit dem Besucher die Navigation erleichtert wird können zusätzlich Vor- und Zurück-Buttons in die einzelnen Seiten eingebaut werden um den Wechsel in eine andere hierarchische Ebene zu ermöglichen.

6. Alternative Navigation
Durch das Anbieten alternativer Navigationsmöglichkeiten soll verhindert werden, dass jemand völlig oder teilweise von der Navigation ausgeschlossen wird. (z.B. durch Verwendung von Javascript oder Flash Elementen). Als Alternativen können Bilder, Sitemaps, Hotspots oder Piktogramme verwendet werden. Beim Design ist jedoch zu beachten, dass diese vom Anwender eindeutig als Navigationselement erkennbar sind. (z.B. durch farbliche Hervorhebung)

7. Lesezeichen/Favoriten anlegen
Lesezeichen (oder auch Bookmarks) haben den Nutzen, dass der Anwender seine Lieblingswebseiten schnell finden und besuchen kann. Sie sind daher zu einem wichtigen Navigationsmittel geworden, da ein Großteil der Surfer bestimmte Seiten sehr häufig anläuft.

Orientierungselemente (Screendesign)

2009-03-26T15:13:00.001+01:00

Orientierungselemente haben den Nutzen den Anwender dabei zu unterstützen sich im System zurechtzufinden. Um sich orientieren zu können benötigt der User Antworten auf folgende Fragen.

Von wem kommen die Informationen ?
Sind die Informationen für mich geeignet ?
Welche Inhalte werden geboten ?

Können diese Fragen an jeder Stelle auf einer Webseite beantwortet werden kann man davon sprechen, das sich der User orientieren kann. Ein einheitliches Design, Logo oder ein Name zeigt dem User, wo er sich als Ganzes befindet.

Weitere Orientierungselemente sind u.a. Angaben in der Titelleiste, der URL-Zeile und Statusleiste des Browsers. Auch Bilder, Metaphern oder Moderatoren sind weit verbreitete Orientierungshilfen.

Metaphern
Bei einer Metapher überträgt man etwas Bekanntes und Vertrautes aus dem Alltag des Users auf die Organisation der auf dem Bildschirm angezeigten Daten. Wichtige Merkmale einer Metapher sind u.a.

Stimmig mit Thema und Inhalt
Verständlich und Vertraut
Optische Darstellung sollte nicht die eigentliche Inhalte dominieren, sondern sie transportieren !
Sie kann durchgängig eingesetzt werden

Moderatoren (Guided Tours)
Zur besseren Orientierung sind virtuelle Moderatoren, die eine Führung durch das System übernehmen eine wertvolle Hilfe für den User. (Beispiel: Yaoti.com)

Bilder und Grafiken
Sie habe eine besondere Bedeutung, da über sie im gleichen Zeitraum mehr Informationen aufgenommen werden können als über gelesenen Text. Infografiken verdeutlichen komplexe Sachverhalte oftmals besser als umständliche Beschreibungen.

Die Bilder sollte daher so gestaltet werden, das unwichtige Inhalte weitesgehend weggelassen werden damit sich der User besser auf den Ausschnitt konentrieren kann (Zu viele Informationen lenken ab !). Folglich solltem möglichst Detailaufnahmen verwendet werden, die kurz und prägnant sind. "Weniger ist mehr !"

Planung und Elemente des Screendesigns

2009-03-19T10:51:00.005+01:00

Nachdem ich im letzten Artikel die theoretischen Aspekte des Screendesigns näher erläutert habe will ich nun auf die praktische Anwendung eingehen. Bei der Planung und Gestaltung einer Multimediapräsentation müssen unterschiedliche Anforderungen in Einklang gebracht werden. Dazu gehören u.a.

Festlegung der Zielgruppe
Art der Präsentation
Umfang der Informationen / Serviceleistungen
Usability ("einfache Bedienbarkeit")

Um eine klare und transparente Benutzerführung zu erreichen sollten folgende Gestaltungselemente (Basiselemente des Screendesigns) angewendet werdet.

Orientierungselemente (Wegweiser für die Benutzer)
Navigationselemente (Helfen dem Benutzer sich auf der Webseite zu bewegen)
Inhaltselemente (aufbereitete Informationen, z.B. Texte, Bilder...)
Interaktionselemente (Reagieren auf Aktionen des Benutzers)
Motivationselemente (Sie sollen den User motivieren sich mit dem System zu beschäftigen)
Screenlayoutelemente (Organisieren alle Elemente und sorgen damit für ein harmonisches Gesamtbild)

Auf die einzelnen Elemente werde ich in den folgenden Artikeln näher eingehen.

Die Zielgruppe
Ein entscheidener Faktor beim Screendesign ist welche Zielgruppe mit dem Screen angesprochen werden soll. Hier bietet sich die Möglichkeit diese nach sozio-demografischen Merkmalen (z.B. Alter, Geschlecht, Familienstand, Kulturkreis) sowie Persönlichkeitsmerkmalen (z.B. Geduld, Emotionalität etc.) einzuteilen. Dementsprechend sollte auch die Designauswahl getroffen werden (z.B. sachlich - nüchtern oder heiter - unbeschwert)

Das Produkt
Neben der Festlegung der Zielgruppe muss außerdem festgelegt werden welche Art von Produkt auf dem Screen präsentiert werden soll. Man unterscheidet hier zwischen folgenden Arten: Verkaufen (z.b. Online Shop), Werben (Firmenpräsentation + Produktwerbung) und Image (Aufwertung).

Der Umfang
Ein wichtiger Punkt für die Navigation. Eine komplexe Seite benötigt auch eine komplexe Navigation ! Hiernach richtet sich auch der Aufbau der Webseite. Um Inhalte aufzubereiten und zu steuern stehen je nach Inhalt und Zielsetzung folgende Möglichkeiten zur Verfügung:

Lineare Struktur (Präsentation in einer zeitlichen Abfolge)
Hierarchische Struktur (Thematische Unterteilung der Seiten)
Matrixartige Struktur (Unterteilung von gleichberechtigten Inhalten)

Zudem sollte man auf ein optimales Gleichgewicht zwischen Tiefe (User sollte schnell sein Ziel erreichen) und Breite (Verlustfreie Aufnahme sollte gewährleistet sein) der Informationen achten !

Grundlagen des Screendesigns

2009-03-03T16:40:00.000+01:00

Das Screendesign organisiert optische Elemente auf den Bildschirm sodass sie die Aufmerksamkeit des Benutzers erregen und ihn motivieren sich mit den Inhalten auseinanderzusetzen.

Rechtliche Grundlagen Normen
Zu den wichtigsten Standards im Software- und Multimediabereich zählen die EN ISO 9241 (ergonomische Softwaredialoge) und EN ISO 14915 (ergonomische Multimediaanwendungen).

Nach der EN ISO 9241 sollte eine Software folgende Anforderungen erfüllen:

Aufgabenangemessenheit: (Benutzer sollte sein Ziel effizient und effektiv erreichen)
Selbstbeschreibungsfähigkeit (z.B. Tooltips)
Steuerbarkeit (Dialog kann eigenständig begonnen, variiert und beendet werden)
Erwartungskonformität (Die Software entspricht den individuellen Erwartungen des Benzuters)
Fehlertoleranz (Das Ziel kann bei fehlerhaften Eingaben mit geringen Korrekturaufwand erreicht werden)
Individualisierbarkeit (Anpassung an eine besondere Zielstellung und individuellen Fähigkeiten des Benutzers)
Lernförderlichkeit (Das System unterstützt den Benutzer bei der Handhabung)

Die Norm EN ISO 14915 ergänzt diese 7 Anforderungen durch vier weitere:

Eignung für das kommunikative Ziel (die Gestaltung richtet sich an den kommunikativen Zielen von Anbieter und Benutzer)
Eignung für Wahrnehmung und Verständnis (Informationen und Funktionen des Systems sind für den Benutzer verständlich)
Eignung für die Informationsfindung (Benutzer erhält die für ihn relevanten Informationen)
Eignung für die Benutzerbeteiligung (Aufmerksamkeit beim Benutzer erregen)

Psychologische Grundlagen zur Informationsdarstellung
Hier ein paar entscheidene Faktoren die den Mensch-Maschine-Dialog in punkto Wirksamkeit und Akzeptanz beeinflussen...

Wahrnehmung (Wann und wie nimmt der Benutzer Information wahr ?)
Verstehen (Versteht der Benutzer die angezeigten Informationen ?)
Behalten (Welche Informationen kann sich der Benutzer behalten ?)
Erwartung (Was ist der Benutzer aus seinem Alltag geöhnt ?)

Aus diesen Fragestellungen können erste Schlussfolgerungen für die Informationsdarstellung am Bildschirm abgeleitet werden. Zu den wichtigsten zählen folgende Punkte...

Die visuelle Wahrnehmung
Gestaltgesetze und Wahrnehmungslehre
Gesetz von der guten Gestalt
Gesetz der Geschlossenheit

Schlussfolgernd kann man folgendes zusammenfassen. Das Screendesign bezieht sich auf alle Inhalte, die auf dem Bildschirm dargestellt werden.Demnach sollte alles, was auf dem Bildschirm (Screen) erscheint optimal an die Nutzung durch den User angepasst werden, damit sich dieser nicht der Ausgabe unterordnen muss.

Ein optimales Screendesign sollte dem User die Datenerfassung erleichtern. Dazu gehört, dass Navigations- und Orientierungshilfen intuitiv ersichtlich und bedienbar sind. Außerdem sollte der Gesamteindruck den biologischen Gegebenheiten des menchlichen Auges und den Sinneswahrnehmungen unseres Gehirns entsprechen.

Folgende Begriffe spielen beim Screendesign eine tragende Rolle

Ergonomie
Benutzbarkeit
Usability
Benutzerfreundlichkeit

Die Gestaltung einer Benutzerschnittstelle muss ich demnach an den Fähigkeiten und Grenzen der Benutzer und den Aufgaben der Benutzer, die durch das System unterstützt werden orientieren.

Typografie

2009-01-28T19:10:00.003+01:00

Unter Typografie versteht man eine Ansammlung von Regeln, um Texte gut lesbar zu machen, klar zu gliedern und ein harmonisches Gesamtbild zu gestalten.

Die Schrift lässt sich in folgende Elemente aufteilen.

Buchstabe
Wort
Zeile
Absatz und Spalte
Seite

Schriftfamilen (Fonts)
Man unterscheidet zwischen 2 großen Schriftfamilien - Serifenschriften (z.B. Times New Roman) und serifenlosen Schriften (z.B. Arial). Bei Serifen handelt es sich um die kleine Endstriche oben und unten an den Hauptstrichen der Buchstaben. Sie haben ihren Ursprung in der Antike.

Im Printbereich gilt die Serifenschrift als besonders angenehm zu lesen. Am Bildschirm dagegen erschweren sie bei kleinen Schriftgrößen die Lesbarkeit. Deshalb sind serifenlose Schriften im Webdesign in der Regel besser einsetzbar.

Um Fehler beim Mischen von serifenlosen Schriften zu vermeiden sollte man die weitere Unterteilung dieser Schriftfamilie kennen - Renaissance-Grotesk (auch ältere Grotesk) und konstruierte Grotesk. Erstere lehnt sich stark an das Gesamtbild der klassichen Serifenschriften an. Hier findet ihr Beispiele zu den jeweiligen Unterarten (siehe Klassifikation).

Schriftcharakter
Als Webdesigner sollte man sich auch die Frage stellen, wie Schrift Textinformation am besten transportieren kann. Denn wie Farben und Bilder wecken Schriften beim Betrachter verschiedene Assoziationen. Dies trifft vorallem auf einen Slogan oder Logo zu, nicht auf die Darstellung von Mengentext ! Durch den Charakter der Schrift kann z.B. die Aussage eines Slogans verstärkt werden. (Zusammungfassung Schriftcharaker)

Schriftschnitte
Darunter versteht man die Erscheinungsform eines Buchstabens (z.B. Fett oder kursiv). Er lässt sich in folgende Punkte unterteilen.

Schriftstärke (leicht, mager, halbmager, fett, extrafett)
Zeichenweite (schmal, normal, breit)
Schriftlage (normal, semi-kursiv, kursiv)

Wegen mangelnder Auflösung der Monitoren fallen meistens alle Schriftschnitte bis auf "normal", "kursiv" und "fett" weg, da sie nur unzureichend dargestellt werden können.

Schriftgrößen
Als Maßeinheit für Schriften wird häufig der Didot-Punkt (1pt = 0,376 mm) verwendet. Desweitern ist vorallem in Europa die Maßeinheit Pica-Punkt (1pp = 0,351 mm) verbreitet. Für die Bestimmung von Schriftgrößen in Webseiten spielen diese beiden Maßeinheiten aber nur eine untergeordnete Rolle. Hier werden Schlüsselwörter (z.B. small, medium, large) verwendet, die sich relativ auf die Standardschriftgröße des Browsers beziehen.

Alternativ können zur Definition von relativen Schriftgrößen die Einheit em bzw. Prozentwerte (%) verwendet werden. Der Vorteil ist, das die Schriftgröße in allen Browsern individuell vergrößert bzw. verkleinert werden kann und so eine optimale Anpassung und Lesbarkeit der Webseite ermöglicht.

Standardschriftgröße bei Browsern: 16 px, 1em bzw 100%

Textauszeichnung
Unter Auszeichnung versteht man die Hervorhebung von Wörtern oder Textstellen, um die Aufmerksamkeit des Lesers darauf zu richten.

Folgende Arten stehen zur Verfügung.

Fett
Kursiv
Unterstichen
andere Farbe
andere Schriftart

Hier kann man kurz und knapp sagen, das ausser kursiv alle andere Auszeichnungen im Mengentext nur bedingt oder gar nicht einsetzbar sind.

Nachteile:

Fett - Bricht die optische Gleichtonigkeit, gestörter Leserhythmus
Unterstrichen - Wird vom User als Hyperlink gewertet
andere Farbe - wird oft für Hyperlinks verwendet, kann für Überschriften verwendet werden
andere Schriftart - Leserhythmus wird gestört, kann für Überschriften verwendet werden

Wichtiger Tip zum Schluss
Als Webdesigner sollte man beachten, dass man nur Standardschriftarten benutzt und nicht irgendwelche Exoten. Man will dem User ja nicht seine Schriften "aufzwingen". Daher sollten nur folgende Schriftarten benutzt werden.

Times / Times New Roman
Georgia
Courier / Courier New
Arial / Arial Black
Verdana
Helvetica
Impact
Comic Sans MS
Trebuchet

Ende !

Grafikformate für das Internet

2009-01-22T16:32:00.001+01:00

GIF (Graphics Interchange Format)
Dieses Format wurde speziell für den Online Einsatz entwickelt. Es zeichnet sich durch seine hohe Komprimierungsdichte aus (10-30x kleiner als Bitmapgrafiken !). Die maximale Farbtiefe beträgt 256 Farben bei verlustfreien Format. GIF eignet sich besonders für Symbole, Zeichnungen und Diagramme.

Ein weiterer Vorteil dieses Formats ist der Zeilensprung (interlaced). Darunter versteht man, das die Grafik nicht kontinuierlich von oben nach unten aufgebaut wird sondern blockweise in einzelnen Schichten. (Beispiel bei Wikipedia)

Das GIF Format ist auch dafür bekannt, das sich mehrere Grafiken in einer Grafikdatei abspeichern lassen. Dadurch sind animierte Grafiken realisierbar. Der Vorteil ist das keine spezielle Software oder Plugins nötig sind. (Beispiel bei Wikipedia)

Außerdem kann bei diesem Format (ab GIF89a) ein Farbeintrag in der Palette als transparent definiert werden. Dadurch kann man an beliebigen Stellen die jeweilige Hintergrundfarbe durchscheinen lassen und den Eindruck erwecken, ein GIF-Bild hätte eine nicht rechteckige Form.

JPEG (Joint Photographic Experts Group)
Dieses Grafikformat basiert auf dem Komprimierungsalgorithmus DCT in Verbindung mit der Huffman-Kodierung. Mittlerweile wird der JPEG-Algorithmus auch bei Videos angewendet. (MPEG Format)

Das Format komprimiert ebenfalls sehr gut, hat aber den Vorteil, dass es pro Bild bis zu 16,7 Mio. Farben speichern kann. Der Nachteil gegenüber dem GIF Format ist, dass es mit Verlust komprimiert. (je höher der Komprimierungsfaktor desto schlechter die Bildqualität)

JPEG eignet besonders für die "Online Optimierung" von Fotos und andere Grafiken, in den sehr feine Farbverläufe vorkommen. Als zweite Variante sollte das progressive JPEG Format erwähnt werden. Dabei werden erst die ersten Koeffizienten jedes Bildblocks, dann die zweiten usw. der Reihe nach abgespeichert, so dass die Annäherung an das Originalbild immer besser wird. (zu vergleichen mit der Variante "Interlaced" beim GIF Format)

PNG (Portable Network Graphics)
Dieses Format wurde auch für den Online Einsatz entwickelt und soll die Vorteile von JPEGs als auch von GIFs in sich vereinen. Das PNG Format kann 16,7 Mio. Farben im verlustfreien Format abspeichern und unterstützt außerdem Tranparenz per Alphakanal.

Bildformate

2009-01-15T19:05:00.001+01:00

Bei Bilddateien wird zwischen 2 Gruppen unterschieden...

Vektorgrafik
Eine Vektorgrafik ist eine objektorientierte Grafik oder Zeichnung. Sie wird durch Punkte aufgebaut, die durch Linien verbunden sind. Die grafischen Elemente werden als Objekte gezeichnet.

Jedes Objekt ist hierbei eigenständig in seiner Form, Farbe, Größe und der Position in der Zeichnung. Dadurch lässt es sich jederzeit ändern und ohne Qualitätsverlust skalieren. Außerdem sind vektorenorientierte Grafiken nicht an bestimmte Auflösungen gebunden, da die Punkte für jede Auflösung neu berechnet werden. Mehr Infos zur Vektorgrafik

Bitmap-Bild
Das Bitmap-Bild (auch Rastergrafik) setzt sich aus einzelnen Bildpunkten (Pixel) zusammen. Jedes Pixel wird mit einer eigenen Farbe versehen (Erzeugung von fotorealistischen Effekten) und so angeordnet, dass sich daraus ein Muster ergibt.

Nachteil: Bei der Verkleinerung des Bildes wird das Original verzerrt und unscharf, da Pixel entfernt werden müssen um die Größe des Bildes zu verringern.

Allgemeines zur Farbenlehre

2009-01-15T15:44:00.003+01:00

Farbsysteme
RGB System: Grundfarben Rot, Grün, Blau. Werden sie von farbigem Licht gleichmäßig gemischt, entsteht der Farbton Weiß (Additive Farbmischung)

CMYK System: Grundfarben Cyan, Magenta, Gelb.
Man nennt dieses System auch Subtraktive Farbmischung, da aus den Grundfarben theoretisch Schwarz enstehen kann. (Cyan - Magenta - Yellow - Black)

Bildauflösung
Sie bestimmt, wieviele Bildpunkte auf einer bestimmten Flächen dargestellt werden. (Pixel per inch = ppi, Dots per inch = dpi). Sie darf nicht mit der Bilfschirmauflösung verwechselt werden !

Farbtiefe
Gibt an, wieviel Farben am Monitor dargestellt werden können. Aktueller Standard: 32bit (16.7 Mio Farben)

Indizierte Farben
Bei hohen Farbtiefen (16 Bit - 32 Bit) sind einzelne Farben anhand ihrer RGB-Farbwerte gekennzeichnet, bei 8 Bit (256 Farben) jedoch durch einen Index. Anno 19XX wurden daraufhin Farbpaletten entwickelt, damit jede der 3 Grundfarben gleich viel Platz eingeräumt werden konnte. Das Problem daran war, das nicht enhaltene Farben falsch dargestellt wurden. Sie wurde entweder durch eine andere Farbe ersetzt oder durch Mischung zweier Farben imitiert. (Dithering)

Da Microsoft und Apple eine unterschiedliche Farbpalette hatten kam es zu Darstellungsfehlern, worauf Netscape eine Webpalette mit von beiden Betriebssystemen genutzen Farben entwickelte. Sie hatte 216 Farben.

Heutztage ist dieses Thema jedoch veraltet, da Grafikkarten mehr als 8 Bit anzeigen können. Außnahme: Entwicklung von einer PDA kompatibelen Webseite. Dieses Zusatzgerät für Behinderte hat bisher eine max. Farbtiefe von 8 Bit.

Angabe von Farbwerten
Bei der Definition einer Farben muss angegeben werden welcher Wert (0-255) jede der 3 Grundfarben erhalten soll (Schwarz = 0/0/0). Bei HTML kann jedoch dieser Wert nicht übernommen werden, da hier die Angabe der Farbwerte mittels des Hexdezimalsystems erfolgt.

Zusatz-Tools für Webdesigner

2009-01-05T14:37:00.000+01:00

Neben den bereits genannten Tools gibt es noch weitere kleine Zusatz Tools, die bei der Erstellung und Pflege von Webseiten hilfreich sein können.

Favicon Manager (Erstellt Favicons)
Email Adresse codieren (Codiert Email Adressen - Spamsicherheit !)
CutePDF Writer (Wandelt Dateien in PDFs um)
Webmaster-Netz (Auflistung nützlicher Tools)
Firefox Erweiterungen (z.B. Web Developer Toolbar oder View Source Chart)

Diese Seiten solltet ihr auf jeden Fall bookmarken: Selfhtml & Webdesign Linksammlung. Damit möchte ich nun dieses Kapitel abschließen. Als nächstes werde ich näher auf die Farbenlehre eingehen.

Archivprogramme

2009-01-05T14:15:00.000+01:00

Archive sind Dateien, die ihrerseits Dateien enthalten, die komprimiert sind. Zu erkennen sind sie an der Dateinamenerweiterung (z.B. ZIP). Der Vorteil von Archiven sind, das zusammengefügte Dateien beieiander bleiben und sie sich schneller kopieren und versenden lassen. Vorteil: Mehr Übersicht und Zeitersparnis !

Hier einige empfehlenswerte Archivprogramme...

WinZIP (Bekanntes Archivierungsprogramm - Shareware !)
StuffIt Expander (Flexibles & kostenloses Archivierungsprogramm)
7-Zip (Kleines und schnelles Freeware Programm)
WinAce (Leistungsfähiges Archivierungsprogramm - Shareware !)

Validatoren

2009-01-05T13:58:00.001+01:00

Ein valider Quellcode ist eine der Grundvoraussetzungen für eine erfolgreiche und zeitgemässe Webseite. Durch ihn kann die Webseite von allen Interessierten fehlerfrei aufgerufen werden.

Weitere Gründe, wieso ein valider Code wichtig ist...

Kein überflüssiger Quellcode -> kürze Ladezeiten
Fehlerfreier Quellcode -> Richtige Darstellung in versch. Browsern
Webseite entspricht dem Standard
Barrierefreiheit

Zur Überprüfung stehen u.a. folgende Tools zur Verfügung...

W3C Validator (Bekannter HTML Validator)
CSS Validator (Validator für CSS)
Farbfilter (Tool zur Prüfung bei Fehlsichtigkeit)
Browsershots (Testet Webseite in verschiedenen Browsern)

Browser

2009-01-04T16:29:00.000+01:00

Der Browser von Microsoft (Internet Explorer) zählt bis dato (Stand 02.2008) zu den meist genutzten Browsern im Internet, da er als Standardbrowser mit dem Windows Betriebssystem mitgeliefert wird. Der Marktanteil im deutschsprachigen Raum beträgt ca. 67 %, wobei auf die aktuelle Version 7.0 nur ca. 17,5 % fallen. Das liegt vorallem daran das Anfänger und Selten-Surfer ihre Software nicht regelmäßig updaten.

Deswegen sollte in der Testphase neben der aktuellen Version zumindest eine Version abwärts getestet werden. Die Webseite sollte auf dem IE fehlerfrei abrufbar sein, da immerhin 2/3 der Internetnutzer dieser Browser verwenden.

Eine gute Alternative zum IE ist der Mozilla Firefox. Im deutschsprachigen Raum kommt er auf ca. 24 % Marktanteil. Die Vorteile des Firefox sind das er klein, schnell und Webstandards gut umsetzten kann. Außerdem verfügt er über nützliche Zusatzfunktionen.

Nicht unbeachtet sollte auch der schnelle Safari Browser (Marktanteil ca. 3 %) von Apple sein. Wer auf Nummer sicher gehen will kann auch den Opera Browser in die Testphase miteinbeziehen. Er wird vorallem von Usern mit einem älteren Betriebssystem genutzt. Der Marktanteil beträgt ca. 1 %.

FTP Programme

2008-12-30T16:25:00.000+01:00

FTP Programme haben 2 Funktionsbereiche. Zum einem dienen sie zum Download spezieller FTP Server aus dem Internet und zum anderen der Pflege der eigenen Webseite, d.h. sie werden gebraucht um Dateien zum Server zu übertragen, Verzeichnisse zu manipulieren und lokale Veränderungen problemlos auf die Webseite zu übertragen.

Für das erste Einsatzgebiet ist es wichtig, dass der FTP Client die Möglichkeit bietet Download Listen anzulegen und zu verwalten und unterbrochene Downloads wieder aufzunehmen.

Für das Website Management ist es wichtig, das das FTP Programm die Fähigkeit besitzt Verzeichnisse automatisch auf veränderten Dateien abzugleichen und diese zu aktualisieren. Manipulationen auf dem Server wie Dateibewegungen, Änderungen von Zugriffsrechten sind hier ebenfalls wichtig.

Empfehlenswerte FTP Programme sind...

Perfect FTP (Sehr zuverlässig & kostenlos !)
CuteFTP (Umfangreiches FTP Tool- Shareware !)
Filezilla (Leistungsstarkes Open Source FTP-Programm)
WS_FTP (Beliebter Datentransferclient)

Bild- und Grafikprogramme

2008-12-30T14:49:00.000+01:00

Mit Bild- und Grafikprogrammen kann man in der Regel sowohl Fotos bearbeiten wie auch Grafiken erstellen. Die Auswahl ist hier ziemlich gross, die sich einerseits im Preis wie auch in den Funktionalitäten erheblich unterscheiden.

Einige der bekanntesten Programme sind...

Fireworks (Allround Grafikprogramm und unsere Empfehlung !)
Ulead (Professionelles Bildbearbeitungsprogramm)
Gimp (Kostenloses Profi-Bildbearbeitungstool)
Photoshop (Professionelles Bildbearbeitungsprogramm)

Neben Bild- und Grafikprogrammen gibt es auch Image-Viewer. Sie ermöglichen es Dateiordner nach Bildern zu durchsuchen und diese in Miniaturansicht darzustellen. Dabei können auch komprimierte Dateien betrachtet werden. Sie bieten außerdem häufig Bearbeitungstools wie z.b. Helligkeitseinstellung, Kontrast, Farbsättigung etc. Erwähnenswert ist hier die kostenpflichtige Sofware von ACDSee wie auch der kostenlose Image-Viewer Irfan View.

Text- und HTML-Editoren

2008-12-26T15:20:00.001+01:00

Texteditoren oder auch ASCII Editoren verfügen über eine Buttonleiste und diverse Menübefehle um HTML Tags in den Text einzufügen. Bei diesen Editoren erscheinen im Gegensatz zu WYSIWYG Editoren die Tags sichtbar im Text.

WYSIWYG Editoren bieten wie die ASCII Editoren den selben Funktionsumfang, können aber wie bereits angesprochen die HTML Tags ausblenden. Der Text wird bei diesen Editoren wie im Browser angezeigt, daher auch der Name What you see is what you get.

Mittlerweile wird häufig eine Mischform angeboten, die sowohl das Arbeiten im Quellcode als auch in der Entwurfsansicht ermöglicht.

Hier eine kleine Auswahl...

Dreamweaver (Marktführer in diesem Bereich und unsere Empfehlung !)
Ultra Edit (Leistungsfähiger Allround-Editor)
Code Genie (Kostenloser Texteditor für Programmierer & Webdesigner)
NVU Composer (Umfangreicher Freeware Editor)
Phase 5 (Freeware HTML Editoren für Privatanwender)
SuperHTML Web Studio (Professioneller HTML Editor)

Software Tools

2008-12-24T15:25:00.000+01:00

Software Tools können die Arbeit eines Webdesigners bedeuted erleichtern, vorausgesetzt man beherrscht diese ! Welche Tools das genau sind möchte ich hier kurz festhalten.

Text- bzw. HTML-Editoren
Bild- bzw. Grafikprogramme
FTP Programme
Browser
Validatoren (online W3C.org)
Archivprogramme
Zusatztools (Plugins etc.)

Mehr Infos zu den jeweiligen Tools findet ihr in die nächsten Artikeln.

Prioritätsstufen der Barrierefreiheit

2008-12-21T15:27:00.002+01:00

Das W3C hat für die Barrierefreiheit 3 Prioritätsstufen festgelegt. Priorität I muss erfüllt sein, um die Nutzung einer Webseite für eine bestimmte Anzahl von Nutzern nicht unmöglich zu machen. Priorität II sollte und Priorität II kann erfüllt sein. I und II werden laut Behindertengleichstellungsgesetz zugesammengefasst. Daher gibt es nur 2 Prioritätsstufen.

Die Prioritätenliste umfasst bei beiden Stufen 14 Anforderungen.

Checkliste Priorität I (Neue und überarbeitete Webseiten)
Checkliste Priorität II (Navigation und Einstiegsangebote)

Für den Webdesigner bedeutet diese Liste bei der praktischen Umsetzung u.a.

Aussagekräftige ALT Texte bei Grafiken
Klare, ausreichende Farbkontraste
Inhalte und Layout voneinander trennen
W3C Standards einhalten
fehlerfreien Quellcode erstellen
Strukturen sinnvoll aufbauen
externe CSS-Dateien nutzen
Sprachwechsel deutlich erkennbar machen
Tabellen nicht zur Layoutgestaltung verwenden
Testen auf fehlerfreie Darstellung mit älteren Browsern
Ladegeschwindigkeit überprüfen
Einleuchtende Navigation einbinden
Für Schriften relative Größen verwenden (Skalierbarkeit !)
Keine Grafiken für Texte verwenden
Keine blinkende Schriften
Bei Multimedia Elemente (Flash etc.) darauf achten, das die Seite auch ohne deren Anzeige noch funktioniert
Tasturkurzbefehle einbauen (Alternative zu Mausklicks)

Mehr zum Thema Barrierefreiheit gibts auf wob11.de.

Abschließend kann man sagen, das ein Webdesigner zumindest barrierearm arbeiten sollte. Hier einige Gründe die dafür sprechen...

Gute Marktpositionierung
Einfache Aktualisierbarkeit der Inhalt und Gestaltung
Programmierung ist zukunftsicher (W3C Standard)
Potentielle Gruppen werden nicht ausgeschlossen
Bessere Indexierung durch Suchmaschinen
Weniger Probleme bei der Nutzung von Firewalls

Das Thema Barrierefreiheit wäre hiermit abgeschlossen. Bevor ich mit dem Kapitel Farbenlehre starte werden ich noch etwas ausfürlicher auf die Software Tools eingehen. Mehr dazu in den nächsten Artikeln.

Barrierefreies Webdesign

2008-12-21T15:24:00.000+01:00

Das Internet ist heutzutage aus dem Alltag nicht mehr wegzudenken. Gerade für Behinderte ist es oft eines der wichtigsten Kommunikationsmittel mit der Außenwelt. Daher wird es von ihnen im Durchschnitt öfters genutzt als von Nichtbehinderten. Das Problem hierbei ist, das viele Nutzer das Internet nur eingeschränkt nutzen können, da sie auf Barrieren treffen.

Für diese Zielgruppe sollte ein barrierefreies Internet realisiert werden.

Barrierefreies Internet bezeichnet Web-Angebote, die von allen Nutzern unabhängig von körperlichen oder technischen Möglichkeiten uneingeschränkt (barrierefrei) genutzt werden können. Barrierefreiheit schließt sowohl Menschen mit und ohne Behinderungen, als auch Benutzer mit technischen (z. B. Textbrowser oder PDA) oder altersbedingten Einschränkungen (z. B. Sehschwächen) sowie Webcrawler ein, mit denen Suchmaschinen den Inhalt einer Seite erfassen. Da dies aufgrund der unzähligen weichen, individuell geprägten Barrieren nicht vollständig erreicht werden kann, spricht man auch von barrierearm oder zugänglich.

Quelle: Wikipedia.de

Öffentliche Einrichtungen sind seit Ende 2005 durch die BITV dazu verpflichtet behinderten Menschen freien und uneingeschränkten Zugang zu Informationen zu gewähren. Bei Unternehmen rückt dies in den letzten Jahren ebenfalls in den Vordergrund. Neben der Gleichbehandlung und Integration spielt hier noch ein anderer Faktor eine wichtige Rolle - Behinderte sind potentielle Kunden ! Durch Barrieren im Internetauftritt können diese aber ganz oder nur teilweise auf Angebote zugreifen.

Daher sollte der Internetauftritt einer Firma im besten Fall barrierearm sein. Er sollte so realisiert sein, das alle wichtigen Informationen mit verschiedenen Betriebssystemen, Browsern, Auflösungen, Zusatzgeräte (z.B. Screenreader), Zugangsvoraussetzungen (DSL, Modem etc.) korrekt angezeigt werden.

Folgende Fehler, die häufig bei der Planung einer Webseite gemacht werden sollten auf jeden Fall vermieden werden, wenn man die Absicht hat eine barrierearme Webseite zu realisieren.

keine Alt Texte für Grafiken
optimieren auf bestimmte Browser und Auflösungen
Text als Grafik eingebunden
zu wenig Kontrast zwischen Schrift & Hintergrund
falsche Farben (Grün-Rot Blindheit)
feste Bildschirm- und Schriftgrößen

Für den Webdesigner bedeutet dies, das er neben einer ausführlichen Testphase mittels verschiedenster technischer Voraussetzungen auch ein Test zur Zugänglichkeit (BITV-Test) in seine "To-Do Liste" einplanen sollte. Die Zertifizierung ist im Regelfall kostenpflichtig, eine BITV Selbstbewertung kann aber unter bitvtest.de vorgenommen werden.

Styleguide

2008-12-19T11:17:00.000+01:00

Das Styleguide ist ein Dokument, in dem alle auf der Webseite gemachten Vorgaben zur formalen und inhaltlichen Gestaltung aufgeführt sind um ein einheitliches Erscheinungsbild zu erreichen und zu bewahren.

Durch den Guide sind nachträgliche Änderungen oder Ergänzungen einfach umsetzbar. Ein fiktives Styleguide könnte folgende Angaben beinhalten...

Layout (Seitenaufbau, Aufteilung der Inhalte etc.)
Texte (Formatierungsart, Schriftart etc.)
Grafiken (Größe, Format, Farbtiefe, Logos...)
CSS (Namen der CSS Dateien, Auflistung der Formatierungen)
Dokumentenbenennung
Verzeichnisstruktur
Vorgeschriebene Angaben

Wenn der Styleguide erstellt ist kann der Auftrag abgeschlossen werden. Der Kunde erhält neben diesem alle Dateien und Zugangsdaten auf CD. Sollten die zukünftigen Aktualisierung (im Vertrag festgehalten) der Webseite durch den Kunden erfolgen muss dieser ggf. in die Progammierung der Webseite eingeführt werden.

Der Bereich Projektorganisation wäre hiermit abgeschlossen. Im nächsten Artikel werde ich auf das barrierefreie Webdesign näher eingehen.

Endpräsentation

2008-12-19T11:13:00.000+01:00

Eine richtige Vorbereitung ist bei der Endpräsentation zwingend, wenn man nicht in eine peinliche Situation (Keine Antwort auf Frage des Kunden) verwickelt werden will. Wie bei der Entwurfspräsentation sollten hier alle entscheidungsbefugte Mitarbeiter anwesend sein.

Die Seite sollte bei der Endpräsentation auf jeden Fall online präsentiert werden. Außerdem sollte alle Daten der Webseite auf Datenträger verfügbar sein. Sind bei der Präsentation 1-2 Personen anwesend ist ein PC als Vorführmedium ausreichend, bei mehreren Personen sollte aber ein Projektor in Betracht gezogen werden.

Im Idealfall wünscht der Kunde nach der Präsentation keine Änderungen an der Seite. Der Auftrag kann damit abgeschlossen werden. Im Normalfall sind aber Änderungen an der Webseite zu machen. Ein Grund dafür kann sein, das sich kurzfristig Inhalte geändert haben, die überarbeitet werden müssen. Es kann auch durchaus vorkommen, das der Kunde bis zur Präsentation kein klares Bild vom fertigen Produkt hatte und nun Änderungswünsche hat. Hierfür können mangelnde Zusammenarbeit zwischen Kunden und Designer bzw. ungenaue Vorschläge seitens des Kunden die Gründe sein. Dieses Problem lässt sich durch eine gründliche Projektplanung verhindern.

Falls Änderungen nötig sind sollte eine Änderungs- bzw. Korrekturliste erstellt und ein neuer Präsentationstermin fixiert werden. Bevor Inhalte oder technische Details geändert werden sollte eine Sicherungskopie des Originaldokuments erstellt werden.

Der beschriebene Ablauf wird dann solange wiederholt bis der Kunde mit den Resultat zufrieden ist. Die Anzahl der Änderungen sollten vonseiten des Auftraggebers schriftlich im Vertrag beschränkt werden damit sich dies nicht in die Länge zieht. Nachbesserungen, die der Webdesigner zu verschulden hat gehen natürlich auf seine Kosten. Ist die Webseite fehlerfrei fertiggestellt und vom Kunden abgesegnet wird sie publiziert.

Beta Version

2008-12-17T14:26:00.000+01:00

Die Beta Version beschreibt die gesamte Webseite in der Zeit, in der sie auf programmiertechnische Fehler überprüft wird. Sie kann frei zugänglich oder einem bestimmten Personenkreis vorbehalten bleiben.

Gefundene Fehler sollte in einem Testprotokoll festgehalten werden. Dieses sollte folgende Punkte beinhalten...

Name des Testers
Datum und Uhrzeit
Browserversion
Betriebssystem
Wo trat der Fehler auf ?
Welcher Bedienungsschritt führte zum Fehler ?

Der letzte Punkt ist hierbei besonders wichtig um den Webdesigner die Möglichkeit zu geben den Fehler zu reproduzieren und die Fehlerquelle schneller zu finden.

Folgende Punkte sollten beim Beta Test überprüft werden...

Barrierefreiheit
Browserkompatibilität
Downloadzeit der Webseite
Funktion der Links
Funktion der Multimedia Elemente
Funktion von Zusatzelementen (z.B. Gästebuch)
Usability

Nach erfolgreichem Abschluss der Beta Phase ist die Seite nun bereit für Endpräsentation. Was dort beachtet werden sollte erfahrt ihr im nächsten Artikel.

Testphase

2008-12-15T13:25:00.000+01:00

Nun sind wir in der finalen Phase angekommen. Wie bereits erwähnt geht es hier ausschließlich darum die Website auf Herz und Nieren zu testen und diese dann zu publizieren.

Eine umfangreiche Testphase ist nötig um Pannen bei der Endpräsentation zu vermeiden. Sie erfolgt online (Beta Version), am besten über einen nicht öffentlichen Testserver. Zum Hochladen der Daten auf den Server wird ein FTP Programm (z.B. CuteFTP) verwendet, das auch zur Verwaltung und Aktualisierung der Webseite dient.

Umsetzung und Produktion

2008-12-15T13:24:00.001+01:00

Phase 4 kann kurz und knapp beschrieben werden. Hier werden die Inhalte und die Grafiken in die erstellen Vorlagen aus Phase 3 eingefügt und in die entsprechenden HTML Datei abgespeichert. Danach folgt die Feinformatierung.

Hier gilt: Je besser die Vorarbeit desto reibungsloser ist die Umsetzung.

Individuelle Anpassungen sind hier nicht ausgeschlossen (Überarbeitung der Grafiken, Textanordungen etc.). Mit steigender Erfahrung dürfte sich dies aber minimieren.

Sind alle Inhalte eingepflegt und entspricht das Erscheinungsbild der Webseite den Vorstellungen des Webdesigners (und des Kunden) muss die Seite ausgiebig getestet werden. (Phase 5) Besonderes Augenmerk sollte hier auf die Funktionalität und das Layout gelegt werden. Mehr dazu im nächsten Artikel.

Bearbeitung der Grafiken

2008-12-13T15:36:00.000+01:00

Nun steht die Layoutstruktur und die Bearbeitung der Grafiken kann beginnen. Hierbei handelt es sich zum einen um Grafiken, die der optischen Gestaltung dienen (Hintergrund etc.), zum anderen um Grafiken die zum Inhalt der Webseite zählen (z.B. Produktbilder).

Bei der Bearbeitung sollte folgende Punkte beachtet werden...

Originale aufbewahren
in verlustfreien Formaten speichern (z.B BMP)
Richtiges Format wählen (JPG, GIF, etc.)
Sicherungskopien speichern
Datei für spätere Bearbeitung abspeichern (bei Fireworks png Format)

Ist dies erledigt kann in Phase 4 übergegangen werden.

Layout - Flexibel oder Fest ?

2008-12-13T15:35:00.000+01:00

Wir haben uns nun für ein (X)HTML Layout entschieden aber eine Frage bleibt noch offen. Soll das Layout flexibel oder fest sein ?

Beim festen Layout (Frozen Design) werden absolute Größenwerte benutzt (z.B. Auflösung 1024x768). Länge und Breite sind daher fixiert. Dies hat den Nachteil das bei größeren oder kleineren Auflösungen das Layout nicht mehr schön wirkt. Man sieht z.B. nur ein Teil der Webseite oder es erscheint viel Leerraum rund um die Seite. Außerdem kann es das ganze Layout zerschlagen, wenn der Besucher über den Browser die Schriftgröße verändert.

Ein flexibles Design (Liquid Design) verwendet relative Größenangaben, d.h. es passt sich der Größe des Bildschirms (Auflösung) an. Der Vorteil liegt hier eindeutig in der Benutzerfreundlichkeit, da die Schriftgröße im Browser individuell erhöht werden kann ohne das das Layout darunter leidet.

Als Alternative kann auch ein Jelly Design (Mischform) verwendet werden. Hierbei wird das äußere Rahmendesign in einer festen Größe angegeben um einen min/max Darstellungbereich zu gewährleisten. Andere Werte werden in relativer Größe definiert.

Welche Form man nun verwendet bleibt Geschmacksache. Ich würde hier zur Mischform tendieren.

Erstellen der Vorlagen

2008-12-12T15:19:00.000+01:00

Bei der Erstellung von Vorlagen wird entschieden in welcher Form man das Layout realisieren will. Zur Auswahl stehen hier Tabellen & Frames oder CSS und (X)HTML.

Tabellen und Frames waren früher ein beliebtes Konstruktionsmittel zur Gestaltung. Webdesigner sollten diese aber nicht mehr verwenden. Hier einige Nachteile...

Tabellen

Quellcode zu gross -> lange Ladezeit
Plege und Erweiterung der Seite ist schwierig
Fehlersuche mühsam wegen grossen Quellcode
Nicht W3C konform (keine Gestaltungsform)
Nicht barrierefrei

Frames

Suchmaschinen haben Probleme mit der Indexierung
Favouriten lassen sich schlecht generieren
Verweise auf Unterseiten müssen extra erstellt werden
Probleme beim Drucken einer Seite
Nicht barrierefrei

Aufgrund dieser Nachteile sollte daher bei der Layouterstellung CSS (Cascading Stylesheets) und X(HTML) verwendet werden. Hierbei werden Inhalt und Design weitesgehend voneinander getrennt. Alle Angaben über das Aussehen und die Positionierung der Seitenelemente werden in externen CSS-Dateien gemacht. Die HTML Seiten beinhalten nur Inhalte, die in einzelne Container (DIVs) gepackt werden.

Die Vorteile von CSS und X(HTML) sprechen für sich...

Webseite ist barrierefrei
Kleiner Quellcode -> kurze Ladezeit
Pflegeleicht
Layout wird nicht bei jeder Seite neu geladen
Layout kann komplett über CSS Dateien verändert werden
Suchmaschinenfreundlich
übersichtlicher HTML Code
mehr Gestaltungsmöglichkeiten (v.a. Schriftbereich)

Die Nachteile sind hier überschaubar...

Probleme mit der Darstellung bei unterschiedlichen Browsern
Erhöhter Zeitaufwand beim Testen und Optimieren

Für welche Technik man sich letztendlich entscheidet hängt individuell vom Auftraggeber bzw. der Webseite sowie den Zielgruppen ab. Auf längere Sicht sollte aber (X)HTML & CSS als Konstruktionsmittel in Betracht gezogen werden.

Gitter-/Netzmodell

2008-12-11T14:40:00.000+01:00

Beim Gitter- oder auch Netzmodell gibt es im Gegensatz zur hierarchischen Organisation keine Ebenen. Alle Seiten sind hier miteinander verbunden. Dieses Modell kann bei Webseiten, die außschließlich Hauptkategorie bzw. wenigen Unterkategorien beinhalten angewendet werden.

Zu beachten gilt, das bei der Navigation alle Haupt- und Unterkategorien auf jeder Seite aufgeführt werden müssen. Dies ist zu einem sehr pflegeintensiv und enorm fehleranfällig und daher nur bedingt zu empfehlen.

Damit wäre Phase 2 abgeschlossen. In Phase 3 (Vorlagen und Grafiken) werden ich näher auf die Vorbereitung der Vorlagen und die Bearbeitung der benötigten Grafiken eingehen.

Hierarchische Organisation

2008-12-11T14:37:00.000+01:00

Die hierarchische Organisation ordnet die Informationen "vom Groben ins Feine". Sie beginnt mit der Startseite und verzweigt sich in mehrere verschiedene Ebenen (Oberkategorie -> Unterkategorie -> zugeordnete Seiten).

Diese Form der Darstellung wird bei Webseiten sehr häufig verwendet, da die Informationen hier übersichtlich dargestellt werden. Außerdem hat der Betrachter durch die hierarchische Anordung keine Nachteile in seiner Bewegungsfreiheit zu befürchten wie es z.b. in der linearen Organisation der Fall ist.

Parallele Organisation

2008-12-09T15:07:00.000+01:00

Die parallele Organisation verbindet mehrere lineare Abfolgen mit gemeinsamen Nenner. Durch diese Art der Darstellug kann z.B. ein Thema verschieden "beleuchtet" werden oder verschiedene Hersteller mit ihren jeweiligen Produktserien vorgestellt werden.

Lineare Organisation (Buchmetapher)

2008-12-09T15:06:00.000+01:00

Die lineare Organisation ist die einfachste Form der Informationsdarstellung. Sie kommt aus dem Printbereich und wird auch Buchmetapher genannt. Informationen werden hier linear aneinanderhängend dargestellt.

Ein linearer Aufbau ist für Webseiten nicht zu empfehlen, da er nicht übersichtlich ist und den Betrachter in seiner Bewegungsfreiheit einschränkt. Anwendung findet diese Darstellung in bestimmten Bereichen (z.b. Diashow, Produktshow etc.) einer Webseite.

Organisationsmodelle

2008-12-08T14:32:00.001+01:00

Organisationsmodelle haben den Nutzen das gesammelte Material zu organisieren. Reine Formen dieser Modelle werden hierbei selten benutzt, da das Modell von der Information abhängig ist. Daher werden meist Mischformen (Kombinationen) benutzt.

Folgende Modelle werden hierbei unterschieden:

lineare/sequentielle Organisation
parallele Organisation
hierarchische Organisation
Gitter-/ Netzmodell

Erläuterungen zu den jeweiligen Modellen folgen in den nächsten Tagen.

Anlegen der Verzeichnisstruktur

2008-12-06T16:20:00.000+01:00

Ein durchdachter Aufbau der Verzeichnisse ist wichtig und trägt zu einer stimmigen Strukturierung bei. Durch das Anlegen einer Verzeichnisstruktur wird für eine gute Übersicht sowie für eine einfache Pflege und Aktualisierbarkeit der Webseite gesorgt. Die Haupt-/ Unterkategorien sollte hierbei stimmig sein.

Eine zweckmäßige und einfache Ordnerstruktur könnte wie folgt aussehen:

Hauptorder (hier projekt)

bilder
cgi-bin
html
roh

Die Startseite (index.html) sollte hierbei im Hauptordner abgespeichert werden. Alle weiteren HTML Dokumente werden im Ordner html oder in mehreren Unterordern, die sich an Ober-/ Unterkategorien orientieren abgespeichert. In der Praxis könnte dies so aussehen...

Oberkategorie (hier html)

aktuell
events
impressum
kontakt
preise
produkte
team

Der Ordner bilder enthält alle für die Verwendung im Internet bearbeiteten Bilder und Grafiken. Der Ordner cgi-bin ist optional. Er enthält Dokumente die in serverseitigen Scriptsprachen (cgi, php etc.) geschrieben sind. Der Ordner roh umfasst alle noch nicht bearbeiteten Dateien (Bilder und Grafiken). Die Rohfassung sollten hierbei erst nach Beendigung des Projekts gelöscht werden.

Bei der Namensgebung der Verzeichnisse und Dateien sollte darauf geachtet werden, das diese selbsterklärend (sprechend) und kurz sind (keine Umlaute und Sonderzeichen). Eine sinnvolle Benennung kann später das Ranking bei Suchmaschinen deutlich erhöhen.

Außnahme: Startsteite muss generell index.html heissen.

Außerdem sollte auf eine einheitliche Schreibweise (Kleinschreibung) geachtet werden damit bei der späteren Verlinkung der Seiten keine Fehler auftreten.

Sichtung des Rohmaterials

2008-12-05T15:02:00.000+01:00

Unter Rohmaterial versteht man Informationen, die der Kunde in Form von Texten, Bildern etc. zur Verfügung stellt. Die Sichtung hat den Zweck Ordnung zu schaffen. Dazu gehört das Zusammenfassen der Informationen in logische Einheiten. Außerdem sollten Inhalte und Zusammenhänge erfasst werden.

Der Webdesigner bekommt durch die Sichtung des Rohmaterials eine erste Vorstellung welche Kategorien die Webseite haben könnte und welche verschiedene Darstellungsformen benötigt werden bzw. sinnvoll sind.

Neben der Sichtung ist außerdem empfehlenswert, dass anhand der Gesprächsprotokolle und Notizen eine Art Brainstorming abzuhalten um Stichwörter rund um das Unternehmen zu sammeln. Dies kann optional auch mit dem Kunden erarbeitet werden.

Um die bereitgestellten Information richtig präsentieren zu können sollte der Webdesigner an dieser Stelle sich bereits Gedanken über die Darstellungsform machen, den nicht jeder Informationstyp ist für jede Darstellungsform geeignet.

Hier einige Beispiele...

IT: Informationen ohne weitere Unterteilung DF: Fließtext
IT: Definitionen DF: Wörterbuch-Optik
IT: Zeitliche Abläufe DF: Zeitschiene/Zeitstrahl
IT: Fotos DF: Fotoalbum oder Diashow
IT: geographische Darstellung DF: Landkarte
IT: Aufzählungen DF: Listen
IT: Gegenüberstellungen DF: Tabellen

Zuletzt sollten Material und gesammelte Infos in logische Zusammenhänge gebracht werden um eine sinnvolle Strukturierung zu ermöglichen. Die Inhalte sollten in passende Haupt- und Unterkategorien zusammengefasst werden.

Präsentation des Entwurfs

2008-12-03T15:04:00.000+01:00

Der Entwurf ist nun fertig und bereit für die Präsentation. Wo diese stattfindet sollte dem Kunden überlassen werden. Ausschlaggebend ist aber, das alle entscheidungsbefugte Mitarbeiter anwesend sind um Unklarheiten im Entscheidungsprozess und Terminverzögerungen zu verhindern.

Sollte der Kunde nach Sichtung des Entwurfs eine Überarbeitung oder gar Neuerstellung wünschen ist eine neuerliche Präsentation unumgänglich. Umfang und Anzahl der Änderungen sollten vorab festgelegt werden.

Besonders wichtig ist, das alle Punkte des Gesprächs in schriftlicher Form (Protokoll) festgehalten werden. Der Webdesigner kann daraus den vorraussichtlichen Arbeitsaufwand ableiten was als Grundlage für das Verfassen des Vertrags dient.

Außerdem sollten alle Punkte aus dem 1. Kundengespräch auf ihre Gültigkeit überprüft werden. Besonders wichtig ist hier der Bereich der Zeitplanung, da sich hier häufig kurzfristige Änderungen ergeben.

Falls der Auftrag erst bei der Präsentation vergeben wurde sollten vom Webdesigner erst die Punkte Zeitplanung und Aufgabenkatalog erledigt werden bevor mit der Sichtung des Rohmaterials begonnen wird.

Erstellen eines Entwurfs

2008-12-02T15:16:00.000+01:00

Ein Entwurf oder auch Prototyp sollte alle bisher besprochenen Wünsche und Notwendigkeiten aufgreifen. Der Entwurf soll dem Kunden das Aussehen der späteren Webseiten veranschaulichen. Programmtechnische Details spielen hier noch keine Rolle.

Für den Webdesigner ist an dieser Stelle der Entwurf ebenfalls wichtig um nicht am Anfang schon zu viel Zeit in die Planung eines Layouts zu investieren, das ggf. dem Kunden gar nicht zusagt.

Layout und Struktur sollte beim Entwurf klar erkennbar sein. Die Navigationsstruktur der Informationsbereiche sollte eindeutig und intuitiv nochvollziehbar sein. Ein Prototyp sollte aus einer Startseite und 1-2 Folgeseiten bestehen und repräsentativ sein. Außerdem sollten sich die Seiten im Inhalt unterscheiden.

Konzeption und Gestaltung

2008-12-02T15:14:00.000+01:00

In Phase 2 (Konzeption und Gestaltung) werden die genauen Wünsche des Kunden festgehalten. Das betrifft sowohl die optische Umsetzung wie auch die inhaltliche und technischen Details.

Ein wichtiger Punkt ist das Festlegen der Sitestruktur. Zusammen mit dem Kunde sollte hierbei eine Inhaltsgliederung erarbeitet werden.

Das Ziel dieser Phase ist eine funktionelle, ansprechende, intuitiv bedienende Webseite für den Kunden zu planen und zu realisieren. Der erste Punkt wird hier die Erstellung eines Entwurfs sein. Mehr dazu im nächsten Artikel.

Flexibilität in der Zeitplanung

2008-11-30T15:46:00.000+01:00

Durch unvorhergesehene Probleme oder plötzliche Änderungswünsche des Kunden muss auch die beste Zeitplanung früher oder später überarbeitet werden. Der Webdesigner sollte hier Coolness bewahren und den bestehenden Zeitplan an die neuen Umstände anpassen.

Ggf. sollte er das Projektende verschieben. Dies sollte aber nur nach Absprache mit dem Kunden geschehen. Für eine Verschiebung sollte der Webdesigner gute Gründe vorbringen um eine Terminverschiebung zu erreichen. Faule Ausreden bringen einen hier nicht weiter.

Größere Zeitprobleme lassen sich allerdings vermeiden wenn der Zeitplan von Anfang an flexibel gestaltet wird. Es ist ratsam die anstehenden Aufgaben so zu planen, dass sie von möglichst wenig anderen Aufgaben abhängig sind. Durch diese Gestaltung lassen sich die einzelnen Module zeitlich verschieben. Sie können z.B. in Leerlaufphasen eingesetzt werden, die während des Arbeitsprozesses enstehen können.

Hiermit wären nun alle Inhalte von der 1. Phase Vorlauf und Planung besprochen. Im nächsten Artikel werde ich näher auf die 2. Phase Konzeption und Gestaltung eingehen.

Vorwärtsplanung / Rückwärtsplanung

2008-11-30T15:43:00.000+01:00

Diese Planungsvarianten kommen zum Einsatz wenn entweder Projektstart oder Projektende nicht zeitlich definiert sind.

Bei der Vorwärtsplanung steht der Zeitpunkt fest, zu dem mit dem Projekt begonnen wird. Nach Übertrag des Aufgabenkatalogs und Einplanung von Zeitreserven (bei kleinen Projekten) wird das Datum des Projektendes ersichtlich.

Bei der Rückwärtsplanung dagegen ist das Projektende zeitlich fixiert. Hier kann anhand des Aufgabenkatalogs ermittelt werden wann spätestens mit dem Projekt begonnen werden sollte. Diese Art der Zeitplanung wird bei Projekt aber nur selten zur Anwendung kommen, da dem Webdesigner meistens zu wenig Zeit zur Verfügung steht um sich den Beginn des Projekts selbst aussuchen zu können.

Aufgabenkatalog

2008-11-21T15:27:00.000+01:00

Der Aufgabenkatalog ist hilfreich um einen brauchbaren Aufgaben- und Zeitplan erstellen zu können. Er sollte folgende Punkte enthalten...

Bezeichnung der Aufgabe (z.B. Bildbearbeitung)
Anfang und Ende der Aufgabe
Zeitbedarf
Abhängigkeitsstruktur

Anfang und Ende sollten klar definiert sein um die Dauer der Aufgabe (Zeitbedarf) errechnen zu können. Die Abhängigkeitsstruktur gibt ab, welche Aufgaben vorher erledigt werden müssen um mit der eigentliche Aufgabe beginnen zu können bzw. welche anderen Aufgaben von der Fertigstellung der beschriebenen Aufgabe anhängig sind.

Bei der Erstellung des Aufgabenkatalogs sollten keine Zeitreserven eingeplant werden, da der Zeitplan bei umfangreichen Projekten dadurch sehr ungenau werden kann.

Wichtiger Fixpunkt der Zeitplanung sollte die Testphase sein. Hier sollte wie im letzten Artikel Zeitplanung Arbeitsschritte erwähnt zumindest 20% der Projektdauer veranschlagt werden.

Zeitplanung Arbeitsschritte

2008-11-20T14:24:00.000+01:00

Die Zeitplanung ist für den Webdesigner das A und O. Eine erfolgreiche Projektorganisation ist immer davon abhängig wie gut die zur Verfügung stehende Zeit eingeteilt wird. Webdesign Aufträge sind in den meisten Fällen terminabhängig. Daher sollte man seine Zeit so effektiv wie möglich planen um den Kunden nicht zu verärgern.

Deshalb ist ein wichtiger Schritt der Projektplanung die Erstellung eines Zeitplans. Die Dauer des Projekts kann ja nach Umfang stark variieren. Unbedingt muss darauf geachtet werden, dass eine genügend lange Testphase von Beginn an eingeplant wird.

Als Grundlage für alle weiteren Zeitplanungen sollte der Webdesigner eine Liste mit häufig vorkommenden Arbeitsschritten verwenden. Aus ihr wird die jeweilige Dauer ersichtlich mit der man grob einschätzen kann wie lange ein Projekt dauern wird.

Zu den Arbeitsschritten zählen...

Konzeptionierung (Je nach Umfang bis 2 Wochen)
Screen Design (1-2 Tage je Seite)
Bildbearbeitung (Bei schlechten Vorlagen bis zu 1 Std. pro Bild)
Erstellen einer HTML Seite (Bis zu 1 Tag je HTML Seite)
(JS) Progammierung (Je nach Umfang bis zu 1 Tag je Seite)
Testphase (mindestens 20 % der Projektdauer)

Die Dauer des einzelnen Arbeitschritte hängt sehr stark vom Wissen und der Erfahrung des Webdesigners ab. Die Angaben in () können als grober Anhalt dienen. Bei unerfahrenen Webdesignern können sich diese Zeiträume merklich vergrößern. Die Dauer eines Projekts ist außerdem immer davon abgängig, wie flexibel ein Kunde mit seinen Terminen ist, da die einzelnen Arbeitsschritte häufig von einer Entscheidung des Kunden abhängig sind.

Erstes Kundengespräch

2008-11-17T15:34:00.000+01:00

Nun ist es soweit. Der Webdesigner hat das erste Gespräch mit dem Kunden. Auf was sollte man hierbei achten ? Folgende Punkte sind ausschlaggebend.

Erwartungshaltung des Kunden feststellen
Wünsche des Kunden definieren bzw. herausarbeiten
Umfang des Entwurfs festlegen
Abklären wieviel Änderungen der Kunde am Entwurf fordern darf
Terminabsprache wann der Entwurf präsentiert werden soll
Bei Einbinden eines CD (z.B. Firmenlogo) muss dies in einem geeigneten Format übergeben werden

Nach dem Gespräch sollte ein Gesprächsprotokoll angefertigt werden, das dem Kunden zugeschickt wird. Außerdem sollte der Vertrag aufgesetzt werden, der spätestens beim zweiten Gespräch vom Kunden unterschrieben werden sollte. Falls der Kunde noch keine Domain registriert bzw. ein Webhosting Paket bestellt hat wird dies im Auftrag des Kunden vom Webdesigner erledigt.

Recherche

2008-11-14T15:34:00.002+01:00

Vor dem ersten Kundengespräch sollte der Webdesigner eine Recherche durchführen. Hier wird wiederrum vorausgesetzt das Daten zum Tätigkeitsbereich und Name des Unternehmens vorliegen.

Durch eine Vorabrecherche kann man beim 1. Kundengespräch einen kompetenten Eindruck hinterlassen, da man bereits Infos zum Unternehmen / Markt gesammelt hat.

Welchen Zweck hat eine Recherche ?

Dient zur Einschätzung wie zahlreich und in welcher Form sich Konkurrenzfirmen mit ihren Produkten / Dienstleistungen präsentieren.
Sie ist notwendig um nicht am Markt vorbei zu planen und zu gestalten.
Die Einteilung des Informationsangebots bei Internetauftritten von Konkurrenzfirmen kann bei der späteren Planung der Kategorien Anregungen geben.

Morgen werde ich näher auf das 1. Kundengespräch und was man dabei beachten muss eingehen.

Fünf Phasen Modell

2008-11-08T14:42:00.000+01:00

Ich möchte heute auf das Fünf Phasen Modell näher eingehen. Dieses differenzierte Modell gliedert sich in folgende Phasen.

Vorlauf und Planung
Konzeption und Gestaltung
Vorlagen und Grafiken
Umsetzung und Produktion
Test und Publikation

Die 1. Phase beschäftigt sich mit der Planung und Spezifikation und teilt sich in folgende Unterpunkte ein:

Projektziel und Intention
Zielgruppe
Umfang
Inhalt
Einteilung der Veröffentlichungsstufen
Zeitrahmen und Kostenabsprache

In der 2. Phase geht es primär um die Strukturierung der Inhalte und um deren optisch sinnvolle Darstellung. Als Basis dienen hier die Ergebnisse der 1. Phase.

Behandelt wird in dieser Phase u.a.

Ausarbeitung von 1 bis 2 Designvorschlägen
Entscheidung über Farb- und Schrifteinsatz sowie Seitenaufbau
Corporate Design
Formen/Gestaltung der Inhalte
Struktur zur Dateiablage
Namenskonventionen (Benennung der Dateien & Bilder)
Sitestruktur

In der 3. Phase wird dann der endgültige, vom Auftraggeber abgesegnete Entwurf der Webseite umgesetzt. Basis hierfür stellen die am Ende der 2. Phase beschlossen Spezifikationen für Aufbau, Umfang und Struktur der Webseite dar.

Praktisch bedeutet dies, das die entsprechenden Vorlagen mit einem HTML-Editor zu erstellen sind und benötigte Grafiken zu erstellen bzw. zu bearbeiten und webgerecht zu optimieren sind. Wichtig ! Für spätere Änderungen sollten Kopien der Grafiken im verlustfreien Format abgespeichert werden.

In der 4. Phase wird dann letztendlich die Theorie in die Praxis umgesetzt. Dies beeinhaltet folgende Punkte:

Erstellung der kompletten Webseiten
Erstellung eines Styleguides (Angaben zu Formatierungen)

Die abschließende 5. Phase dient der Fehlerbeseitigung und Publikation. Genauer gesagt wird hier eine umfangreiche Fehlerüberprüfung (gestalterischer & technischer Art) sowohl lokal als auch auf dem Server vorgenommen. Letztendlich wird die Seite dann publiziert und optional bei Suchmaschinen eingetragen.

Wie ihr sehen könnt ist das Fünf Phasen Modell sehr ausführlich. Es ermöglicht aber einen gut strukturierten Arbeitsablauf und gewährleistet auch bei großen, umfangreichen Websites einen guten Workflow. Die Gefahr von Leerlaufzeiten wird hierdurch verringert. Bei Bedarf kann das Modell auch gekürzt bzw. angepasst werden.

Drei Phasen Modell

2008-11-07T13:49:00.000+01:00

Wie bereits im vorherigen Artikel erwähnt haben sich 2 Projektmodelle in der Praxis bewährt, darunter das Drei Phasen Modell.

Es gliedert sich in folgende Phasen:

Inhalt
Gestaltung
Produktion

Die Phase Inhalt beschäftigt sich mit:

Klärung des Inhalts
Welche Zielgruppe ?
Umfang und Zielsetzung
Ansprechpartner und eventuellen Zulieferer
Termin- und Kostenabsprache

Die Phase Gestaltung beinhaltet folgendes:

Umsetzung der besprochenen Inhalte (z.b. Strukturierung)
Ausarbeitung der Designstrategien (Layoutentwicklung)
Entwicklung von Probeseiten und Präsentation
eventuelle Überarbeitung

Die Phase Produktion realisiert:

Umsetzung der Webseite nach den Designvorlagen
Programmierung der HTML-Seiten
Tests, Funktions- und Fehlerkontrolle
Veröffentlichung der Webseite (Upload)

Dieses Modell ist in der Regel für kleine Websites sinnvoll, deren Aufbau und Inhalte überschaubar sind. Bei der Anwendung besteht aber die Gefahr, das in den einzelnen Phasen zu viel untergebracht wird und so die Struktur zu stark "ausgebeult" wird. Um diese Gefahr zu minimieren bietet sich das Fünf Phasen Modell an, auf das ich später näher eingehen werde.

Projektmodelle

2008-11-05T14:50:00.001+01:00

Webdesign Projekte sollten (in den meistens Fällen) stets reibungslos ablaufen. Um dies zu gewährleisten sollten Projektmodelle in Betracht gezogen werden.

Vorteile von einem Projektmodell:

Man erkennt Fehler frühzeitig
Überblick über fertige bzw. unfertige Arbeiten am Projekt

Ein Modell wird wiederrum in Phasen unterteilt, die aufeinander abgestimmt werden. Arbeitet man alleine an einem Internetauftritt fällt einem diese Einteilung in Phasen vielleicht zunächst schwer. Trotzdem erleichtert diese Art der Projektplanung die Arbeiten einem Projekt enorm, da auf bewährte Strukturen zurückgegriffen wird und dadurch die Gefahr gemindert wird Fehler zu machen.

Bei Teamwork sind Projektmodelle dagegen unumgänglich, da man aufeinander angewiesen ist. Ohne eine richtige Struktur würde das Webdesign Projekt schnell im Chaos versinken, da keinem Mitarbeiter eine Aufgabe zugeteilt wurde. Vorausgesetzt wird hier wiederrum, das jeder mit seiner zugeteilten Aufgabe zu einem vorgegebenen Zeitpunkt fertig sein muss, sonst gerät der Arbeitsablauf ins Stocken oder bleibt sogar ganz stehen.

Abschließend kann man sagen das ein Phasenmodell als grobes Gerüst, Richtlinie und Orientierungshilfe sehr zu empfehlen ist. In der Praxis haben sich zwei Modelle bewährt auf die ich in den nächsten Tagen näher eingehen werde.

das Drei-Phasen-Modell
das Fünf-Phasen-Modell

Buchtip zum Thema Projektmodelle (Autor Ralf Lankau):
Webdesign und -publishing, Projektmanagement für Websites

Projektorganisation

2008-11-01T17:38:00.000+01:00

So dies ist mein erster Artikel zum Thema Webdesign. Ich werde mich in den nächsten 3-4 (?) Wochen mit der Organisation von Webdesign Projekten beschäftigen.

Folgende Schwerpunkte werde ich hierzu näher erläutern:

Effektive Herangehensweise an ein Webprojekt.
Das Gespräch mit Kunden. Worauf kommt es an ?

Anfangen möchte ich heute mit der Projektorganisation. Für ein Webdesignprojekt muss eine effektive Projektorganisation gegeben sein. Der Webdesigner muss sich im klaren sein, was er in welcher Zeit schaffen kann. Bei zeitlichen Engpässen muss auf die Hilfe dritter zurückgegriffen werden, damit der Auftrag fristgerecht fertigestellt werden kann.

Der Webdesigner kann dabei folgende prozentuale Aufteilung vornehmen:

20 % Beratung und Konzeption
20 % Design- und Gestaltungsstrategien
20 % Strukturkonzept, Gestalten von Templates und Grafiken
20 % Aufbau der Webseite (technische Umsetzung)
20 % Test, Publikation, Schulung

Morgen werde ich auf Projektmodelle und deren Vorteile näher eingehen.