1. Design einer Geschäfts-WebsiteAchten 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 marketing-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. Responsive Webdesign (Wordsoft-CMS 2014) Die Größe und Auflösung der Displays auf Desktop-PCs, Tablets, Smartphones variieren. Aus diesem Grund wird das Design der Website so konzipiert, dass sich die Website an die verschiedenen Grössen anpasst und dennoch gut aussieht. Responsive Design ist eine neue Technik. Früher wurden auf Wunsch des Kunden meist verschiedene Versionen gemacht, die dann über Weichen (z.B. iPhone-Weichen) aufgerufen wurden. Also eine Desktop-Version und eine für Smartphones. |
1.2 Schriftfarbe: Die Schriftfarbe sollte auf das Grunddesign der Website abgestimmt sein. Wenn Sie beispielsweise eine blaue Farbe häufig beim Design verwenden, sollte die Schriftfarbe nicht schwarz, sondern ein dunkles blau sein. Insgesamt wirkt damit die Website harmonischer. 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 Firmenlogo: Plazieren Sie das Firmenlogo in der Regel in der Ecke links oben. |
1.5.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.5.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.5.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.5.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.5.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.6 Gesamtgröße einer HTML-Seite: Achten Sie darauf, dass Sie die Ladezeiten einer Seite kurz sind. Verwenden Sie deshalb nicht zu grosse Bilder und schwere Effekte. Die heutigen Internet-Anschlüsse sind zwar meist sehr schnell, aber gerade für mobile Nutzer spielen die Ladezeiten eine Rolle. Wenn Sie z.B. eine Slideshow verwenden, sollten Sie diese für das Smartphone ausschalten. Das Worldsoft-CMS hat im CSS-Editor die Funktion einzelne Elemente der Website für Smartphones auszublenden. Meist machen solche Elemente auf einem Smartphone ohnehin keinen guten optischen Eindruck. |
1.7 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". |