RMC
2005-07-20, 18:17:55
Ich wollte mal einen kleinen Guide für ein gutes Design geben, da vermehrt Fragen in diese Richtung aufkommen. Natürlich ist das nur ein kleiner Auszug, wer sich in bestimmte Themen vertiefen will, wird damit nicht auskommen ;) Aber ich geb mal die Grundzüge und die wichtigsten Eckpunkte.
Ich dachte es wäre vielleicht ganz nützlich und es gibt ja auch viele Interessierte :)
Arbeitsweise (bitte beachten: Dieser Workflow ist kein MUSS, wird aber als gute Arbeitsweise von professionellen Webdesignern als effizient angesehen und ist auch in anderen Bereichen wie Logoentwurf, Grafikdesign (Plakate, Inserate etc.) einsetzbar):
1. Die Homepage braucht ein Thema. Ohne Thema verliert man das eigentliche Ziel aus den Augen und man hat nichts, das man dem User anbieten kann. Hat man ein Motto, eine Idee gefunden, geht es weiter mit den Inhalten. Man sollte sich die Frage stellen: "Was will ich eigentlich vermitteln, wen will ich damit erreichen?" Es gibt schon genug unsinnige Personal HPs im Internet, man sollte sich also wirklich mal Gedanken machen ;)
2. Die ersten Skizzen folgen: auf Papier! Da wird einfach alles aufgeschrieben was wichtig ist. Das wären: Menüpunkte, Inhalte, Struktur und Design. Die ersten „Screenshots“ werden ebenfalls auf Papier gemacht. Dabei darf nicht nur, nein es SOLL sogar experimentiert werden. Wie könnte das Menü aussehen? Wie sieht ein Menüpunkt im Detail aus, welche Form hat er? Welche Farbe setz ich wo ein? Welche Elemente bring ich wo ein? Wo wird der Text stehen? Wo genau befindet sich der Suchen-Button? Etc… . Die Reihenfolge ist dabei egal, Hauptsache die Ideen werden visualisiert. Das sollte man für jeden Bereich der Homepage durchgehen.
Nicht schrecken vor Papierarbeit ;) Es werden bestimmt einige A4 Zettel dafür verwendet, aber je mehr desto besser. Keine Idee darf unausgesprochen bleiben! Möglichst alles festhalten und gute Ideen weiterentwickeln.
Vorteil: Bei Papierskizzen fließt die Idee besser, schneller und ungehinderter als am Computer, es gibt keine Barrieren. Man kann immer auf seine Ideen zurückgreifen, nachvollziehen, weiterentwickeln und gegebenenfalls sogar auf neue Möglichkeiten draufkommen.
Wer das noch nicht kennt, sollte es mal ausprobiern :). Es hilft enorm bei der Ideenentwicklung.
3. Jetzt folgt die digitale Umsetzung der besten Papier-Version in einem Grafikprogramm (möglichst Vektorgrafik!), um das Ganze zu visualisieren und um einen ersten Eindruck von Farbe und Form zu bekommen. Wichtig ist hier auch, sich schon möglichst vor dem Umsetzen mit allen Bereichen der Homepage auseinander zu setzen. Jede Seite sollte gestaltet werden. Mehrere Versionen sind kein Problem, manchmal sieht sie am Bildschirm besser aus als zuerst auf Papier. Die subjektiv beste Version wird gewählt.
4. Anhand dieser Vorab-Screenshots wird jetzt umgesetzt. Diese Screenshots sollten immer vor Augen gehalten werden. Am besten ausdrucken und als Vorlage nehmen.
Bei der Umsetzung kann dann auf bereits bestehende Vektorformen und RGB Farbwerte zurückgegriffen werden.
Designtipps:
Farbe
Welche Farbe gewählt wird, hängt prinzipiell vom Thema ab. Grundsätzlich sollten auf einer Seite aber nie mehr als 3 unterschiedliche Farbtöne verwendet werden, aber mindestens 2 (Ausnahme sind Farbvorgaben zb von Firmenlogos). Somit vermeidet man kunterbunte Seiten und langweilige Designs.
Nicht jede Farbe eignet sich überall! Von der Farbpsychologie her kann man die Wichtigsten Farben wie folgt betrachten:
Rot zB ist agressiv, lebendig, erotisch, extrovertiert, emotional, dynamisch
Blau ist zurückhaltend, ruhig, friedlich, introvertiert
Grün ist natürlich, frisch, konservativ und ausgleichend
Braun ist vital, passiv, vertraut und stabil
Gelb ist modern, zielgerichtet und steht für Zufriedenheit und Glück
Weiß ist rein, einfach, steril
Schwarz ist klassisch, mysteriös und kräftig
...
Aber das ist nur der Ton (Mischungen ausgeschlossen). Durch Helligkeit und Sättigung ergeben sich wieder unterschiedliche Eigenschaften.
Gesättigt ist aufmerksamer als Ungesättigt
Sehr Hell/Sehr dunkel ist aufmerksamer als mittlere Farben
Rein ist aufmerksamer als Getrübt.
Die Aufmerksamkeit bestimmt die Farbgebung bei Vordergrund und Hintergrund.
Farben gleicher Sättigung oder gleicher Helligkeit sowie im Farbkreis „nebeneinander“ liegende Farben (zb Orange und Gelb, Orange und Rot) oder gegenüberliegende Farben (Komplementärfarben) harmonieren miteinander und können zusammen eingesetzt werden.
Der Kontrast zwischen 2 Farben bestimmt die Wahrnehmung (und die Lesbarkeit beim Text), deshalb ist Farbe nicht gleich Farbe. Die Umgebung spielt eine wesentliche Rolle. Ein helle Farbe (zb Gelb) wirkt neben einer hellen Fläche (Mittelgrün) viel dünkler als auf einer dunklen Fläche (Blau). Also Aufpassen bei Vorder- und Hintergrund sowie bei nebeneinander liegenden Flächen.
Prinzipiell gilt: je höher der Kontrast, desto besser die Lesbarkeit. Allerdings wirkt ein zu hoher, extremer Kontrast (Schwarz auf Weiß) zu stark und ermüdet die Augen. Eine bessere Kombination wäre Dunkelgrau auf Weiß oder einem sehr hellen Pastelton.
Schrift:
Schrift sollte auf einer Seite nicht unterschätzt werden. Da Information durch Schrift übertragen wird, spielt sie eine wesentliche Rolle.
Nie mehr als 2 oder 3 verschiedene Schriftarten mischen
Serifenschriften sind für Fließtext in Webseiten prinzipiell ungeeignet, immer serifenlose Schriften verwenden (zb Verdana, Arial, Tahoma).
Für die Überschrift/Menü kann aus Designgründen auf eine Serifenschrift zurückgegriffen werden
Unterschiedliche Wichtigkeit von Text kann durch Farbe, Größe, Schriftart und Hervorhebung erreicht werden.
Wichtig ist auch die Textformatierung. Lange Sätze mit mehr als 10 Wörtern lassen das Auge am Bildschirm schnell ermüden. Deshalb sollte Text in eher kurzen Spalten verfasst werden und nicht über die ganze Seite. Mehrere Absätze gliedern den Fließtext und lassen immer wieder kleine Portionen von Information zu, so vermeidet man dass man im Text "verloren" geht.
Ein Satzspiegel zur Einteilung von Text auf der Seite hilft besonders bei inhaltsstarken Homepages, die zB Artikel anbieten.
Form
Form ist ein wichtiges Gestaltungselement. Rund, Eckig, Kreis, Oval, oder doch lieber digital genau genau mit Rechteck und Quadrat? Manches lässt sich einfacher umsetzen, aber erfüllt nicht immer denselben Zweck.
Quadrat: statisch
Kreis: gleichmäßig, konzentriert auf den Mittelpunkt
Dreieck: extrovertiert, nach außen gerichtet, Aufmerksamkeit liegt auf den Ecken.
Mischformen sind natürlich möglich.
Durch Hervorhebung kann aus mehreren gleichen Formen (zB lauter Kreisen) eine Wichtigkeit, eine Rangordnung entstehen. Dies kann passieren durch:
verschiedene Größe (größer = wichtiger)
verschiedene Sättigung (gesättigt = wichtiger)
Lage (nebeneinander liegende Formen gehören zusammen, bilden eine Einheit; vorne liegende Elemente sind „wichtiger“ als dahinter liegende)
Richtung (aufsteigend = positiv, absteigend = negativ)
Informationsträger
Information muss nicht immer durch Schrift übermittelt werden. Ein Bild sagt mehr als tausend Worte heißt es so schön. Und mit dem richtigen Symbol an der richtigen Stelle mit der richtigen Aufmerksamkeit gibt der Seite mehr Benutzerfreundlichkeit. Wo es auch immer sinnvoll ist, sollten diese eingesetzt werden. zB: Statt „Kontakt“ könnte ein Brief-Symbol stehen, statt „Download“ einfach eine Festplatte mit Pfeil, statt „Galerie“ einfach ein Bilderrahmen mit Bild drin.
Den höchsten Grad an visueller Information erreicht man, indem man beides zusammen kombiniert.
Navigation
Die Navigation ist DAS wichtigste Element. Über sie findet sich der User zurecht und steuert die Seite. Sie sollte deshalb:
Klar und nachvollziehbar sein
Schnell zu finden, einfach zu bedienen und logisch sein.
Sie muss nicht immer zwingend über reinen Text erfolgen! Siehe dazu „Informationsträger“. Aus Designgründen ist auch eine Navigation rein durch Formelemente möglich, siehe dazu „Form“.
Sie darf den User nicht verwirren und sollte ihn so schnell wie möglich zu seiner gewünschten Information bringen. Mehr als 2 Navigationsebenen sind zu viel, auch bei viel Content. Viel Information muss nicht heißen: große, unübersichtliche Navigation!
Fotos und Grafiken
Fotos (von der Digitalkamera) auf der Seite sollten eigentlich hauptsächlich in JPG angeboten werden (gängigstes Format). Verlustfrei ist zwar PNG, ist für Fotos aber nicht so gut geeignet. Andere Formate wie BMP etc. eigenen sich überhaupt nicht.
Die maximale Größe sollte bei 800x600 – max. 1024x768 liegen, optimal wäre bei Galerien ein Download aller Bilder in mehreren Größen (sofern es der Webspace zulässt).
Für höhere Benutzerfreundlichkeit sollten IMMER ausnahmslos Thumbnails angeboten werden, die eine Vorschau für die Fotos bieten. Sie sollten nicht zu groß sein (~5-7 kB) aber genug Bildinformation erkennen lassen.
Für Grafiken (=Icons, Rahmen, Balken, Hintergründe etc.) wird meist GIF verwendet. Bei mehreren Transparenzstufen ist PNG die erste Wahl für kleine Grafiken. Die Dateigröße selbiger liegt meist unter 1kB, max. bei 2-3kB.
Animationen
Sollten weise eingesetzt und auf keinen Fall übertrieben werden. (zB hauptsächlich um komplizierte Vorgänge, Mechanismen und Abläufe zu visualisieren, wo ein Standbild nicht mehr aushelfen kann). Dafür eignet sich meist ein professionelles Produkt wie Macromedia Flash. Sowas sollte aber nicht für kleine Buttonanimationen (zb Farbwechsel) missbraucht werden ;)
Für design-künstlerische Animationen wie Button-Animationen (wenn sie unbedingt sein müssen) eignet sich auch Javascript.
Browser und Auflösungen
Eine Homepage mit fixer Auflösung hat einen wesentlichen Vorteil gegenüber einer mit variabler Größe: sie sieht überall auf jedem Bildschirm gleich aus. Bei variabler Größe kann das Problem von zuviel ungewolltem Leerraum entstehen, wenn man eine zu hohe Auflösung hat. Wenn jemand eine zu niedrige Auflösung hat, enstehen ungewollte Scrollbalken.
Es ist quasi eine Kunst für sich, Seiten so zu designen, dass sie komplett ohne Scrollbalken auskommen können. Manchmal schwer, aber dennoch machbar bei Personal Homepages.
Ausnahmen sind Seiten mit viel Text und Inhalt (zb Foren, Webseiten mit Artikeln etc.) dort empfiehlt es sich die Höhe der Seite variabel zu halten, um so zuviele einzelne Seiten zu vermeiden.
Ansonsten kann bei weniger Text selbst auf variable Höhe verzichtet und somit auf ein Design komplett ohne Scrollbalken gesetzt werden.
Es sollte immer auf eine gängige Auflösung optimiert werden, wie zB 1024x768. Ist heute immernoch bei Laptops weit verbreitet, wird aber allmählich von höheren Auflösungen verdrängt. Da die gängigen Browser unterschiedlichen Platz wegnehmen, muss dies mit eingerechnet werden. Somit bleibt eine maximale Höhe von knapp 580 Pixeln übrig.
Die Kompatibilität zu vielen gängigen Browsern (IE, FF/Mozilla, Opera, Safari, NN) sollte beachtet werden, schließlich möchte man sich nicht mit Darstellungsfehlern rumärgern, was die Seite weniger attraktiv macht. Heute nutzen längst nicht alle mehr den IE! Auch wenn es zeitraubend ist, sollte ein Test auf diesen Browsern gemacht werden (Ausnahme sind bei kommerziellen Projekten die Angaben im Pflichtenheft).
Die Kompatibilität kann unter anderem durch eingehaltende Standards (wie vom W3C vorgeschlagen) wie zB durch die Verwendung von Layern und CSS erreicht werden.
Absolute Fehlgriffe
Vermieden werden sollten um jeden Preis:
Hintergrundbilder oder sich wiederholende Hintergrundbilder im Fließtext
nicht lesbarer Text
schlechte Vordergrund/Hintergrund Kombination
Blinkende GIFs und andere unnötig eingesetzte Animationen
Hintergrundmusik
Flash-Intros
Unnötiger Inhalt auf Personal Homepages (auf Thema achten!)
Was kann ich an meiner Seite noch verbessern?
Wird oft gefragt. Grundsätzlich kann man schon mal die Frage selbst beantworten, indem man die folgenden Punkte durchgeht:
Passen die Farben und harmonieren sie?
Ermüdet das Auge selbst nach langem Hinsehen nicht?
Wird die Aufmerksamkeit richtig gelenkt?
Kann man den Text gut erkennen, ist er gut und schnell wahrzunehmen?
Ist die Navigation logisch und klar?
Kommt der User überall schnell genug hin?
Wird die Information klar und deutlich vermittelt?
Ist die Schriftart gut eingesetzt, kann man sie deutlich genug erkennen?
So das wars mal. Ich hoffe ich konnte einige Aspekte näher beleuchten. Gutes Gelingen :)
Ich dachte es wäre vielleicht ganz nützlich und es gibt ja auch viele Interessierte :)
Arbeitsweise (bitte beachten: Dieser Workflow ist kein MUSS, wird aber als gute Arbeitsweise von professionellen Webdesignern als effizient angesehen und ist auch in anderen Bereichen wie Logoentwurf, Grafikdesign (Plakate, Inserate etc.) einsetzbar):
1. Die Homepage braucht ein Thema. Ohne Thema verliert man das eigentliche Ziel aus den Augen und man hat nichts, das man dem User anbieten kann. Hat man ein Motto, eine Idee gefunden, geht es weiter mit den Inhalten. Man sollte sich die Frage stellen: "Was will ich eigentlich vermitteln, wen will ich damit erreichen?" Es gibt schon genug unsinnige Personal HPs im Internet, man sollte sich also wirklich mal Gedanken machen ;)
2. Die ersten Skizzen folgen: auf Papier! Da wird einfach alles aufgeschrieben was wichtig ist. Das wären: Menüpunkte, Inhalte, Struktur und Design. Die ersten „Screenshots“ werden ebenfalls auf Papier gemacht. Dabei darf nicht nur, nein es SOLL sogar experimentiert werden. Wie könnte das Menü aussehen? Wie sieht ein Menüpunkt im Detail aus, welche Form hat er? Welche Farbe setz ich wo ein? Welche Elemente bring ich wo ein? Wo wird der Text stehen? Wo genau befindet sich der Suchen-Button? Etc… . Die Reihenfolge ist dabei egal, Hauptsache die Ideen werden visualisiert. Das sollte man für jeden Bereich der Homepage durchgehen.
Nicht schrecken vor Papierarbeit ;) Es werden bestimmt einige A4 Zettel dafür verwendet, aber je mehr desto besser. Keine Idee darf unausgesprochen bleiben! Möglichst alles festhalten und gute Ideen weiterentwickeln.
Vorteil: Bei Papierskizzen fließt die Idee besser, schneller und ungehinderter als am Computer, es gibt keine Barrieren. Man kann immer auf seine Ideen zurückgreifen, nachvollziehen, weiterentwickeln und gegebenenfalls sogar auf neue Möglichkeiten draufkommen.
Wer das noch nicht kennt, sollte es mal ausprobiern :). Es hilft enorm bei der Ideenentwicklung.
3. Jetzt folgt die digitale Umsetzung der besten Papier-Version in einem Grafikprogramm (möglichst Vektorgrafik!), um das Ganze zu visualisieren und um einen ersten Eindruck von Farbe und Form zu bekommen. Wichtig ist hier auch, sich schon möglichst vor dem Umsetzen mit allen Bereichen der Homepage auseinander zu setzen. Jede Seite sollte gestaltet werden. Mehrere Versionen sind kein Problem, manchmal sieht sie am Bildschirm besser aus als zuerst auf Papier. Die subjektiv beste Version wird gewählt.
4. Anhand dieser Vorab-Screenshots wird jetzt umgesetzt. Diese Screenshots sollten immer vor Augen gehalten werden. Am besten ausdrucken und als Vorlage nehmen.
Bei der Umsetzung kann dann auf bereits bestehende Vektorformen und RGB Farbwerte zurückgegriffen werden.
Designtipps:
Farbe
Welche Farbe gewählt wird, hängt prinzipiell vom Thema ab. Grundsätzlich sollten auf einer Seite aber nie mehr als 3 unterschiedliche Farbtöne verwendet werden, aber mindestens 2 (Ausnahme sind Farbvorgaben zb von Firmenlogos). Somit vermeidet man kunterbunte Seiten und langweilige Designs.
Nicht jede Farbe eignet sich überall! Von der Farbpsychologie her kann man die Wichtigsten Farben wie folgt betrachten:
Rot zB ist agressiv, lebendig, erotisch, extrovertiert, emotional, dynamisch
Blau ist zurückhaltend, ruhig, friedlich, introvertiert
Grün ist natürlich, frisch, konservativ und ausgleichend
Braun ist vital, passiv, vertraut und stabil
Gelb ist modern, zielgerichtet und steht für Zufriedenheit und Glück
Weiß ist rein, einfach, steril
Schwarz ist klassisch, mysteriös und kräftig
...
Aber das ist nur der Ton (Mischungen ausgeschlossen). Durch Helligkeit und Sättigung ergeben sich wieder unterschiedliche Eigenschaften.
Gesättigt ist aufmerksamer als Ungesättigt
Sehr Hell/Sehr dunkel ist aufmerksamer als mittlere Farben
Rein ist aufmerksamer als Getrübt.
Die Aufmerksamkeit bestimmt die Farbgebung bei Vordergrund und Hintergrund.
Farben gleicher Sättigung oder gleicher Helligkeit sowie im Farbkreis „nebeneinander“ liegende Farben (zb Orange und Gelb, Orange und Rot) oder gegenüberliegende Farben (Komplementärfarben) harmonieren miteinander und können zusammen eingesetzt werden.
Der Kontrast zwischen 2 Farben bestimmt die Wahrnehmung (und die Lesbarkeit beim Text), deshalb ist Farbe nicht gleich Farbe. Die Umgebung spielt eine wesentliche Rolle. Ein helle Farbe (zb Gelb) wirkt neben einer hellen Fläche (Mittelgrün) viel dünkler als auf einer dunklen Fläche (Blau). Also Aufpassen bei Vorder- und Hintergrund sowie bei nebeneinander liegenden Flächen.
Prinzipiell gilt: je höher der Kontrast, desto besser die Lesbarkeit. Allerdings wirkt ein zu hoher, extremer Kontrast (Schwarz auf Weiß) zu stark und ermüdet die Augen. Eine bessere Kombination wäre Dunkelgrau auf Weiß oder einem sehr hellen Pastelton.
Schrift:
Schrift sollte auf einer Seite nicht unterschätzt werden. Da Information durch Schrift übertragen wird, spielt sie eine wesentliche Rolle.
Nie mehr als 2 oder 3 verschiedene Schriftarten mischen
Serifenschriften sind für Fließtext in Webseiten prinzipiell ungeeignet, immer serifenlose Schriften verwenden (zb Verdana, Arial, Tahoma).
Für die Überschrift/Menü kann aus Designgründen auf eine Serifenschrift zurückgegriffen werden
Unterschiedliche Wichtigkeit von Text kann durch Farbe, Größe, Schriftart und Hervorhebung erreicht werden.
Wichtig ist auch die Textformatierung. Lange Sätze mit mehr als 10 Wörtern lassen das Auge am Bildschirm schnell ermüden. Deshalb sollte Text in eher kurzen Spalten verfasst werden und nicht über die ganze Seite. Mehrere Absätze gliedern den Fließtext und lassen immer wieder kleine Portionen von Information zu, so vermeidet man dass man im Text "verloren" geht.
Ein Satzspiegel zur Einteilung von Text auf der Seite hilft besonders bei inhaltsstarken Homepages, die zB Artikel anbieten.
Form
Form ist ein wichtiges Gestaltungselement. Rund, Eckig, Kreis, Oval, oder doch lieber digital genau genau mit Rechteck und Quadrat? Manches lässt sich einfacher umsetzen, aber erfüllt nicht immer denselben Zweck.
Quadrat: statisch
Kreis: gleichmäßig, konzentriert auf den Mittelpunkt
Dreieck: extrovertiert, nach außen gerichtet, Aufmerksamkeit liegt auf den Ecken.
Mischformen sind natürlich möglich.
Durch Hervorhebung kann aus mehreren gleichen Formen (zB lauter Kreisen) eine Wichtigkeit, eine Rangordnung entstehen. Dies kann passieren durch:
verschiedene Größe (größer = wichtiger)
verschiedene Sättigung (gesättigt = wichtiger)
Lage (nebeneinander liegende Formen gehören zusammen, bilden eine Einheit; vorne liegende Elemente sind „wichtiger“ als dahinter liegende)
Richtung (aufsteigend = positiv, absteigend = negativ)
Informationsträger
Information muss nicht immer durch Schrift übermittelt werden. Ein Bild sagt mehr als tausend Worte heißt es so schön. Und mit dem richtigen Symbol an der richtigen Stelle mit der richtigen Aufmerksamkeit gibt der Seite mehr Benutzerfreundlichkeit. Wo es auch immer sinnvoll ist, sollten diese eingesetzt werden. zB: Statt „Kontakt“ könnte ein Brief-Symbol stehen, statt „Download“ einfach eine Festplatte mit Pfeil, statt „Galerie“ einfach ein Bilderrahmen mit Bild drin.
Den höchsten Grad an visueller Information erreicht man, indem man beides zusammen kombiniert.
Navigation
Die Navigation ist DAS wichtigste Element. Über sie findet sich der User zurecht und steuert die Seite. Sie sollte deshalb:
Klar und nachvollziehbar sein
Schnell zu finden, einfach zu bedienen und logisch sein.
Sie muss nicht immer zwingend über reinen Text erfolgen! Siehe dazu „Informationsträger“. Aus Designgründen ist auch eine Navigation rein durch Formelemente möglich, siehe dazu „Form“.
Sie darf den User nicht verwirren und sollte ihn so schnell wie möglich zu seiner gewünschten Information bringen. Mehr als 2 Navigationsebenen sind zu viel, auch bei viel Content. Viel Information muss nicht heißen: große, unübersichtliche Navigation!
Fotos und Grafiken
Fotos (von der Digitalkamera) auf der Seite sollten eigentlich hauptsächlich in JPG angeboten werden (gängigstes Format). Verlustfrei ist zwar PNG, ist für Fotos aber nicht so gut geeignet. Andere Formate wie BMP etc. eigenen sich überhaupt nicht.
Die maximale Größe sollte bei 800x600 – max. 1024x768 liegen, optimal wäre bei Galerien ein Download aller Bilder in mehreren Größen (sofern es der Webspace zulässt).
Für höhere Benutzerfreundlichkeit sollten IMMER ausnahmslos Thumbnails angeboten werden, die eine Vorschau für die Fotos bieten. Sie sollten nicht zu groß sein (~5-7 kB) aber genug Bildinformation erkennen lassen.
Für Grafiken (=Icons, Rahmen, Balken, Hintergründe etc.) wird meist GIF verwendet. Bei mehreren Transparenzstufen ist PNG die erste Wahl für kleine Grafiken. Die Dateigröße selbiger liegt meist unter 1kB, max. bei 2-3kB.
Animationen
Sollten weise eingesetzt und auf keinen Fall übertrieben werden. (zB hauptsächlich um komplizierte Vorgänge, Mechanismen und Abläufe zu visualisieren, wo ein Standbild nicht mehr aushelfen kann). Dafür eignet sich meist ein professionelles Produkt wie Macromedia Flash. Sowas sollte aber nicht für kleine Buttonanimationen (zb Farbwechsel) missbraucht werden ;)
Für design-künstlerische Animationen wie Button-Animationen (wenn sie unbedingt sein müssen) eignet sich auch Javascript.
Browser und Auflösungen
Eine Homepage mit fixer Auflösung hat einen wesentlichen Vorteil gegenüber einer mit variabler Größe: sie sieht überall auf jedem Bildschirm gleich aus. Bei variabler Größe kann das Problem von zuviel ungewolltem Leerraum entstehen, wenn man eine zu hohe Auflösung hat. Wenn jemand eine zu niedrige Auflösung hat, enstehen ungewollte Scrollbalken.
Es ist quasi eine Kunst für sich, Seiten so zu designen, dass sie komplett ohne Scrollbalken auskommen können. Manchmal schwer, aber dennoch machbar bei Personal Homepages.
Ausnahmen sind Seiten mit viel Text und Inhalt (zb Foren, Webseiten mit Artikeln etc.) dort empfiehlt es sich die Höhe der Seite variabel zu halten, um so zuviele einzelne Seiten zu vermeiden.
Ansonsten kann bei weniger Text selbst auf variable Höhe verzichtet und somit auf ein Design komplett ohne Scrollbalken gesetzt werden.
Es sollte immer auf eine gängige Auflösung optimiert werden, wie zB 1024x768. Ist heute immernoch bei Laptops weit verbreitet, wird aber allmählich von höheren Auflösungen verdrängt. Da die gängigen Browser unterschiedlichen Platz wegnehmen, muss dies mit eingerechnet werden. Somit bleibt eine maximale Höhe von knapp 580 Pixeln übrig.
Die Kompatibilität zu vielen gängigen Browsern (IE, FF/Mozilla, Opera, Safari, NN) sollte beachtet werden, schließlich möchte man sich nicht mit Darstellungsfehlern rumärgern, was die Seite weniger attraktiv macht. Heute nutzen längst nicht alle mehr den IE! Auch wenn es zeitraubend ist, sollte ein Test auf diesen Browsern gemacht werden (Ausnahme sind bei kommerziellen Projekten die Angaben im Pflichtenheft).
Die Kompatibilität kann unter anderem durch eingehaltende Standards (wie vom W3C vorgeschlagen) wie zB durch die Verwendung von Layern und CSS erreicht werden.
Absolute Fehlgriffe
Vermieden werden sollten um jeden Preis:
Hintergrundbilder oder sich wiederholende Hintergrundbilder im Fließtext
nicht lesbarer Text
schlechte Vordergrund/Hintergrund Kombination
Blinkende GIFs und andere unnötig eingesetzte Animationen
Hintergrundmusik
Flash-Intros
Unnötiger Inhalt auf Personal Homepages (auf Thema achten!)
Was kann ich an meiner Seite noch verbessern?
Wird oft gefragt. Grundsätzlich kann man schon mal die Frage selbst beantworten, indem man die folgenden Punkte durchgeht:
Passen die Farben und harmonieren sie?
Ermüdet das Auge selbst nach langem Hinsehen nicht?
Wird die Aufmerksamkeit richtig gelenkt?
Kann man den Text gut erkennen, ist er gut und schnell wahrzunehmen?
Ist die Navigation logisch und klar?
Kommt der User überall schnell genug hin?
Wird die Information klar und deutlich vermittelt?
Ist die Schriftart gut eingesetzt, kann man sie deutlich genug erkennen?
So das wars mal. Ich hoffe ich konnte einige Aspekte näher beleuchten. Gutes Gelingen :)