Webmaster-Alliance-Logo
Webmaster-Alliance
News Help Center 12784  Mitglieder
Benutzername: Passwort: Login automatisch
Passwort vergessen?
Menu
win-menu-block
Qualität mit Zertifikat Qualität mit Zertifikat
WIN - Zertifizierung WIN - Zertifizierung
Design Design
Navigation Navigation
Texte Texte
Bilder Bilder
Hyperlinks Hyperlinks
Tabellen Tabellen
Formulare Formulare
CSS CSS
Zertifizierungs-Anmeldung Zertifizierungs-Anmeldung

1. Design einer business-orientierten Website

Als Member der Webmaster-Alliance achten Sie in erster Linie auf die übersichtliche Bereitstellung der Informationen, klare und übersichtliche Navigations-Steuerung sowie schnelle Ladezeiten. Der Internet-User besucht in erster Linie eine Website um INFORMATIONEN zu finden! Verzichten Sie deshalb auf jeden überflüssigen technischen "Schnick-Schnack" und übertriebener "Kunst" - das kostet nur unnötige Ladezeiten. Bei einer business-orientierte Website steht der Nutzen der Internet-User an erster Stelle!

Ein ansprechendes, zeitgemässes Design wird heute von einer seriösen Firma erwartet. Über Geschmack lässt sich streiten, nicht aber über technische Fertigkeiten. Einige wichtige Punkte finden Sie hier:

1.1. Gesamt-Design

Das Design einer Website muss dem Leseverhalten von Menschen folgen. Aus der Psychologie wissen wir, dass Menschen eine Seite wie folgt betrachten:
- von links oben
- nach unten links
- dann von links unten nach rechts unten
- dann von unten rechts nach rechts oben
Eine Business-orientierte Website ist nach diesen psychologischen Erkenntnissen aufgebaut: Oben Logo und Firmenname, dann die Steuerungselemente (oben oder links ), dann das Hauptfenster mit den Informationen.

1.2 Schriftfarbe:

Die Schriftfarbe sollte auf die Skinfarbe abgestimmt sein. Wenn Sie beispielsweise einen blauen Skin haben, sollte die Schriftfarbe nicht schwarz, sondern ein dunkles blau sein. Insgesamt wirkt damit die Website harmonischer.

falsch
richtig

TIPP: Umso kleiner eine Schrift wird, umso dunkler muss die Farbe eingestellt werden, damit die Farbe optisch gleich wirkt. Bleiben Sie dabei im gleichen Farbton. Öffnen Sie im DW (Dreamweaver) die Farbpalette, klicken Sie auf die Farbkugel und ziehen Sie im neuen Fenster auf der rechten Seite den Regler höher oder tiefer. Im obigen rechten Beispiel hat jeder Text eine andere Farbe - obwohl sie optisch gleich wirken!


1.3 Seriosität:

Verwenden Sie keine Cartoons oder Cliparts, sondern möglichst nur Bilder. Cliparts wirken sehr laienhaft und sind fast immer nur auf Websites von Amateuren zu sehen. Unsere Kunden sind seriöse Kaufleute - das muss sich auch in der Website widerspiegeln.


1.4 Auflösung:

Früher optimierte man zur Sicherheit auf eine Bildschirmauflösung von 800 x 600 Pixel. Hier hat sich in den letzten Jahren durch die immer besser (und billiger) werdenden Bildschirme einiges getan. Der überwiegend große Teil der User hat heute eine Bildschirmauflösung von 1024x768 Pixel. Optimieren Sie für diese Auflösung. Wenn Sie mit Tabellen arbeiten, sollten Sie eine maximale Breite von 98 % (Prozent) eingeben. Dadurch ist gewährleistet, dass die Tabelle bei allen Auflösungen immer gesamt sichtbar ist. Auch beim Druck wird durch die prozentuale Angabe kein Text abgeschnitten. Wenn Sie aus technischen Gründen eine feste Breite benötigen, beschränken Sie sich auf 620 Pixel Breite. Diese Breite kann von normalen A4-Druckern einwandfrei wiedergegeben werden.


1.5 Firmenlogo:

Plazieren Sie das Firmenlogo in der Regel in der Ecke links oben. Wenn möglich, sollten Sie dieses animieren. Bereits eine kleine Animation kann die Startseite wesentlich aufwerten. Benutzen Sie dafür bei Fireworks das Fenster "Frames".


1.6.1 Firmenname - Qualität:

Achten Sie besonders auf eine optisch hervorragende Aufmachung des Firmennames. Der Firmenname bleibt - wie das Logo - die gesamte Zeit über sichtbar. Der Blick des Internet-Besuchers wird also immer wieder über das Logo und den Firmennamen streichen. Ein schlecht gemachter Firmenname kann eine ansonsten gute gemachte Website zerstören! Gerade den Firmennamen nicht zu stark komprimieren!

falsch
richtig

1.6.2 Firmenname - als Bild:

Immer wieder sieht man Firmennamen, die nur als normaler Text eingefügt worden sind. Das hat den Nachteil, dass die Buchstaben durch die niedrige Auflösung von 72 dpi sehr "gezackt" wirken (siehe z.B. das A). Empfehlung: Legen Sie den Firmennamen als Bild an. Verwenden Sie Anti-Alias (z.B. glatt) und wählen Sie die richtige Hintergrundfarbe. Komprimieren Sie nicht zu stark, da sonst die Hintergrundfarbe durch die Komprimierung zu stark verändert werden könnte. Mit dem Effekt "Schlagschatten" gewinnt der Firmenname erheblich an optischer Wirkung.

häufig (reiner Text)
besser (Bild - z.B. mit Schlagschatten)

1.6.3 Firmenname - transparent:

Wenn der Farb-Rahmen um den Firmennamen farblich von der Skinfarbe abweicht oder das Bild zu schwer geworden ist, können Sie die unnötige Fläche auch transparent stellen. Klicken Sie dazu im Fenster der Exportvorschau auf die Pipette (siehe Pfeil) und dann ins grüne Feld. Der grüne Hintergrund wird daraufhin transparent:

 


1.6.4 Firmenname - richtige Hintergrundfarbe:

Wenn Sie einen transparenten Text auf eine Farbfläche stellen, müssen Sie bereits bei der Texterstelltung die jeweilige Farbe als HINTERGRUNDFARBE einstellen! Beim Exportieren klicken Sie wieder auf die Pipette wie unter 1.7.3 beschrieben. Im unteren linken Beispiel wurde der Text mit der Hintergrundfarbe "weiss" erstellt - das rechte Beispiel mit der richtigen Hintergrundfarbe. So vermeiden Sie "weisse Ränder". Wenn Sie einen Skin mit einem Farbverlauf oder verschiedenen Farben verwenden, müssen Sie einen Mittelwert dieser Farben verwenden - das klappt oft - aber nicht immer!


1.6.5 Firmenname - vertikal ausrichten:

Beim Einbau des Firmennamens sollten Sie den Firmennamen auch immer VERTIKAL ausrichten und nicht nur als Bild einfügen. Erzeugen Sie eine Tabelle, stellen Sie diese auf Vertikal=Mitte. Ziehen Sie dann die Tabelle so lange vertikal nach unten, bis der Firmenname in der Mitte des Skinrahmens steht.


1.7 Gesamtgröße einer HTML-Seite:

Im Idealfall hat eine GESAMTE HTML-Seite nur 50 bis 100 KB, inklusive Text, Tabellen und Grafiken. 


1.8 Leerzeilen am Ende einer HTML:

Damit der Internet-Besucher besser scrollen kann, setzen Sie ans Ende jeder HTML-Seite zwei bis drei Leerzeilen (Umschalttaste/Enter). Dadurch vermeiden Sie, dass der Text am unteren Rand "klebt".


 

Fusszeile
© 2010 by Webmaster-Alliance | Webdesign by Worldsoft AG
Benutzername:
User-Login
Ihr E-Mail